298 lines
12 KiB
TypeScript
298 lines
12 KiB
TypeScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { Container } from "@/components/layout/Container";
|
||
import { Section } from "@/components/layout/Section";
|
||
import {
|
||
Tv,
|
||
Wifi,
|
||
Phone,
|
||
Users,
|
||
Shield,
|
||
Clock,
|
||
MapPin,
|
||
ArrowRight,
|
||
CheckCircle,
|
||
} from "lucide-react";
|
||
|
||
const services = [
|
||
{
|
||
icon: Tv,
|
||
title: "Fernsehen",
|
||
description:
|
||
"Über 200 Programme inkl. 40 HDTV-Sendern. Erstklassige Unterhaltung für Ihr Zuhause – ab 16,47 € im Monat.",
|
||
href: "/fernsehen",
|
||
image: "/images/misc/tv-privat-76f60c7a-88eafcfb.jpg",
|
||
},
|
||
{
|
||
icon: Wifi,
|
||
title: "Internet",
|
||
description:
|
||
"Highspeed-Internet über Kabel und Glasfaser. Flexible Tarife für Privat- und Geschäftskunden – ab 14,50 € im Monat.",
|
||
href: "/internet",
|
||
image: "/images/misc/internet-7b594a2d-793cefee.jpg",
|
||
},
|
||
{
|
||
icon: Phone,
|
||
title: "Telefonie",
|
||
description:
|
||
"Günstige Telefonie-Tarife fürs Festnetz. Für Privat- und Geschäftskunden – ab 0 € mit Telenet-Internet.",
|
||
href: "/telefonie",
|
||
image: "/images/misc/telefon-fa5e8c21-271d2135.jpg",
|
||
},
|
||
];
|
||
|
||
const usps = [
|
||
{
|
||
icon: MapPin,
|
||
title: "Regionale Nähe",
|
||
description:
|
||
"Persönlicher Service direkt vor Ort im Bezirk Reutte. Bei uns kennt man sich noch persönlich.",
|
||
},
|
||
{
|
||
icon: Clock,
|
||
title: "Seit 1976",
|
||
description:
|
||
"Fast 50 Jahre Erfahrung in der Telekommunikation. Verlässlichkeit, der Sie vertrauen können.",
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: "Voller Service",
|
||
description:
|
||
"Von TV über Internet bis IT-Support – alles aus einer Hand. Keine Servicepauschale bei unseren Tarifen.",
|
||
},
|
||
{
|
||
icon: Users,
|
||
title: "Schneller Support",
|
||
description:
|
||
"Probleme lösen wir direkt – telefonisch oder vor Ort. Kurze Wege, schnelle Hilfe.",
|
||
},
|
||
];
|
||
|
||
const trustItems = [
|
||
"Keine versteckten Kosten",
|
||
"Unlimitiertes Datenvolumen",
|
||
"Persönlicher Ansprechpartner",
|
||
"Regionaler Kundendienst",
|
||
];
|
||
|
||
export default function HomePage() {
|
||
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/firma1-8a863d8b.jpg"
|
||
alt="Telenet Systems Firmengebäude in Reutte"
|
||
fill
|
||
priority
|
||
className="object-cover opacity-40"
|
||
sizes="100vw"
|
||
/>
|
||
</div>
|
||
<Container className="relative z-10">
|
||
<div className="max-w-3xl">
|
||
<p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
|
||
Ihr regionaler Partner in Tirol
|
||
</p>
|
||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||
Telekommunikation und IT-Services aus einer Hand
|
||
</h1>
|
||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||
Seit 1976 versorgen wir den Bezirk Reutte mit zuverlässigem Fernsehen,
|
||
schnellem Internet und flexibler Telefonie. Persönliche Beratung,
|
||
ehrlicher Service – ohne komplizierte Prozesse.
|
||
</p>
|
||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||
Jetzt beraten lassen
|
||
</Link>
|
||
<Link href="/leistungen" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||
Unsere Leistungen
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* USP Section */}
|
||
<Section className="bg-[var(--color-muted)]">
|
||
<Container>
|
||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||
<h2>Warum Telenet Systems?</h2>
|
||
<p className="lead mt-[var(--spacing-md)]">
|
||
Als regionaler Anbieter verbinden wir modernste Technik mit persönlichem Service.
|
||
</p>
|
||
</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
|
||
{usps.map((usp) => (
|
||
<div key={usp.title} className="text-center">
|
||
<div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] mb-[var(--spacing-md)]">
|
||
<usp.icon className="h-6 w-6" aria-hidden="true" />
|
||
</div>
|
||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3>
|
||
<p className="text-muted">{usp.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Services Section */}
|
||
<Section>
|
||
<Container>
|
||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||
<h2>Unsere Leistungen für Sie</h2>
|
||
<p className="lead mt-[var(--spacing-md)]">
|
||
Fernsehen, Internet und Telefonie – alles aus einer Hand, ohne Servicepauschale.
|
||
</p>
|
||
</div>
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--spacing-xl)]">
|
||
{services.map((service) => (
|
||
<Link
|
||
key={service.title}
|
||
href={service.href}
|
||
className="card group overflow-hidden hover:shadow-[var(--shadow-lg)] transition-shadow"
|
||
>
|
||
<div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)] overflow-hidden">
|
||
<Image
|
||
src={service.image}
|
||
alt={service.title}
|
||
fill
|
||
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||
sizes="(max-width: 1024px) 100vw, 33vw"
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
|
||
<service.icon className="h-5 w-5" aria-hidden="true" />
|
||
<h3 className="heading-4">{service.title}</h3>
|
||
</div>
|
||
<p className="text-muted mb-[var(--spacing-md)]">{service.description}</p>
|
||
<span className="inline-flex items-center gap-[var(--spacing-xs)] text-[var(--color-primary)] font-medium group-hover:gap-[var(--spacing-sm)] transition-all">
|
||
Mehr erfahren
|
||
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
||
</span>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Trust Section */}
|
||
<Section className="bg-[var(--color-primary)]">
|
||
<Container>
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||
<div>
|
||
<h2 className="text-[var(--color-background)]">
|
||
Transparent und fair – ohne versteckte Kosten
|
||
</h2>
|
||
<p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||
Bei uns wissen Sie immer, woran Sie sind. Keine Überraschungen auf der Rechnung,
|
||
keine komplizierte Tarifstruktur. Einfach, ehrlich, regional.
|
||
</p>
|
||
<ul className="space-y-[var(--spacing-sm)]">
|
||
{trustItems.map((item) => (
|
||
<li
|
||
key={item}
|
||
className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-background)]"
|
||
>
|
||
<CheckCircle className="h-5 w-5 flex-shrink-0" aria-hidden="true" />
|
||
<span>{item}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
<div className="relative h-80 lg:h-96 rounded-[var(--radius-lg)] overflow-hidden">
|
||
<Image
|
||
src="/images/services/tnr-leistungen-055053d5.jpg"
|
||
alt="Telenet Systems Mitarbeiter bei der Arbeit"
|
||
fill
|
||
className="object-cover"
|
||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* For Whom Section */}
|
||
<Section>
|
||
<Container>
|
||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||
<h2>Für Privat- und Geschäftskunden</h2>
|
||
<p className="lead mt-[var(--spacing-md)]">
|
||
Ob Zuhause oder im Unternehmen – wir haben die passende Lösung für Sie.
|
||
</p>
|
||
</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-xl)]">
|
||
{/* Privatkunden */}
|
||
<div className="card relative overflow-hidden">
|
||
<div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
|
||
<Image
|
||
src="/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg"
|
||
alt="Familie vor dem Fernseher"
|
||
fill
|
||
className="object-cover"
|
||
sizes="(max-width: 768px) 100vw, 50vw"
|
||
/>
|
||
</div>
|
||
<h3 className="heading-3 mb-[var(--spacing-sm)]">Privatkunden</h3>
|
||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||
Zuverlässiges Fernsehen, schnelles Internet und günstige Telefonie für Ihr Zuhause.
|
||
Flexible Tarife ohne Servicepauschale und mit persönlicher Betreuung vor Ort.
|
||
</p>
|
||
<Link href="/internet" className="btn btn-primary">
|
||
Tarife für Privatkunden
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Geschäftskunden */}
|
||
<div className="card relative overflow-hidden">
|
||
<div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
|
||
<Image
|
||
src="/images/misc/firmenkunden-96736712-5fa99704.jpg"
|
||
alt="Geschäftsmann im Büro"
|
||
fill
|
||
className="object-cover"
|
||
sizes="(max-width: 768px) 100vw, 50vw"
|
||
/>
|
||
</div>
|
||
<h3 className="heading-3 mb-[var(--spacing-sm)]">Geschäftskunden</h3>
|
||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||
Maßgeschneiderte Business-Lösungen für Kommunikation und IT.
|
||
Von der Netzwerkplanung bis zur Fernwartung – alles aus einer Hand.
|
||
</p>
|
||
<Link href="/leistungen" className="btn btn-primary">
|
||
Business-Lösungen
|
||
</Link>
|
||
</div>
|
||
</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)]">
|
||
Haben Sie Fragen? Wir beraten Sie gerne.
|
||
</h2>
|
||
<p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||
Unser Team in Reutte steht Ihnen persönlich zur Verfügung.
|
||
Rufen Sie uns an oder senden Sie uns eine Nachricht.
|
||
</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>
|
||
</>
|
||
);
|
||
}
|