feat: Implement core page structure with Header and Footer, add multiple content pages, and refine UI components and global styling.
This commit is contained in:
1elle1
@@ -0,0 +1,224 @@
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user