feat: Implement initial website structure, core pages, and layout components, including a redesigned homepage.
This commit is contained in:
1elle1
@@ -0,0 +1,172 @@
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Tv, Check, Phone, ArrowRight } from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Fernsehen",
|
||||
description:
|
||||
"Über 200 TV-Programme inkl. 40 HDTV-Sender. Kabel-TV für Privat- und Geschäftskunden in Tirol.",
|
||||
};
|
||||
|
||||
const tvFeatures = [
|
||||
"Über 200 Programme",
|
||||
"40 HDTV-Sender",
|
||||
"Rund 40 Radiosender",
|
||||
"Kristallklare Bildqualität",
|
||||
"Keine Servicepauschale",
|
||||
"Regionale Sender inklusive",
|
||||
];
|
||||
|
||||
export default function FernsehenPage() {
|
||||
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)]">
|
||||
<Tv size={32} className="text-[var(--color-background)]" />
|
||||
</div>
|
||||
<h1 className="mb-[var(--spacing-lg)]">
|
||||
Fernsehen in
|
||||
<span className="text-[var(--color-primary)]"> bester Qualität</span>
|
||||
</h1>
|
||||
<p className="lead mb-[var(--spacing-2xl)]">
|
||||
Genießen Sie über 200 TV-Programme inkl. 40 HDTV-Sendern –
|
||||
direkt über das Kabelnetz von TeleNetSystems.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Trust Elements */}
|
||||
<Section variant="sm" className="bg-[var(--color-background)] border-b border-[var(--color-border)]">
|
||||
<Container>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-xl)]">
|
||||
{tvFeatures.slice(0, 4).map((feature) => (
|
||||
<div key={feature} className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<Check size={18} className="text-[var(--color-primary)]" />
|
||||
<span className="text-sm font-medium">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* TV Privat Section */}
|
||||
<Section id="privat">
|
||||
<Container>
|
||||
<div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div>
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Für Privatkunden
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||||
TV Privat
|
||||
</h2>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
Holen Sie sich über 200 Programme inkl. 40 HDTV-Sendern und rund 40 Radiosendern
|
||||
direkt in Ihr Wohnzimmer. Genießen Sie beste Unterhaltung für die ganze Familie.
|
||||
</p>
|
||||
<ul className="stack-sm mb-[var(--spacing-xl)]">
|
||||
{tvFeatures.map((feature) => (
|
||||
<li key={feature} className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<Check size={18} className="text-[var(--color-primary)] shrink-0" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="card text-center">
|
||||
<p className="text-sm text-muted uppercase tracking-wide mb-[var(--spacing-sm)]">
|
||||
TV Privat
|
||||
</p>
|
||||
<p className="text-5xl font-bold text-[var(--color-primary)] mb-[var(--spacing-xs)]">
|
||||
€ 16,47
|
||||
</p>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
pro Monat inkl. MwSt.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn btn-primary w-full">
|
||||
Jetzt anfragen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* TV Business Section */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Für Geschäftskunden
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||||
TV Business
|
||||
</h2>
|
||||
<p className="text-muted mb-[var(--spacing-xl)]">
|
||||
Sie sind noch auf der Suche nach der passenden TV-Lösung für Ihr Unternehmen?
|
||||
Gerne erstellen wir Ihnen ein individuelles Angebot, das genau zu Ihren Anforderungen passt.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Individuelle Lösung anfragen
|
||||
<ArrowRight size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Pay TV Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h2 className="mb-[var(--spacing-lg)]">Pay-TV</h2>
|
||||
<p className="text-muted mb-[var(--spacing-xl)]">
|
||||
Auf Wunsch bieten wir zusätzlich Pay-TV-Lösungen an.
|
||||
Sie möchten exklusive Filme, Serien und Sport in HD oder UHD?
|
||||
Kontaktieren Sie uns einfach und wir finden das passende Angebot für Sie.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn btn-outline">
|
||||
Pay-TV anfragen
|
||||
</Link>
|
||||
</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)]">
|
||||
Interesse an unserem TV-Angebot?
|
||||
</h2>
|
||||
<p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Wir beraten Sie gerne persönlich und finden die passende Lösung für Sie.
|
||||
</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"
|
||||
>
|
||||
<Phone size={18} />
|
||||
PLACEHOLDER: Telefon
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user