Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 1elle1
|
747e52133a | ||
|
1elle1
|
578bb8edb3 |
+70
-33
@@ -1,52 +1,89 @@
|
||||
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Metadata } from "next";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
|
||||
export const metadata = {
|
||||
title: "Datenschutzerklärung | TeleNetSystems",
|
||||
export const metadata: Metadata = {
|
||||
title: "Datenschutz",
|
||||
description: "Datenschutzerklärung der Telenet Systems GmbH",
|
||||
};
|
||||
|
||||
export default function DatenschutzPage() {
|
||||
return (
|
||||
<main>
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<Container variant="narrow">
|
||||
<h1>Datenschutzerklärung</h1>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
<Container className="max-w-3xl">
|
||||
<h1 className="mb-[var(--spacing-lg)]">Datenschutzerklärung</h1>
|
||||
<Container variant="narrow">
|
||||
<div className="prose max-w-none">
|
||||
<div className="card mb-[var(--spacing-xl)]">
|
||||
<p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-sm)]">
|
||||
⚠️ PLATZHALTER – Bitte durch vollständige Datenschutzerklärung ersetzen
|
||||
</p>
|
||||
<p className="text-muted text-sm">
|
||||
Die folgende Datenschutzerklärung ist ein Platzhalter und muss durch eine
|
||||
rechtlich geprüfte, vollständige Datenschutzerklärung ersetzt werden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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.
|
||||
<h2 className="heading-3">1. Verantwortlicher</h2>
|
||||
<p className="text-muted">
|
||||
Telenet Systems GmbH<br />
|
||||
PLACEHOLDER: Adresse<br />
|
||||
6600 Reutte, Österreich<br />
|
||||
E-Mail: PLACEHOLDER: E-Mail-Adresse
|
||||
</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.
|
||||
<h2 className="heading-3 mt-[var(--spacing-2xl)]">2. Erhebung und Speicherung personenbezogener Daten</h2>
|
||||
<p className="text-muted">
|
||||
Beim Besuch unserer Website werden automatisch folgende Daten erhoben:
|
||||
</p>
|
||||
<ul className="stack-sm text-muted">
|
||||
<li>IP-Adresse des anfragenden Rechners</li>
|
||||
<li>Datum und Uhrzeit des Zugriffs</li>
|
||||
<li>Name und URL der abgerufenen Datei</li>
|
||||
<li>Website, von der aus der Zugriff erfolgt (Referrer-URL)</li>
|
||||
<li>Verwendeter Browser und ggf. das Betriebssystem Ihres Rechners</li>
|
||||
</ul>
|
||||
|
||||
<h2 className="heading-3 mt-[var(--spacing-2xl)]">3. Kontaktformular</h2>
|
||||
<p className="text-muted">
|
||||
Wenn Sie uns über das Kontaktformular kontaktieren, werden die von Ihnen
|
||||
mitgeteilten Daten (Name, E-Mail-Adresse, Nachricht) zur Bearbeitung Ihrer
|
||||
Anfrage gespeichert. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.
|
||||
</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.
|
||||
<h2 className="heading-3 mt-[var(--spacing-2xl)]">4. Ihre Rechte</h2>
|
||||
<p className="text-muted">
|
||||
Sie haben das Recht:
|
||||
</p>
|
||||
<ul className="stack-sm text-muted">
|
||||
<li>Auskunft über Ihre bei uns gespeicherten Daten zu erhalten</li>
|
||||
<li>Berichtigung unrichtiger Daten zu verlangen</li>
|
||||
<li>Löschung Ihrer Daten zu verlangen</li>
|
||||
<li>Die Verarbeitung einzuschränken</li>
|
||||
<li>Der Verarbeitung zu widersprechen</li>
|
||||
<li>Datenübertragbarkeit zu verlangen</li>
|
||||
</ul>
|
||||
|
||||
<h2 className="heading-3 mt-[var(--spacing-2xl)]">5. Cookies</h2>
|
||||
<p className="text-muted">
|
||||
Diese Website verwendet technisch notwendige Cookies, die für den Betrieb
|
||||
der Website erforderlich sind. Eine weitergehende Nutzung von Cookies erfolgt
|
||||
nur mit Ihrer ausdrücklichen Einwilligung.
|
||||
</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:
|
||||
<h2 className="heading-3 mt-[var(--spacing-2xl)]">6. Änderung dieser Datenschutzerklärung</h2>
|
||||
<p className="text-muted">
|
||||
Wir behalten uns vor, diese Datenschutzerklärung bei Bedarf anzupassen,
|
||||
damit sie stets den aktuellen rechtlichen Anforderungen entspricht.
|
||||
</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 className="text-sm text-muted mt-[var(--spacing-2xl)]">
|
||||
Stand: Februar 2026
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
+134
-79
@@ -1,128 +1,183 @@
|
||||
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import Image from "next/image";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Tv, Check, Phone, ArrowRight } from "lucide-react";
|
||||
|
||||
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 const metadata: Metadata = {
|
||||
title: "Fernsehen",
|
||||
description:
|
||||
"Über 200 TV-Programme inkl. 40 HDTV-Sender. Kabel-TV für Privat- und Geschäftskunden in Tirol.",
|
||||
};
|
||||
|
||||
const tvFeatures = [
|
||||
"Über 200 Programme",
|
||||
"40 HDTV-Sender",
|
||||
"Rund 40 Radiosender",
|
||||
"Kristallklare Bildqualität",
|
||||
"Keine Servicepauschale",
|
||||
"Regionale Sender inklusive",
|
||||
];
|
||||
|
||||
export default function FernsehenPage() {
|
||||
return (
|
||||
<main>
|
||||
{/* Hero */}
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<h1 className="mb-[var(--spacing-md)]">
|
||||
Fernsehen <span className="text-[color:var(--color-primary)]">neu erleben</span>
|
||||
<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)]">
|
||||
<Tv size={32} className="text-[var(--color-background)]" />
|
||||
</div>
|
||||
<h1 className="mb-[var(--spacing-lg)]">
|
||||
Fernsehen in
|
||||
<span className="text-[var(--color-primary)]"> bester Qualität</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 className="lead mb-[var(--spacing-2xl)]">
|
||||
Genießen Sie über 200 TV-Programme inkl. 40 HDTV-Sendern –
|
||||
direkt über das Kabelnetz von TeleNetSystems.
|
||||
</p>
|
||||
<Link href="#kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt anschließen lassen
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Image
|
||||
src="/images/hero/tv-header-44c1e07b.jpg"
|
||||
alt="Familie schaut gemütlich fern"
|
||||
width={800}
|
||||
height={600}
|
||||
className="rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Main Benefit */}
|
||||
<Section>
|
||||
{/* Trust Elements */}
|
||||
<Section variant="sm" className="bg-[var(--color-background)] border-b border-[var(--color-border)]">
|
||||
<Container>
|
||||
<div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-xl)]">
|
||||
{tvFeatures.slice(0, 4).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>
|
||||
|
||||
{/* TV Privat Section */}
|
||||
<Section id="privat">
|
||||
<Container>
|
||||
<div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] 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.
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Für Privatkunden
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||||
TV Privat
|
||||
</h2>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
Holen Sie sich über 200 Programme inkl. 40 HDTV-Sendern und rund 40 Radiosendern
|
||||
direkt in Ihr Wohnzimmer. Genießen Sie beste Unterhaltung für die ganze Familie.
|
||||
</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>
|
||||
<ul className="stack-sm mb-[var(--spacing-xl)]">
|
||||
{tvFeatures.map((feature) => (
|
||||
<li key={feature} className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<Check size={18} className="text-[var(--color-primary)] shrink-0" />
|
||||
<span>{feature}</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 className="card text-center">
|
||||
<p className="text-sm text-muted uppercase tracking-wide mb-[var(--spacing-sm)]">
|
||||
TV Privat
|
||||
</p>
|
||||
<p className="text-5xl font-bold text-[var(--color-primary)] mb-[var(--spacing-xs)]">
|
||||
€ 16,47
|
||||
</p>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
pro Monat inkl. MwSt.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn btn-primary w-full">
|
||||
Jetzt anfragen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Pricing / Offer */}
|
||||
<Section className="bg-[var(--color-muted)] text-center">
|
||||
{/* TV Business Section */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<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
|
||||
<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)]">
|
||||
TV Business
|
||||
</h2>
|
||||
<p className="text-muted mb-[var(--spacing-xl)]">
|
||||
Sie sind noch auf der Suche nach der passenden TV-Lösung für Ihr Unternehmen?
|
||||
Gerne erstellen wir Ihnen ein individuelles Angebot, das genau zu Ihren Anforderungen passt.
|
||||
</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 href="/kontakt" className="btn btn-primary">
|
||||
Individuelle Lösung anfragen
|
||||
<ArrowRight size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Business & Pay TV */}
|
||||
{/* Pay TV Section */}
|
||||
<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.
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h2 className="mb-[var(--spacing-lg)]">Pay-TV</h2>
|
||||
<p className="text-muted mb-[var(--spacing-xl)]">
|
||||
Auf Wunsch bieten wir zusätzlich Pay-TV-Lösungen an.
|
||||
Sie möchten exklusive Filme, Serien und Sport in HD oder UHD?
|
||||
Kontaktieren Sie uns einfach und wir finden das passende Angebot für Sie.
|
||||
</p>
|
||||
<Link href="#kontakt" className="btn btn-outline">
|
||||
Individuelles Angebot anfragen
|
||||
<Link href="/kontakt" className="btn btn-outline">
|
||||
Pay-TV 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">
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<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.
|
||||
<div className="text-center text-[var(--color-background)]">
|
||||
<h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||
Interesse an unserem TV-Angebot?
|
||||
</h2>
|
||||
<p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Wir beraten Sie gerne persönlich und finden die passende Lösung für Sie.
|
||||
</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
|
||||
<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>
|
||||
|
||||
+86
-30
@@ -1,50 +1,106 @@
|
||||
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Metadata } from "next";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
|
||||
export const metadata = {
|
||||
title: "Impressum | TeleNetSystems",
|
||||
export const metadata: Metadata = {
|
||||
title: "Impressum",
|
||||
description: "Impressum der Telenet Systems GmbH",
|
||||
};
|
||||
|
||||
export default function ImpressumPage() {
|
||||
return (
|
||||
<main>
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<Container variant="narrow">
|
||||
<h1>Impressum</h1>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
<Container className="max-w-3xl">
|
||||
<h1 className="mb-[var(--spacing-lg)]">Impressum</h1>
|
||||
<Container variant="narrow">
|
||||
<div className="prose max-w-none">
|
||||
<h2 className="heading-3">Angaben gemäß § 5 ECG</h2>
|
||||
|
||||
<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
|
||||
<div className="card mb-[var(--spacing-xl)]">
|
||||
<p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-sm)]">
|
||||
⚠️ PLATZHALTER – Bitte durch echte Daten ersetzen
|
||||
</p>
|
||||
<p className="text-muted text-sm">
|
||||
Die folgenden Angaben sind Platzhalter und müssen durch die korrekten
|
||||
Unternehmensdaten ersetzt werden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 className="heading-4 mt-[var(--spacing-xl)]">Unternehmensbezeichnung</h3>
|
||||
<p className="text-muted">
|
||||
Telenet Systems GmbH<br />
|
||||
PLACEHOLDER: Straße und Hausnummer<br />
|
||||
6600 Reutte<br />
|
||||
Österreich
|
||||
</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
|
||||
<h3 className="heading-4 mt-[var(--spacing-xl)]">Kontakt</h3>
|
||||
<p className="text-muted">
|
||||
Telefon: PLACEHOLDER: Telefonnummer<br />
|
||||
E-Mail: PLACEHOLDER: E-Mail-Adresse<br />
|
||||
Website: https://www.tnr.at
|
||||
</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
|
||||
<h3 className="heading-4 mt-[var(--spacing-xl)]">Unternehmensgegenstand</h3>
|
||||
<p className="text-muted">
|
||||
Telekommunikationsdienstleistungen und IT-Services
|
||||
</p>
|
||||
|
||||
<p className="mt-[var(--spacing-md)]"><strong>Umsatzsteuer:</strong></p>
|
||||
<p>
|
||||
Umsatzsteuer-Identifikationsnummer gemäß §27 a Umsatzsteuergesetz:<br />
|
||||
PLACEHOLDER: technical.legal.impressum.vatId
|
||||
<h3 className="heading-4 mt-[var(--spacing-xl)]">Firmenbuchnummer</h3>
|
||||
<p className="text-muted">
|
||||
PLACEHOLDER: FN XXXXXX x
|
||||
</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.
|
||||
<h3 className="heading-4 mt-[var(--spacing-xl)]">Firmenbuchgericht</h3>
|
||||
<p className="text-muted">
|
||||
PLACEHOLDER: Landesgericht Innsbruck
|
||||
</p>
|
||||
|
||||
<h3 className="heading-4 mt-[var(--spacing-xl)]">UID-Nummer</h3>
|
||||
<p className="text-muted">
|
||||
PLACEHOLDER: ATU XXXXXXXX
|
||||
</p>
|
||||
|
||||
<h3 className="heading-4 mt-[var(--spacing-xl)]">Geschäftsführung</h3>
|
||||
<p className="text-muted">
|
||||
PLACEHOLDER: Name des/der Geschäftsführer(s)
|
||||
</p>
|
||||
|
||||
<h3 className="heading-4 mt-[var(--spacing-xl)]">Aufsichtsbehörde</h3>
|
||||
<p className="text-muted">
|
||||
Bezirkshauptmannschaft Reutte
|
||||
</p>
|
||||
|
||||
<h3 className="heading-4 mt-[var(--spacing-xl)]">Berufsrecht</h3>
|
||||
<p className="text-muted">
|
||||
Gewerbeordnung: www.ris.bka.gv.at
|
||||
</p>
|
||||
|
||||
<h3 className="heading-4 mt-[var(--spacing-xl)]">Streitbeilegung</h3>
|
||||
<p className="text-muted">
|
||||
Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit,
|
||||
die Sie unter{" "}
|
||||
<a
|
||||
href="https://ec.europa.eu/consumers/odr"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[var(--color-primary)]"
|
||||
>
|
||||
ec.europa.eu/consumers/odr
|
||||
</a>{" "}
|
||||
finden.
|
||||
</p>
|
||||
|
||||
<h3 className="heading-4 mt-[var(--spacing-xl)]">Haftungsausschluss</h3>
|
||||
<p className="text-muted">
|
||||
Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die
|
||||
Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich
|
||||
deren Betreiber verantwortlich.
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
+252
-191
@@ -1,222 +1,283 @@
|
||||
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
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 = {
|
||||
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 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>
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<h1 className="mb-[var(--spacing-md)]">
|
||||
Highspeed Internet <span className="text-[color:var(--color-primary)]">für Tirol</span>
|
||||
<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-xl)] max-w-2xl mx-auto">
|
||||
Stabil, extrem schnell und ohne versteckte Kosten. Wir bringen die Welt zu Ihnen nach Hause.
|
||||
<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>
|
||||
<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 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>
|
||||
|
||||
{/* Intro Info */}
|
||||
{/* 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 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)
|
||||
<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>
|
||||
|
||||
<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 href="/kontakt" className="btn btn-primary">
|
||||
Individuelle Lösung anfragen
|
||||
<ArrowRight size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Contact Anchor */}
|
||||
<Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<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.
|
||||
<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)]">
|
||||
<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
|
||||
<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>
|
||||
|
||||
+29
-72
@@ -1,105 +1,62 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import "@/theme/globals.css";
|
||||
import "@/theme/stylesheet.css";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Header } from "@/components/layout/Header";
|
||||
import { Footer } from "@/components/layout/Footer";
|
||||
import "@/theme/globals.css";
|
||||
import "@/theme/stylesheet.css";
|
||||
|
||||
/**
|
||||
* Root Layout
|
||||
*
|
||||
* This layout is designed to work with the 9-category parameter system.
|
||||
* It supports:
|
||||
* - Dynamic locale (from spec.client.locale or content.defaultLanguage)
|
||||
* - Google Fonts loading (from spec.brand.fonts)
|
||||
* - Scroll behavior (from spec.interaction.scrollBehavior)
|
||||
* - Meta tags for SEO
|
||||
*
|
||||
* CUSTOMIZATION INSTRUCTIONS:
|
||||
* 1. Update `lang` attribute based on spec.client.locale (e.g., "de", "de-AT", "en")
|
||||
* 2. Add Google Fonts import based on spec.brand.fonts.heading.family and body.family
|
||||
* 3. Set scroll-behavior in globals.css based on spec.interaction.scrollBehavior
|
||||
* 4. Update metadata based on spec.brand and spec.seo
|
||||
*/
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
// TODO: Update these values based on ProjectSpec.json
|
||||
// - title: from spec.brand.name or spec.meta.projectName
|
||||
// - description: from spec.brand.description
|
||||
// - keywords: from spec.seo.primaryKeywords
|
||||
export const metadata: Metadata = {
|
||||
title: "TeleNetSystems | Telekom & IT aus Tirol",
|
||||
description: "TeleNetSystems - Ihr regionaler Partner für Internet, Fernsehen, Telefonie und IT-Services in Reutte und Umgebung.",
|
||||
title: {
|
||||
default: "TeleNetSystems | Telekom & IT aus Tirol",
|
||||
template: "%s | TeleNetSystems",
|
||||
},
|
||||
description:
|
||||
"Ihr regionaler Telekom- und IT-Partner in Reutte, Tirol. Fernsehen, Internet, Telefonie und IT-Services – zuverlässig, persönlich, seit 1976.",
|
||||
keywords: [
|
||||
"Telekommunikation Tirol",
|
||||
"IT-Dienstleister Reutte",
|
||||
"Highspeed-Internet Österreich",
|
||||
"Glasfaser Tirol",
|
||||
"TeleNetSystems",
|
||||
"regionaler IT-Service",
|
||||
"Kabel-TV Anbieter",
|
||||
],
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
// Open Graph tags - update based on spec
|
||||
openGraph: {
|
||||
type: "website",
|
||||
locale: "de_AT",
|
||||
// title, description, images will be set per project
|
||||
siteName: "TeleNetSystems",
|
||||
title: "TeleNetSystems | Telekom & IT aus Tirol",
|
||||
description:
|
||||
"Ihr regionaler Telekom- und IT-Partner in Reutte, Tirol. Fernsehen, Internet, Telefonie und IT-Services.",
|
||||
},
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
// TODO: Update themeColor from spec.brand.colors.primary or design_tokens
|
||||
themeColor: "#f39210",
|
||||
};
|
||||
|
||||
/**
|
||||
* Font Loading
|
||||
*
|
||||
* To add Google Fonts based on spec.brand.fonts:
|
||||
*
|
||||
* 1. Import from next/font/google:
|
||||
* import { Inter, Playfair_Display } from "next/font/google";
|
||||
*
|
||||
* 2. Configure fonts:
|
||||
* const headingFont = Playfair_Display({
|
||||
* subsets: ["latin"],
|
||||
* variable: "--font-heading",
|
||||
* display: "swap",
|
||||
* });
|
||||
*
|
||||
* const bodyFont = Inter({
|
||||
* subsets: ["latin"],
|
||||
* variable: "--font-body",
|
||||
* display: "swap",
|
||||
* });
|
||||
*
|
||||
* 3. Apply to html element:
|
||||
* <html lang="de" className={`${headingFont.variable} ${bodyFont.variable}`}>
|
||||
*
|
||||
* 4. Update globals.css to use the variables:
|
||||
* --font-sans: var(--font-body), system-ui, sans-serif;
|
||||
* --font-heading: var(--font-heading), Georgia, serif;
|
||||
*/
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
// TODO: Update lang attribute based on spec.client.locale
|
||||
// Examples: "de", "de-AT", "de-CH", "en", "en-US"
|
||||
const locale = "de";
|
||||
|
||||
return (
|
||||
<html lang={locale}>
|
||||
{/*
|
||||
Scroll Behavior:
|
||||
- If spec.interaction.scrollBehavior === "smooth", add className="scroll-smooth"
|
||||
- Or set scroll-behavior: smooth in globals.css on html element
|
||||
|
||||
Example with smooth scrolling:
|
||||
<html lang={locale} className="scroll-smooth">
|
||||
*/}
|
||||
<body className="flex min-h-screen flex-col">
|
||||
<html lang="de-AT" className={inter.variable}>
|
||||
<body>
|
||||
<Header />
|
||||
<div className="flex-1">
|
||||
{children}
|
||||
</div>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+204
-81
@@ -1,111 +1,234 @@
|
||||
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import {
|
||||
Tv,
|
||||
Wifi,
|
||||
Phone,
|
||||
Server,
|
||||
Wrench,
|
||||
MonitorSmartphone,
|
||||
Cable,
|
||||
Shield,
|
||||
ArrowRight
|
||||
} from "lucide-react";
|
||||
|
||||
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 const metadata: Metadata = {
|
||||
title: "Leistungen",
|
||||
description:
|
||||
"Umfassende Telekom- und IT-Services für Tirol. Fernsehen, Internet, Telefonie, IT-Support und Netzwerkplanung.",
|
||||
};
|
||||
|
||||
const mainServices = [
|
||||
{
|
||||
title: "Fernsehen",
|
||||
description: "Über 200 Programme inkl. 40 HDTV-Sender für Privat- und Geschäftskunden.",
|
||||
icon: Tv,
|
||||
href: "/fernsehen",
|
||||
},
|
||||
{
|
||||
title: "Internet",
|
||||
description: "Highspeed-Internet über Kabel oder Glasfaser – schnell, stabil, unlimitiert.",
|
||||
icon: Wifi,
|
||||
href: "/internet",
|
||||
},
|
||||
{
|
||||
title: "Telefonie",
|
||||
description: "Flexible Festnetz-Tarife. Mit oder ohne Internet nutzbar.",
|
||||
icon: Phone,
|
||||
href: "/telefonie",
|
||||
},
|
||||
];
|
||||
|
||||
const itServices = [
|
||||
{
|
||||
title: "Netzwerk- & Serverplanung",
|
||||
description: "Professionelle Planung und Umsetzung Ihrer IT-Infrastruktur.",
|
||||
icon: Server,
|
||||
},
|
||||
{
|
||||
title: "IT-Installation",
|
||||
description: "Fachgerechte Installation von Hard- und Software vor Ort.",
|
||||
icon: MonitorSmartphone,
|
||||
},
|
||||
{
|
||||
title: "Reparatur & Wartung",
|
||||
description: "Schnelle Hilfe bei Problemen, regelmäßige Wartung Ihrer Systeme.",
|
||||
icon: Wrench,
|
||||
},
|
||||
{
|
||||
title: "Fernwartung",
|
||||
description: "Schnelle Problembehebung aus der Ferne – ohne Wartezeit vor Ort.",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
title: "Glasfaser-Planung & -Ausbau",
|
||||
description: "Beratung und Umsetzung für Glasfaser-Anbindungen.",
|
||||
icon: Cable,
|
||||
},
|
||||
];
|
||||
|
||||
export default function LeistungenPage() {
|
||||
return (
|
||||
<main>
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<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>
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="mb-[var(--spacing-lg)]">
|
||||
Alle Leistungen
|
||||
<span className="text-[var(--color-primary)]"> im Überblick</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 className="lead mb-[var(--spacing-2xl)]">
|
||||
Von Fernsehen über Internet bis zu IT-Services –
|
||||
wir bieten Ihnen umfassende Lösungen aus einer Hand.
|
||||
</p>
|
||||
<Link href="#it-services" className="btn btn-primary btn-lg">
|
||||
Zu den IT-Services
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Overview Core Services */}
|
||||
{/* Telekom Services */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="text-center mb-[var(--spacing-2xl)]">
|
||||
<h2>Unsere Kernkompetenzen</h2>
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Telekommunikation
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)]">Fernsehen, Internet & Telefonie</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 className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
|
||||
{mainServices.map((service) => (
|
||||
<Link
|
||||
key={service.title}
|
||||
href={service.href}
|
||||
className="card group hover:shadow-lg transition-shadow hover:no-underline"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-lg)] group-hover:bg-[var(--color-primary)] transition-colors">
|
||||
<service.icon
|
||||
size={24}
|
||||
className="text-[var(--color-primary)] group-hover:text-[var(--color-background)] transition-colors"
|
||||
/>
|
||||
</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>
|
||||
<h3 className="heading-4 mb-[var(--spacing-sm)] text-[var(--color-foreground)]">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-muted mb-[var(--spacing-md)]">
|
||||
{service.description}
|
||||
</p>
|
||||
<span className="inline-flex items-center gap-[var(--spacing-xs)] text-[var(--color-primary)] font-medium">
|
||||
Mehr erfahren
|
||||
<ArrowRight size={16} />
|
||||
</span>
|
||||
</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>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* IT Services */}
|
||||
<Section 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">
|
||||
IT-Dienstleistungen
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)]">IT-Services & Support</h2>
|
||||
<p className="lead max-w-2xl mx-auto mt-[var(--spacing-md)]">
|
||||
Professionelle IT-Lösungen für Unternehmen und Privatkunden.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--spacing-lg)]">
|
||||
{itServices.map((service) => (
|
||||
<div key={service.title} className="card">
|
||||
<div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-md)]">
|
||||
<service.icon size={20} className="text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{service.title}</h3>
|
||||
<p className="text-sm text-muted">{service.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center mt-[var(--spacing-2xl)]">
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
IT-Beratung anfragen
|
||||
<ArrowRight size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Business Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div>
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Für Unternehmen
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||||
Maßgeschneiderte Lösungen
|
||||
</h2>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
Sie benötigen eine individuelle Lösung für Ihr Unternehmen?
|
||||
Wir analysieren Ihre Anforderungen und erstellen ein maßgeschneidertes Angebot –
|
||||
von der Telekommunikation bis zur kompletten IT-Infrastruktur.
|
||||
</p>
|
||||
<ul className="stack-sm mb-[var(--spacing-xl)]">
|
||||
<li className="flex items-start gap-[var(--spacing-sm)]">
|
||||
<span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">1</span>
|
||||
<span>Bedarfsanalyse vor Ort</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-[var(--spacing-sm)]">
|
||||
<span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">2</span>
|
||||
<span>Individuelles Angebot</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-[var(--spacing-sm)]">
|
||||
<span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">3</span>
|
||||
<span>Professionelle Umsetzung</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-[var(--spacing-sm)]">
|
||||
<span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">4</span>
|
||||
<span>Laufender Support</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Beratungstermin vereinbaren
|
||||
</Link>
|
||||
</div>
|
||||
<div className="bg-[var(--color-muted)] rounded-[var(--radius-lg)] p-[var(--spacing-2xl)] text-center">
|
||||
<p className="text-6xl font-bold text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
50
|
||||
</p>
|
||||
<p className="text-xl font-semibold mb-[var(--spacing-sm)]">Jahre Erfahrung</p>
|
||||
<p className="text-muted">
|
||||
Seit 1976 sind wir Ihr zuverlässiger Partner für Telekommunikation und IT in Tirol.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* IT Services Detail */}
|
||||
<Section id="it-services" className="bg-[var(--color-muted)]">
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<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.
|
||||
<div className="text-center text-[var(--color-background)]">
|
||||
<h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||
Haben Sie Fragen zu unseren Leistungen?
|
||||
</h2>
|
||||
<p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Kontaktieren Sie uns für eine unverbindliche Beratung.
|
||||
Wir finden gemeinsam die passende Lösung.
|
||||
</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>
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
|
||||
>
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
+172
-120
@@ -1,170 +1,222 @@
|
||||
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import Image from "next/image";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import {
|
||||
Tv,
|
||||
Wifi,
|
||||
Phone,
|
||||
MapPin,
|
||||
Clock,
|
||||
Users,
|
||||
Shield,
|
||||
Award,
|
||||
ArrowRight
|
||||
} from "lucide-react";
|
||||
|
||||
export default function Home() {
|
||||
export const metadata: Metadata = {
|
||||
title: "TeleNetSystems | Telekom & IT aus Tirol",
|
||||
description:
|
||||
"Ihr regionaler Telekom- und IT-Partner in Reutte, Tirol. Fernsehen, Internet, Telefonie und IT-Services – zuverlässig, persönlich, seit 1976.",
|
||||
};
|
||||
|
||||
const services = [
|
||||
{
|
||||
title: "Fernsehen",
|
||||
description:
|
||||
"Über 200 Programme inkl. 40 HDTV-Sender – für Privat- und Geschäftskunden.",
|
||||
icon: Tv,
|
||||
href: "/fernsehen",
|
||||
price: "ab € 16,47/Monat",
|
||||
},
|
||||
{
|
||||
title: "Internet",
|
||||
description:
|
||||
"Highspeed-Internet über Kabel oder Glasfaser. Schnell, stabil, unlimitiert.",
|
||||
icon: Wifi,
|
||||
href: "/internet",
|
||||
price: "ab € 14,50/Monat",
|
||||
},
|
||||
{
|
||||
title: "Telefonie",
|
||||
description:
|
||||
"Flexible Telefonie-Tarife für Festnetz. Mit oder ohne Internet nutzbar.",
|
||||
icon: Phone,
|
||||
href: "/telefonie",
|
||||
price: "ab € 0,00/Monat",
|
||||
},
|
||||
];
|
||||
|
||||
const usps = [
|
||||
{
|
||||
icon: MapPin,
|
||||
title: "Regional & Persönlich",
|
||||
description:
|
||||
"Wir sind vor Ort in Reutte. Bei Fragen oder Problemen erreichen Sie echte Ansprechpartner aus der Region.",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: "Schnelle Hilfe",
|
||||
description:
|
||||
"Bei Störungen reagieren wir schnell. Unser Support ist für Sie da – ohne lange Warteschleifen.",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Seit 1976",
|
||||
description:
|
||||
"Fast 50 Jahre Erfahrung in Telekommunikation und IT. Wir kennen die Technik – und die Region.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Zuverlässig",
|
||||
description:
|
||||
"Stabile Netze, bewährte Technik, dauerhafte Lösungen. Darauf können Sie sich verlassen.",
|
||||
},
|
||||
];
|
||||
|
||||
const trustElements = [
|
||||
{ icon: Award, text: "Zertifizierter Partner" },
|
||||
{ icon: Users, text: "Über 5.000 zufriedene Kunden" },
|
||||
{ icon: Clock, text: "Fast 50 Jahre Erfahrung" },
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<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.
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
|
||||
Ihr Telekom- und IT-Partner in Tirol
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||||
<Link href="#kontakt" className="btn btn-primary btn-lg">
|
||||
<h1 className="mb-[var(--spacing-lg)]">
|
||||
Zuverlässige Technik.
|
||||
<br />
|
||||
<span className="text-[var(--color-primary)]">Persönlicher Service.</span>
|
||||
</h1>
|
||||
<p className="lead mb-[var(--spacing-2xl)] max-w-2xl">
|
||||
Fernsehen, Internet und Telefonie aus einer Hand –
|
||||
direkt aus Reutte für den Bezirk und die Region.
|
||||
Mit persönlicher Beratung und schnellem Support.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row 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 href="/leistungen" className="btn btn-outline btn-lg">
|
||||
Unsere Leistungen
|
||||
<ArrowRight size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Services Section */}
|
||||
<Section>
|
||||
<Section id="leistungen">
|
||||
<Container>
|
||||
<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.
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<h2 className="mb-[var(--spacing-md)]">Unsere Leistungen</h2>
|
||||
<p className="lead max-w-2xl mx-auto">
|
||||
Von Fernsehen über Internet bis zur Telefonie –
|
||||
wir bieten Ihnen alles aus einer Hand.
|
||||
</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 className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
|
||||
{services.map((service) => (
|
||||
<article key={service.title} className="card group">
|
||||
<div className="w-12 h-12 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-lg)]">
|
||||
<service.icon size={24} className="text-[var(--color-primary)]" />
|
||||
</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.
|
||||
<h3 className="heading-4 mb-[var(--spacing-sm)]">{service.title}</h3>
|
||||
<p className="text-muted mb-[var(--spacing-md)]">
|
||||
{service.description}
|
||||
</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 className="font-semibold text-[var(--color-primary)] mb-[var(--spacing-lg)]">
|
||||
{service.price}
|
||||
</p>
|
||||
<Link href="/telefonie" className="btn btn-secondary w-full">
|
||||
<Link
|
||||
href={service.href}
|
||||
className="btn btn-ghost justify-start p-0 hover:text-[var(--color-primary)]"
|
||||
>
|
||||
Mehr erfahren
|
||||
<ArrowRight size={16} />
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* IT Services Teaser */}
|
||||
{/* USP Section */}
|
||||
<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
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<h2 className="mb-[var(--spacing-md)]">Warum TeleNetSystems?</h2>
|
||||
<p className="lead max-w-2xl mx-auto">
|
||||
Wir sind kein anonymer Großkonzern – sondern Ihr Partner vor Ort.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
|
||||
{usps.map((usp) => (
|
||||
<div key={usp.title} className="text-center">
|
||||
<div className="w-14 h-14 rounded-full bg-[var(--color-primary)] flex items-center justify-center mx-auto mb-[var(--spacing-md)]">
|
||||
<usp.icon size={24} className="text-[var(--color-background)]" />
|
||||
</div>
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3>
|
||||
<p className="text-sm text-muted">{usp.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* USPs / Trust Section */}
|
||||
<Section>
|
||||
{/* Trust Section */}
|
||||
<Section variant="sm">
|
||||
<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 className="flex flex-wrap justify-center gap-[var(--spacing-2xl)] items-center">
|
||||
{trustElements.map((item) => (
|
||||
<div
|
||||
key={item.text}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-muted-foreground)]"
|
||||
>
|
||||
<item.icon size={20} className="text-[var(--color-primary)]" />
|
||||
<span className="text-sm font-medium">{item.text}</span>
|
||||
</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.
|
||||
{/* 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)]">
|
||||
Bereit für zuverlässige Technik?
|
||||
</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 className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Kontaktieren Sie uns für eine unverbindliche Beratung.
|
||||
Wir finden die passende Lösung für Sie.
|
||||
</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
|
||||
<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>
|
||||
|
||||
+126
-92
@@ -1,131 +1,165 @@
|
||||
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Phone as PhoneIcon, Check, ArrowRight } from "lucide-react";
|
||||
|
||||
export const metadata = {
|
||||
title: "Telefonie Tarife | TeleNetSystems",
|
||||
description: "Günstig telefonieren über Ihren Kabelanschluss. Privat- und Business-Tarife in Reutte.",
|
||||
export const metadata: Metadata = {
|
||||
title: "Telefonie",
|
||||
description:
|
||||
"Flexible Telefonie-Tarife für Festnetz. Mit oder ohne Internet nutzbar – für Privat- und Geschäftskunden in Tirol.",
|
||||
};
|
||||
|
||||
const telefonieTarife = [
|
||||
{
|
||||
name: "telenet.zero",
|
||||
beschreibung: "Ohne Internet",
|
||||
preis: "€ 5,00",
|
||||
kosten: "Festnetz AT: ab 2,4 Cent/Min.",
|
||||
features: ["Nur Telefonie", "Günstige Minutenpreise"],
|
||||
},
|
||||
{
|
||||
name: "telenet.zero",
|
||||
beschreibung: "Mit Internet von Telenet",
|
||||
preis: "€ 0,00",
|
||||
kosten: "Festnetz AT: ab 2,4 Cent/Min.",
|
||||
features: ["Kostenlos zu Ihrem Internet", "Günstige Minutenpreise"],
|
||||
highlight: true,
|
||||
},
|
||||
{
|
||||
name: "telenet.business",
|
||||
beschreibung: "Für Geschäftskunden",
|
||||
preis: "€ 8,90",
|
||||
kosten: "Festnetz AT: ab 3,24 Cent/Min.",
|
||||
features: ["Business-Funktionen", "Professioneller Support"],
|
||||
},
|
||||
];
|
||||
|
||||
export default function TelefoniePage() {
|
||||
return (
|
||||
<main>
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<h1 className="mb-[var(--spacing-md)]">
|
||||
Klar verständlich. <span className="text-[color:var(--color-primary)]">Einfach günstig.</span>
|
||||
<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)]">
|
||||
<PhoneIcon size={32} className="text-[var(--color-background)]" />
|
||||
</div>
|
||||
<h1 className="mb-[var(--spacing-lg)]">
|
||||
Telefonie
|
||||
<span className="text-[var(--color-primary)]"> ohne Kompromisse</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 className="lead mb-[var(--spacing-2xl)]">
|
||||
Flexible Telefonie-Tarife für Ihr Festnetz.
|
||||
Mit oder ohne Internet nutzbar – Sie haben die Wahl.
|
||||
</p>
|
||||
<Link href="#tarife" className="btn btn-primary btn-lg">
|
||||
Tarife ansehen
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Section id="tarife">
|
||||
{/* Tarife Section */}
|
||||
<Section>
|
||||
<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 className="text-center mb-[var(--spacing-3xl)]">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Kabel-Telefonie-Tarife
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)]">Unsere Tarife</h2>
|
||||
</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>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)] max-w-4xl mx-auto">
|
||||
{telefonieTarife.map((tarif, index) => (
|
||||
<div
|
||||
key={`${tarif.name}-${index}`}
|
||||
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-xs)]">{tarif.name}</h3>
|
||||
<p className="text-sm text-muted mb-[var(--spacing-md)]">{tarif.beschreibung}</p>
|
||||
<p className="text-4xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
|
||||
<p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
|
||||
<p className="text-sm mb-[var(--spacing-lg)]">{tarif.kosten}</p>
|
||||
<ul className="stack-sm text-left mb-[var(--spacing-lg)]">
|
||||
{tarif.features.map((feature) => (
|
||||
<li key={feature} className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<Check size={16} className="text-[var(--color-primary)] shrink-0" />
|
||||
<span className="text-sm">{feature}</span>
|
||||
</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>
|
||||
<Link href="/kontakt" className="btn btn-outline w-full">
|
||||
Anfragen
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Info 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.
|
||||
<Container variant="narrow">
|
||||
<div className="text-center">
|
||||
<h2 className="mb-[var(--spacing-lg)]">So funktioniert es</h2>
|
||||
<div className="stack-lg text-left">
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie mit Telenet-Internet</h3>
|
||||
<p className="text-muted">
|
||||
Wenn Sie bereits Internet von TeleNetSystems nutzen, können Sie unsere Telefonie
|
||||
kostenlos hinzubuchen. Sie zahlen nur die tatsächlich geführten Gespräche nach Minutenpreis.
|
||||
</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 className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie ohne Internet</h3>
|
||||
<p className="text-muted">
|
||||
Sie möchten nur Telefonie ohne Internet? Kein Problem.
|
||||
Für nur € 5,00 pro Monat erhalten Sie einen Festnetzanschluss mit günstigen Minutenpreisen.
|
||||
</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">Business-Telefonie</h3>
|
||||
<p className="text-muted">
|
||||
Für Geschäftskunden bieten wir professionelle Telefonie-Lösungen mit erweiterten Funktionen
|
||||
und dediziertem Support.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<Container>
|
||||
<h2 className="text-white mb-[var(--spacing-md)]">Jetzt Telefonie anmelden</h2>
|
||||
<div className="text-center text-[var(--color-background)]">
|
||||
<h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||
Fragen zu unseren Telefonie-Tarifen?
|
||||
</h2>
|
||||
<p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Wir beraten Sie gerne und finden die passende Lösung für Ihre Anforderungen.
|
||||
</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
|
||||
<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"
|
||||
>
|
||||
<PhoneIcon size={18} />
|
||||
PLACEHOLDER: Telefon
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
|
||||
+171
-50
@@ -1,79 +1,200 @@
|
||||
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { MapPin, Clock, Users, Heart, Shield, ArrowRight } from "lucide-react";
|
||||
|
||||
export const metadata = {
|
||||
title: "Über uns | TeleNetSystems",
|
||||
description: "TeleNetSystems GmbH - Ihr regionaler Telekommunikationsanbieter in Reutte seit 1976.",
|
||||
export const metadata: Metadata = {
|
||||
title: "Über uns",
|
||||
description:
|
||||
"Lernen Sie TeleNetSystems kennen – Ihr regionaler Telekom- und IT-Partner in Tirol seit 1976.",
|
||||
};
|
||||
|
||||
const values = [
|
||||
{
|
||||
icon: Heart,
|
||||
title: "Persönlich",
|
||||
description: "Wir sind kein anonymer Konzern. Bei uns bekommen Sie echte Ansprechpartner.",
|
||||
},
|
||||
{
|
||||
icon: MapPin,
|
||||
title: "Regional",
|
||||
description: "In Reutte verwurzelt, für die Region da. Wir kennen Land und Leute.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Zuverlässig",
|
||||
description: "Stabile Technik, bewährte Lösungen, transparente Kommunikation.",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: "Schnell",
|
||||
description: "Bei Problemen sind wir schnell zur Stelle – ohne lange Warteschleifen.",
|
||||
},
|
||||
];
|
||||
|
||||
const milestones = [
|
||||
{ year: "1976", text: "Gründung als regionaler Telekom-Anbieter" },
|
||||
{ year: "1990er", text: "Ausbau des Kabelnetzes in Reutte und Umgebung" },
|
||||
{ year: "2000er", text: "Einführung von Highspeed-Internet" },
|
||||
{ year: "2010er", text: "Erweiterung um IT-Dienstleistungen" },
|
||||
{ year: "Heute", text: "Ihr verlässlicher Partner für Telekom & IT" },
|
||||
];
|
||||
|
||||
export default function UeberUnsPage() {
|
||||
return (
|
||||
<main>
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<h1 className="mb-[var(--spacing-md)]">
|
||||
Regional. Persönlich. <span className="text-[color:var(--color-primary)]">Verlässlich.</span>
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="mb-[var(--spacing-lg)]">
|
||||
Wir sind
|
||||
<span className="text-[var(--color-primary)]"> TeleNetSystems</span>
|
||||
</h1>
|
||||
<p className="lead max-w-2xl mx-auto">
|
||||
Seit 1976 verbinden wir Menschen in der Region Reutte.
|
||||
<p className="lead mb-[var(--spacing-2xl)]">
|
||||
Ihr regionaler Telekom- und IT-Partner in Tirol.
|
||||
Seit 1976 verbinden wir Menschen – mit zuverlässiger Technik, ehrlicher Beratung und persönlichem Service.
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Story 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 className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] 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.
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Unsere Geschichte
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||||
Fast 50 Jahre Erfahrung
|
||||
</h2>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
1976 gegründet, sind wir heute einer der führenden regionalen Anbieter für
|
||||
Telekommunikation und IT-Services in Tirol. Was als kleines Unternehmen begann,
|
||||
ist heute ein verlässlicher Partner für Tausende von Privat- und Geschäftskunden.
|
||||
</p>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
Trotz des Wachstums sind wir unseren Werten treu geblieben:
|
||||
persönlicher Service, regionale Nähe und ehrliche Beratung.
|
||||
Wir kennen unsere Kunden – viele seit Jahrzehnten.
|
||||
</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 className="stack-md">
|
||||
{milestones.map((milestone) => (
|
||||
<div key={milestone.year} className="flex items-start gap-[var(--spacing-md)]">
|
||||
<span className="text-[var(--color-primary)] font-bold text-lg min-w-[80px]">
|
||||
{milestone.year}
|
||||
</span>
|
||||
<span className="text-muted pt-0.5">{milestone.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Contact Anchor */}
|
||||
<Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
|
||||
{/* Values Section */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<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 className="text-center mb-[var(--spacing-3xl)]">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Wofür wir stehen
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)]">Unsere Werte</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
|
||||
{values.map((value) => (
|
||||
<div key={value.title} className="text-center">
|
||||
<div className="w-14 h-14 rounded-full bg-[var(--color-primary)] flex items-center justify-center mx-auto mb-[var(--spacing-md)]">
|
||||
<value.icon size={24} className="text-[var(--color-background)]" />
|
||||
</div>
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{value.title}</h3>
|
||||
<p className="text-sm text-muted">{value.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Team Section */}
|
||||
<Section>
|
||||
<Container variant="narrow">
|
||||
<div className="text-center">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Unser Team
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||||
Menschen, die für Sie da sind
|
||||
</h2>
|
||||
<p className="text-muted mb-[var(--spacing-xl)]">
|
||||
Hinter TeleNetSystems steht ein engagiertes Team aus Technikern, Beratern und
|
||||
Service-Mitarbeitern. Wir kennen die Region, wir kennen die Technik – und wir
|
||||
sind für Sie da, wenn Sie uns brauchen.
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-[var(--spacing-sm)]">
|
||||
<Users size={20} className="text-[var(--color-primary)]" />
|
||||
<span className="font-medium">PLACEHOLDER: Anzahl Mitarbeiter</span>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Region Section */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div className="lg:order-2">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Unser Standort
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||||
Verwurzelt in Reutte
|
||||
</h2>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
Unser Hauptsitz ist in Reutte – mitten im Herzen des Außerferns.
|
||||
Von hier aus betreuen wir Kunden in der gesamten Region.
|
||||
</p>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
Der Vorteil für Sie: Kurze Wege, schnelle Reaktionszeiten und
|
||||
persönliche Betreuung vor Ort. Bei uns sind Sie keine Nummer –
|
||||
sondern ein geschätzter Kunde.
|
||||
</p>
|
||||
<div className="flex items-start gap-[var(--spacing-sm)]">
|
||||
<MapPin size={20} className="text-[var(--color-primary)] shrink-0 mt-0.5" />
|
||||
<span className="text-muted">
|
||||
PLACEHOLDER: Adresse<br />
|
||||
6600 Reutte, Tirol
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:order-1 bg-[var(--color-background)] rounded-[var(--radius-lg)] aspect-video flex items-center justify-center border border-[var(--color-border)]">
|
||||
<p className="text-muted">PLACEHOLDER: Karte oder Bild</p>
|
||||
</div>
|
||||
</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)]">
|
||||
Lernen Sie uns kennen
|
||||
</h2>
|
||||
<p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Besuchen Sie uns vor Ort oder kontaktieren Sie uns –
|
||||
wir freuen uns auf Sie.
|
||||
</p>
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
|
||||
>
|
||||
Kontakt aufnehmen
|
||||
<ArrowRight size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 320 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 683 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 274 KiB |
@@ -1,28 +1,28 @@
|
||||
import type { ElementType, ReactNode } from "react";
|
||||
import React from "react"; // Added import for React to use React.HTMLAttributes
|
||||
|
||||
interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
|
||||
type ContainerVariant = "default" | "narrow" | "wide";
|
||||
|
||||
interface ContainerProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
as?: ElementType;
|
||||
variant?: "narrow" | "wide"; // Add variant support
|
||||
variant?: ContainerVariant;
|
||||
}
|
||||
|
||||
export function Container({
|
||||
children,
|
||||
className = "",
|
||||
as: Tag = "div",
|
||||
variant,
|
||||
...props
|
||||
variant = "default",
|
||||
}: ContainerProps) {
|
||||
const variantClass = variant === "narrow" ? "container--narrow" :
|
||||
variant === "wide" ? "container--wide" : "";
|
||||
const variantClasses: Record<ContainerVariant, string> = {
|
||||
default: "container",
|
||||
narrow: "container container--narrow",
|
||||
wide: "container container--wide",
|
||||
};
|
||||
|
||||
return (
|
||||
<Tag
|
||||
className={`container ${variantClass} ${className}`.trim()}
|
||||
{...props}
|
||||
>
|
||||
<Tag className={`${variantClasses[variant]} ${className}`.trim()}>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
|
||||
+103
-27
@@ -1,54 +1,130 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { Container } from "./Container";
|
||||
import Image from "next/image";
|
||||
import { Phone, Mail, MapPin } from "lucide-react";
|
||||
|
||||
const footerLinks = {
|
||||
services: [
|
||||
{ name: "Fernsehen", href: "/fernsehen" },
|
||||
{ name: "Internet", href: "/internet" },
|
||||
{ name: "Telefonie", href: "/telefonie" },
|
||||
{ name: "Leistungen", href: "/leistungen" },
|
||||
],
|
||||
company: [
|
||||
{ name: "Über uns", href: "/ueber-uns" },
|
||||
{ name: "Kontakt", href: "/kontakt" },
|
||||
{ name: "Impressum", href: "/impressum" },
|
||||
{ name: "Datenschutz", href: "/datenschutz" },
|
||||
],
|
||||
};
|
||||
|
||||
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
|
||||
<footer className="bg-[var(--color-foreground)] text-[var(--color-background)]">
|
||||
<div className="container">
|
||||
{/* Main Footer Content */}
|
||||
<div className="py-[var(--spacing-3xl)] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-2xl)]">
|
||||
{/* Company Info */}
|
||||
<div className="stack-md">
|
||||
<Link
|
||||
href="/"
|
||||
className="hover:no-underline"
|
||||
>
|
||||
<Image
|
||||
src="/images/logo/logo-weiss-ffa4cbf6.png"
|
||||
alt="TeleNetSystems Logo"
|
||||
width={160}
|
||||
height={36}
|
||||
className="h-8 w-auto"
|
||||
/>
|
||||
</Link>
|
||||
<p className="text-sm text-[color:var(--color-muted-foreground)]">
|
||||
Ihr regionaler Partner für Internet, TV und Telefonie in Reutte & Umgebung.
|
||||
<p className="text-sm opacity-80">
|
||||
Ihr regionaler Telekom- und IT-Partner in Tirol.
|
||||
Zuverlässige Technik, ehrliche Beratung und persönlicher Service seit 1976.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Services Links */}
|
||||
<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>
|
||||
<h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||
Leistungen
|
||||
</h3>
|
||||
<ul className="stack-sm">
|
||||
{footerLinks.services.map((link) => (
|
||||
<li key={link.name}>
|
||||
<Link
|
||||
href={link.href}
|
||||
className="text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Company Links */}
|
||||
<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>
|
||||
<h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||
Unternehmen
|
||||
</h3>
|
||||
<ul className="stack-sm">
|
||||
{footerLinks.company.map((link) => (
|
||||
<li key={link.name}>
|
||||
<Link
|
||||
href={link.href}
|
||||
className="text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<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>
|
||||
<h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||
Kontakt
|
||||
</h3>
|
||||
<ul className="stack-md">
|
||||
<li className="flex items-start gap-[var(--spacing-sm)]">
|
||||
<MapPin size={18} className="shrink-0 mt-0.5 text-[var(--color-primary)]" />
|
||||
<span className="text-sm opacity-80">
|
||||
PLACEHOLDER: Adresse<br />
|
||||
6600 Reutte, Tirol
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="tel:+43567612345"
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
|
||||
>
|
||||
<Phone size={18} className="shrink-0 text-[var(--color-primary)]" />
|
||||
PLACEHOLDER: Telefon
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="mailto:info@tnr.at"
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
|
||||
>
|
||||
<Mail size={18} className="shrink-0 text-[var(--color-primary)]" />
|
||||
PLACEHOLDER: E-Mail
|
||||
</a>
|
||||
</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)]">
|
||||
© {currentYear} TeleNetSystems GmbH. Alle Rechte vorbehalten.
|
||||
{/* Bottom Bar */}
|
||||
<div className="py-[var(--spacing-lg)] border-t border-[var(--color-background)]/10">
|
||||
<p className="text-sm opacity-60 text-center">
|
||||
© {currentYear} Telenet Systems GmbH. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,41 +1,105 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { Container } from "./Container";
|
||||
import { Button } from "../ui/Button";
|
||||
import Image from "next/image";
|
||||
import { Menu, X, Phone } from "lucide-react";
|
||||
|
||||
const navLinks = [
|
||||
{ href: "/fernsehen", label: "Fernsehen" },
|
||||
{ href: "/internet", label: "Internet" },
|
||||
{ href: "/telefonie", label: "Telefonie" },
|
||||
{ href: "/leistungen", label: "Leistungen" },
|
||||
{ href: "/ueber-uns", label: "Über uns" },
|
||||
const navigation = [
|
||||
{ name: "Fernsehen", href: "/fernsehen" },
|
||||
{ name: "Internet", href: "/internet" },
|
||||
{ name: "Telefonie", href: "/telefonie" },
|
||||
{ name: "Leistungen", href: "/leistungen" },
|
||||
{ name: "Über uns", href: "/ueber-uns" },
|
||||
];
|
||||
|
||||
export function Header() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
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) => (
|
||||
<header className="sticky top-0 z-50 bg-[var(--color-background)] border-b border-[var(--color-border)]">
|
||||
<div className="container">
|
||||
<nav className="flex items-center justify-between h-16 md:h-20">
|
||||
{/* Logo */}
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="text-sm font-medium hover:text-[color:var(--color-primary)] transition-colors"
|
||||
href="/"
|
||||
className="hover:no-underline"
|
||||
>
|
||||
{link.label}
|
||||
<Image
|
||||
src="/images/logo/logo-systems-9fd0db14.png"
|
||||
alt="TeleNetSystems Logo"
|
||||
width={180}
|
||||
height={40}
|
||||
priority
|
||||
className="h-8 md:h-10 w-auto"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden lg:flex items-center gap-[var(--spacing-lg)]">
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-[var(--color-foreground)] hover:text-[var(--color-primary)] hover:no-underline transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="#kontakt" className="btn btn-primary btn-sm">
|
||||
</div>
|
||||
|
||||
{/* Desktop CTAs */}
|
||||
<div className="hidden lg:flex items-center gap-[var(--spacing-md)]">
|
||||
<a
|
||||
href="tel:+43567612345"
|
||||
className="flex items-center gap-[var(--spacing-xs)] text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:no-underline transition-colors"
|
||||
>
|
||||
<Phone size={18} />
|
||||
<span className="text-sm">PLACEHOLDER: Telefon</span>
|
||||
</a>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
type="button"
|
||||
className="lg:hidden p-2 text-[var(--color-foreground)]"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-label={mobileMenuOpen ? "Menü schließen" : "Menü öffnen"}
|
||||
>
|
||||
{mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="lg:hidden border-t border-[var(--color-border)] pb-[var(--spacing-lg)]">
|
||||
<div className="stack-sm pt-[var(--spacing-md)]">
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="block py-[var(--spacing-sm)] text-[var(--color-foreground)] hover:text-[var(--color-primary)] hover:no-underline"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
<div className="pt-[var(--spacing-md)] border-t border-[var(--color-border)] mt-[var(--spacing-md)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-primary w-full"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,29 +1,32 @@
|
||||
import type { ElementType, ReactNode } from "react";
|
||||
|
||||
interface SectionProps extends React.HTMLAttributes<HTMLElement> {
|
||||
type SectionVariant = "default" | "hero" | "sm" | "lg" | "flush";
|
||||
|
||||
interface SectionProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
as?: ElementType;
|
||||
variant?: "sm" | "lg" | "hero" | "flush";
|
||||
variant?: SectionVariant;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export function Section({
|
||||
children,
|
||||
className = "",
|
||||
as: Tag = "section",
|
||||
variant,
|
||||
...props
|
||||
variant = "default",
|
||||
id,
|
||||
}: SectionProps) {
|
||||
const variantClass = variant === "sm" ? "section--sm" :
|
||||
variant === "lg" ? "section--lg" :
|
||||
variant === "hero" ? "section--hero" :
|
||||
variant === "flush" ? "section--flush" : "";
|
||||
const variantClasses: Record<SectionVariant, string> = {
|
||||
default: "section",
|
||||
hero: "section section--hero",
|
||||
sm: "section section--sm",
|
||||
lg: "section section--lg",
|
||||
flush: "section section--flush",
|
||||
};
|
||||
|
||||
return (
|
||||
<Tag
|
||||
className={`section ${variantClass} ${className}`.trim()}
|
||||
{...props}
|
||||
>
|
||||
<Tag id={id} className={`${variantClasses[variant]} ${className}`.trim()}>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
|
||||
+22
-14
@@ -1,34 +1,42 @@
|
||||
import type { ButtonHTMLAttributes, ReactNode } from "react";
|
||||
|
||||
type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
|
||||
type ButtonSize = "sm" | "lg";
|
||||
type ButtonVariant = "primary" | "secondary" | "ghost";
|
||||
type ButtonSize = "sm" | "md" | "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,
|
||||
size = "md",
|
||||
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={`btn ${variantClass} ${sizeClass} ${className}`.trim()}
|
||||
className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`.trim()}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -13,7 +13,7 @@ export function Card({
|
||||
}: CardProps) {
|
||||
return (
|
||||
<Tag
|
||||
className={`card ${className}`.trim()}
|
||||
className={`rounded-[var(--radius-md)] border border-[color:var(--color-border)] shadow-[var(--shadow-sm)] p-[var(--spacing-lg)] ${className}`.trim()}
|
||||
>
|
||||
{children}
|
||||
</Tag>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 320 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 683 KiB |
+1
-2
@@ -7,8 +7,7 @@
|
||||
:root {
|
||||
/* ── Colors ──────────────────────────────────────── */
|
||||
--color-primary: #f39210;
|
||||
--color-secondary: #1e293b;
|
||||
/* Slate 800 - High contrast to primary orange */
|
||||
--color-secondary: #f39210;
|
||||
--color-accent: #eb5c24;
|
||||
--color-neutral: #6b7280;
|
||||
--color-background: #ffffff;
|
||||
|
||||
+21
-82
@@ -15,9 +15,7 @@
|
||||
|
||||
/* ── Base Resets ───────────────────────────────────── */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -88,54 +86,43 @@ 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);
|
||||
@@ -143,30 +130,11 @@ h6,
|
||||
|
||||
/* ── 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);
|
||||
@@ -248,8 +216,7 @@ h6,
|
||||
.btn-ghost {
|
||||
background-color: transparent;
|
||||
color: var(--color-foreground);
|
||||
border: 1px solid transparent;
|
||||
/* Keep size consistent */
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
@@ -274,15 +241,6 @@ h6,
|
||||
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 ───────────────────────────────────────── */
|
||||
@@ -298,9 +256,7 @@ a:hover {
|
||||
|
||||
/* ── Images ──────────────────────────────────────── */
|
||||
|
||||
img,
|
||||
video,
|
||||
svg {
|
||||
img, video, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
@@ -322,29 +278,12 @@ 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 ───────────────────────────────────── */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user