303 lines
12 KiB
TypeScript
303 lines
12 KiB
TypeScript
import type { Metadata } from "next";
|
||
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { Container } from "@/components/layout/Container";
|
||
import { Section } from "@/components/layout/Section";
|
||
import { Phone, Building2, CheckCircle, Users } from "lucide-react";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "Telefonie",
|
||
description:
|
||
"Günstige Telefonie-Tarife fürs Festnetz im Bezirk Reutte. Für Privat- und Geschäftskunden – ab 0 € mit Telenet-Internet.",
|
||
openGraph: {
|
||
title: "Telefonie | Telenet Systems GmbH",
|
||
description:
|
||
"Günstige Telefonie-Tarife fürs Festnetz im Bezirk Reutte. Ab 0 € mit Telenet-Internet.",
|
||
},
|
||
};
|
||
|
||
const telefonieTarife = [
|
||
{
|
||
name: "telenet.zero",
|
||
subtitle: "ohne Internet",
|
||
price: "5,00",
|
||
minutenpreis: "2,4",
|
||
description: "Festnetz-Telefonie ohne Internet-Anschluss von Telenet.",
|
||
features: [
|
||
"Festnetzanschluss",
|
||
"Günstiger Minutenpreis",
|
||
"Keine Grundgebühr bei Internet",
|
||
],
|
||
popular: false,
|
||
},
|
||
{
|
||
name: "telenet.zero",
|
||
subtitle: "mit Internet von Telenet",
|
||
price: "0,00",
|
||
minutenpreis: "2,4",
|
||
description: "Festnetz-Telefonie ohne Grundgebühr für Telenet-Internet-Kunden.",
|
||
features: [
|
||
"Keine monatliche Grundgebühr",
|
||
"Günstiger Minutenpreis",
|
||
"Perfekt für Telenet-Kunden",
|
||
],
|
||
popular: true,
|
||
},
|
||
{
|
||
name: "telenet.business",
|
||
subtitle: "für Unternehmen",
|
||
price: "8,90",
|
||
minutenpreis: "3,24",
|
||
description: "Professionelle Telefonie-Lösung für Geschäftskunden.",
|
||
features: [
|
||
"Business-Tarif",
|
||
"Professioneller Service",
|
||
"Individuelle Optionen",
|
||
],
|
||
popular: false,
|
||
},
|
||
];
|
||
|
||
const benefits = [
|
||
"Günstige Minutenpreise",
|
||
"Keine versteckten Kosten",
|
||
"Einfache Einrichtung",
|
||
"Persönlicher Support",
|
||
];
|
||
|
||
export default function TelefoniePage() {
|
||
return (
|
||
<>
|
||
{/* Hero Section */}
|
||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||
<div className="absolute inset-0 z-0">
|
||
<Image
|
||
src="/images/misc/telefonie1-ad7595f9.jpg"
|
||
alt="Telefonie"
|
||
fill
|
||
priority
|
||
className="object-cover opacity-40"
|
||
sizes="100vw"
|
||
/>
|
||
</div>
|
||
<Container className="relative z-10">
|
||
<div className="max-w-3xl">
|
||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||
<Phone className="h-5 w-5" aria-hidden="true" />
|
||
<span className="font-medium">Telefonie</span>
|
||
</div>
|
||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||
Flexible Telefonie-Tarife für jeden Bedarf
|
||
</h1>
|
||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||
Günstig ins österreichische Festnetz telefonieren.
|
||
Mit Telenet-Internet sogar ohne monatliche Grundgebühr.
|
||
</p>
|
||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||
Jetzt bestellen
|
||
</Link>
|
||
<a href="#tarife" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||
Tarife ansehen
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Trust Bar */}
|
||
<Section variant="sm" className="bg-[var(--color-muted)]">
|
||
<Container>
|
||
<div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
|
||
{benefits.map((benefit) => (
|
||
<div
|
||
key={benefit}
|
||
className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
|
||
>
|
||
<CheckCircle
|
||
className="h-5 w-5 text-[var(--color-success)]"
|
||
aria-hidden="true"
|
||
/>
|
||
<span>{benefit}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Tarife */}
|
||
<Section id="tarife">
|
||
<Container>
|
||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||
<h2>Unsere Telefonie-Tarife</h2>
|
||
<p className="lead mt-[var(--spacing-md)]">
|
||
Einfache Preisstruktur ohne versteckte Kosten.
|
||
Wählen Sie den passenden Tarif für Ihre Bedürfnisse.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
|
||
{telefonieTarife.map((tarif, index) => (
|
||
<div
|
||
key={`${tarif.name}-${index}`}
|
||
className={`card relative ${
|
||
tarif.popular
|
||
? "border-[var(--color-primary)] border-2"
|
||
: ""
|
||
}`}
|
||
>
|
||
{tarif.popular && (
|
||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-semibold px-3 py-1 rounded-full">
|
||
Empfohlen
|
||
</div>
|
||
)}
|
||
<div className="text-center">
|
||
<h3 className="heading-4 text-[var(--color-primary)]">
|
||
{tarif.name}
|
||
</h3>
|
||
<p className="text-sm text-muted mb-[var(--spacing-md)]">
|
||
{tarif.subtitle}
|
||
</p>
|
||
<div className="mb-[var(--spacing-md)]">
|
||
<span className="heading-1">€ {tarif.price}</span>
|
||
<span className="text-muted"> / Monat</span>
|
||
</div>
|
||
<p className="text-sm text-muted mb-[var(--spacing-sm)]">
|
||
Festnetz AT: ab {tarif.minutenpreis} Cent / Minute
|
||
</p>
|
||
</div>
|
||
<hr className="border-[var(--color-border)] my-[var(--spacing-lg)]" />
|
||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||
{tarif.description}
|
||
</p>
|
||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||
{tarif.features.map((feature) => (
|
||
<li
|
||
key={feature}
|
||
className="flex items-center gap-[var(--spacing-sm)] text-sm"
|
||
>
|
||
<CheckCircle
|
||
className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
|
||
aria-hidden="true"
|
||
/>
|
||
<span>{feature}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<Link
|
||
href="/kontakt"
|
||
className={`btn w-full ${
|
||
tarif.popular ? "btn-primary" : "btn-outline"
|
||
}`}
|
||
>
|
||
Jetzt bestellen
|
||
</Link>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Kombinieren Section */}
|
||
<Section className="bg-[var(--color-muted)]">
|
||
<Container>
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||
<div>
|
||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||
<Users className="h-5 w-5" aria-hidden="true" />
|
||
<span className="font-medium">Tipp</span>
|
||
</div>
|
||
<h2>Telefonie + Internet kombinieren</h2>
|
||
<p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
|
||
Als Telenet-Internet-Kunde telefonieren Sie ohne monatliche Grundgebühr.
|
||
Sie zahlen nur für die tatsächlich geführten Gespräche.
|
||
</p>
|
||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||
<span>0 € Grundgebühr mit Telenet-Internet</span>
|
||
</li>
|
||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||
<span>Einfache Abrechnung über eine Rechnung</span>
|
||
</li>
|
||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||
<span>Ein Ansprechpartner für alles</span>
|
||
</li>
|
||
</ul>
|
||
<Link href="/internet" className="btn btn-primary">
|
||
Internet-Tarife ansehen
|
||
</Link>
|
||
</div>
|
||
<div className="relative h-80 lg:h-96 rounded-[var(--radius-lg)] overflow-hidden">
|
||
<Image
|
||
src="/images/misc/telefon-fa5e8c21-271d2135.jpg"
|
||
alt="Person telefoniert"
|
||
fill
|
||
className="object-cover"
|
||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Business Section */}
|
||
<Section>
|
||
<Container>
|
||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||
<Building2 className="h-5 w-5" aria-hidden="true" />
|
||
<span className="font-medium">Business</span>
|
||
</div>
|
||
<h2>Telefonie für Unternehmen</h2>
|
||
<p className="lead mt-[var(--spacing-md)]">
|
||
Professionelle Telefonielösungen für Ihr Unternehmen.
|
||
Wir beraten Sie gerne zu den verschiedenen Möglichkeiten.
|
||
</p>
|
||
</div>
|
||
<div className="card max-w-2xl mx-auto text-center">
|
||
<h3 className="heading-4 mb-[var(--spacing-md)]">
|
||
Individuelle Business-Lösungen
|
||
</h3>
|
||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||
Für Unternehmen bieten wir maßgeschneiderte Telefonielösungen an.
|
||
Von der klassischen Festnetzanbindung bis zu modernen VoIP-Systemen –
|
||
wir finden die passende Lösung für Ihre Anforderungen.
|
||
</p>
|
||
<Link href="/kontakt" className="btn btn-primary">
|
||
Beratung anfragen
|
||
</Link>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* CTA Section */}
|
||
<Section className="bg-[var(--color-foreground)]">
|
||
<Container>
|
||
<div className="text-center max-w-2xl mx-auto">
|
||
<h2 className="text-[var(--color-background)]">
|
||
Fragen zu unseren Telefonie-Tarifen?
|
||
</h2>
|
||
<p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||
Unser Team berät Sie gerne persönlich und findet den passenden Tarif für Sie.
|
||
</p>
|
||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||
Kontakt aufnehmen
|
||
</Link>
|
||
<a
|
||
href="tel:+4356725000"
|
||
className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]"
|
||
>
|
||
+43 5672 5000
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
</>
|
||
);
|
||
}
|