feat: Introduce new service pages for 'Leistungen', 'Telefonie', 'Fernsehen', and 'Internet', accompanied by new layout components and image assets.
This commit is contained in:
1elle1
@@ -0,0 +1,304 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import {
|
||||
Server,
|
||||
Network,
|
||||
Wrench,
|
||||
Monitor,
|
||||
Cable,
|
||||
Shield,
|
||||
Headphones,
|
||||
Building2,
|
||||
Users,
|
||||
CheckCircle,
|
||||
} from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Leistungen",
|
||||
description:
|
||||
"Umfassende Telekom- und IT-Services im Bezirk Reutte. Von Netzwerkplanung über IT-Installation bis Fernwartung – alles aus einer Hand.",
|
||||
openGraph: {
|
||||
title: "Leistungen | Telenet Systems GmbH",
|
||||
description:
|
||||
"Umfassende Telekom- und IT-Services im Bezirk Reutte. Netzwerkplanung, IT-Installation, Fernwartung.",
|
||||
},
|
||||
};
|
||||
|
||||
const services = [
|
||||
{
|
||||
icon: Network,
|
||||
title: "Netzwerkplanung",
|
||||
description:
|
||||
"Professionelle Planung und Konzeption von Netzwerkinfrastrukturen für Unternehmen jeder Größe.",
|
||||
},
|
||||
{
|
||||
icon: Server,
|
||||
title: "Serverplanung",
|
||||
description:
|
||||
"Beratung und Planung von Serverlösungen – von der Hardware bis zur Software-Konfiguration.",
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "IT-Installation",
|
||||
description:
|
||||
"Fachgerechte Installation von IT-Komponenten, Netzwerken und Kommunikationssystemen.",
|
||||
},
|
||||
{
|
||||
icon: Monitor,
|
||||
title: "Reparaturen",
|
||||
description:
|
||||
"Schnelle und zuverlässige Reparatur von IT-Geräten und Netzwerkkomponenten.",
|
||||
},
|
||||
{
|
||||
icon: Headphones,
|
||||
title: "Fernwartung",
|
||||
description:
|
||||
"Remote-Support für schnelle Problemlösung ohne Wartezeit auf einen Vor-Ort-Termin.",
|
||||
},
|
||||
{
|
||||
icon: Cable,
|
||||
title: "Glasfaser-Ausbau",
|
||||
description:
|
||||
"Planung und Umsetzung von Glasfaser-Infrastruktur für zukunftssichere Anbindungen.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Qualitätssicherung",
|
||||
description:
|
||||
"Kontinuierliche Überwachung und Optimierung Ihrer IT-Systeme für maximale Verfügbarkeit.",
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: "Behördliche Unterstützung",
|
||||
description:
|
||||
"Technisch-behördliche Unterstützung bei Netzprojekten und Genehmigungsverfahren.",
|
||||
},
|
||||
];
|
||||
|
||||
const targetGroups = [
|
||||
{
|
||||
icon: Users,
|
||||
title: "Privatkunden",
|
||||
description:
|
||||
"Zuverlässige TV-, Internet- und Telefonielösungen für Ihr Zuhause. Mit persönlichem Service vor Ort.",
|
||||
features: [
|
||||
"TV mit über 200 Programmen",
|
||||
"Highspeed-Internet bis 500 Mbit/s",
|
||||
"Günstige Telefonie-Tarife",
|
||||
"Persönliche Beratung",
|
||||
],
|
||||
cta: "Zu den Tarifen",
|
||||
href: "/internet",
|
||||
image: "/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg",
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: "Geschäftskunden",
|
||||
description:
|
||||
"Professionelle IT- und Kommunikationslösungen für Ihr Unternehmen. Maßgeschneidert und zuverlässig.",
|
||||
features: [
|
||||
"Business-Internet & Telefonie",
|
||||
"Netzwerk- & Serverplanung",
|
||||
"IT-Installation & Support",
|
||||
"Fernwartung & Monitoring",
|
||||
],
|
||||
cta: "Kontakt aufnehmen",
|
||||
href: "/kontakt",
|
||||
image: "/images/misc/firmenkunden-96736712-5fa99704.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
export default function LeistungenPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/services/tnr-leistungen-055053d5.jpg"
|
||||
alt="Telenet Systems Mitarbeiter"
|
||||
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)]">
|
||||
Unser Leistungsangebot
|
||||
</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)]">
|
||||
Von TV und Internet über Telefonie bis zu professionellen IT-Dienstleistungen –
|
||||
wir bieten alles, was Sie für moderne Kommunikation benötigen.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
<a href="#services" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
Leistungen entdecken
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Zielgruppen */}
|
||||
<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 lg:grid-cols-2 gap-[var(--spacing-xl)]">
|
||||
{targetGroups.map((group) => (
|
||||
<div key={group.title} className="card overflow-hidden">
|
||||
<div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
|
||||
<Image
|
||||
src={group.image}
|
||||
alt={group.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
|
||||
<group.icon className="h-5 w-5" aria-hidden="true" />
|
||||
<h3 className="heading-3">{group.title}</h3>
|
||||
</div>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">{group.description}</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
{group.features.map((feature) => (
|
||||
<li
|
||||
key={feature}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href={group.href} className="btn btn-primary">
|
||||
{group.cta}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* IT-Services */}
|
||||
<Section id="services" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>IT-Services für Unternehmen</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Professionelle IT-Dienstleistungen von der Planung bis zur Wartung.
|
||||
Alles aus einer Hand, mit persönlichem Ansprechpartner vor Ort.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-lg)]">
|
||||
{services.map((service) => (
|
||||
<div key={service.title} className="card text-center">
|
||||
<div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] mb-[var(--spacing-md)]">
|
||||
<service.icon className="h-6 w-6" aria-hidden="true" />
|
||||
</div>
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{service.title}</h3>
|
||||
<p className="text-sm text-muted">{service.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Glasfaser Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div className="relative h-80 lg:h-full min-h-[320px] rounded-[var(--radius-lg)] overflow-hidden">
|
||||
<Image
|
||||
src="/images/services/lwl1-40360e27.jpg"
|
||||
alt="Glasfaser-Installation"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Cable className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Glasfaser</span>
|
||||
</div>
|
||||
<h2>Zukunftssichere Glasfaser-Infrastruktur</h2>
|
||||
<p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
|
||||
Wir planen und bauen Glasfasernetze für Gemeinden und Unternehmen.
|
||||
Profitieren Sie von unserer langjährigen Erfahrung.
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Glasfaser-Planung & Beratung</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Professioneller Netzausbau</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Behördliche Unterstützung</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Qualitätssicherung</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Projekt anfragen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Haben Sie Fragen zu unseren Leistungen?
|
||||
</h2>
|
||||
<p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Wir beraten Sie gerne persönlich und finden die optimale Lösung für Ihre Anforderungen.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90"
|
||||
>
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]"
|
||||
>
|
||||
+43 5672 5000
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user