403 lines
16 KiB
TypeScript
403 lines
16 KiB
TypeScript
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>
|
||
</>
|
||
);
|
||
}
|