286 lines
14 KiB
TypeScript
286 lines
14 KiB
TypeScript
import { Metadata } from "next";
|
||
import Link from "next/link";
|
||
import Image from "next/image";
|
||
import { Section } from "@/components/layout/Section";
|
||
import { Container } from "@/components/layout/Container";
|
||
import { Wifi, Check, Phone, ArrowRight } from "lucide-react";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "Internet",
|
||
description:
|
||
"Highspeed-Internet über Kabel oder Glasfaser. Schnell, stabil, unlimitiert – für Privat- und Geschäftskunden in Tirol.",
|
||
};
|
||
|
||
const kabelTarife = [
|
||
{
|
||
name: "telenet.hit",
|
||
preis: "€ 14,50",
|
||
download: "40 Mbit/s",
|
||
upload: "6 Mbit/s",
|
||
features: ["Keine Servicepauschale", "Unlimitierte Daten"],
|
||
},
|
||
{
|
||
name: "telenet.eco",
|
||
preis: "€ 19,00",
|
||
download: "60 Mbit/s",
|
||
upload: "8 Mbit/s",
|
||
features: ["Keine Servicepauschale", "Unlimitierte Daten"],
|
||
},
|
||
{
|
||
name: "telenet.fun",
|
||
preis: "€ 29,00",
|
||
download: "80 Mbit/s",
|
||
upload: "12 Mbit/s",
|
||
features: ["Keine Servicepauschale", "Unlimitierte Daten"],
|
||
},
|
||
{
|
||
name: "telenet.pro",
|
||
preis: "€ 39,00",
|
||
download: "100 Mbit/s",
|
||
upload: "14 Mbit/s",
|
||
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Öffentliche IPv4"],
|
||
highlight: true,
|
||
},
|
||
{
|
||
name: "telenet.mega",
|
||
preis: "€ 49,00",
|
||
download: "180 Mbit/s",
|
||
upload: "22 Mbit/s",
|
||
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Öffentliche IPv4"],
|
||
},
|
||
];
|
||
|
||
const glasfaserTarife = [
|
||
{
|
||
name: "telenet.eco",
|
||
preis: "€ 23,00",
|
||
download: "100 Mbit/s",
|
||
upload: "100 Mbit/s",
|
||
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch"],
|
||
},
|
||
{
|
||
name: "telenet.fun",
|
||
preis: "€ 29,00",
|
||
download: "200 Mbit/s",
|
||
upload: "200 Mbit/s",
|
||
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch"],
|
||
},
|
||
{
|
||
name: "telenet.pro",
|
||
preis: "€ 39,00",
|
||
download: "300 Mbit/s",
|
||
upload: "300 Mbit/s",
|
||
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch", "Öffentliche IPv4"],
|
||
highlight: true,
|
||
},
|
||
{
|
||
name: "telenet.mega",
|
||
preis: "€ 49,00",
|
||
download: "500 Mbit/s",
|
||
upload: "500 Mbit/s",
|
||
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch", "Öffentliche IPv4"],
|
||
},
|
||
];
|
||
|
||
export default function InternetPage() {
|
||
return (
|
||
<main>
|
||
{/* Hero Section */}
|
||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||
<Container>
|
||
<div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||
<div className="max-w-xl">
|
||
<div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
|
||
<Wifi size={32} className="text-[var(--color-background)]" />
|
||
</div>
|
||
<h1 className="mb-[var(--spacing-lg)]">
|
||
Highspeed-Internet
|
||
<span className="text-[var(--color-primary)]"> für Tirol</span>
|
||
</h1>
|
||
<p className="lead mb-[var(--spacing-2xl)]">
|
||
Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
|
||
Flexible Tarife ohne Servicepauschale – für Privat- und Geschäftskunden.
|
||
</p>
|
||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||
Jetzt beraten lassen
|
||
</Link>
|
||
</div>
|
||
<div className="relative">
|
||
<Image
|
||
src="/images/hero/internet-header-431619ac.jpg"
|
||
alt="Highspeed Internet Verbindung"
|
||
width={800}
|
||
height={600}
|
||
className="rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]"
|
||
priority
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Trust Elements */}
|
||
<Section variant="sm" className="border-b border-[var(--color-border)]">
|
||
<Container>
|
||
<div className="flex flex-wrap justify-center gap-[var(--spacing-xl)]">
|
||
{["Keine Servicepauschale", "Unlimitierte Daten", "IPv6 inklusive", "Regionaler Support"].map((feature) => (
|
||
<div key={feature} className="flex items-center gap-[var(--spacing-sm)]">
|
||
<Check size={18} className="text-[var(--color-primary)]" />
|
||
<span className="text-sm font-medium">{feature}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Kabel-Internet Section */}
|
||
<Section id="kabel">
|
||
<Container>
|
||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||
Tarife für Kabel-Kunden
|
||
</span>
|
||
<h2 className="mt-[var(--spacing-sm)]">Kabel-Internet</h2>
|
||
</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-[var(--spacing-lg)]">
|
||
{kabelTarife.map((tarif) => (
|
||
<div
|
||
key={tarif.name}
|
||
className={`card text-center ${tarif.highlight ? "ring-2 ring-[var(--color-primary)]" : ""}`}
|
||
>
|
||
{tarif.highlight && (
|
||
<span className="inline-block bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-medium px-[var(--spacing-sm)] py-[var(--spacing-xs)] rounded-full mb-[var(--spacing-md)]">
|
||
Empfohlen
|
||
</span>
|
||
)}
|
||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{tarif.name}</h3>
|
||
<p className="text-3xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
|
||
<p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
|
||
<div className="text-sm mb-[var(--spacing-md)]">
|
||
<p><strong>{tarif.download}</strong> Download</p>
|
||
<p><strong>{tarif.upload}</strong> Upload</p>
|
||
</div>
|
||
<ul className="stack-xs text-left text-sm mb-[var(--spacing-lg)]">
|
||
{tarif.features.map((feature) => (
|
||
<li key={feature} className="flex items-center gap-[var(--spacing-xs)]">
|
||
<Check size={14} className="text-[var(--color-primary)] shrink-0" />
|
||
<span>{feature}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<Link href="/kontakt" className="btn btn-outline btn-sm w-full">
|
||
Anfragen
|
||
</Link>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<p className="text-xs text-muted text-center mt-[var(--spacing-xl)]">
|
||
Tarife gültig ab 01.05.2024. Für die Installation fallen einmalige Installationskosten an.
|
||
</p>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Glasfaser-Internet Section */}
|
||
<Section id="glasfaser" 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">
|
||
Tarife für Glasfaser-Kunden
|
||
</span>
|
||
<h2 className="mt-[var(--spacing-sm)]">Glasfaser-Internet</h2>
|
||
<p className="lead max-w-2xl mx-auto mt-[var(--spacing-md)]">
|
||
Symmetrische Geschwindigkeiten – gleich schnell im Download und Upload.
|
||
</p>
|
||
</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-lg)] max-w-5xl mx-auto">
|
||
{glasfaserTarife.map((tarif) => (
|
||
<div
|
||
key={tarif.name + "-glas"}
|
||
className={`card text-center ${tarif.highlight ? "ring-2 ring-[var(--color-primary)]" : ""}`}
|
||
>
|
||
{tarif.highlight && (
|
||
<span className="inline-block bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-medium px-[var(--spacing-sm)] py-[var(--spacing-xs)] rounded-full mb-[var(--spacing-md)]">
|
||
Empfohlen
|
||
</span>
|
||
)}
|
||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{tarif.name}</h3>
|
||
<p className="text-3xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
|
||
<p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
|
||
<div className="text-sm mb-[var(--spacing-md)]">
|
||
<p><strong>{tarif.download}</strong> Download</p>
|
||
<p><strong>{tarif.upload}</strong> Upload</p>
|
||
</div>
|
||
<ul className="stack-xs text-left text-sm mb-[var(--spacing-lg)]">
|
||
{tarif.features.map((feature) => (
|
||
<li key={feature} className="flex items-center gap-[var(--spacing-xs)]">
|
||
<Check size={14} className="text-[var(--color-primary)] shrink-0" />
|
||
<span>{feature}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<Link href="/kontakt" className="btn btn-outline btn-sm w-full">
|
||
Anfragen
|
||
</Link>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<p className="text-xs text-muted text-center mt-[var(--spacing-xl)]">
|
||
Tarife gültig ab 01.04.2025. Für die Installation fallen einmalige Installationskosten an.
|
||
</p>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Business Section */}
|
||
<Section>
|
||
<Container>
|
||
<div className="max-w-3xl mx-auto text-center">
|
||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||
Für Geschäftskunden
|
||
</span>
|
||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||
Business-Internet
|
||
</h2>
|
||
<p className="text-muted mb-[var(--spacing-xl)]">
|
||
Gerne erstellen wir für Ihr Unternehmen ein maßgeschneidertes Business-Internet-Angebot
|
||
inkl. passendem Service-Paket. Schicken Sie uns einfach Ihre Anfrage.
|
||
</p>
|
||
<Link href="/kontakt" className="btn btn-primary">
|
||
Individuelle Lösung anfragen
|
||
<ArrowRight size={18} />
|
||
</Link>
|
||
</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)]">
|
||
Welcher Tarif passt zu Ihnen?
|
||
</h2>
|
||
<p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||
Wir beraten Sie gerne und finden die beste Lösung für Ihre Anforderungen.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||
<Link
|
||
href="/kontakt"
|
||
className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
|
||
>
|
||
Jetzt beraten lassen
|
||
</Link>
|
||
<a
|
||
href="tel:+43567612345"
|
||
className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
|
||
>
|
||
<Phone size={18} />
|
||
PLACEHOLDER: Telefon
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
</main>
|
||
);
|
||
}
|