feat: Implement initial website structure, core pages, and layout components, including a redesigned homepage.
This commit is contained in:
1elle1
+213
-4
@@ -1,12 +1,221 @@
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
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 default function Page() {
|
||||
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>
|
||||
<Section>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<p>Ready</p>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user