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
285
app/fernsehen/page.tsx
Normal file
285
app/fernsehen/page.tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
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 { Tv, Users, Building2, Play, CheckCircle, ArrowRight } from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Fernsehen",
|
||||
description:
|
||||
"Über 200 TV-Programme inkl. 40 HDTV-Sendern. Kabel-TV für Privat- und Geschäftskunden im Bezirk Reutte. Ab 16,47 € im Monat.",
|
||||
openGraph: {
|
||||
title: "Fernsehen | Telenet Systems GmbH",
|
||||
description:
|
||||
"Über 200 TV-Programme inkl. 40 HDTV-Sendern. Kabel-TV für Privat- und Geschäftskunden im Bezirk Reutte.",
|
||||
},
|
||||
};
|
||||
|
||||
const tvOptions = [
|
||||
{
|
||||
icon: Users,
|
||||
title: "TV Privat",
|
||||
price: "16,47",
|
||||
period: "Monat",
|
||||
description:
|
||||
"Über 200 Programme inkl. 40 HDTV-Sendern und rund 40 Radiosendern direkt in Ihr Wohnzimmer.",
|
||||
features: [
|
||||
"Über 200 TV-Programme",
|
||||
"40 HDTV-Sender inklusive",
|
||||
"Rund 40 Radiosender",
|
||||
"Erstklassige Bildqualität",
|
||||
],
|
||||
cta: "Jetzt bestellen",
|
||||
image: "/images/misc/tv-privat-76f60c7a-88eafcfb.jpg",
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: "TV Business",
|
||||
price: "Auf Anfrage",
|
||||
period: "",
|
||||
description:
|
||||
"Individuelle TV-Lösungen für Ihr Unternehmen. Hotels, Gaststätten, Wartezimmer – wir finden die passende Lösung.",
|
||||
features: [
|
||||
"Maßgeschneidertes Angebot",
|
||||
"Persönliche Beratung",
|
||||
"Individuelle Kanalauswahl",
|
||||
"Professionelle Installation",
|
||||
],
|
||||
cta: "Angebot anfragen",
|
||||
image: "/images/misc/tv-business-c3bdfb94-23310090.jpg",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
icon: Play,
|
||||
title: "Pay TV",
|
||||
price: "Auf Anfrage",
|
||||
period: "",
|
||||
description:
|
||||
"Exklusive Filme, Serien und Sport in HD/UHD. Ergänzen Sie Ihr TV-Erlebnis mit Premium-Inhalten.",
|
||||
features: [
|
||||
"Premium-Sender verfügbar",
|
||||
"HD/UHD Qualität",
|
||||
"Sport & Filme",
|
||||
"Flexible Pakete",
|
||||
],
|
||||
cta: "Mehr erfahren",
|
||||
image: "/images/misc/tv-paytv-6cbac6e4-d140e2e4.jpg",
|
||||
popular: false,
|
||||
},
|
||||
];
|
||||
|
||||
const benefits = [
|
||||
"Keine Servicepauschale",
|
||||
"Persönlicher Support vor Ort",
|
||||
"Schnelle Installation",
|
||||
"Faire und transparente Preise",
|
||||
];
|
||||
|
||||
export default function FernsehenPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/hero/tv-header-44c1e07b.jpg"
|
||||
alt="Familie genießt Fernsehen"
|
||||
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)]">
|
||||
<Tv className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Fernsehen</span>
|
||||
</div>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Über 200 TV-Programme in bester Qualität
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Erstklassige Unterhaltung für Ihr Zuhause oder Unternehmen.
|
||||
Mit 40 HDTV-Sendern und rund 40 Radiosendern – ab nur 16,47 € im Monat.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
<a href="#angebote" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
Angebote 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>
|
||||
|
||||
{/* TV Options */}
|
||||
<Section id="angebote">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>Unsere TV-Angebote</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Ob für Ihr Zuhause oder Ihr Unternehmen – wir haben das passende Angebot.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--spacing-xl)]">
|
||||
{tvOptions.map((option) => (
|
||||
<div
|
||||
key={option.title}
|
||||
className={`card relative overflow-hidden ${
|
||||
option.popular
|
||||
? "border-[var(--color-primary)] border-2"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{option.popular && (
|
||||
<div className="absolute top-4 right-4 bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-semibold px-3 py-1 rounded-full">
|
||||
Beliebt
|
||||
</div>
|
||||
)}
|
||||
<div className="relative h-40 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
|
||||
<Image
|
||||
src={option.image}
|
||||
alt={option.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 33vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
|
||||
<option.icon className="h-5 w-5" aria-hidden="true" />
|
||||
<h3 className="heading-4">{option.title}</h3>
|
||||
</div>
|
||||
<div className="mb-[var(--spacing-md)]">
|
||||
<span className="heading-2 text-[var(--color-foreground)]">
|
||||
{option.price.includes("Anfrage") ? "" : "€ "}
|
||||
{option.price}
|
||||
</span>
|
||||
{option.period && (
|
||||
<span className="text-muted"> / {option.period}</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
{option.description}
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
{option.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 ${
|
||||
option.popular ? "btn-primary" : "btn-outline"
|
||||
}`}
|
||||
>
|
||||
{option.cta}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container variant="narrow">
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<h2>Häufige Fragen</h2>
|
||||
</div>
|
||||
<div className="space-y-[var(--spacing-lg)]">
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">
|
||||
Wie schnell ist die Installation?
|
||||
</h3>
|
||||
<p className="text-muted">
|
||||
In der Regel können wir innerhalb weniger Werktage einen Installationstermin
|
||||
vereinbaren. Unser Techniker kommt zu Ihnen und richtet alles ein.
|
||||
</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">
|
||||
Gibt es versteckte Kosten?
|
||||
</h3>
|
||||
<p className="text-muted">
|
||||
Nein. Der angezeigte Preis ist der Endpreis inklusive Mehrwertsteuer.
|
||||
Es gibt keine Servicepauschale und keine versteckten Gebühren.
|
||||
</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">
|
||||
Kann ich Pay-TV dazubuchen?
|
||||
</h3>
|
||||
<p className="text-muted">
|
||||
Ja, wir bieten verschiedene Pay-TV-Optionen an. Kontaktieren Sie uns
|
||||
und wir finden das passende Paket für Sie.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Bereit für bestes Fernsehen?
|
||||
</h2>
|
||||
<p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Kontaktieren Sie uns für eine persönliche Beratung oder bestellen Sie
|
||||
direkt Ihren TV-Anschluss.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90"
|
||||
>
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]"
|
||||
>
|
||||
+43 5672 5000
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user