feat: Implement initial website structure, core pages, and layout components, including a redesigned homepage.
This commit is contained in:
1elle1
@@ -0,0 +1,237 @@
|
||||
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,
|
||||
Server,
|
||||
Wrench,
|
||||
MonitorSmartphone,
|
||||
Cable,
|
||||
Shield,
|
||||
ArrowRight
|
||||
} from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Leistungen",
|
||||
description:
|
||||
"Umfassende Telekom- und IT-Services für Tirol. Fernsehen, Internet, Telefonie, IT-Support und Netzwerkplanung.",
|
||||
};
|
||||
|
||||
const mainServices = [
|
||||
{
|
||||
title: "Fernsehen",
|
||||
description: "Über 200 Programme inkl. 40 HDTV-Sender für Privat- und Geschäftskunden.",
|
||||
icon: Tv,
|
||||
href: "/fernsehen",
|
||||
},
|
||||
{
|
||||
title: "Internet",
|
||||
description: "Highspeed-Internet über Kabel oder Glasfaser – schnell, stabil, unlimitiert.",
|
||||
icon: Wifi,
|
||||
href: "/internet",
|
||||
},
|
||||
{
|
||||
title: "Telefonie",
|
||||
description: "Flexible Festnetz-Tarife. Mit oder ohne Internet nutzbar.",
|
||||
icon: Phone,
|
||||
href: "/telefonie",
|
||||
},
|
||||
];
|
||||
|
||||
const itServices = [
|
||||
{
|
||||
title: "Netzwerk- & Serverplanung",
|
||||
description: "Professionelle Planung und Umsetzung Ihrer IT-Infrastruktur.",
|
||||
icon: Server,
|
||||
},
|
||||
{
|
||||
title: "IT-Installation",
|
||||
description: "Fachgerechte Installation von Hard- und Software vor Ort.",
|
||||
icon: MonitorSmartphone,
|
||||
},
|
||||
{
|
||||
title: "Reparatur & Wartung",
|
||||
description: "Schnelle Hilfe bei Problemen, regelmäßige Wartung Ihrer Systeme.",
|
||||
icon: Wrench,
|
||||
},
|
||||
{
|
||||
title: "Fernwartung",
|
||||
description: "Schnelle Problembehebung aus der Ferne – ohne Wartezeit vor Ort.",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
title: "Glasfaser-Planung & -Ausbau",
|
||||
description: "Beratung und Umsetzung für Glasfaser-Anbindungen.",
|
||||
icon: Cable,
|
||||
},
|
||||
];
|
||||
|
||||
export default function LeistungenPage() {
|
||||
return (
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="mb-[var(--spacing-lg)]">
|
||||
Alle Leistungen
|
||||
<span className="text-[var(--color-primary)]"> im Überblick</span>
|
||||
</h1>
|
||||
<p className="lead mb-[var(--spacing-2xl)]">
|
||||
Von Fernsehen über Internet bis zu IT-Services –
|
||||
wir bieten Ihnen umfassende Lösungen aus einer Hand.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Telekom Services */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Telekommunikation
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)]">Fernsehen, Internet & Telefonie</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
|
||||
{mainServices.map((service) => (
|
||||
<Link
|
||||
key={service.title}
|
||||
href={service.href}
|
||||
className="card group hover:shadow-lg transition-shadow hover:no-underline"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-lg)] group-hover:bg-[var(--color-primary)] transition-colors">
|
||||
<service.icon
|
||||
size={24}
|
||||
className="text-[var(--color-primary)] group-hover:text-[var(--color-background)] transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="heading-4 mb-[var(--spacing-sm)] text-[var(--color-foreground)]">
|
||||
{service.title}
|
||||
</h3>
|
||||
<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">
|
||||
Mehr erfahren
|
||||
<ArrowRight size={16} />
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* IT Services */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
IT-Dienstleistungen
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)]">IT-Services & Support</h2>
|
||||
<p className="lead max-w-2xl mx-auto mt-[var(--spacing-md)]">
|
||||
Professionelle IT-Lösungen für Unternehmen und Privatkunden.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--spacing-lg)]">
|
||||
{itServices.map((service) => (
|
||||
<div key={service.title} className="card">
|
||||
<div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-md)]">
|
||||
<service.icon size={20} className="text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{service.title}</h3>
|
||||
<p className="text-sm text-muted">{service.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center mt-[var(--spacing-2xl)]">
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
IT-Beratung anfragen
|
||||
<ArrowRight size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Business Section */}
|
||||
<Section>
|
||||
<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 Unternehmen
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||||
Maßgeschneiderte Lösungen
|
||||
</h2>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
Sie benötigen eine individuelle Lösung für Ihr Unternehmen?
|
||||
Wir analysieren Ihre Anforderungen und erstellen ein maßgeschneidertes Angebot –
|
||||
von der Telekommunikation bis zur kompletten IT-Infrastruktur.
|
||||
</p>
|
||||
<ul className="stack-sm mb-[var(--spacing-xl)]">
|
||||
<li className="flex items-start gap-[var(--spacing-sm)]">
|
||||
<span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">1</span>
|
||||
<span>Bedarfsanalyse vor Ort</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-[var(--spacing-sm)]">
|
||||
<span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">2</span>
|
||||
<span>Individuelles Angebot</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-[var(--spacing-sm)]">
|
||||
<span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">3</span>
|
||||
<span>Professionelle Umsetzung</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-[var(--spacing-sm)]">
|
||||
<span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">4</span>
|
||||
<span>Laufender Support</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Beratungstermin vereinbaren
|
||||
</Link>
|
||||
</div>
|
||||
<div className="bg-[var(--color-muted)] rounded-[var(--radius-lg)] p-[var(--spacing-2xl)] text-center">
|
||||
<p className="text-6xl font-bold text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
50
|
||||
</p>
|
||||
<p className="text-xl font-semibold mb-[var(--spacing-sm)]">Jahre Erfahrung</p>
|
||||
<p className="text-muted">
|
||||
Seit 1976 sind wir Ihr zuverlässiger Partner für Telekommunikation und IT in Tirol.
|
||||
</p>
|
||||
</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)]">
|
||||
Haben Sie Fragen zu unseren Leistungen?
|
||||
</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 gemeinsam die passende Lösung.
|
||||
</p>
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
|
||||
>
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user