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,402 @@
|
||||
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 { Wifi, Zap, Building2, CheckCircle, ArrowDown, ArrowUp } from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Internet",
|
||||
description:
|
||||
"Highspeed-Internet über Kabel und Glasfaser im Bezirk Reutte. Flexible Tarife für Privat- und Geschäftskunden ab 14,50 € im Monat. Ohne Servicepauschale.",
|
||||
openGraph: {
|
||||
title: "Internet | Telenet Systems GmbH",
|
||||
description:
|
||||
"Highspeed-Internet über Kabel und Glasfaser im Bezirk Reutte. Ab 14,50 € im Monat.",
|
||||
},
|
||||
};
|
||||
|
||||
const kabelTarife = [
|
||||
{
|
||||
name: "telenet.hit",
|
||||
price: "14,50",
|
||||
download: "40",
|
||||
upload: "6",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.eco",
|
||||
price: "19,00",
|
||||
download: "60",
|
||||
upload: "8",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.fun",
|
||||
price: "29,00",
|
||||
download: "80",
|
||||
upload: "12",
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
name: "telenet.pro",
|
||||
price: "39,00",
|
||||
download: "100",
|
||||
upload: "14",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.mega",
|
||||
price: "49,00",
|
||||
download: "180",
|
||||
upload: "22",
|
||||
popular: false,
|
||||
},
|
||||
];
|
||||
|
||||
const glasfaserTarife = [
|
||||
{
|
||||
name: "telenet.eco",
|
||||
price: "23,00",
|
||||
download: "100",
|
||||
upload: "100",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.fun",
|
||||
price: "29,00",
|
||||
download: "200",
|
||||
upload: "200",
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
name: "telenet.pro",
|
||||
price: "39,00",
|
||||
download: "300",
|
||||
upload: "300",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.mega",
|
||||
price: "49,00",
|
||||
download: "500",
|
||||
upload: "500",
|
||||
popular: false,
|
||||
},
|
||||
];
|
||||
|
||||
const benefits = [
|
||||
"Keine Servicepauschale",
|
||||
"Unlimitiertes Datenvolumen",
|
||||
"IPv6 inklusive",
|
||||
"Persönlicher Support",
|
||||
];
|
||||
|
||||
export default function InternetPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/hero/internet-header-431619ac.jpg"
|
||||
alt="Highspeed Internet"
|
||||
fill
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Wifi className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Internet</span>
|
||||
</div>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Highspeed-Internet für Ihr Zuhause
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
|
||||
Flexible Tarife ohne Servicepauschale – ab 14,50 € im Monat.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
<a href="#tarife" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
Tarife vergleichen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Trust Bar */}
|
||||
<Section variant="sm" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
|
||||
{benefits.map((benefit) => (
|
||||
<div
|
||||
key={benefit}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-5 w-5 text-[var(--color-success)]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Kabel-Tarife */}
|
||||
<Section id="tarife">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Zap className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Kabel-Internet</span>
|
||||
</div>
|
||||
<h2>Tarife für Kabel-Kunden</h2>
|
||||
<p className="text-muted mt-[var(--spacing-md)]">
|
||||
Tarife gültig ab 01.05.2024. Alle Preise inkl. MwSt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-[var(--color-border)]">
|
||||
<th className="text-left py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
Tarif
|
||||
</th>
|
||||
<th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
<span className="flex items-center justify-center gap-1">
|
||||
<ArrowDown className="h-4 w-4" aria-hidden="true" />
|
||||
Download
|
||||
</span>
|
||||
</th>
|
||||
<th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
<span className="flex items-center justify-center gap-1">
|
||||
<ArrowUp className="h-4 w-4" aria-hidden="true" />
|
||||
Upload
|
||||
</span>
|
||||
</th>
|
||||
<th className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
Preis / Monat
|
||||
</th>
|
||||
<th className="py-[var(--spacing-md)] px-[var(--spacing-sm)]"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{kabelTarife.map((tarif) => (
|
||||
<tr
|
||||
key={tarif.name}
|
||||
className={`border-b border-[var(--color-border)] ${
|
||||
tarif.popular ? "bg-[var(--color-primary)]/5" : ""
|
||||
}`}
|
||||
>
|
||||
<td className="py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
<span className="font-medium">{tarif.name}</span>
|
||||
{tarif.popular && (
|
||||
<span className="ml-2 text-xs bg-[var(--color-primary)] text-[var(--color-background)] px-2 py-0.5 rounded-full">
|
||||
Beliebt
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.download} Mbit/s
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.upload} Mbit/s
|
||||
</td>
|
||||
<td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
€ {tarif.price}
|
||||
</td>
|
||||
<td className="py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-sm btn-outline"
|
||||
>
|
||||
Bestellen
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted mt-[var(--spacing-lg)]">
|
||||
Alle Tarife enthalten unlimitiertes Datenvolumen und IPv6-Adressen.
|
||||
Für die Tarife ab telenet.pro ist eine öffentliche IPv4-Adresse enthalten.
|
||||
Einmalige Installationskosten je nach Aufwand.
|
||||
</p>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Glasfaser-Tarife */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Zap className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Glasfaser-Internet</span>
|
||||
</div>
|
||||
<h2>Tarife für Glasfaser-Kunden</h2>
|
||||
<p className="text-muted mt-[var(--spacing-md)]">
|
||||
Symmetrische Bandbreite – gleich schnell hoch- wie runterladen. Tarife gültig ab 01.04.2025.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse bg-[var(--color-background)] rounded-[var(--radius-lg)]">
|
||||
<thead>
|
||||
<tr className="border-b border-[var(--color-border)]">
|
||||
<th className="text-left py-[var(--spacing-md)] px-[var(--spacing-lg)] font-semibold">
|
||||
Tarif
|
||||
</th>
|
||||
<th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
<span className="flex items-center justify-center gap-1">
|
||||
<ArrowDown className="h-4 w-4" aria-hidden="true" />
|
||||
Download
|
||||
</span>
|
||||
</th>
|
||||
<th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
<span className="flex items-center justify-center gap-1">
|
||||
<ArrowUp className="h-4 w-4" aria-hidden="true" />
|
||||
Upload
|
||||
</span>
|
||||
</th>
|
||||
<th className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
Preis / Monat
|
||||
</th>
|
||||
<th className="py-[var(--spacing-md)] px-[var(--spacing-lg)]"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{glasfaserTarife.map((tarif) => (
|
||||
<tr
|
||||
key={tarif.name + "-gf"}
|
||||
className={`border-b border-[var(--color-border)] last:border-b-0 ${
|
||||
tarif.popular ? "bg-[var(--color-primary)]/5" : ""
|
||||
}`}
|
||||
>
|
||||
<td className="py-[var(--spacing-md)] px-[var(--spacing-lg)]">
|
||||
<span className="font-medium">{tarif.name}</span>
|
||||
{tarif.popular && (
|
||||
<span className="ml-2 text-xs bg-[var(--color-primary)] text-[var(--color-background)] px-2 py-0.5 rounded-full">
|
||||
Empfohlen
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.download} Mbit/s
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.upload} Mbit/s
|
||||
</td>
|
||||
<td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
€ {tarif.price}
|
||||
</td>
|
||||
<td className="py-[var(--spacing-md)] px-[var(--spacing-lg)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-sm btn-outline"
|
||||
>
|
||||
Bestellen
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted mt-[var(--spacing-lg)]">
|
||||
Glasfaser bietet symmetrische Geschwindigkeiten – ideal für Homeoffice und Videokonferenzen.
|
||||
Alle Tarife ohne Servicepauschale mit unlimitiertem Datenvolumen.
|
||||
</p>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Business 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/misc/firmenkunden-96736712-5fa99704.jpg"
|
||||
alt="Geschäftskunde im Büro"
|
||||
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)]">
|
||||
<Building2 className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Business-Internet</span>
|
||||
</div>
|
||||
<h2>Maßgeschneiderte Lösungen für Ihr Unternehmen</h2>
|
||||
<p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
|
||||
Für Unternehmen erstellen wir individuelle Internet-Angebote
|
||||
inklusive passendem Service-Paket.
|
||||
</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>Dedizierte Bandbreite</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>Statische IP-Adressen</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>Erweiterte SLA-Optionen</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>Persönliche Betreuung</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Angebot anfragen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-foreground)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Welcher Tarif passt zu Ihnen?
|
||||
</h2>
|
||||
<p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Wir beraten Sie gerne persönlich und finden gemeinsam den idealen
|
||||
Internet-Tarif für Ihre Bedürfnisse.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Beratung anfragen
|
||||
</Link>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]"
|
||||
>
|
||||
+43 5672 5000
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user