168 lines
8.6 KiB
TypeScript
168 lines
8.6 KiB
TypeScript
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>
|
||
);
|
||
}
|