SkeletonMan/telenetsystems-2026-02-03-v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: SkeletonMan:testing-v2-ueber-antigreavity
Branches Tags
SkeletonMan:main SkeletonMan:testing-v2-ueber-antigreavity SkeletonMan:testing-v3-ueber-antigreavity-gemini
...
pull from: SkeletonMan:testing-v3-ueber-antigreavity-gemini
Branches Tags
SkeletonMan:testing-v2-ueber-antigreavity SkeletonMan:testing-v3-ueber-antigreavity-gemini SkeletonMan:main

1 Commits
testing-v2 ... testing-v3

Author SHA1 Message Date
1elle1
0c2e9a81a6 feat: Implement core page structure with Header and Footer, add multiple content pages, and refine UI components and global styling. 2026-02-03 21:56:55 +01:00
17 changed files with 1184 additions and 58 deletions
Expand all files Collapse all files

56
app/datenschutz/page.tsx Normal file
View File

@@ -0,0 +1,56 @@
import { Container } from "@/components/layout/Container";
import { Section } from "@/components/layout/Section";
export const metadata = {
title: "Datenschutzerklärung | TeleNetSystems",
};
export default function DatenschutzPage() {
return (
<main>
<Section>
<Container className="max-w-3xl">
<h1 className="mb-[var(--spacing-lg)]">Datenschutzerklärung</h1>
<div className="prose">
<h2 className="heading-4 mt-[var(--spacing-md)] mb-[var(--spacing-sm)]">1. Datenschutz auf einen Blick</h2>
<h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Allgemeine Hinweise</h3>
<p>
Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert,
wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.
</p>
<h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Datenerfassung auf dieser Website</h3>
<p><strong>Wer ist verantwortlich für die Datenerfassung auf dieser Website?</strong></p>
<p>
Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem
Impressum dieser Website entnehmen.
</p>
<h2 className="heading-4 mt-[var(--spacing-md)] mb-[var(--spacing-sm)]">2. Allgemeine Hinweise und Pflichtinformationen</h2>
<h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Datenschutz</h3>
<p>
Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten
vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
</p>
<h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Hinweis zur verantwortlichen Stelle</h3>
<p>
Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:
</p>
<p className="mt-[var(--spacing-xs)]">
PLACEHOLDER: technical.legal.datenschutz.companyName<br />
PLACEHOLDER: technical.legal.datenschutz.street<br />
PLACEHOLDER: technical.legal.datenschutz.postalCode PLACEHOLDER: technical.legal.datenschutz.city
</p>
<p className="mt-[var(--spacing-xs)]">
Telefon: PLACEHOLDER: technical.legal.datenschutz.phone<br />
E-Mail: PLACEHOLDER: technical.legal.datenschutz.email
</p>
</div>
</Container>
</Section>
</main>
);
}

130
app/fernsehen/page.tsx Normal file
View File

@@ -0,0 +1,130 @@
import Link from "next/link";
import { Container } from "@/components/layout/Container";
import { Section } from "@/components/layout/Section";
export const metadata = {
title: "Kabelfernsehen | TeleNetSystems",
description: "Erleben Sie über 200 TV-Programme, 40 HDTV-Sender und beste Bildqualität mit TeleNetSystems in Reutte.",
};
export default function FernsehenPage() {
return (
<main>
{/* Hero */}
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
<Container>
<h1 className="mb-[var(--spacing-md)]">
Fernsehen <span className="text-[color:var(--color-primary)]">neu erleben</span>
</h1>
<p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
Brillante Bildqualität, riesige Sendervielfalt und kristallklarer Sound.
Holen Sie sich das Kino-Feeling direkt in Ihr Wohnzimmer.
</p>
<Link href="#kontakt" className="btn btn-primary btn-lg">
Jetzt anschließen lassen
</Link>
</Container>
</Section>
{/* Main Benefit */}
<Section>
<Container>
<div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
<div>
<h2 className="mb-[var(--spacing-md)]">Unterhaltung ohne Grenzen</h2>
<p className="mb-[var(--spacing-lg)]">
Mit unserem Kabelanschluss erhalten Sie Zugang zu einer riesigen Welt der Unterhaltung.
Egal ob Spielfilme, Sport, Dokumentationen oder Kinderprogramm – hier ist für jeden etwas dabei.
</p>
<ul className="mb-[var(--spacing-xl)] space-y-[var(--spacing-sm)]">
<li className="flex items-center gap-[var(--spacing-sm)]">
📺 <span><strong>Über 200 Programme</strong> digital empfangbar</span>
</li>
<li className="flex items-center gap-[var(--spacing-sm)]">
💎 <span>Davon rund <strong>40 Sender in HD-Qualität</strong></span>
</li>
<li className="flex items-center gap-[var(--spacing-sm)]">
📻 <span>Rund <strong>40 Radiosender</strong> inklusive</span>
</li>
</ul>
</div>
<div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] flex items-center justify-center aspect-video text-[color:var(--color-muted-foreground)] bg-[var(--color-muted)]">
PLACEHOLDER: TV Experience Image
</div>
</div>
</Container>
</Section>
{/* Pricing / Offer */}
<Section className="bg-[var(--color-muted)] text-center">
<Container>
<h2 className="mb-[var(--spacing-xl)]">Unser Angebot für Privatkunden</h2>
<div className="card max-w-lg mx-auto bg-white">
<h3 className="text-2xl font-bold mb-[var(--spacing-xs)]">TV Privat</h3>
<div className="text-4xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-md)]">
€ 16,47 <span className="text-base text-[color:var(--color-foreground)] font-normal">/ Monat</span>
</div>
<p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
inkl. MwSt
</p>
<ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] max-w-xs mx-auto">
<li>✅ 200+ TV-Sender</li>
<li>✅ 40+ HD-Sender</li>
<li>✅ 40+ Radiosender</li>
<li>✅ Keine Satellitenschüssel nötig</li>
<li>✅ Beste Bild- & Tonqualität</li>
</ul>
<Link href="#kontakt" className="btn btn-primary w-full">
Jetzt bestellen
</Link>
</div>
</Container>
</Section>
{/* Business & Pay TV */}
<Section>
<Container>
<div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] text-center">
<div>
<h3 className="mb-[var(--spacing-md)]">Für Unternehmen (TV Business)</h3>
<p className="mb-[var(--spacing-md)]">
Hotel, Krankenhaus oder Büro? Wir bieten maßgeschneiderte TV-Lösungen für Ihren Betrieb.
</p>
<Link href="#kontakt" className="btn btn-outline">
Individuelles Angebot anfragen
</Link>
</div>
<div>
<h3 className="mb-[var(--spacing-md)]">Pay TV & Extras</h3>
<p className="mb-[var(--spacing-md)]">
Sie möchten noch mehr? Exklusive Filme, Serien und Premium-Sport in HD/UHD auf Anfrage.
</p>
<Link href="#kontakt" className="btn btn-outline">
Pay-TV Optionen prüfen
</Link>
</div>
</div>
</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)]">Interessiert?</h2>
<p className="lead text-white mb-[var(--spacing-xl)]">
Kontaktieren Sie uns für Ihren TV-Anschluss.
</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)]">
✉️ E-Mail schreiben
</a>
</div>
</Container>
</Section>
</main>
);
}

54
app/impressum/page.tsx Normal file
View File

@@ -0,0 +1,54 @@
import { Container } from "@/components/layout/Container";
import { Section } from "@/components/layout/Section";
export const metadata = {
title: "Impressum | TeleNetSystems",
};
export default function ImpressumPage() {
return (
<main>
<Section>
<Container className="max-w-3xl">
<h1 className="mb-[var(--spacing-lg)]">Impressum</h1>
<div className="prose">
<p><strong>Angaben gemäß § 5 TMG:</strong></p>
<p>
PLACEHOLDER: technical.legal.impressum.companyName<br />
PLACEHOLDER: technical.legal.impressum.street<br />
PLACEHOLDER: technical.legal.impressum.postalCode PLACEHOLDER: technical.legal.impressum.city<br />
PLACEHOLDER: technical.legal.impressum.country
</p>
<p className="mt-[var(--spacing-md)]"><strong>Kontakt:</strong></p>
<p>
Telefon: PLACEHOLDER: technical.legal.impressum.phone<br />
E-Mail: PLACEHOLDER: technical.legal.impressum.email
</p>
<p className="mt-[var(--spacing-md)]"><strong>Registereintrag:</strong></p>
<p>
Eintragung im Handelsregister.<br />
Registergericht: PLACEHOLDER<br />
Registernummer: PLACEHOLDER: technical.legal.impressum.register
</p>
<p className="mt-[var(--spacing-md)]"><strong>Umsatzsteuer:</strong></p>
<p>
Umsatzsteuer-Identifikationsnummer gemäß §27 a Umsatzsteuergesetz:<br />
PLACEHOLDER: technical.legal.impressum.vatId
</p>
<p className="mt-[var(--spacing-md)]"><strong>Streitschlichtung</strong></p>
<p>
Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: https://ec.europa.eu/consumers/odr.<br />
Unsere E-Mail-Adresse finden Sie oben im Impressum.
</p>
</div>
</Container>
</Section>
</main>
);
}

224
app/internet/page.tsx Normal file
View File

@@ -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>
);
}

19
app/layout.tsx
View File

@@ -1,5 +1,8 @@
import type { Metadata, Viewport } from "next";
import "@/theme/globals.css";
import "@/theme/stylesheet.css";
import { Header } from "@/components/layout/Header";
import { Footer } from "@/components/layout/Footer";
/**
* Root Layout
@@ -23,8 +26,8 @@ import "@/theme/globals.css";
// - description: from spec.brand.description
// - keywords: from spec.seo.primaryKeywords
export const metadata: Metadata = {
title: "Website",
description: "Generated website",
title: "TeleNetSystems | Telekom & IT aus Tirol",
description: "TeleNetSystems - Ihr regionaler Partner für Internet, Fernsehen, Telefonie und IT-Services in Reutte und Umgebung.",
robots: {
index: true,
follow: true,
@@ -32,7 +35,7 @@ export const metadata: Metadata = {
// Open Graph tags - update based on spec
openGraph: {
type: "website",
locale: "de_DE",
locale: "de_AT",
// title, description, images will be set per project
},
};
@@ -41,7 +44,7 @@ export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
// TODO: Update themeColor from spec.brand.colors.primary or design_tokens
themeColor: "#ffffff",
themeColor: "#f39210",
};
/**
@@ -92,7 +95,13 @@ export default function RootLayout({
Example with smooth scrolling:
<html lang={locale} className="scroll-smooth">
*/}
<body>{children}</body>
<body className="flex min-h-screen flex-col">
<Header />
<div className="flex-1">
{children}
</div>
<Footer />
</body>
</html>
);
}

114
app/leistungen/page.tsx Normal file
View File

@@ -0,0 +1,114 @@
import Link from "next/link";
import { Container } from "@/components/layout/Container";
import { Section } from "@/components/layout/Section";
export const metadata = {
title: "IT-Services & Leistungen | TeleNetSystems",
description: "Professionelle IT-Dienstleistungen in Reutte. Netzwerk, Hardware, Wartung und Support für Firmen und Privat.",
};
export default function LeistungenPage() {
return (
<main>
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
<Container>
<h1 className="mb-[var(--spacing-md)]">
Mehr als nur Kommunikation. <br />
<span className="text-[color:var(--color-primary)]">Ihr IT-Partner vor Ort.</span>
</h1>
<p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
Wir vernetzen nicht nur Ihr Zuhause, wir sorgen auch dafür, dass Ihre Technik reibungslos läuft.
Von der Planung bis zur Wartung.
</p>
<Link href="#it-services" className="btn btn-primary btn-lg">
Zu den IT-Services
</Link>
</Container>
</Section>
{/* Overview Core Services */}
<Section>
<Container>
<div className="text-center mb-[var(--spacing-2xl)]">
<h2>Unsere Kernkompetenzen</h2>
</div>
<div className="grid md:grid-cols-3 gap-[var(--spacing-xl)]">
<div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
<h3 className="heading-5 mb-[var(--spacing-sm)]">Internet & Glasfaser</h3>
<p className="mb-[var(--spacing-md)] text-sm">Highspeed-Verbindungen für jede Anforderung.</p>
<Link href="/internet" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
</div>
<div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
<h3 className="heading-5 mb-[var(--spacing-sm)]">Fernsehen</h3>
<p className="mb-[var(--spacing-md)] text-sm">TV-Genuss mit über 200 Programmen.</p>
<Link href="/fernsehen" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
</div>
<div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
<h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie</h3>
<p className="mb-[var(--spacing-md)] text-sm">Kostengünstig telefonieren über Kabel.</p>
<Link href="/telefonie" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
</div>
</div>
</Container>
</Section>
{/* IT Services Detail */}
<Section id="it-services" className="bg-[var(--color-muted)]">
<Container>
<div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)]">
<div>
<h2 className="mb-[var(--spacing-lg)]">Unsere IT-Dienstleistungen</h2>
<div className="space-y-[var(--spacing-xl)]">
<div>
<h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Netzwerktechnik</h3>
<p>
Planung und Installation von Firmennetzwerken, WLAN-Ausleuchtung, VPN-Standortvernetzung und Server-Schränken.
Wir sorgen für eine stabile Infrastruktur.
</p>
</div>
<div>
<h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Hardware & Software</h3>
<p>
Beratung und Verkauf von PCs, Laptops, Druckern und Zubehör. Installation von Betriebssystemen, Office-Lösungen
und Antivirus-Software.
</p>
</div>
<div>
<h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Reparatur & Wartung</h3>
<p>
Ihr PC streikt? Wir reparieren Hardware-Defekte, entfernen Viren und rüsten alte Geräte auf.
Gerne auch per Fernwartung für schnelle Hilfe.
</p>
</div>
</div>
</div>
<div className="flex flex-col gap-[var(--spacing-md)]">
<div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] aspect-video flex items-center justify-center bg-[var(--color-muted)] text-[color:var(--color-muted-foreground)]">
PLACEHOLDER: IT Hardware Image
</div>
<div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] aspect-video flex items-center justify-center bg-[var(--color-muted)] text-[color:var(--color-muted-foreground)]">
PLACEHOLDER: Server Room Image
</div>
</div>
</div>
</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)]">IT-Probleme? Wir helfen.</h2>
<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)]">
📞 05672 / PLACEHOLDER
</a>
<a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
✉️ support@tnr.at
</a>
</div>
</Container>
</Section>
</main>
);
}

162
app/page.tsx
View File

@@ -1,12 +1,170 @@
import Link from "next/link";
import { Container } from "@/components/layout/Container";
import { Section } from "@/components/layout/Section";
export default function Page() {
export default function Home() {
return (
<main>
{/* Hero Section */}
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
<Container>
<h1 className="mb-[var(--spacing-md)]">
Ihr Partner für Telekom & IT <br />
<span className="text-[color:var(--color-primary)]">in Reutte & Umgebung</span>
</h1>
<p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
Highspeed-Internet, brillantes Fernsehen und professionelle IT-Lösungen aus einer Hand.
Regional, persönlich und zuverlässig seit 1976.
</p>
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
<Link href="#kontakt" className="btn btn-primary btn-lg">
Jetzt beraten lassen
</Link>
<Link href="/internet" className="btn btn-outline btn-lg">
Internet-Tarife prüfen
</Link>
</div>
</Container>
</Section>
{/* Services Section */}
<Section>
<Container>
<p>Ready</p>
<div className="text-center mb-[var(--spacing-2xl)]">
<h2 className="mb-[var(--spacing-sm)]">Rundum versorgt</h2>
<p className="text-[color:var(--color-muted-foreground)]">
Alles, was Sie für digitale Kommunikation benötigen.
</p>
</div>
<div className="grid md:grid-cols-3 gap-[var(--spacing-xl)]">
{/* Internet */}
<div className="card text-center transition-transform hover:-translate-y-1">
<div className="mb-[var(--spacing-md)] text-4xl">🚀</div>
<h3 className="heading-4 mb-[var(--spacing-sm)]">Highspeed Internet</h3>
<p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
Egal ob Kabel oder Glasfaser – surfen Sie mit bis zu 500 Mbit/s. Stabil und unlimitiert.
</p>
<Link href="/internet" className="btn btn-secondary w-full">
Zu den Tarifen
</Link>
</div>
{/* Fernsehen */}
<div className="card text-center transition-transform hover:-translate-y-1">
<div className="mb-[var(--spacing-md)] text-4xl">📺</div>
<h3 className="heading-4 mb-[var(--spacing-sm)]">Kabelfernsehen</h3>
<p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
Über 200 Programme, davon 40 in HD. Beste Bildqualität direkt aus der Region.
</p>
<Link href="/fernsehen" className="btn btn-secondary w-full">
Sender entdecken
</Link>
</div>
{/* Telefonie */}
<div className="card text-center transition-transform hover:-translate-y-1">
<div className="mb-[var(--spacing-md)] text-4xl">📞</div>
<h3 className="heading-4 mb-[var(--spacing-sm)]">Telefonie</h3>
<p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
Günstig telefonieren über Ihren Kabelanschluss. Keine Grundgebühr bei Internet-Kombi.
</p>
<Link href="/telefonie" className="btn btn-secondary w-full">
Mehr erfahren
</Link>
</div>
</div>
</Container>
</Section>
{/* IT Services Teaser */}
<Section className="bg-[var(--color-muted)]">
<Container>
<div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
<div>
<h2 className="mb-[var(--spacing-md)]">
Professionelle IT-Lösungen <br /> für Unternehmen & Privat
</h2>
<p className="mb-[var(--spacing-lg)]">
Computer-Probleme? Netzwerk-Einrichtung? Wir sind Ihre IT-Experten vor Ort.
Von der Reparatur Ihres Laptops bis zur Planung komplexer Firmennetzwerke.
</p>
<ul className="mb-[var(--spacing-xl)] space-y-[var(--spacing-sm)]">
<li className="flex items-center gap-[var(--spacing-sm)]">
✅ <span>Schnelle Fernwartung und Vor-Ort-Service</span>
</li>
<li className="flex items-center gap-[var(--spacing-sm)]">
✅ <span>Netzwerk- und Serverplanung</span>
</li>
<li className="flex items-center gap-[var(--spacing-sm)]">
✅ <span>Verkauf & Reparatur von Hardware</span>
</li>
</ul>
<Link href="/leistungen" className="btn btn-primary">
Zu den IT-Services
</Link>
</div>
<div className="bg-white p-[var(--spacing-md)] rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)] rotate-1 hover:rotate-0 transition-transform duration-500">
{/* Placeholder styled as a media frame */}
<div className="aspect-video bg-[var(--color-muted)] rounded-[var(--radius-md)] flex flex-col items-center justify-center text-[color:var(--color-muted-foreground)] border-2 border-dashed border-[var(--color-border)]">
<span className="text-4xl mb-2">📸</span>
<span className="font-medium">IT-Service vor Ort</span>
</div>
<p className="text-xs text-[color:var(--color-muted-foreground)] text-center mt-[var(--spacing-sm)]">
Symbolbild: Unser Team bei der Netzwerk-Installation
</p>
</div>
</div>
</Container>
</Section>
{/* USPs / Trust Section */}
<Section>
<Container>
<h2 className="text-center mb-[var(--spacing-2xl)]">Warum TeleNetSystems?</h2>
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
<div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
<div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">1976</div>
<p className="font-semibold text-[color:var(--color-foreground)]">Gründung</p>
<p className="text-sm text-[color:var(--color-muted-foreground)]">Erfahrung seit 50 Jahren</p>
</div>
<div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
<div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">100%</div>
<p className="font-semibold text-[color:var(--color-foreground)]">Tirol</p>
<p className="text-sm text-[color:var(--color-muted-foreground)]">Regional aus Reutte</p>
</div>
<div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
<div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">24h</div>
<p className="font-semibold text-[color:var(--color-foreground)]">Support</p>
<p className="text-sm text-[color:var(--color-muted-foreground)]">Störungsdienst</p>
</div>
<div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
<div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">Top</div>
<p className="font-semibold text-[color:var(--color-foreground)]">Service</p>
<p className="text-sm text-[color:var(--color-muted-foreground)]">Persönlicher Ansprechpartner</p>
</div>
</div>
</Container>
</Section>
{/* Contact CTA */}
<Section id="kontakt" className="bg-[var(--color-primary)] text-[color:var(--color-background)]">
<Container className="text-center">
<h2 className="text-[color:var(--color-background)] mb-[var(--spacing-md)]">
Noch Fragen? Wir sind für Sie da.
</h2>
<p className="text-xl mb-[var(--spacing-xl)] opacity-90">
Rufen Sie uns an oder schreiben Sie uns. Wir beraten Sie gerne persönlich.
</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)]">
✉️ E-Mail schreiben
</a>
</div>
</Container>
</Section>
</main>

133
app/telefonie/page.tsx Normal file
View File

@@ -0,0 +1,133 @@
import Link from "next/link";
import { Container } from "@/components/layout/Container";
import { Section } from "@/components/layout/Section";
export const metadata = {
title: "Telefonie Tarife | TeleNetSystems",
description: "Günstig telefonieren über Ihren Kabelanschluss. Privat- und Business-Tarife in Reutte.",
};
export default function TelefoniePage() {
return (
<main>
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
<Container>
<h1 className="mb-[var(--spacing-md)]">
Klar verständlich. <span className="text-[color:var(--color-primary)]">Einfach günstig.</span>
</h1>
<p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
Telefonieren Sie in bester Qualität über Ihren bestehenden Kabelanschluss.
Ideal als Ergänzung zu Ihrem Internet-Paket.
</p>
<Link href="#tarife" className="btn btn-primary btn-lg">
Tarife ansehen
</Link>
</Container>
</Section>
<Section id="tarife">
<Container>
<div className="text-center mb-[var(--spacing-2xl)]">
<h2>Unsere Telefonie-Tarife</h2>
<p className="text-[color:var(--color-muted-foreground)]">Fair abgerechnet, ohne versteckte Kosten.</p>
</div>
<div className="grid md:grid-cols-3 gap-[var(--spacing-xl)] max-w-5xl mx-auto">
{/* Zero (With Internet) */}
<div className="card text-center border-[color:var(--color-primary)] shadow-[var(--shadow-md)]">
<div className="bg-[var(--color-primary)] text-white text-xs py-1 px-3 rounded-full inline-block mb-[var(--spacing-sm)]">Empfehlung</div>
<h3 className="heading-4 mb-[var(--spacing-xs)]">zero</h3>
<p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(in Kombi mit Internet)</p>
<div className="text-4xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-md)]">
€ 0,00
</div>
<p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
Grundgebühr pro Monat
</p>
<ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] mx-auto inline-block">
<li>✅ Keine Grundgebühr!</li>
<li>📞 Festnetz AT: ab 2,4 Cent/min</li>
<li>🎯 Ideal für Gelegenheitsnutzer</li>
</ul>
<Link href="#kontakt" className="btn btn-primary w-full">Bestellen</Link>
</div>
{/* Zero (Solo) */}
<div className="card text-center">
<h3 className="heading-4 mb-[var(--spacing-xs)]">zero</h3>
<p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(ohne Internet)</p>
<div className="text-4xl font-bold text-[color:var(--color-neutral)] mb-[var(--spacing-md)]">
€ 5,00
</div>
<p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
Grundgebühr pro Monat
</p>
<ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] mx-auto inline-block">
<li>✅ Günstige Grundgebühr</li>
<li>📞 Festnetz AT: ab 2,4 Cent/min</li>
<li>🔌 Nur Kabelanschluss nötig</li>
</ul>
<Link href="#kontakt" className="btn btn-outline w-full">Bestellen</Link>
</div>
{/* Business */}
<div className="card text-center">
<h3 className="heading-4 mb-[var(--spacing-xs)]">business</h3>
<p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(für Unternehmen)</p>
<div className="text-4xl font-bold text-[color:var(--color-neutral)] mb-[var(--spacing-md)]">
€ 8,90
</div>
<p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
Grundgebühr pro Monat
</p>
<ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] mx-auto inline-block">
<li>✅ Professionelle Lösung</li>
<li>📞 Festnetz AT: ab 3,24 Cent/min</li>
<li>👔 Für Firmenkunden</li>
</ul>
<Link href="#kontakt" className="btn btn-outline w-full">Anfragen</Link>
</div>
</div>
</Container>
</Section>
<Section className="bg-[var(--color-muted)]">
<Container>
<div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] items-center">
<div>
<h3 className="mb-[var(--spacing-md)]">Rufnummernmitnahme? Kein Problem!</h3>
<p className="mb-[var(--spacing-md)]">
Sie hängen an Ihrer alten Nummer? Wir auch. Deshalb übernehmen wir gerne die Portierung Ihrer bestehenden Festnetznummer zu uns.
</p>
<p className="text-sm text-[color:var(--color-muted-foreground)]">
Abhängig von Ihrem bisherigen Anbieter können Portierungskosten entstehen. Wir beraten Sie gerne zum Ablauf.
</p>
</div>
<div className="flex justify-center">
<div className="bg-white p-[var(--spacing-lg)] rounded-[var(--radius-lg)] shadow-[var(--shadow-sm)] rotate-3">
<div className="text-6xl mb-2">☎️</div>
<div className="font-bold">Ihre Nummer</div>
<div className="text-sm">bleibt gleich.</div>
</div>
</div>
</div>
</Container>
</Section>
<Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
<Container>
<h2 className="text-white mb-[var(--spacing-md)]">Jetzt Telefonie anmelden</h2>
<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)]">
✉️ E-Mail schreiben
</a>
</div>
</Container>
</Section>
</main>
);
}

82
app/ueber-uns/page.tsx Normal file
View File

@@ -0,0 +1,82 @@
import Link from "next/link";
import { Container } from "@/components/layout/Container";
import { Section } from "@/components/layout/Section";
export const metadata = {
title: "Über uns | TeleNetSystems",
description: "TeleNetSystems GmbH - Ihr regionaler Telekommunikationsanbieter in Reutte seit 1976.",
};
export default function UeberUnsPage() {
return (
<main>
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
<Container>
<h1 className="mb-[var(--spacing-md)]">
Regional. Persönlich. <span className="text-[color:var(--color-primary)]">Verlässlich.</span>
</h1>
<p className="lead max-w-2xl mx-auto">
Seit 1976 verbinden wir Menschen in der Region Reutte.
</p>
</Container>
</Section>
<Section>
<Container>
<div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center mb-[var(--spacing-2xl)]">
<div className="order-2 md:order-1">
<div className="aspect-square bg-[var(--color-muted)] rounded-[var(--radius-lg)] flex items-center justify-center text-[color:var(--color-muted-foreground)]">
PLACEHOLDER: Historic Image / Company Building
</div>
</div>
<div className="order-1 md:order-2">
<h2 className="mb-[var(--spacing-md)]">Unsere Geschichte</h2>
<p className="mb-[var(--spacing-md)]">
Die Telenet Systems GmbH blickt auf eine lange Tradition zurück. Gegründet 1976, haben wir uns von einem lokalen Anbieter für
Antennen- und Kabelfernsehen zu einem modernen Full-Service-Provider entwickelt.
</p>
<p className="mb-[var(--spacing-md)]">
In einer Zeit, in der Technologie immer komplexer wurde, war unser Ziel immer einfach: Technik verständlich und nutzbar zu machen.
Heute versorgen wir Haushalte und Unternehmen im gesamten Bezirk Reutte mit Highspeed-Internet, digitalem Fernsehen und
Telefonie.
</p>
</div>
</div>
<div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
<div>
<h2 className="mb-[var(--spacing-md)]">Unsere Philosophie</h2>
<p className="mb-[var(--spacing-md)]">
Wir sind kein anonymer Konzern mit Call-Center im Ausland. Wir sind Ihre Nachbarn.
Unsere Mitarbeiter leben in der Region und kennen die Anforderungen vor Ort.
</p>
<ul className="space-y-[var(--spacing-sm)]">
<li className="flex items-center gap-[var(--spacing-sm)]">✅ Echte Ansprechpartner</li>
<li className="flex items-center gap-[var(--spacing-sm)]">✅ Schnelle Reaktionszeiten</li>
<li className="flex items-center gap-[var(--spacing-sm)]">✅ Handschlagqualität</li>
</ul>
</div>
<div>
<div className="aspect-video bg-[var(--color-muted)] rounded-[var(--radius-lg)] flex items-center justify-center text-[color:var(--color-muted-foreground)]">
PLACEHOLDER: Team Image
</div>
</div>
</div>
</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)]">Werden Sie Teil unseres Netzes</h2>
<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)]">
📞 Kontakt aufnehmen
</a>
</div>
</Container>
</Section>
</main>
);
}

12
components/layout/Container.tsx
View File

@@ -1,19 +1,27 @@
import type { ElementType, ReactNode } from "react";
import React from "react"; // Added import for React to use React.HTMLAttributes
interface ContainerProps {
interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
children: ReactNode;
className?: string;
as?: ElementType;
variant?: "narrow" | "wide"; // Add variant support
}
export function Container({
children,
className = "",
as: Tag = "div",
variant,
...props
}: ContainerProps) {
const variantClass = variant === "narrow" ? "container--narrow" :
variant === "wide" ? "container--wide" : "";
return (
<Tag
className={`mx-auto w-full max-w-[var(--container-max-width)] px-[var(--container-padding-x)] ${className}`.trim()}
className={`container ${variantClass} ${className}`.trim()}
{...props}
>
{children}
</Tag>

54
components/layout/Footer.tsx Normal file
View File

@@ -0,0 +1,54 @@
import Link from "next/link";
import { Container } from "./Container";
export function Footer() {
const currentYear = new Date().getFullYear();
return (
<footer className="bg-[var(--color-muted)] border-t border-[color:var(--color-border)] py-[var(--spacing-xl)] mt-auto">
<Container>
<div className="grid grid-cols-1 md:grid-cols-4 gap-[var(--spacing-xl)] mb-[var(--spacing-xl)]">
<div className="md:col-span-1">
<Link href="/" className="font-heading text-lg font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)] block">
TeleNetSystems
</Link>
<p className="text-sm text-[color:var(--color-muted-foreground)]">
Ihr regionaler Partner für Internet, TV und Telefonie in Reutte & Umgebung.
</p>
</div>
<div>
<h4 className="font-bold mb-[var(--spacing-md)]">Produkte</h4>
<ul className="space-y-[var(--spacing-xs)] text-sm">
<li><Link href="/fernsehen" className="hover:text-[color:var(--color-primary)]">Fernsehen</Link></li>
<li><Link href="/internet" className="hover:text-[color:var(--color-primary)]">Internet</Link></li>
<li><Link href="/telefonie" className="hover:text-[color:var(--color-primary)]">Telefonie</Link></li>
</ul>
</div>
<div>
<h4 className="font-bold mb-[var(--spacing-md)]">Unternehmen</h4>
<ul className="space-y-[var(--spacing-xs)] text-sm">
<li><Link href="/ueber-uns" className="hover:text-[color:var(--color-primary)]">Über uns</Link></li>
<li><Link href="/leistungen" className="hover:text-[color:var(--color-primary)]">Leistungen</Link></li>
<li><Link href="#kontakt" className="hover:text-[color:var(--color-primary)]">Kontakt</Link></li>
</ul>
</div>
<div>
<h4 className="font-bold mb-[var(--spacing-md)]">Rechtliches</h4>
<ul className="space-y-[var(--spacing-xs)] text-sm">
<li><Link href="/impressum" className="hover:text-[color:var(--color-primary)]">Impressum</Link></li>
<li><Link href="/datenschutz" className="hover:text-[color:var(--color-primary)]">Datenschutz</Link></li>
</ul>
</div>
</div>
<div className="border-t border-[color:var(--color-border)] pt-[var(--spacing-md)] text-center text-sm text-[color:var(--color-muted-foreground)]">
&copy; {currentYear} TeleNetSystems GmbH. Alle Rechte vorbehalten.
</div>
</Container>
</footer>
);
}

41
components/layout/Header.tsx Normal file
View File

@@ -0,0 +1,41 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Container } from "./Container";
import { Button } from "../ui/Button";
const navLinks = [
{ href: "/fernsehen", label: "Fernsehen" },
{ href: "/internet", label: "Internet" },
{ href: "/telefonie", label: "Telefonie" },
{ href: "/leistungen", label: "Leistungen" },
{ href: "/ueber-uns", label: "Über uns" },
];
export function Header() {
return (
<header className="border-b border-[color:var(--color-border)] sticky top-0 z-50 bg-[var(--color-background)]/80 backdrop-blur-md">
<Container className="flex h-16 items-center justify-between">
<Link href="/" className="font-heading text-xl font-bold text-[color:var(--color-primary)]">
TeleNetSystems
</Link>
<nav className="hidden md:flex gap-6">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
className="text-sm font-medium hover:text-[color:var(--color-primary)] transition-colors"
>
{link.label}
</Link>
))}
</nav>
<div className="flex items-center gap-4">
<Link href="#kontakt" className="btn btn-primary btn-sm">
Jetzt beraten lassen
</Link>
</div>
</Container>
</header>
);
}

13
components/layout/Section.tsx
View File

@@ -1,19 +1,28 @@
import type { ElementType, ReactNode } from "react";
interface SectionProps {
interface SectionProps extends React.HTMLAttributes<HTMLElement> {
children: ReactNode;
className?: string;
as?: ElementType;
variant?: "sm" | "lg" | "hero" | "flush";
}
export function Section({
children,
className = "",
as: Tag = "section",
variant,
...props
}: SectionProps) {
const variantClass = variant === "sm" ? "section--sm" :
variant === "lg" ? "section--lg" :
variant === "hero" ? "section--hero" :
variant === "flush" ? "section--flush" : "";
return (
<Tag
className={`py-[var(--section-spacing-y)] ${className}`.trim()}
className={`section ${variantClass} ${className}`.trim()}
{...props}
>
{children}
</Tag>

36
components/ui/Button.tsx
View File

@@ -1,42 +1,34 @@
import type { ButtonHTMLAttributes, ReactNode } from "react";
type ButtonVariant = "primary" | "secondary" | "ghost";
type ButtonSize = "sm" | "md" | "lg";
type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
type ButtonSize = "sm" | "lg";
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
children: ReactNode;
variant?: ButtonVariant;
size?: ButtonSize;
className?: string; // Explicitly allow className
}
const baseClasses =
"inline-flex items-center justify-center font-medium rounded-[var(--radius-md)] transition-all duration-[var(--duration-normal)] ease-[var(--easing-default)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--color-primary)] disabled:pointer-events-none disabled:opacity-50";
const variantClasses: Record<ButtonVariant, string> = {
primary:
"bg-[var(--color-primary)] text-[color:var(--color-background)] hover:opacity-90",
secondary:
"bg-[var(--color-muted)] text-[color:var(--color-foreground)] border border-[color:var(--color-border)] hover:opacity-80",
ghost:
"bg-transparent text-[color:var(--color-foreground)] hover:bg-[var(--color-muted)]",
};
const sizeClasses: Record<ButtonSize, string> = {
sm: "px-[var(--spacing-sm)] py-[var(--spacing-xs)] text-[length:var(--font-size-sm)]",
md: "px-[var(--spacing-md)] py-[var(--spacing-sm)] text-[length:var(--font-size-base)]",
lg: "px-[var(--spacing-lg)] py-[var(--spacing-md)] text-[length:var(--font-size-lg)]",
};
export function Button({
children,
variant = "primary",
size = "md",
size,
className = "",
...props
}: ButtonProps) {
// Construct class names based on stylesheet.css
const variantClass = variant === "primary" ? "btn-primary" :
variant === "secondary" ? "btn-secondary" :
variant === "outline" ? "btn-outline" :
variant === "ghost" ? "btn-ghost" : "";
const sizeClass = size === "sm" ? "btn-sm" :
size === "lg" ? "btn-lg" : "";
return (
<button
className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`.trim()}
className={`btn ${variantClass} ${sizeClass} ${className}`.trim()}
{...props}
>
{children}

2
components/ui/Card.tsx
View File

@@ -13,7 +13,7 @@ export function Card({
}: CardProps) {
return (
<Tag
className={`rounded-[var(--radius-md)] border border-[color:var(--color-border)] shadow-[var(--shadow-sm)] p-[var(--spacing-lg)] ${className}`.trim()}
className={`card ${className}`.trim()}
>
{children}
</Tag>

5
theme/globals.css
View File

@@ -7,7 +7,8 @@
:root {
/* ── Colors ──────────────────────────────────────── */
--color-primary: #f39210;
--color-secondary: #f39210;
--color-secondary: #1e293b;
/* Slate 800 - High contrast to primary orange */
--color-accent: #eb5c24;
--color-neutral: #6b7280;
--color-background: #ffffff;
@@ -92,4 +93,4 @@
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
}
}

105
theme/stylesheet.css
View File

@@ -15,7 +15,9 @@
/* ── Base Resets ───────────────────────────────────── */
*, *::before, *::after {
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
@@ -86,43 +88,54 @@ body {
/* .heading-* Klassen gestylt werden. */
/* VERBOTEN: style={{ fontSize: ... }} oder harte px */
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
color: var(--color-foreground);
}
h1, .heading-1 {
h1,
.heading-1 {
font-size: var(--text-5xl);
line-height: var(--text-5xl-line-height);
letter-spacing: var(--text-5xl-letter-spacing);
}
h2, .heading-2 {
h2,
.heading-2 {
font-size: var(--text-4xl);
line-height: var(--text-4xl-line-height);
letter-spacing: var(--text-4xl-letter-spacing);
}
h3, .heading-3 {
h3,
.heading-3 {
font-size: var(--text-3xl);
line-height: var(--text-3xl-line-height);
letter-spacing: var(--text-3xl-letter-spacing);
}
h4, .heading-4 {
h4,
.heading-4 {
font-size: var(--text-2xl);
line-height: var(--text-2xl-line-height);
letter-spacing: var(--text-2xl-letter-spacing);
}
h5, .heading-5 {
h5,
.heading-5 {
font-size: var(--text-xl);
line-height: var(--text-xl-line-height);
letter-spacing: var(--text-xl-letter-spacing);
}
h6, .heading-6 {
h6,
.heading-6 {
font-size: var(--text-lg);
line-height: var(--text-lg-line-height);
letter-spacing: var(--text-lg-letter-spacing);
@@ -130,11 +143,30 @@ h6, .heading-6 {
/* ── Body Text Utilities ───────────────────────────── */
.text-xs { font-size: var(--text-xs); line-height: var(--text-xs-line-height); }
.text-sm { font-size: var(--text-sm); line-height: var(--text-sm-line-height); }
.text-base { font-size: var(--text-base); line-height: var(--text-base-line-height); }
.text-lg { font-size: var(--text-lg); line-height: var(--text-lg-line-height); }
.text-xl { font-size: var(--text-xl); line-height: var(--text-xl-line-height); }
.text-xs {
font-size: var(--text-xs);
line-height: var(--text-xs-line-height);
}
.text-sm {
font-size: var(--text-sm);
line-height: var(--text-sm-line-height);
}
.text-base {
font-size: var(--text-base);
line-height: var(--text-base-line-height);
}
.text-lg {
font-size: var(--text-lg);
line-height: var(--text-lg-line-height);
}
.text-xl {
font-size: var(--text-xl);
line-height: var(--text-xl-line-height);
}
.text-muted {
color: var(--color-muted-foreground);
@@ -216,7 +248,8 @@ h6, .heading-6 {
.btn-ghost {
background-color: transparent;
color: var(--color-foreground);
border-color: transparent;
border: 1px solid transparent;
/* Keep size consistent */
}
.btn-ghost:hover {
@@ -241,6 +274,15 @@ h6, .heading-6 {
border-radius: var(--radius-lg);
padding: var(--spacing-xl);
box-shadow: var(--shadow-sm);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
overflow: hidden;
/* For children accents */
position: relative;
}
.card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-primary);
}
/* ── Links ───────────────────────────────────────── */
@@ -256,7 +298,9 @@ a:hover {
/* ── Images ──────────────────────────────────────── */
img, video, svg {
img,
video,
svg {
display: block;
max-width: 100%;
height: auto;
@@ -278,12 +322,29 @@ img, video, svg {
/* ── Spacing Utilities ──────────────────────────── */
.stack-xs > * + * { margin-top: var(--spacing-xs); }
.stack-sm > * + * { margin-top: var(--spacing-sm); }
.stack-md > * + * { margin-top: var(--spacing-md); }
.stack-lg > * + * { margin-top: var(--spacing-lg); }
.stack-xl > * + * { margin-top: var(--spacing-xl); }
.stack-2xl > * + * { margin-top: var(--spacing-2xl); }
.stack-xs>*+* {
margin-top: var(--spacing-xs);
}
.stack-sm>*+* {
margin-top: var(--spacing-sm);
}
.stack-md>*+* {
margin-top: var(--spacing-md);
}
.stack-lg>*+* {
margin-top: var(--spacing-lg);
}
.stack-xl>*+* {
margin-top: var(--spacing-xl);
}
.stack-2xl>*+* {
margin-top: var(--spacing-2xl);
}
/* ── Divider ───────────────────────────────────── */
@@ -291,4 +352,4 @@ img, video, svg {
border: none;
border-top: 1px solid var(--color-border);
margin-block: var(--spacing-2xl);
}
}