225 lines
7.9 KiB
TypeScript
225 lines
7.9 KiB
TypeScript
import { Metadata } from "next";
|
||
import Link from "next/link";
|
||
import Image from "next/image";
|
||
import { Section } from "@/components/layout/Section";
|
||
import { Container } from "@/components/layout/Container";
|
||
import {
|
||
Tv,
|
||
Wifi,
|
||
Phone,
|
||
MapPin,
|
||
Clock,
|
||
Users,
|
||
Shield,
|
||
Award,
|
||
ArrowRight
|
||
} from "lucide-react";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "TeleNetSystems | Telekom & IT aus Tirol",
|
||
description:
|
||
"Ihr regionaler Telekom- und IT-Partner in Reutte, Tirol. Fernsehen, Internet, Telefonie und IT-Services – zuverlässig, persönlich, seit 1976.",
|
||
};
|
||
|
||
const services = [
|
||
{
|
||
title: "Fernsehen",
|
||
description:
|
||
"Über 200 Programme inkl. 40 HDTV-Sender – für Privat- und Geschäftskunden.",
|
||
icon: Tv,
|
||
href: "/fernsehen",
|
||
price: "ab € 16,47/Monat",
|
||
},
|
||
{
|
||
title: "Internet",
|
||
description:
|
||
"Highspeed-Internet über Kabel oder Glasfaser. Schnell, stabil, unlimitiert.",
|
||
icon: Wifi,
|
||
href: "/internet",
|
||
price: "ab € 14,50/Monat",
|
||
},
|
||
{
|
||
title: "Telefonie",
|
||
description:
|
||
"Flexible Telefonie-Tarife für Festnetz. Mit oder ohne Internet nutzbar.",
|
||
icon: Phone,
|
||
href: "/telefonie",
|
||
price: "ab € 0,00/Monat",
|
||
},
|
||
];
|
||
|
||
const usps = [
|
||
{
|
||
icon: MapPin,
|
||
title: "Regional & Persönlich",
|
||
description:
|
||
"Wir sind vor Ort in Reutte. Bei Fragen oder Problemen erreichen Sie echte Ansprechpartner aus der Region.",
|
||
},
|
||
{
|
||
icon: Clock,
|
||
title: "Schnelle Hilfe",
|
||
description:
|
||
"Bei Störungen reagieren wir schnell. Unser Support ist für Sie da – ohne lange Warteschleifen.",
|
||
},
|
||
{
|
||
icon: Users,
|
||
title: "Seit 1976",
|
||
description:
|
||
"Fast 50 Jahre Erfahrung in Telekommunikation und IT. Wir kennen die Technik – und die Region.",
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: "Zuverlässig",
|
||
description:
|
||
"Stabile Netze, bewährte Technik, dauerhafte Lösungen. Darauf können Sie sich verlassen.",
|
||
},
|
||
];
|
||
|
||
const trustElements = [
|
||
{ icon: Award, text: "Zertifizierter Partner" },
|
||
{ icon: Users, text: "Über 5.000 zufriedene Kunden" },
|
||
{ icon: Clock, text: "Fast 50 Jahre Erfahrung" },
|
||
];
|
||
|
||
export default function HomePage() {
|
||
return (
|
||
<main>
|
||
{/* Hero Section */}
|
||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||
<Container>
|
||
<div className="max-w-3xl">
|
||
<p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
|
||
Ihr Telekom- und IT-Partner in Tirol
|
||
</p>
|
||
<h1 className="mb-[var(--spacing-lg)]">
|
||
Zuverlässige Technik.
|
||
<br />
|
||
<span className="text-[var(--color-primary)]">Persönlicher Service.</span>
|
||
</h1>
|
||
<p className="lead mb-[var(--spacing-2xl)] max-w-2xl">
|
||
Fernsehen, Internet und Telefonie aus einer Hand –
|
||
direkt aus Reutte für den Bezirk und die Region.
|
||
Mit persönlicher Beratung und schnellem Support.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row 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">
|
||
Unsere Leistungen
|
||
<ArrowRight size={18} />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Services Section */}
|
||
<Section id="leistungen">
|
||
<Container>
|
||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||
<h2 className="mb-[var(--spacing-md)]">Unsere Leistungen</h2>
|
||
<p className="lead max-w-2xl mx-auto">
|
||
Von Fernsehen über Internet bis zur Telefonie –
|
||
wir bieten Ihnen alles aus einer Hand.
|
||
</p>
|
||
</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
|
||
{services.map((service) => (
|
||
<article key={service.title} className="card group">
|
||
<div className="w-12 h-12 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-lg)]">
|
||
<service.icon size={24} className="text-[var(--color-primary)]" />
|
||
</div>
|
||
<h3 className="heading-4 mb-[var(--spacing-sm)]">{service.title}</h3>
|
||
<p className="text-muted mb-[var(--spacing-md)]">
|
||
{service.description}
|
||
</p>
|
||
<p className="font-semibold text-[var(--color-primary)] mb-[var(--spacing-lg)]">
|
||
{service.price}
|
||
</p>
|
||
<Link
|
||
href={service.href}
|
||
className="btn btn-ghost justify-start p-0 hover:text-[var(--color-primary)]"
|
||
>
|
||
Mehr erfahren
|
||
<ArrowRight size={16} />
|
||
</Link>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* USP Section */}
|
||
<Section className="bg-[var(--color-muted)]">
|
||
<Container>
|
||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||
<h2 className="mb-[var(--spacing-md)]">Warum TeleNetSystems?</h2>
|
||
<p className="lead max-w-2xl mx-auto">
|
||
Wir sind kein anonymer Großkonzern – sondern Ihr Partner vor Ort.
|
||
</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="w-14 h-14 rounded-full bg-[var(--color-primary)] flex items-center justify-center mx-auto mb-[var(--spacing-md)]">
|
||
<usp.icon size={24} className="text-[var(--color-background)]" />
|
||
</div>
|
||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3>
|
||
<p className="text-sm text-muted">{usp.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Trust Section */}
|
||
<Section variant="sm">
|
||
<Container>
|
||
<div className="flex flex-wrap justify-center gap-[var(--spacing-2xl)] items-center">
|
||
{trustElements.map((item) => (
|
||
<div
|
||
key={item.text}
|
||
className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-muted-foreground)]"
|
||
>
|
||
<item.icon size={20} className="text-[var(--color-primary)]" />
|
||
<span className="text-sm font-medium">{item.text}</span>
|
||
</div>
|
||
))}
|
||
</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)]">
|
||
Bereit für zuverlässige Technik?
|
||
</h2>
|
||
<p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||
Kontaktieren Sie uns für eine unverbindliche Beratung.
|
||
Wir 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>
|
||
);
|
||
}
|