feat: Implement initial website structure, core pages, and layout components, including a redesigned homepage.
This commit is contained in:
1elle1
@@ -0,0 +1,272 @@
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
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="max-w-3xl">
|
||||
<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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user