225 lines
14 KiB
TypeScript
225 lines
14 KiB
TypeScript
|
||
import Link from "next/link";
|
||
import { Container } from "@/components/layout/Container";
|
||
import { Section } from "@/components/layout/Section";
|
||
|
||
export const metadata = {
|
||
title: "Highspeed Internet | TeleNetSystems",
|
||
description: "Surfen Sie mit bis zu 500 Mbit/s in Reutte. Faire Tarife für Kabel und Glasfaser für Privat und Business.",
|
||
};
|
||
|
||
export default function InternetPage() {
|
||
return (
|
||
<main>
|
||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||
<Container>
|
||
<h1 className="mb-[var(--spacing-md)]">
|
||
Highspeed Internet <span className="text-[color:var(--color-primary)]">für Tirol</span>
|
||
</h1>
|
||
<p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||
Stabil, extrem schnell und ohne versteckte Kosten. Wir bringen die Welt zu Ihnen nach Hause.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||
<Link href="#kabel" className="btn btn-primary">
|
||
Kabel-Tarife
|
||
</Link>
|
||
<Link href="#glasfaser" className="btn btn-secondary">
|
||
Glasfaser-Tarife
|
||
</Link>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Intro Info */}
|
||
<Section>
|
||
<Container className="text-center max-w-3xl">
|
||
<h2 className="mb-[var(--spacing-md)]">Warum TeleNetSystems Internet?</h2>
|
||
<p>
|
||
Wir bieten Ihnen echte Flatrates ohne Datenlimit. Keine Servicepauschale.
|
||
Ehrliche Bandbreiten und persönlicher Support direkt vor Ort in Reutte.
|
||
</p>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Kabel Tarife */}
|
||
<Section id="kabel" className="bg-[var(--color-muted)]">
|
||
<Container>
|
||
<h2 className="text-center mb-[var(--spacing-sm)]">Kabel-Internet Tarife</h2>
|
||
<p className="text-center mb-[var(--spacing-2xl)] text-[color:var(--color-muted-foreground)]">
|
||
Verfügbar überall dort, wo Sie unseren Kabelanschluss haben. (Gültig ab 01.05.2024)
|
||
</p>
|
||
|
||
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-[var(--spacing-md)]">
|
||
{/* Hit */}
|
||
<div className="card flex flex-col items-center bg-white">
|
||
<h3 className="text-xl font-bold mb-[var(--spacing-xs)]">hit</h3>
|
||
<div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€14,50</div>
|
||
<div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
|
||
<div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
|
||
<ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
|
||
<li><strong>40 Mbit/s</strong> Down</li>
|
||
<li><strong>6 Mbit/s</strong> Up</li>
|
||
<li>Daten: Unlimitiert</li>
|
||
</ul>
|
||
<Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
|
||
</div>
|
||
|
||
{/* Eco */}
|
||
<div className="card flex flex-col items-center bg-white relative overflow-hidden">
|
||
<div className="absolute top-0 right-0 bg-[var(--color-secondary)] text-white text-xs px-2 py-1">Tipp</div>
|
||
<h3 className="text-xl font-bold mb-[var(--spacing-xs)]">eco</h3>
|
||
<div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€19,00</div>
|
||
<div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
|
||
<div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
|
||
<ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
|
||
<li><strong>60 Mbit/s</strong> Down</li>
|
||
<li><strong>8 Mbit/s</strong> Up</li>
|
||
<li>Daten: Unlimitiert</li>
|
||
</ul>
|
||
<Link href="#kontakt" className="btn btn-primary btn-sm w-full">Bestellen</Link>
|
||
</div>
|
||
|
||
{/* Fun */}
|
||
<div className="card flex flex-col items-center bg-white">
|
||
<h3 className="text-xl font-bold mb-[var(--spacing-xs)]">fun</h3>
|
||
<div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€29,00</div>
|
||
<div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
|
||
<div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
|
||
<ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
|
||
<li><strong>80 Mbit/s</strong> Down</li>
|
||
<li><strong>12 Mbit/s</strong> Up</li>
|
||
<li>Daten: Unlimitiert</li>
|
||
</ul>
|
||
<Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
|
||
</div>
|
||
|
||
{/* Pro */}
|
||
<div className="card flex flex-col items-center bg-white">
|
||
<h3 className="text-xl font-bold mb-[var(--spacing-xs)]">pro</h3>
|
||
<div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€39,00</div>
|
||
<div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
|
||
<div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
|
||
<ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
|
||
<li><strong>100 Mbit/s</strong> Down</li>
|
||
<li><strong>14 Mbit/s</strong> Up</li>
|
||
<li>Public IPv4 Address</li>
|
||
</ul>
|
||
<Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
|
||
</div>
|
||
|
||
{/* Mega */}
|
||
<div className="card flex flex-col items-center bg-white">
|
||
<h3 className="text-xl font-bold mb-[var(--spacing-xs)]">mega</h3>
|
||
<div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€49,00</div>
|
||
<div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
|
||
<div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
|
||
<ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
|
||
<li><strong>180 Mbit/s</strong> Down</li>
|
||
<li><strong>22 Mbit/s</strong> Up</li>
|
||
<li>Public IPv4 Address</li>
|
||
</ul>
|
||
<Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Glasfaser Tarife */}
|
||
<Section id="glasfaser">
|
||
<Container>
|
||
<h2 className="text-center mb-[var(--spacing-sm)]">Glasfaser-Internet Tarife</h2>
|
||
<p className="text-center mb-[var(--spacing-2xl)] text-[color:var(--color-muted-foreground)]">
|
||
Die Zukunft der Geschwindigkeit. (Gültig ab 01.04.2025)
|
||
</p>
|
||
|
||
<div className="grid md:grid-cols-4 gap-[var(--spacing-md)]">
|
||
{/* Eco */}
|
||
<div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
|
||
<h3 className="text-xl font-bold mb-[var(--spacing-xs)]">eco</h3>
|
||
<div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€23,00</div>
|
||
<div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
|
||
<ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
|
||
<li><strong>100 Mbit/s</strong> Down</li>
|
||
<li><strong>100 Mbit/s</strong> Up</li>
|
||
<li>Symmetrisch!</li>
|
||
</ul>
|
||
<Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
|
||
</div>
|
||
|
||
{/* Fun */}
|
||
<div className="card flex flex-col items-center border-[color:var(--color-primary)]">
|
||
<h3 className="text-xl font-bold mb-[var(--spacing-xs)]">fun</h3>
|
||
<div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€29,00</div>
|
||
<div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
|
||
<ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
|
||
<li><strong>200 Mbit/s</strong> Down</li>
|
||
<li><strong>200 Mbit/s</strong> Up</li>
|
||
<li>Symmetrisch!</li>
|
||
</ul>
|
||
<Link href="#kontakt" className="btn btn-primary btn-sm w-full">Anfragen</Link>
|
||
</div>
|
||
|
||
{/* Pro */}
|
||
<div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
|
||
<h3 className="text-xl font-bold mb-[var(--spacing-xs)]">pro</h3>
|
||
<div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€39,00</div>
|
||
<div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
|
||
<ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
|
||
<li><strong>300 Mbit/s</strong> Down</li>
|
||
<li><strong>300 Mbit/s</strong> Up</li>
|
||
<li>Public IPv4 Address</li>
|
||
</ul>
|
||
<Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
|
||
</div>
|
||
|
||
{/* Mega */}
|
||
<div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
|
||
<h3 className="text-xl font-bold mb-[var(--spacing-xs)]">mega</h3>
|
||
<div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€49,00</div>
|
||
<div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
|
||
<ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
|
||
<li><strong>500 Mbit/s</strong> Down</li>
|
||
<li><strong>500 Mbit/s</strong> Up</li>
|
||
<li>Public IPv4 Address</li>
|
||
</ul>
|
||
<Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Business */}
|
||
<Section className="bg-[var(--color-muted)]">
|
||
<Container className="text-center">
|
||
<h2 className="mb-[var(--spacing-md)]">Internet für Unternehmen</h2>
|
||
<p className="max-w-2xl mx-auto mb-[var(--spacing-lg)]">
|
||
Sie benötigen garantierte Bandbreiten, SLA oder spezielle IP-Konfigurationen?
|
||
Wir erstellen Ihnen gerne ein maßgeschneidertes Angebot.
|
||
</p>
|
||
<Link href="#kontakt" className="btn btn-primary">
|
||
Business-Anfrage stellen
|
||
</Link>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Contact Anchor */}
|
||
<Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
|
||
<Container>
|
||
<h2 className="text-white mb-[var(--spacing-md)]">Jetzt Internet bestellen</h2>
|
||
<p className="lead text-white mb-[var(--spacing-xl)]">
|
||
Wir kümmern uns um die Installation.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||
<a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
|
||
📞 Anrufen
|
||
</a>
|
||
<a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
|
||
✉️ Tarif wählen
|
||
</a>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
</main>
|
||
);
|
||
}
|