Compare commits
2 Commits
main
...
testing-v2
| Author | SHA1 | Date | |
|---|---|---|---|
|
747e52133a | ||
|
|
578bb8edb3 |
93
app/datenschutz/page.tsx
Normal file
93
app/datenschutz/page.tsx
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
import { Metadata } from "next";
|
||||||
|
import { Section } from "@/components/layout/Section";
|
||||||
|
import { Container } from "@/components/layout/Container";
|
||||||
|
|
||||||
|
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 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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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-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>
|
||||||
|
|
||||||
|
<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="text-sm text-muted mt-[var(--spacing-2xl)]">
|
||||||
|
Stand: Februar 2026
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
185
app/fernsehen/page.tsx
Normal file
185
app/fernsehen/page.tsx
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
import { Metadata } from "next";
|
||||||
|
import Link from "next/link";
|
||||||
|
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: 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 */}
|
||||||
|
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||||
|
<Container>
|
||||||
|
<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-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 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>
|
||||||
|
|
||||||
|
{/* Trust Elements */}
|
||||||
|
<Section variant="sm" className="bg-[var(--color-background)] border-b border-[var(--color-border)]">
|
||||||
|
<Container>
|
||||||
|
<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>
|
||||||
|
<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="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="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>
|
||||||
|
|
||||||
|
{/* TV Business Section */}
|
||||||
|
<Section className="bg-[var(--color-muted)]">
|
||||||
|
<Container>
|
||||||
|
<div className="max-w-3xl mx-auto text-center">
|
||||||
|
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||||
|
Für Geschäftskunden
|
||||||
|
</span>
|
||||||
|
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||||||
|
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>
|
||||||
|
<Link href="/kontakt" className="btn btn-primary">
|
||||||
|
Individuelle Lösung anfragen
|
||||||
|
<ArrowRight size={18} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* Pay TV Section */}
|
||||||
|
<Section>
|
||||||
|
<Container>
|
||||||
|
<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">
|
||||||
|
Pay-TV anfragen
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<Section className="bg-[var(--color-primary)]">
|
||||||
|
<Container>
|
||||||
|
<div className="text-center text-[var(--color-background)]">
|
||||||
|
<h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||||
|
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)]">
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
110
app/impressum/page.tsx
Normal file
110
app/impressum/page.tsx
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
import { Metadata } from "next";
|
||||||
|
import { Section } from "@/components/layout/Section";
|
||||||
|
import { Container } from "@/components/layout/Container";
|
||||||
|
|
||||||
|
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 variant="narrow">
|
||||||
|
<div className="prose max-w-none">
|
||||||
|
<h2 className="heading-3">Angaben gemäß § 5 ECG</h2>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<h3 className="heading-4 mt-[var(--spacing-xl)]">Unternehmensgegenstand</h3>
|
||||||
|
<p className="text-muted">
|
||||||
|
Telekommunikationsdienstleistungen und IT-Services
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 className="heading-4 mt-[var(--spacing-xl)]">Firmenbuchnummer</h3>
|
||||||
|
<p className="text-muted">
|
||||||
|
PLACEHOLDER: FN XXXXXX x
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</Section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
285
app/internet/page.tsx
Normal file
285
app/internet/page.tsx
Normal file
@@ -0,0 +1,285 @@
|
|||||||
|
import { Metadata } from "next";
|
||||||
|
import Link from "next/link";
|
||||||
|
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: Metadata = {
|
||||||
|
title: "Internet",
|
||||||
|
description:
|
||||||
|
"Highspeed-Internet über Kabel oder Glasfaser. Schnell, stabil, unlimitiert – für Privat- und Geschäftskunden in Tirol.",
|
||||||
|
};
|
||||||
|
|
||||||
|
const kabelTarife = [
|
||||||
|
{
|
||||||
|
name: "telenet.hit",
|
||||||
|
preis: "€ 14,50",
|
||||||
|
download: "40 Mbit/s",
|
||||||
|
upload: "6 Mbit/s",
|
||||||
|
features: ["Keine Servicepauschale", "Unlimitierte Daten"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "telenet.eco",
|
||||||
|
preis: "€ 19,00",
|
||||||
|
download: "60 Mbit/s",
|
||||||
|
upload: "8 Mbit/s",
|
||||||
|
features: ["Keine Servicepauschale", "Unlimitierte Daten"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "telenet.fun",
|
||||||
|
preis: "€ 29,00",
|
||||||
|
download: "80 Mbit/s",
|
||||||
|
upload: "12 Mbit/s",
|
||||||
|
features: ["Keine Servicepauschale", "Unlimitierte Daten"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "telenet.pro",
|
||||||
|
preis: "€ 39,00",
|
||||||
|
download: "100 Mbit/s",
|
||||||
|
upload: "14 Mbit/s",
|
||||||
|
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Öffentliche IPv4"],
|
||||||
|
highlight: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "telenet.mega",
|
||||||
|
preis: "€ 49,00",
|
||||||
|
download: "180 Mbit/s",
|
||||||
|
upload: "22 Mbit/s",
|
||||||
|
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Öffentliche IPv4"],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const glasfaserTarife = [
|
||||||
|
{
|
||||||
|
name: "telenet.eco",
|
||||||
|
preis: "€ 23,00",
|
||||||
|
download: "100 Mbit/s",
|
||||||
|
upload: "100 Mbit/s",
|
||||||
|
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "telenet.fun",
|
||||||
|
preis: "€ 29,00",
|
||||||
|
download: "200 Mbit/s",
|
||||||
|
upload: "200 Mbit/s",
|
||||||
|
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "telenet.pro",
|
||||||
|
preis: "€ 39,00",
|
||||||
|
download: "300 Mbit/s",
|
||||||
|
upload: "300 Mbit/s",
|
||||||
|
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch", "Öffentliche IPv4"],
|
||||||
|
highlight: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "telenet.mega",
|
||||||
|
preis: "€ 49,00",
|
||||||
|
download: "500 Mbit/s",
|
||||||
|
upload: "500 Mbit/s",
|
||||||
|
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch", "Öffentliche IPv4"],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function InternetPage() {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||||
|
<Container>
|
||||||
|
<div className="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-2xl)]">
|
||||||
|
Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
|
||||||
|
Flexible Tarife ohne Servicepauschale – für Privat- und Geschäftskunden.
|
||||||
|
</p>
|
||||||
|
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||||
|
Jetzt beraten lassen
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* Trust Elements */}
|
||||||
|
<Section variant="sm" className="border-b border-[var(--color-border)]">
|
||||||
|
<Container>
|
||||||
|
<div className="flex flex-wrap justify-center gap-[var(--spacing-xl)]">
|
||||||
|
{["Keine Servicepauschale", "Unlimitierte Daten", "IPv6 inklusive", "Regionaler Support"].map((feature) => (
|
||||||
|
<div key={feature} className="flex items-center gap-[var(--spacing-sm)]">
|
||||||
|
<Check size={18} className="text-[var(--color-primary)]" />
|
||||||
|
<span className="text-sm font-medium">{feature}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* Kabel-Internet Section */}
|
||||||
|
<Section id="kabel">
|
||||||
|
<Container>
|
||||||
|
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||||
|
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||||
|
Tarife für Kabel-Kunden
|
||||||
|
</span>
|
||||||
|
<h2 className="mt-[var(--spacing-sm)]">Kabel-Internet</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-[var(--spacing-lg)]">
|
||||||
|
{kabelTarife.map((tarif) => (
|
||||||
|
<div
|
||||||
|
key={tarif.name}
|
||||||
|
className={`card text-center ${tarif.highlight ? "ring-2 ring-[var(--color-primary)]" : ""}`}
|
||||||
|
>
|
||||||
|
{tarif.highlight && (
|
||||||
|
<span className="inline-block bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-medium px-[var(--spacing-sm)] py-[var(--spacing-xs)] rounded-full mb-[var(--spacing-md)]">
|
||||||
|
Empfohlen
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<h3 className="heading-5 mb-[var(--spacing-sm)]">{tarif.name}</h3>
|
||||||
|
<p className="text-3xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
|
||||||
|
<p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
|
||||||
|
<div className="text-sm mb-[var(--spacing-md)]">
|
||||||
|
<p><strong>{tarif.download}</strong> Download</p>
|
||||||
|
<p><strong>{tarif.upload}</strong> Upload</p>
|
||||||
|
</div>
|
||||||
|
<ul className="stack-xs text-left text-sm mb-[var(--spacing-lg)]">
|
||||||
|
{tarif.features.map((feature) => (
|
||||||
|
<li key={feature} className="flex items-center gap-[var(--spacing-xs)]">
|
||||||
|
<Check size={14} className="text-[var(--color-primary)] shrink-0" />
|
||||||
|
<span>{feature}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<Link href="/kontakt" className="btn btn-outline btn-sm w-full">
|
||||||
|
Anfragen
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted text-center mt-[var(--spacing-xl)]">
|
||||||
|
Tarife gültig ab 01.05.2024. Für die Installation fallen einmalige Installationskosten an.
|
||||||
|
</p>
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* Glasfaser-Internet Section */}
|
||||||
|
<Section id="glasfaser" className="bg-[var(--color-muted)]">
|
||||||
|
<Container>
|
||||||
|
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||||
|
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||||
|
Tarife für Glasfaser-Kunden
|
||||||
|
</span>
|
||||||
|
<h2 className="mt-[var(--spacing-sm)]">Glasfaser-Internet</h2>
|
||||||
|
<p className="lead max-w-2xl mx-auto mt-[var(--spacing-md)]">
|
||||||
|
Symmetrische Geschwindigkeiten – gleich schnell im Download und Upload.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-lg)] max-w-5xl mx-auto">
|
||||||
|
{glasfaserTarife.map((tarif) => (
|
||||||
|
<div
|
||||||
|
key={tarif.name + "-glas"}
|
||||||
|
className={`card text-center ${tarif.highlight ? "ring-2 ring-[var(--color-primary)]" : ""}`}
|
||||||
|
>
|
||||||
|
{tarif.highlight && (
|
||||||
|
<span className="inline-block bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-medium px-[var(--spacing-sm)] py-[var(--spacing-xs)] rounded-full mb-[var(--spacing-md)]">
|
||||||
|
Empfohlen
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<h3 className="heading-5 mb-[var(--spacing-sm)]">{tarif.name}</h3>
|
||||||
|
<p className="text-3xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
|
||||||
|
<p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
|
||||||
|
<div className="text-sm mb-[var(--spacing-md)]">
|
||||||
|
<p><strong>{tarif.download}</strong> Download</p>
|
||||||
|
<p><strong>{tarif.upload}</strong> Upload</p>
|
||||||
|
</div>
|
||||||
|
<ul className="stack-xs text-left text-sm mb-[var(--spacing-lg)]">
|
||||||
|
{tarif.features.map((feature) => (
|
||||||
|
<li key={feature} className="flex items-center gap-[var(--spacing-xs)]">
|
||||||
|
<Check size={14} className="text-[var(--color-primary)] shrink-0" />
|
||||||
|
<span>{feature}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<Link href="/kontakt" className="btn btn-outline btn-sm w-full">
|
||||||
|
Anfragen
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted text-center mt-[var(--spacing-xl)]">
|
||||||
|
Tarife gültig ab 01.04.2025. Für die Installation fallen einmalige Installationskosten an.
|
||||||
|
</p>
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* Business Section */}
|
||||||
|
<Section>
|
||||||
|
<Container>
|
||||||
|
<div className="max-w-3xl mx-auto text-center">
|
||||||
|
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||||
|
Für Geschäftskunden
|
||||||
|
</span>
|
||||||
|
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||||||
|
Business-Internet
|
||||||
|
</h2>
|
||||||
|
<p className="text-muted mb-[var(--spacing-xl)]">
|
||||||
|
Gerne erstellen wir für Ihr Unternehmen ein maßgeschneidertes Business-Internet-Angebot
|
||||||
|
inkl. passendem Service-Paket. Schicken Sie uns einfach Ihre Anfrage.
|
||||||
|
</p>
|
||||||
|
<Link href="/kontakt" className="btn btn-primary">
|
||||||
|
Individuelle Lösung anfragen
|
||||||
|
<ArrowRight size={18} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<Section className="bg-[var(--color-primary)]">
|
||||||
|
<Container>
|
||||||
|
<div className="text-center text-[var(--color-background)]">
|
||||||
|
<h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||||
|
Welcher Tarif passt zu Ihnen?
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||||
|
Wir beraten Sie gerne und finden die beste Lösung für Ihre Anforderungen.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||||||
|
<Link
|
||||||
|
href="/kontakt"
|
||||||
|
className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
|
||||||
|
>
|
||||||
|
Jetzt beraten lassen
|
||||||
|
</Link>
|
||||||
|
<a
|
||||||
|
href="tel:+43567612345"
|
||||||
|
className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
|
||||||
|
>
|
||||||
|
<Phone size={18} />
|
||||||
|
PLACEHOLDER: Telefon
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
106
app/layout.tsx
106
app/layout.tsx
@@ -1,98 +1,64 @@
|
|||||||
import type { Metadata, Viewport } from "next";
|
import type { Metadata, Viewport } from "next";
|
||||||
|
import { Inter } from "next/font/google";
|
||||||
|
import { Header } from "@/components/layout/Header";
|
||||||
|
import { Footer } from "@/components/layout/Footer";
|
||||||
import "@/theme/globals.css";
|
import "@/theme/globals.css";
|
||||||
|
import "@/theme/stylesheet.css";
|
||||||
|
|
||||||
/**
|
const inter = Inter({
|
||||||
* Root Layout
|
subsets: ["latin"],
|
||||||
*
|
variable: "--font-inter",
|
||||||
* This layout is designed to work with the 9-category parameter system.
|
display: "swap",
|
||||||
* 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
|
|
||||||
*/
|
|
||||||
|
|
||||||
// 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 = {
|
export const metadata: Metadata = {
|
||||||
title: "Website",
|
title: {
|
||||||
description: "Generated website",
|
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: {
|
robots: {
|
||||||
index: true,
|
index: true,
|
||||||
follow: true,
|
follow: true,
|
||||||
},
|
},
|
||||||
// Open Graph tags - update based on spec
|
|
||||||
openGraph: {
|
openGraph: {
|
||||||
type: "website",
|
type: "website",
|
||||||
locale: "de_DE",
|
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 = {
|
export const viewport: Viewport = {
|
||||||
width: "device-width",
|
width: "device-width",
|
||||||
initialScale: 1,
|
initialScale: 1,
|
||||||
// TODO: Update themeColor from spec.brand.colors.primary or design_tokens
|
themeColor: "#f39210",
|
||||||
themeColor: "#ffffff",
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* 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({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: Readonly<{
|
||||||
children: React.ReactNode;
|
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 (
|
return (
|
||||||
<html lang={locale}>
|
<html lang="de-AT" className={inter.variable}>
|
||||||
{/*
|
<body>
|
||||||
Scroll Behavior:
|
<Header />
|
||||||
- If spec.interaction.scrollBehavior === "smooth", add className="scroll-smooth"
|
{children}
|
||||||
- Or set scroll-behavior: smooth in globals.css on html element
|
<Footer />
|
||||||
|
</body>
|
||||||
Example with smooth scrolling:
|
|
||||||
<html lang={locale} className="scroll-smooth">
|
|
||||||
*/}
|
|
||||||
<body>{children}</body>
|
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
237
app/leistungen/page.tsx
Normal file
237
app/leistungen/page.tsx
Normal file
@@ -0,0 +1,237 @@
|
|||||||
|
import { Metadata } from "next";
|
||||||
|
import Link from "next/link";
|
||||||
|
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: 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>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||||
|
<Container>
|
||||||
|
<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-2xl)]">
|
||||||
|
Von Fernsehen über Internet bis zu IT-Services –
|
||||||
|
wir bieten Ihnen umfassende Lösungen aus einer Hand.
|
||||||
|
</p>
|
||||||
|
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||||
|
Jetzt beraten lassen
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* Telekom Services */}
|
||||||
|
<Section>
|
||||||
|
<Container>
|
||||||
|
<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 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>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
{/* 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)]">
|
||||||
|
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>
|
||||||
|
<Link
|
||||||
|
href="/kontakt"
|
||||||
|
className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
|
||||||
|
>
|
||||||
|
Jetzt beraten lassen
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
218
app/page.tsx
218
app/page.tsx
@@ -1,12 +1,222 @@
|
|||||||
import { Container } from "@/components/layout/Container";
|
import { Metadata } from "next";
|
||||||
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
import { Section } from "@/components/layout/Section";
|
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 Page() {
|
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 (
|
return (
|
||||||
<main>
|
<main>
|
||||||
<Section>
|
{/* Hero Section */}
|
||||||
|
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||||
<Container>
|
<Container>
|
||||||
<p>Ready</p>
|
<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>
|
||||||
|
<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="/leistungen" className="btn btn-outline btn-lg">
|
||||||
|
Unsere Leistungen
|
||||||
|
<ArrowRight size={18} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* Services Section */}
|
||||||
|
<Section id="leistungen">
|
||||||
|
<Container>
|
||||||
|
<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 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>
|
||||||
|
<h3 className="heading-4 mb-[var(--spacing-sm)]">{service.title}</h3>
|
||||||
|
<p className="text-muted mb-[var(--spacing-md)]">
|
||||||
|
{service.description}
|
||||||
|
</p>
|
||||||
|
<p className="font-semibold text-[var(--color-primary)] mb-[var(--spacing-lg)]">
|
||||||
|
{service.price}
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href={service.href}
|
||||||
|
className="btn btn-ghost justify-start p-0 hover:text-[var(--color-primary)]"
|
||||||
|
>
|
||||||
|
Mehr erfahren
|
||||||
|
<ArrowRight size={16} />
|
||||||
|
</Link>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* USP Section */}
|
||||||
|
<Section className="bg-[var(--color-muted)]">
|
||||||
|
<Container>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* Trust Section */}
|
||||||
|
<Section variant="sm">
|
||||||
|
<Container>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* 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-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)]">
|
||||||
|
<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>
|
</Container>
|
||||||
</Section>
|
</Section>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
167
app/telefonie/page.tsx
Normal file
167
app/telefonie/page.tsx
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
import { Metadata } from "next";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Section } from "@/components/layout/Section";
|
||||||
|
import { Container } from "@/components/layout/Container";
|
||||||
|
import { Phone as PhoneIcon, Check, ArrowRight } from "lucide-react";
|
||||||
|
|
||||||
|
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>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||||
|
<Container>
|
||||||
|
<div className="max-w-3xl">
|
||||||
|
<div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
|
||||||
|
<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-2xl)]">
|
||||||
|
Flexible Telefonie-Tarife für Ihr Festnetz.
|
||||||
|
Mit oder ohne Internet nutzbar – Sie haben die Wahl.
|
||||||
|
</p>
|
||||||
|
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||||
|
Jetzt beraten lassen
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* Tarife Section */}
|
||||||
|
<Section>
|
||||||
|
<Container>
|
||||||
|
<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 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-outline w-full">
|
||||||
|
Anfragen
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* Info Section */}
|
||||||
|
<Section className="bg-[var(--color-muted)]">
|
||||||
|
<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="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>
|
||||||
|
|
||||||
|
{/* 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)]">
|
||||||
|
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)]">
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
203
app/ueber-uns/page.tsx
Normal file
203
app/ueber-uns/page.tsx
Normal file
@@ -0,0 +1,203 @@
|
|||||||
|
import { Metadata } from "next";
|
||||||
|
import Link from "next/link";
|
||||||
|
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: 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>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||||
|
<Container>
|
||||||
|
<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 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 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* Values Section */}
|
||||||
|
<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">
|
||||||
|
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>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
BIN
assets/BilderUndLogos/brand/logo-systems-9fd0db14.png
Normal file
BIN
assets/BilderUndLogos/brand/logo-systems-9fd0db14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
BIN
assets/BilderUndLogos/brand/logo-weiss-ffa4cbf6.png
Normal file
BIN
assets/BilderUndLogos/brand/logo-weiss-ffa4cbf6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
assets/BilderUndLogos/hero/internet-header-431619ac.jpg
Normal file
BIN
assets/BilderUndLogos/hero/internet-header-431619ac.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
BIN
assets/BilderUndLogos/hero/tv-header-44c1e07b.jpg
Normal file
BIN
assets/BilderUndLogos/hero/tv-header-44c1e07b.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
assets/BilderUndLogos/misc/firma1-8a863d8b.jpg
Normal file
BIN
assets/BilderUndLogos/misc/firma1-8a863d8b.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
assets/BilderUndLogos/misc/firmenkunden-96736712-5fa99704.jpg
Normal file
BIN
assets/BilderUndLogos/misc/firmenkunden-96736712-5fa99704.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
BIN
assets/BilderUndLogos/misc/franz-8b76ccff-320f42cb.jpg
Normal file
BIN
assets/BilderUndLogos/misc/franz-8b76ccff-320f42cb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
assets/BilderUndLogos/misc/furkan-demirel-4112a488-f6dfc223.jpg
Normal file
BIN
assets/BilderUndLogos/misc/furkan-demirel-4112a488-f6dfc223.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
BIN
assets/BilderUndLogos/misc/internet-7b594a2d-793cefee.jpg
Normal file
BIN
assets/BilderUndLogos/misc/internet-7b594a2d-793cefee.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
assets/BilderUndLogos/misc/julia-20besler-f4fe1bff-fb0f3af2.jpg
Normal file
BIN
assets/BilderUndLogos/misc/julia-20besler-f4fe1bff-fb0f3af2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
BIN
assets/BilderUndLogos/misc/lorena-c31636eb-2f817bb4.jpg
Normal file
BIN
assets/BilderUndLogos/misc/lorena-c31636eb-2f817bb4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
assets/BilderUndLogos/misc/lwl1-c8928579-d408002b.jpg
Normal file
BIN
assets/BilderUndLogos/misc/lwl1-c8928579-d408002b.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
BIN
assets/BilderUndLogos/misc/mario-20kien-f5e3602f-ddda3b58.jpg
Normal file
BIN
assets/BilderUndLogos/misc/mario-20kien-f5e3602f-ddda3b58.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
assets/BilderUndLogos/misc/privatkunden-a54cf4d8-0018c3fa.jpg
Normal file
BIN
assets/BilderUndLogos/misc/privatkunden-a54cf4d8-0018c3fa.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
assets/BilderUndLogos/misc/serverraum-7225cb6a.jpg
Normal file
BIN
assets/BilderUndLogos/misc/serverraum-7225cb6a.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
assets/BilderUndLogos/misc/telefon-fa5e8c21-271d2135.jpg
Normal file
BIN
assets/BilderUndLogos/misc/telefon-fa5e8c21-271d2135.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
assets/BilderUndLogos/misc/telefonie1-ad7595f9.jpg
Normal file
BIN
assets/BilderUndLogos/misc/telefonie1-ad7595f9.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
BIN
assets/BilderUndLogos/misc/timo-224648e7-f0782cdb.jpg
Normal file
BIN
assets/BilderUndLogos/misc/timo-224648e7-f0782cdb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
assets/BilderUndLogos/misc/tv-business-c3bdfb94-23310090.jpg
Normal file
BIN
assets/BilderUndLogos/misc/tv-business-c3bdfb94-23310090.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
assets/BilderUndLogos/misc/tv-paytv-6cbac6e4-d140e2e4.jpg
Normal file
BIN
assets/BilderUndLogos/misc/tv-paytv-6cbac6e4-d140e2e4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
assets/BilderUndLogos/misc/tv-privat-76f60c7a-88eafcfb.jpg
Normal file
BIN
assets/BilderUndLogos/misc/tv-privat-76f60c7a-88eafcfb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
assets/BilderUndLogos/services/lwl1-40360e27.jpg
Normal file
BIN
assets/BilderUndLogos/services/lwl1-40360e27.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 320 KiB |
BIN
assets/BilderUndLogos/services/tnr-leistungen-055053d5.jpg
Normal file
BIN
assets/BilderUndLogos/services/tnr-leistungen-055053d5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 683 KiB |
BIN
assets/BilderUndLogos/team/team-telenet-f9218567.jpg
Normal file
BIN
assets/BilderUndLogos/team/team-telenet-f9218567.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 274 KiB |
@@ -1,20 +1,28 @@
|
|||||||
import type { ElementType, ReactNode } from "react";
|
import type { ElementType, ReactNode } from "react";
|
||||||
|
|
||||||
|
type ContainerVariant = "default" | "narrow" | "wide";
|
||||||
|
|
||||||
interface ContainerProps {
|
interface ContainerProps {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
className?: string;
|
className?: string;
|
||||||
as?: ElementType;
|
as?: ElementType;
|
||||||
|
variant?: ContainerVariant;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Container({
|
export function Container({
|
||||||
children,
|
children,
|
||||||
className = "",
|
className = "",
|
||||||
as: Tag = "div",
|
as: Tag = "div",
|
||||||
|
variant = "default",
|
||||||
}: ContainerProps) {
|
}: ContainerProps) {
|
||||||
|
const variantClasses: Record<ContainerVariant, string> = {
|
||||||
|
default: "container",
|
||||||
|
narrow: "container container--narrow",
|
||||||
|
wide: "container container--wide",
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tag
|
<Tag className={`${variantClasses[variant]} ${className}`.trim()}>
|
||||||
className={`mx-auto w-full max-w-[var(--container-max-width)] px-[var(--container-padding-x)] ${className}`.trim()}
|
|
||||||
>
|
|
||||||
{children}
|
{children}
|
||||||
</Tag>
|
</Tag>
|
||||||
);
|
);
|
||||||
|
|||||||
130
components/layout/Footer.tsx
Normal file
130
components/layout/Footer.tsx
Normal file
@@ -0,0 +1,130 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
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-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 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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
105
components/layout/Header.tsx
Normal file
105
components/layout/Header.tsx
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { Menu, X, Phone } from "lucide-react";
|
||||||
|
|
||||||
|
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="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
|
||||||
|
href="/"
|
||||||
|
className="hover:no-underline"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
))}
|
||||||
|
</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>
|
||||||
|
|
||||||
|
{/* 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,20 +1,32 @@
|
|||||||
import type { ElementType, ReactNode } from "react";
|
import type { ElementType, ReactNode } from "react";
|
||||||
|
|
||||||
|
type SectionVariant = "default" | "hero" | "sm" | "lg" | "flush";
|
||||||
|
|
||||||
interface SectionProps {
|
interface SectionProps {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
className?: string;
|
className?: string;
|
||||||
as?: ElementType;
|
as?: ElementType;
|
||||||
|
variant?: SectionVariant;
|
||||||
|
id?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Section({
|
export function Section({
|
||||||
children,
|
children,
|
||||||
className = "",
|
className = "",
|
||||||
as: Tag = "section",
|
as: Tag = "section",
|
||||||
|
variant = "default",
|
||||||
|
id,
|
||||||
}: SectionProps) {
|
}: SectionProps) {
|
||||||
|
const variantClasses: Record<SectionVariant, string> = {
|
||||||
|
default: "section",
|
||||||
|
hero: "section section--hero",
|
||||||
|
sm: "section section--sm",
|
||||||
|
lg: "section section--lg",
|
||||||
|
flush: "section section--flush",
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tag
|
<Tag id={id} className={`${variantClasses[variant]} ${className}`.trim()}>
|
||||||
className={`py-[var(--section-spacing-y)] ${className}`.trim()}
|
|
||||||
>
|
|
||||||
{children}
|
{children}
|
||||||
</Tag>
|
</Tag>
|
||||||
);
|
);
|
||||||
|
|||||||
BIN
public/images/hero/internet-header-431619ac.jpg
Normal file
BIN
public/images/hero/internet-header-431619ac.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
BIN
public/images/hero/tv-header-44c1e07b.jpg
Normal file
BIN
public/images/hero/tv-header-44c1e07b.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
BIN
public/images/logo/logo-systems-9fd0db14.png
Normal file
BIN
public/images/logo/logo-systems-9fd0db14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
BIN
public/images/logo/logo-weiss-ffa4cbf6.png
Normal file
BIN
public/images/logo/logo-weiss-ffa4cbf6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
public/images/misc/david-20mu-cc-88ller-da85dab8-046e19ba.jpg
Normal file
BIN
public/images/misc/david-20mu-cc-88ller-da85dab8-046e19ba.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
public/images/misc/firma1-8a863d8b.jpg
Normal file
BIN
public/images/misc/firma1-8a863d8b.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
public/images/misc/firmenkunden-96736712-5fa99704.jpg
Normal file
BIN
public/images/misc/firmenkunden-96736712-5fa99704.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
BIN
public/images/misc/franz-8b76ccff-320f42cb.jpg
Normal file
BIN
public/images/misc/franz-8b76ccff-320f42cb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
public/images/misc/furkan-demirel-4112a488-f6dfc223.jpg
Normal file
BIN
public/images/misc/furkan-demirel-4112a488-f6dfc223.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
BIN
public/images/misc/internet-7b594a2d-793cefee.jpg
Normal file
BIN
public/images/misc/internet-7b594a2d-793cefee.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
public/images/misc/julia-20besler-f4fe1bff-fb0f3af2.jpg
Normal file
BIN
public/images/misc/julia-20besler-f4fe1bff-fb0f3af2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
BIN
public/images/misc/lorena-c31636eb-2f817bb4.jpg
Normal file
BIN
public/images/misc/lorena-c31636eb-2f817bb4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
BIN
public/images/misc/lukas-20schennach-0f7160e5-e8152f4f.jpg
Normal file
BIN
public/images/misc/lukas-20schennach-0f7160e5-e8152f4f.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
public/images/misc/lwl1-c8928579-d408002b.jpg
Normal file
BIN
public/images/misc/lwl1-c8928579-d408002b.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
BIN
public/images/misc/mario-20kien-f5e3602f-ddda3b58.jpg
Normal file
BIN
public/images/misc/mario-20kien-f5e3602f-ddda3b58.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
public/images/misc/martin-20m-c3-bcller-4422f545-ddb853b7.jpg
Normal file
BIN
public/images/misc/martin-20m-c3-bcller-4422f545-ddb853b7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
public/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg
Normal file
BIN
public/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
public/images/misc/serverraum-7225cb6a.jpg
Normal file
BIN
public/images/misc/serverraum-7225cb6a.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
public/images/misc/telefon-fa5e8c21-271d2135.jpg
Normal file
BIN
public/images/misc/telefon-fa5e8c21-271d2135.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
public/images/misc/telefonie1-ad7595f9.jpg
Normal file
BIN
public/images/misc/telefonie1-ad7595f9.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
BIN
public/images/misc/timo-224648e7-f0782cdb.jpg
Normal file
BIN
public/images/misc/timo-224648e7-f0782cdb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
public/images/misc/tv-business-c3bdfb94-23310090.jpg
Normal file
BIN
public/images/misc/tv-business-c3bdfb94-23310090.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
public/images/misc/tv-paytv-6cbac6e4-d140e2e4.jpg
Normal file
BIN
public/images/misc/tv-paytv-6cbac6e4-d140e2e4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
public/images/misc/tv-privat-76f60c7a-88eafcfb.jpg
Normal file
BIN
public/images/misc/tv-privat-76f60c7a-88eafcfb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
public/images/misc/wolfgang-20schwaiger-3fd3136b-19e15245.jpg
Normal file
BIN
public/images/misc/wolfgang-20schwaiger-3fd3136b-19e15245.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
public/images/services/lwl1-40360e27.jpg
Normal file
BIN
public/images/services/lwl1-40360e27.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 320 KiB |
BIN
public/images/services/tnr-leistungen-055053d5.jpg
Normal file
BIN
public/images/services/tnr-leistungen-055053d5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 683 KiB |
Reference in New Issue
Block a user