feat: Implement core page structure with Header and Footer, add multiple content pages, and refine UI components and global styling.
This commit is contained in:
1elle1
@@ -0,0 +1,130 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
|
||||
export const metadata = {
|
||||
title: "Kabelfernsehen | TeleNetSystems",
|
||||
description: "Erleben Sie über 200 TV-Programme, 40 HDTV-Sender und beste Bildqualität mit TeleNetSystems in Reutte.",
|
||||
};
|
||||
|
||||
export default function FernsehenPage() {
|
||||
return (
|
||||
<main>
|
||||
{/* Hero */}
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
<Container>
|
||||
<h1 className="mb-[var(--spacing-md)]">
|
||||
Fernsehen <span className="text-[color:var(--color-primary)]">neu erleben</span>
|
||||
</h1>
|
||||
<p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Brillante Bildqualität, riesige Sendervielfalt und kristallklarer Sound.
|
||||
Holen Sie sich das Kino-Feeling direkt in Ihr Wohnzimmer.
|
||||
</p>
|
||||
<Link href="#kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt anschließen lassen
|
||||
</Link>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Main Benefit */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
|
||||
<div>
|
||||
<h2 className="mb-[var(--spacing-md)]">Unterhaltung ohne Grenzen</h2>
|
||||
<p className="mb-[var(--spacing-lg)]">
|
||||
Mit unserem Kabelanschluss erhalten Sie Zugang zu einer riesigen Welt der Unterhaltung.
|
||||
Egal ob Spielfilme, Sport, Dokumentationen oder Kinderprogramm – hier ist für jeden etwas dabei.
|
||||
</p>
|
||||
<ul className="mb-[var(--spacing-xl)] space-y-[var(--spacing-sm)]">
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
📺 <span><strong>Über 200 Programme</strong> digital empfangbar</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
💎 <span>Davon rund <strong>40 Sender in HD-Qualität</strong></span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
📻 <span>Rund <strong>40 Radiosender</strong> inklusive</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] flex items-center justify-center aspect-video text-[color:var(--color-muted-foreground)] bg-[var(--color-muted)]">
|
||||
PLACEHOLDER: TV Experience Image
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Pricing / Offer */}
|
||||
<Section className="bg-[var(--color-muted)] text-center">
|
||||
<Container>
|
||||
<h2 className="mb-[var(--spacing-xl)]">Unser Angebot für Privatkunden</h2>
|
||||
<div className="card max-w-lg mx-auto bg-white">
|
||||
<h3 className="text-2xl font-bold mb-[var(--spacing-xs)]">TV Privat</h3>
|
||||
<div className="text-4xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
€ 16,47 <span className="text-base text-[color:var(--color-foreground)] font-normal">/ Monat</span>
|
||||
</div>
|
||||
<p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
|
||||
inkl. MwSt
|
||||
</p>
|
||||
<ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] max-w-xs mx-auto">
|
||||
<li>✅ 200+ TV-Sender</li>
|
||||
<li>✅ 40+ HD-Sender</li>
|
||||
<li>✅ 40+ Radiosender</li>
|
||||
<li>✅ Keine Satellitenschüssel nötig</li>
|
||||
<li>✅ Beste Bild- & Tonqualität</li>
|
||||
</ul>
|
||||
<Link href="#kontakt" className="btn btn-primary w-full">
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Business & Pay TV */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] text-center">
|
||||
<div>
|
||||
<h3 className="mb-[var(--spacing-md)]">Für Unternehmen (TV Business)</h3>
|
||||
<p className="mb-[var(--spacing-md)]">
|
||||
Hotel, Krankenhaus oder Büro? Wir bieten maßgeschneiderte TV-Lösungen für Ihren Betrieb.
|
||||
</p>
|
||||
<Link href="#kontakt" className="btn btn-outline">
|
||||
Individuelles Angebot anfragen
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="mb-[var(--spacing-md)]">Pay TV & Extras</h3>
|
||||
<p className="mb-[var(--spacing-md)]">
|
||||
Sie möchten noch mehr? Exklusive Filme, Serien und Premium-Sport in HD/UHD auf Anfrage.
|
||||
</p>
|
||||
<Link href="#kontakt" className="btn btn-outline">
|
||||
Pay-TV Optionen prüfen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Contact Anchor */}
|
||||
<Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
|
||||
<Container>
|
||||
<h2 className="text-white mb-[var(--spacing-md)]">Interessiert?</h2>
|
||||
<p className="lead text-white mb-[var(--spacing-xl)]">
|
||||
Kontaktieren Sie uns für Ihren TV-Anschluss.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||||
<a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
|
||||
📞 Anrufen
|
||||
</a>
|
||||
<a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
|
||||
✉️ E-Mail schreiben
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user