238 lines
12 KiB
TypeScript
238 lines
12 KiB
TypeScript
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>
|
||
);
|
||
}
|