feat: Implement initial website structure, core pages, and layout components, including a redesigned homepage.
This commit is contained in:
1elle1
@@ -0,0 +1,167 @@
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Phone as PhoneIcon, Check, ArrowRight } from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Telefonie",
|
||||
description:
|
||||
"Flexible Telefonie-Tarife für Festnetz. Mit oder ohne Internet nutzbar – für Privat- und Geschäftskunden in Tirol.",
|
||||
};
|
||||
|
||||
const telefonieTarife = [
|
||||
{
|
||||
name: "telenet.zero",
|
||||
beschreibung: "Ohne Internet",
|
||||
preis: "€ 5,00",
|
||||
kosten: "Festnetz AT: ab 2,4 Cent/Min.",
|
||||
features: ["Nur Telefonie", "Günstige Minutenpreise"],
|
||||
},
|
||||
{
|
||||
name: "telenet.zero",
|
||||
beschreibung: "Mit Internet von Telenet",
|
||||
preis: "€ 0,00",
|
||||
kosten: "Festnetz AT: ab 2,4 Cent/Min.",
|
||||
features: ["Kostenlos zu Ihrem Internet", "Günstige Minutenpreise"],
|
||||
highlight: true,
|
||||
},
|
||||
{
|
||||
name: "telenet.business",
|
||||
beschreibung: "Für Geschäftskunden",
|
||||
preis: "€ 8,90",
|
||||
kosten: "Festnetz AT: ab 3,24 Cent/Min.",
|
||||
features: ["Business-Funktionen", "Professioneller Support"],
|
||||
},
|
||||
];
|
||||
|
||||
export default function TelefoniePage() {
|
||||
return (
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="max-w-3xl">
|
||||
<div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
|
||||
<PhoneIcon size={32} className="text-[var(--color-background)]" />
|
||||
</div>
|
||||
<h1 className="mb-[var(--spacing-lg)]">
|
||||
Telefonie
|
||||
<span className="text-[var(--color-primary)]"> ohne Kompromisse</span>
|
||||
</h1>
|
||||
<p className="lead mb-[var(--spacing-2xl)]">
|
||||
Flexible Telefonie-Tarife für Ihr Festnetz.
|
||||
Mit oder ohne Internet nutzbar – Sie haben die Wahl.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Tarife Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Kabel-Telefonie-Tarife
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)]">Unsere Tarife</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)] max-w-4xl mx-auto">
|
||||
{telefonieTarife.map((tarif, index) => (
|
||||
<div
|
||||
key={`${tarif.name}-${index}`}
|
||||
className={`card text-center ${tarif.highlight ? "ring-2 ring-[var(--color-primary)]" : ""}`}
|
||||
>
|
||||
{tarif.highlight && (
|
||||
<span className="inline-block bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-medium px-[var(--spacing-sm)] py-[var(--spacing-xs)] rounded-full mb-[var(--spacing-md)]">
|
||||
Empfohlen
|
||||
</span>
|
||||
)}
|
||||
<h3 className="heading-5 mb-[var(--spacing-xs)]">{tarif.name}</h3>
|
||||
<p className="text-sm text-muted mb-[var(--spacing-md)]">{tarif.beschreibung}</p>
|
||||
<p className="text-4xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
|
||||
<p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
|
||||
<p className="text-sm mb-[var(--spacing-lg)]">{tarif.kosten}</p>
|
||||
<ul className="stack-sm text-left mb-[var(--spacing-lg)]">
|
||||
{tarif.features.map((feature) => (
|
||||
<li key={feature} className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<Check size={16} className="text-[var(--color-primary)] shrink-0" />
|
||||
<span className="text-sm">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-outline w-full">
|
||||
Anfragen
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Info Section */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container variant="narrow">
|
||||
<div className="text-center">
|
||||
<h2 className="mb-[var(--spacing-lg)]">So funktioniert es</h2>
|
||||
<div className="stack-lg text-left">
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie mit Telenet-Internet</h3>
|
||||
<p className="text-muted">
|
||||
Wenn Sie bereits Internet von TeleNetSystems nutzen, können Sie unsere Telefonie
|
||||
kostenlos hinzubuchen. Sie zahlen nur die tatsächlich geführten Gespräche nach Minutenpreis.
|
||||
</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie ohne Internet</h3>
|
||||
<p className="text-muted">
|
||||
Sie möchten nur Telefonie ohne Internet? Kein Problem.
|
||||
Für nur € 5,00 pro Monat erhalten Sie einen Festnetzanschluss mit günstigen Minutenpreisen.
|
||||
</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">Business-Telefonie</h3>
|
||||
<p className="text-muted">
|
||||
Für Geschäftskunden bieten wir professionelle Telefonie-Lösungen mit erweiterten Funktionen
|
||||
und dediziertem Support.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<Container>
|
||||
<div className="text-center text-[var(--color-background)]">
|
||||
<h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||
Fragen zu unseren Telefonie-Tarifen?
|
||||
</h2>
|
||||
<p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Wir beraten Sie gerne und finden die passende Lösung für Ihre Anforderungen.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
|
||||
>
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
<a
|
||||
href="tel:+43567612345"
|
||||
className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
|
||||
>
|
||||
<PhoneIcon size={18} />
|
||||
PLACEHOLDER: Telefon
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user