feat: Introduce new service pages for 'Leistungen', 'Telefonie', 'Fernsehen', and 'Internet', accompanied by new layout components and image assets.
This commit is contained in:
1elle1
@@ -0,0 +1,302 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user