Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 1elle1
|
0c2e9a81a6 |
@@ -0,0 +1,56 @@
|
||||
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
|
||||
export const metadata = {
|
||||
title: "Datenschutzerklärung | TeleNetSystems",
|
||||
};
|
||||
|
||||
export default function DatenschutzPage() {
|
||||
return (
|
||||
<main>
|
||||
<Section>
|
||||
<Container className="max-w-3xl">
|
||||
<h1 className="mb-[var(--spacing-lg)]">Datenschutzerklärung</h1>
|
||||
|
||||
<div className="prose">
|
||||
<h2 className="heading-4 mt-[var(--spacing-md)] mb-[var(--spacing-sm)]">1. Datenschutz auf einen Blick</h2>
|
||||
<h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Allgemeine Hinweise</h3>
|
||||
<p>
|
||||
Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert,
|
||||
wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.
|
||||
</p>
|
||||
|
||||
<h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Datenerfassung auf dieser Website</h3>
|
||||
<p><strong>Wer ist verantwortlich für die Datenerfassung auf dieser Website?</strong></p>
|
||||
<p>
|
||||
Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem
|
||||
Impressum dieser Website entnehmen.
|
||||
</p>
|
||||
|
||||
<h2 className="heading-4 mt-[var(--spacing-md)] mb-[var(--spacing-sm)]">2. Allgemeine Hinweise und Pflichtinformationen</h2>
|
||||
<h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Datenschutz</h3>
|
||||
<p>
|
||||
Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten
|
||||
vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
|
||||
</p>
|
||||
|
||||
<h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Hinweis zur verantwortlichen Stelle</h3>
|
||||
<p>
|
||||
Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:
|
||||
</p>
|
||||
<p className="mt-[var(--spacing-xs)]">
|
||||
PLACEHOLDER: technical.legal.datenschutz.companyName<br />
|
||||
PLACEHOLDER: technical.legal.datenschutz.street<br />
|
||||
PLACEHOLDER: technical.legal.datenschutz.postalCode PLACEHOLDER: technical.legal.datenschutz.city
|
||||
</p>
|
||||
<p className="mt-[var(--spacing-xs)]">
|
||||
Telefon: PLACEHOLDER: technical.legal.datenschutz.phone<br />
|
||||
E-Mail: PLACEHOLDER: technical.legal.datenschutz.email
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
+118
-273
@@ -1,285 +1,130 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Tv, Users, Building2, Play, CheckCircle, ArrowRight } from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Fernsehen",
|
||||
description:
|
||||
"Über 200 TV-Programme inkl. 40 HDTV-Sendern. Kabel-TV für Privat- und Geschäftskunden im Bezirk Reutte. Ab 16,47 € im Monat.",
|
||||
openGraph: {
|
||||
title: "Fernsehen | Telenet Systems GmbH",
|
||||
description:
|
||||
"Über 200 TV-Programme inkl. 40 HDTV-Sendern. Kabel-TV für Privat- und Geschäftskunden im Bezirk Reutte.",
|
||||
},
|
||||
export const metadata = {
|
||||
title: "Kabelfernsehen | TeleNetSystems",
|
||||
description: "Erleben Sie über 200 TV-Programme, 40 HDTV-Sender und beste Bildqualität mit TeleNetSystems in Reutte.",
|
||||
};
|
||||
|
||||
const tvOptions = [
|
||||
{
|
||||
icon: Users,
|
||||
title: "TV Privat",
|
||||
price: "16,47",
|
||||
period: "Monat",
|
||||
description:
|
||||
"Über 200 Programme inkl. 40 HDTV-Sendern und rund 40 Radiosendern direkt in Ihr Wohnzimmer.",
|
||||
features: [
|
||||
"Über 200 TV-Programme",
|
||||
"40 HDTV-Sender inklusive",
|
||||
"Rund 40 Radiosender",
|
||||
"Erstklassige Bildqualität",
|
||||
],
|
||||
cta: "Jetzt bestellen",
|
||||
image: "/images/misc/tv-privat-76f60c7a-88eafcfb.jpg",
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: "TV Business",
|
||||
price: "Auf Anfrage",
|
||||
period: "",
|
||||
description:
|
||||
"Individuelle TV-Lösungen für Ihr Unternehmen. Hotels, Gaststätten, Wartezimmer – wir finden die passende Lösung.",
|
||||
features: [
|
||||
"Maßgeschneidertes Angebot",
|
||||
"Persönliche Beratung",
|
||||
"Individuelle Kanalauswahl",
|
||||
"Professionelle Installation",
|
||||
],
|
||||
cta: "Angebot anfragen",
|
||||
image: "/images/misc/tv-business-c3bdfb94-23310090.jpg",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
icon: Play,
|
||||
title: "Pay TV",
|
||||
price: "Auf Anfrage",
|
||||
period: "",
|
||||
description:
|
||||
"Exklusive Filme, Serien und Sport in HD/UHD. Ergänzen Sie Ihr TV-Erlebnis mit Premium-Inhalten.",
|
||||
features: [
|
||||
"Premium-Sender verfügbar",
|
||||
"HD/UHD Qualität",
|
||||
"Sport & Filme",
|
||||
"Flexible Pakete",
|
||||
],
|
||||
cta: "Mehr erfahren",
|
||||
image: "/images/misc/tv-paytv-6cbac6e4-d140e2e4.jpg",
|
||||
popular: false,
|
||||
},
|
||||
];
|
||||
|
||||
const benefits = [
|
||||
"Keine Servicepauschale",
|
||||
"Persönlicher Support vor Ort",
|
||||
"Schnelle Installation",
|
||||
"Faire und transparente Preise",
|
||||
];
|
||||
|
||||
export default function FernsehenPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/hero/tv-header-44c1e07b.jpg"
|
||||
alt="Familie genießt Fernsehen"
|
||||
fill
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Tv className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Fernsehen</span>
|
||||
</div>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Über 200 TV-Programme in bester Qualität
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Erstklassige Unterhaltung für Ihr Zuhause oder Unternehmen.
|
||||
Mit 40 HDTV-Sendern und rund 40 Radiosendern – ab nur 16,47 € im Monat.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
<a href="#angebote" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
Angebote ansehen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
return (
|
||||
<main>
|
||||
{/* Hero */}
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
<Container>
|
||||
<h1 className="mb-[var(--spacing-md)]">
|
||||
Fernsehen <span className="text-[color:var(--color-primary)]">neu erleben</span>
|
||||
</h1>
|
||||
<p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Brillante Bildqualität, riesige Sendervielfalt und kristallklarer Sound.
|
||||
Holen Sie sich das Kino-Feeling direkt in Ihr Wohnzimmer.
|
||||
</p>
|
||||
<Link href="#kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt anschließen lassen
|
||||
</Link>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Trust Bar */}
|
||||
<Section variant="sm" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
|
||||
{benefits.map((benefit) => (
|
||||
<div
|
||||
key={benefit}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-5 w-5 text-[var(--color-success)]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
{/* Main Benefit */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
|
||||
<div>
|
||||
<h2 className="mb-[var(--spacing-md)]">Unterhaltung ohne Grenzen</h2>
|
||||
<p className="mb-[var(--spacing-lg)]">
|
||||
Mit unserem Kabelanschluss erhalten Sie Zugang zu einer riesigen Welt der Unterhaltung.
|
||||
Egal ob Spielfilme, Sport, Dokumentationen oder Kinderprogramm – hier ist für jeden etwas dabei.
|
||||
</p>
|
||||
<ul className="mb-[var(--spacing-xl)] space-y-[var(--spacing-sm)]">
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
📺 <span><strong>Über 200 Programme</strong> digital empfangbar</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
💎 <span>Davon rund <strong>40 Sender in HD-Qualität</strong></span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
📻 <span>Rund <strong>40 Radiosender</strong> inklusive</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] flex items-center justify-center aspect-video text-[color:var(--color-muted-foreground)] bg-[var(--color-muted)]">
|
||||
PLACEHOLDER: TV Experience Image
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* TV Options */}
|
||||
<Section id="angebote">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>Unsere TV-Angebote</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Ob für Ihr Zuhause oder Ihr Unternehmen – wir haben das passende Angebot.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--spacing-xl)]">
|
||||
{tvOptions.map((option) => (
|
||||
<div
|
||||
key={option.title}
|
||||
className={`card relative overflow-hidden ${
|
||||
option.popular
|
||||
? "border-[var(--color-primary)] border-2"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{option.popular && (
|
||||
<div className="absolute top-4 right-4 bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-semibold px-3 py-1 rounded-full">
|
||||
Beliebt
|
||||
</div>
|
||||
)}
|
||||
<div className="relative h-40 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
|
||||
<Image
|
||||
src={option.image}
|
||||
alt={option.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 33vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
|
||||
<option.icon className="h-5 w-5" aria-hidden="true" />
|
||||
<h3 className="heading-4">{option.title}</h3>
|
||||
</div>
|
||||
<div className="mb-[var(--spacing-md)]">
|
||||
<span className="heading-2 text-[var(--color-foreground)]">
|
||||
{option.price.includes("Anfrage") ? "" : "€ "}
|
||||
{option.price}
|
||||
</span>
|
||||
{option.period && (
|
||||
<span className="text-muted"> / {option.period}</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
{option.description}
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
{option.features.map((feature) => (
|
||||
<li
|
||||
key={feature}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className={`btn w-full ${
|
||||
option.popular ? "btn-primary" : "btn-outline"
|
||||
}`}
|
||||
>
|
||||
{option.cta}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
{/* Pricing / Offer */}
|
||||
<Section className="bg-[var(--color-muted)] text-center">
|
||||
<Container>
|
||||
<h2 className="mb-[var(--spacing-xl)]">Unser Angebot für Privatkunden</h2>
|
||||
<div className="card max-w-lg mx-auto bg-white">
|
||||
<h3 className="text-2xl font-bold mb-[var(--spacing-xs)]">TV Privat</h3>
|
||||
<div className="text-4xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
€ 16,47 <span className="text-base text-[color:var(--color-foreground)] font-normal">/ Monat</span>
|
||||
</div>
|
||||
<p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
|
||||
inkl. MwSt
|
||||
</p>
|
||||
<ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] max-w-xs mx-auto">
|
||||
<li>✅ 200+ TV-Sender</li>
|
||||
<li>✅ 40+ HD-Sender</li>
|
||||
<li>✅ 40+ Radiosender</li>
|
||||
<li>✅ Keine Satellitenschüssel nötig</li>
|
||||
<li>✅ Beste Bild- & Tonqualität</li>
|
||||
</ul>
|
||||
<Link href="#kontakt" className="btn btn-primary w-full">
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container variant="narrow">
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<h2>Häufige Fragen</h2>
|
||||
</div>
|
||||
<div className="space-y-[var(--spacing-lg)]">
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">
|
||||
Wie schnell ist die Installation?
|
||||
</h3>
|
||||
<p className="text-muted">
|
||||
In der Regel können wir innerhalb weniger Werktage einen Installationstermin
|
||||
vereinbaren. Unser Techniker kommt zu Ihnen und richtet alles ein.
|
||||
</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">
|
||||
Gibt es versteckte Kosten?
|
||||
</h3>
|
||||
<p className="text-muted">
|
||||
Nein. Der angezeigte Preis ist der Endpreis inklusive Mehrwertsteuer.
|
||||
Es gibt keine Servicepauschale und keine versteckten Gebühren.
|
||||
</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">
|
||||
Kann ich Pay-TV dazubuchen?
|
||||
</h3>
|
||||
<p className="text-muted">
|
||||
Ja, wir bieten verschiedene Pay-TV-Optionen an. Kontaktieren Sie uns
|
||||
und wir finden das passende Paket für Sie.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
{/* Business & Pay TV */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] text-center">
|
||||
<div>
|
||||
<h3 className="mb-[var(--spacing-md)]">Für Unternehmen (TV Business)</h3>
|
||||
<p className="mb-[var(--spacing-md)]">
|
||||
Hotel, Krankenhaus oder Büro? Wir bieten maßgeschneiderte TV-Lösungen für Ihren Betrieb.
|
||||
</p>
|
||||
<Link href="#kontakt" className="btn btn-outline">
|
||||
Individuelles Angebot anfragen
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="mb-[var(--spacing-md)]">Pay TV & Extras</h3>
|
||||
<p className="mb-[var(--spacing-md)]">
|
||||
Sie möchten noch mehr? Exklusive Filme, Serien und Premium-Sport in HD/UHD auf Anfrage.
|
||||
</p>
|
||||
<Link href="#kontakt" className="btn btn-outline">
|
||||
Pay-TV Optionen prüfen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Bereit für bestes Fernsehen?
|
||||
</h2>
|
||||
<p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Kontaktieren Sie uns für eine persönliche Beratung oder bestellen Sie
|
||||
direkt Ihren TV-Anschluss.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90"
|
||||
>
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]"
|
||||
>
|
||||
+43 5672 5000
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
{/* Contact Anchor */}
|
||||
<Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
|
||||
<Container>
|
||||
<h2 className="text-white mb-[var(--spacing-md)]">Interessiert?</h2>
|
||||
<p className="lead text-white mb-[var(--spacing-xl)]">
|
||||
Kontaktieren Sie uns für Ihren TV-Anschluss.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||||
<a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
|
||||
📞 Anrufen
|
||||
</a>
|
||||
<a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
|
||||
✉️ E-Mail schreiben
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
|
||||
export const metadata = {
|
||||
title: "Impressum | TeleNetSystems",
|
||||
};
|
||||
|
||||
export default function ImpressumPage() {
|
||||
return (
|
||||
<main>
|
||||
<Section>
|
||||
<Container className="max-w-3xl">
|
||||
<h1 className="mb-[var(--spacing-lg)]">Impressum</h1>
|
||||
|
||||
<div className="prose">
|
||||
<p><strong>Angaben gemäß § 5 TMG:</strong></p>
|
||||
<p>
|
||||
PLACEHOLDER: technical.legal.impressum.companyName<br />
|
||||
PLACEHOLDER: technical.legal.impressum.street<br />
|
||||
PLACEHOLDER: technical.legal.impressum.postalCode PLACEHOLDER: technical.legal.impressum.city<br />
|
||||
PLACEHOLDER: technical.legal.impressum.country
|
||||
</p>
|
||||
|
||||
<p className="mt-[var(--spacing-md)]"><strong>Kontakt:</strong></p>
|
||||
<p>
|
||||
Telefon: PLACEHOLDER: technical.legal.impressum.phone<br />
|
||||
E-Mail: PLACEHOLDER: technical.legal.impressum.email
|
||||
</p>
|
||||
|
||||
<p className="mt-[var(--spacing-md)]"><strong>Registereintrag:</strong></p>
|
||||
<p>
|
||||
Eintragung im Handelsregister.<br />
|
||||
Registergericht: PLACEHOLDER<br />
|
||||
Registernummer: PLACEHOLDER: technical.legal.impressum.register
|
||||
</p>
|
||||
|
||||
<p className="mt-[var(--spacing-md)]"><strong>Umsatzsteuer:</strong></p>
|
||||
<p>
|
||||
Umsatzsteuer-Identifikationsnummer gemäß §27 a Umsatzsteuergesetz:<br />
|
||||
PLACEHOLDER: technical.legal.impressum.vatId
|
||||
</p>
|
||||
|
||||
<p className="mt-[var(--spacing-md)]"><strong>Streitschlichtung</strong></p>
|
||||
<p>
|
||||
Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: https://ec.europa.eu/consumers/odr.<br />
|
||||
Unsere E-Mail-Adresse finden Sie oben im Impressum.
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
+207
-385
@@ -1,402 +1,224 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Wifi, Zap, Building2, CheckCircle, ArrowDown, ArrowUp } from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Internet",
|
||||
description:
|
||||
"Highspeed-Internet über Kabel und Glasfaser im Bezirk Reutte. Flexible Tarife für Privat- und Geschäftskunden ab 14,50 € im Monat. Ohne Servicepauschale.",
|
||||
openGraph: {
|
||||
title: "Internet | Telenet Systems GmbH",
|
||||
description:
|
||||
"Highspeed-Internet über Kabel und Glasfaser im Bezirk Reutte. Ab 14,50 € im Monat.",
|
||||
},
|
||||
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.",
|
||||
};
|
||||
|
||||
const kabelTarife = [
|
||||
{
|
||||
name: "telenet.hit",
|
||||
price: "14,50",
|
||||
download: "40",
|
||||
upload: "6",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.eco",
|
||||
price: "19,00",
|
||||
download: "60",
|
||||
upload: "8",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.fun",
|
||||
price: "29,00",
|
||||
download: "80",
|
||||
upload: "12",
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
name: "telenet.pro",
|
||||
price: "39,00",
|
||||
download: "100",
|
||||
upload: "14",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.mega",
|
||||
price: "49,00",
|
||||
download: "180",
|
||||
upload: "22",
|
||||
popular: false,
|
||||
},
|
||||
];
|
||||
|
||||
const glasfaserTarife = [
|
||||
{
|
||||
name: "telenet.eco",
|
||||
price: "23,00",
|
||||
download: "100",
|
||||
upload: "100",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.fun",
|
||||
price: "29,00",
|
||||
download: "200",
|
||||
upload: "200",
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
name: "telenet.pro",
|
||||
price: "39,00",
|
||||
download: "300",
|
||||
upload: "300",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.mega",
|
||||
price: "49,00",
|
||||
download: "500",
|
||||
upload: "500",
|
||||
popular: false,
|
||||
},
|
||||
];
|
||||
|
||||
const benefits = [
|
||||
"Keine Servicepauschale",
|
||||
"Unlimitiertes Datenvolumen",
|
||||
"IPv6 inklusive",
|
||||
"Persönlicher Support",
|
||||
];
|
||||
|
||||
export default function InternetPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/hero/internet-header-431619ac.jpg"
|
||||
alt="Highspeed Internet"
|
||||
fill
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Wifi className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Internet</span>
|
||||
</div>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Highspeed-Internet für Ihr Zuhause
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
|
||||
Flexible Tarife ohne Servicepauschale – ab 14,50 € im Monat.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
<a href="#tarife" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
Tarife vergleichen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
return (
|
||||
<main>
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
<Container>
|
||||
<h1 className="mb-[var(--spacing-md)]">
|
||||
Highspeed Internet <span className="text-[color:var(--color-primary)]">für Tirol</span>
|
||||
</h1>
|
||||
<p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Stabil, extrem schnell und ohne versteckte Kosten. Wir bringen die Welt zu Ihnen nach Hause.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||||
<Link href="#kabel" className="btn btn-primary">
|
||||
Kabel-Tarife
|
||||
</Link>
|
||||
<Link href="#glasfaser" className="btn btn-secondary">
|
||||
Glasfaser-Tarife
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Trust Bar */}
|
||||
<Section variant="sm" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
|
||||
{benefits.map((benefit) => (
|
||||
<div
|
||||
key={benefit}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-5 w-5 text-[var(--color-success)]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
{/* Intro Info */}
|
||||
<Section>
|
||||
<Container className="text-center max-w-3xl">
|
||||
<h2 className="mb-[var(--spacing-md)]">Warum TeleNetSystems Internet?</h2>
|
||||
<p>
|
||||
Wir bieten Ihnen echte Flatrates ohne Datenlimit. Keine Servicepauschale.
|
||||
Ehrliche Bandbreiten und persönlicher Support direkt vor Ort in Reutte.
|
||||
</p>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Kabel-Tarife */}
|
||||
<Section id="tarife">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Zap className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Kabel-Internet</span>
|
||||
</div>
|
||||
<h2>Tarife für Kabel-Kunden</h2>
|
||||
<p className="text-muted mt-[var(--spacing-md)]">
|
||||
Tarife gültig ab 01.05.2024. Alle Preise inkl. MwSt.
|
||||
</p>
|
||||
</div>
|
||||
{/* Kabel Tarife */}
|
||||
<Section id="kabel" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<h2 className="text-center mb-[var(--spacing-sm)]">Kabel-Internet Tarife</h2>
|
||||
<p className="text-center mb-[var(--spacing-2xl)] text-[color:var(--color-muted-foreground)]">
|
||||
Verfügbar überall dort, wo Sie unseren Kabelanschluss haben. (Gültig ab 01.05.2024)
|
||||
</p>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-[var(--color-border)]">
|
||||
<th className="text-left py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
Tarif
|
||||
</th>
|
||||
<th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
<span className="flex items-center justify-center gap-1">
|
||||
<ArrowDown className="h-4 w-4" aria-hidden="true" />
|
||||
Download
|
||||
</span>
|
||||
</th>
|
||||
<th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
<span className="flex items-center justify-center gap-1">
|
||||
<ArrowUp className="h-4 w-4" aria-hidden="true" />
|
||||
Upload
|
||||
</span>
|
||||
</th>
|
||||
<th className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
Preis / Monat
|
||||
</th>
|
||||
<th className="py-[var(--spacing-md)] px-[var(--spacing-sm)]"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{kabelTarife.map((tarif) => (
|
||||
<tr
|
||||
key={tarif.name}
|
||||
className={`border-b border-[var(--color-border)] ${
|
||||
tarif.popular ? "bg-[var(--color-primary)]/5" : ""
|
||||
}`}
|
||||
>
|
||||
<td className="py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
<span className="font-medium">{tarif.name}</span>
|
||||
{tarif.popular && (
|
||||
<span className="ml-2 text-xs bg-[var(--color-primary)] text-[var(--color-background)] px-2 py-0.5 rounded-full">
|
||||
Beliebt
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.download} Mbit/s
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.upload} Mbit/s
|
||||
</td>
|
||||
<td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
€ {tarif.price}
|
||||
</td>
|
||||
<td className="py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-sm btn-outline"
|
||||
>
|
||||
Bestellen
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<p className="text-sm text-muted mt-[var(--spacing-lg)]">
|
||||
Alle Tarife enthalten unlimitiertes Datenvolumen und IPv6-Adressen.
|
||||
Für die Tarife ab telenet.pro ist eine öffentliche IPv4-Adresse enthalten.
|
||||
Einmalige Installationskosten je nach Aufwand.
|
||||
</p>
|
||||
</Container>
|
||||
</Section>
|
||||
{/* 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>
|
||||
|
||||
{/* Glasfaser-Tarife */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Zap className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Glasfaser-Internet</span>
|
||||
</div>
|
||||
<h2>Tarife für Glasfaser-Kunden</h2>
|
||||
<p className="text-muted mt-[var(--spacing-md)]">
|
||||
Symmetrische Bandbreite – gleich schnell hoch- wie runterladen. Tarife gültig ab 01.04.2025.
|
||||
</p>
|
||||
</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>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse bg-[var(--color-background)] rounded-[var(--radius-lg)]">
|
||||
<thead>
|
||||
<tr className="border-b border-[var(--color-border)]">
|
||||
<th className="text-left py-[var(--spacing-md)] px-[var(--spacing-lg)] font-semibold">
|
||||
Tarif
|
||||
</th>
|
||||
<th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
<span className="flex items-center justify-center gap-1">
|
||||
<ArrowDown className="h-4 w-4" aria-hidden="true" />
|
||||
Download
|
||||
</span>
|
||||
</th>
|
||||
<th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
<span className="flex items-center justify-center gap-1">
|
||||
<ArrowUp className="h-4 w-4" aria-hidden="true" />
|
||||
Upload
|
||||
</span>
|
||||
</th>
|
||||
<th className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
Preis / Monat
|
||||
</th>
|
||||
<th className="py-[var(--spacing-md)] px-[var(--spacing-lg)]"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{glasfaserTarife.map((tarif) => (
|
||||
<tr
|
||||
key={tarif.name + "-gf"}
|
||||
className={`border-b border-[var(--color-border)] last:border-b-0 ${
|
||||
tarif.popular ? "bg-[var(--color-primary)]/5" : ""
|
||||
}`}
|
||||
>
|
||||
<td className="py-[var(--spacing-md)] px-[var(--spacing-lg)]">
|
||||
<span className="font-medium">{tarif.name}</span>
|
||||
{tarif.popular && (
|
||||
<span className="ml-2 text-xs bg-[var(--color-primary)] text-[var(--color-background)] px-2 py-0.5 rounded-full">
|
||||
Empfohlen
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.download} Mbit/s
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.upload} Mbit/s
|
||||
</td>
|
||||
<td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
€ {tarif.price}
|
||||
</td>
|
||||
<td className="py-[var(--spacing-md)] px-[var(--spacing-lg)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-sm btn-outline"
|
||||
>
|
||||
Bestellen
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
|
||||
<p className="text-sm text-muted mt-[var(--spacing-lg)]">
|
||||
Glasfaser bietet symmetrische Geschwindigkeiten – ideal für Homeoffice und Videokonferenzen.
|
||||
Alle Tarife ohne Servicepauschale mit unlimitiertem Datenvolumen.
|
||||
</p>
|
||||
</Container>
|
||||
</Section>
|
||||
{/* 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>
|
||||
|
||||
{/* Business Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div className="relative h-80 lg:h-full min-h-[320px] rounded-[var(--radius-lg)] overflow-hidden">
|
||||
<Image
|
||||
src="/images/misc/firmenkunden-96736712-5fa99704.jpg"
|
||||
alt="Geschäftskunde im Büro"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Building2 className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Business-Internet</span>
|
||||
</div>
|
||||
<h2>Maßgeschneiderte Lösungen für Ihr Unternehmen</h2>
|
||||
<p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
|
||||
Für Unternehmen erstellen wir individuelle Internet-Angebote
|
||||
inklusive passendem Service-Paket.
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Dedizierte Bandbreite</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Statische IP-Adressen</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Erweiterte SLA-Optionen</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Persönliche Betreuung</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Angebot anfragen
|
||||
</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>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-foreground)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Welcher Tarif passt zu Ihnen?
|
||||
</h2>
|
||||
<p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Wir beraten Sie gerne persönlich und finden gemeinsam den idealen
|
||||
Internet-Tarif für Ihre Bedürfnisse.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Beratung anfragen
|
||||
</Link>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]"
|
||||
>
|
||||
+43 5672 5000
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
<div className="grid md:grid-cols-4 gap-[var(--spacing-md)]">
|
||||
{/* Eco */}
|
||||
<div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
|
||||
<h3 className="text-xl font-bold mb-[var(--spacing-xs)]">eco</h3>
|
||||
<div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€23,00</div>
|
||||
<div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
|
||||
<ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
|
||||
<li><strong>100 Mbit/s</strong> Down</li>
|
||||
<li><strong>100 Mbit/s</strong> Up</li>
|
||||
<li>Symmetrisch!</li>
|
||||
</ul>
|
||||
<Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
|
||||
</div>
|
||||
|
||||
{/* Fun */}
|
||||
<div className="card flex flex-col items-center border-[color:var(--color-primary)]">
|
||||
<h3 className="text-xl font-bold mb-[var(--spacing-xs)]">fun</h3>
|
||||
<div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€29,00</div>
|
||||
<div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
|
||||
<ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
|
||||
<li><strong>200 Mbit/s</strong> Down</li>
|
||||
<li><strong>200 Mbit/s</strong> Up</li>
|
||||
<li>Symmetrisch!</li>
|
||||
</ul>
|
||||
<Link href="#kontakt" className="btn btn-primary btn-sm w-full">Anfragen</Link>
|
||||
</div>
|
||||
|
||||
{/* Pro */}
|
||||
<div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
|
||||
<h3 className="text-xl font-bold mb-[var(--spacing-xs)]">pro</h3>
|
||||
<div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€39,00</div>
|
||||
<div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
|
||||
<ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
|
||||
<li><strong>300 Mbit/s</strong> Down</li>
|
||||
<li><strong>300 Mbit/s</strong> Up</li>
|
||||
<li>Public IPv4 Address</li>
|
||||
</ul>
|
||||
<Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
|
||||
</div>
|
||||
|
||||
{/* Mega */}
|
||||
<div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
|
||||
<h3 className="text-xl font-bold mb-[var(--spacing-xs)]">mega</h3>
|
||||
<div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€49,00</div>
|
||||
<div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
|
||||
<ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
|
||||
<li><strong>500 Mbit/s</strong> Down</li>
|
||||
<li><strong>500 Mbit/s</strong> Up</li>
|
||||
<li>Public IPv4 Address</li>
|
||||
</ul>
|
||||
<Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Business */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container className="text-center">
|
||||
<h2 className="mb-[var(--spacing-md)]">Internet für Unternehmen</h2>
|
||||
<p className="max-w-2xl mx-auto mb-[var(--spacing-lg)]">
|
||||
Sie benötigen garantierte Bandbreiten, SLA oder spezielle IP-Konfigurationen?
|
||||
Wir erstellen Ihnen gerne ein maßgeschneidertes Angebot.
|
||||
</p>
|
||||
<Link href="#kontakt" className="btn btn-primary">
|
||||
Business-Anfrage stellen
|
||||
</Link>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Contact Anchor */}
|
||||
<Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
|
||||
<Container>
|
||||
<h2 className="text-white mb-[var(--spacing-md)]">Jetzt Internet bestellen</h2>
|
||||
<p className="lead text-white mb-[var(--spacing-xl)]">
|
||||
Wir kümmern uns um die Installation.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||||
<a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
|
||||
📞 Anrufen
|
||||
</a>
|
||||
<a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
|
||||
✉️ Tarif wählen
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
+72
-34
@@ -1,67 +1,105 @@
|
||||
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/stylesheet.css";
|
||||
import { Header } from "@/components/layout/Header";
|
||||
import { Footer } from "@/components/layout/Footer";
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter",
|
||||
display: "swap",
|
||||
});
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
|
||||
// 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: {
|
||||
default: "Telenet Systems GmbH | Telekommunikation & IT-Services in Tirol",
|
||||
template: "%s | Telenet Systems GmbH",
|
||||
},
|
||||
description:
|
||||
"Ihr regionaler Partner für TV, Internet, Telefonie und IT-Services im Bezirk Reutte. Seit 1976 verbinden wir Menschen und Technik. Persönliche Beratung, schneller Support.",
|
||||
keywords: [
|
||||
"Telekommunikation Tirol",
|
||||
"IT-Dienstleister Reutte",
|
||||
"Highspeed-Internet Österreich",
|
||||
"Glasfaser Tirol",
|
||||
"TeleNetSystems",
|
||||
"regionaler IT-Service",
|
||||
"Kabel-TV Anbieter",
|
||||
"Telefonie Tarife Österreich",
|
||||
],
|
||||
authors: [{ name: "Telenet Systems GmbH" }],
|
||||
creator: "Telenet Systems GmbH",
|
||||
publisher: "Telenet Systems GmbH",
|
||||
title: "TeleNetSystems | Telekom & IT aus Tirol",
|
||||
description: "TeleNetSystems - Ihr regionaler Partner für Internet, Fernsehen, Telefonie und IT-Services in Reutte und Umgebung.",
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
// Open Graph tags - update based on spec
|
||||
openGraph: {
|
||||
type: "website",
|
||||
locale: "de_AT",
|
||||
url: "https://www.tnr.at",
|
||||
siteName: "Telenet Systems GmbH",
|
||||
title: "Telenet Systems GmbH | Telekommunikation & IT-Services in Tirol",
|
||||
description:
|
||||
"Ihr regionaler Partner für TV, Internet, Telefonie und IT-Services im Bezirk Reutte. Persönliche Beratung, schneller Support.",
|
||||
// title, description, images will be set per project
|
||||
},
|
||||
};
|
||||
|
||||
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="de-AT" className={inter.variable}>
|
||||
<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">
|
||||
<Header />
|
||||
<main className="flex-1">{children}</main>
|
||||
<div className="flex-1">
|
||||
{children}
|
||||
</div>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+103
-293
@@ -1,304 +1,114 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import {
|
||||
Server,
|
||||
Network,
|
||||
Wrench,
|
||||
Monitor,
|
||||
Cable,
|
||||
Shield,
|
||||
Headphones,
|
||||
Building2,
|
||||
Users,
|
||||
CheckCircle,
|
||||
} from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Leistungen",
|
||||
description:
|
||||
"Umfassende Telekom- und IT-Services im Bezirk Reutte. Von Netzwerkplanung über IT-Installation bis Fernwartung – alles aus einer Hand.",
|
||||
openGraph: {
|
||||
title: "Leistungen | Telenet Systems GmbH",
|
||||
description:
|
||||
"Umfassende Telekom- und IT-Services im Bezirk Reutte. Netzwerkplanung, IT-Installation, Fernwartung.",
|
||||
},
|
||||
export const metadata = {
|
||||
title: "IT-Services & Leistungen | TeleNetSystems",
|
||||
description: "Professionelle IT-Dienstleistungen in Reutte. Netzwerk, Hardware, Wartung und Support für Firmen und Privat.",
|
||||
};
|
||||
|
||||
const services = [
|
||||
{
|
||||
icon: Network,
|
||||
title: "Netzwerkplanung",
|
||||
description:
|
||||
"Professionelle Planung und Konzeption von Netzwerkinfrastrukturen für Unternehmen jeder Größe.",
|
||||
},
|
||||
{
|
||||
icon: Server,
|
||||
title: "Serverplanung",
|
||||
description:
|
||||
"Beratung und Planung von Serverlösungen – von der Hardware bis zur Software-Konfiguration.",
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "IT-Installation",
|
||||
description:
|
||||
"Fachgerechte Installation von IT-Komponenten, Netzwerken und Kommunikationssystemen.",
|
||||
},
|
||||
{
|
||||
icon: Monitor,
|
||||
title: "Reparaturen",
|
||||
description:
|
||||
"Schnelle und zuverlässige Reparatur von IT-Geräten und Netzwerkkomponenten.",
|
||||
},
|
||||
{
|
||||
icon: Headphones,
|
||||
title: "Fernwartung",
|
||||
description:
|
||||
"Remote-Support für schnelle Problemlösung ohne Wartezeit auf einen Vor-Ort-Termin.",
|
||||
},
|
||||
{
|
||||
icon: Cable,
|
||||
title: "Glasfaser-Ausbau",
|
||||
description:
|
||||
"Planung und Umsetzung von Glasfaser-Infrastruktur für zukunftssichere Anbindungen.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Qualitätssicherung",
|
||||
description:
|
||||
"Kontinuierliche Überwachung und Optimierung Ihrer IT-Systeme für maximale Verfügbarkeit.",
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: "Behördliche Unterstützung",
|
||||
description:
|
||||
"Technisch-behördliche Unterstützung bei Netzprojekten und Genehmigungsverfahren.",
|
||||
},
|
||||
];
|
||||
|
||||
const targetGroups = [
|
||||
{
|
||||
icon: Users,
|
||||
title: "Privatkunden",
|
||||
description:
|
||||
"Zuverlässige TV-, Internet- und Telefonielösungen für Ihr Zuhause. Mit persönlichem Service vor Ort.",
|
||||
features: [
|
||||
"TV mit über 200 Programmen",
|
||||
"Highspeed-Internet bis 500 Mbit/s",
|
||||
"Günstige Telefonie-Tarife",
|
||||
"Persönliche Beratung",
|
||||
],
|
||||
cta: "Zu den Tarifen",
|
||||
href: "/internet",
|
||||
image: "/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg",
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: "Geschäftskunden",
|
||||
description:
|
||||
"Professionelle IT- und Kommunikationslösungen für Ihr Unternehmen. Maßgeschneidert und zuverlässig.",
|
||||
features: [
|
||||
"Business-Internet & Telefonie",
|
||||
"Netzwerk- & Serverplanung",
|
||||
"IT-Installation & Support",
|
||||
"Fernwartung & Monitoring",
|
||||
],
|
||||
cta: "Kontakt aufnehmen",
|
||||
href: "/kontakt",
|
||||
image: "/images/misc/firmenkunden-96736712-5fa99704.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
export default function LeistungenPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/services/tnr-leistungen-055053d5.jpg"
|
||||
alt="Telenet Systems Mitarbeiter"
|
||||
fill
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
|
||||
Unser Leistungsangebot
|
||||
</p>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Telekommunikation und IT-Services aus einer Hand
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Von TV und Internet über Telefonie bis zu professionellen IT-Dienstleistungen –
|
||||
wir bieten alles, was Sie für moderne Kommunikation benötigen.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
<a href="#services" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
Leistungen entdecken
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
return (
|
||||
<main>
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
<Container>
|
||||
<h1 className="mb-[var(--spacing-md)]">
|
||||
Mehr als nur Kommunikation. <br />
|
||||
<span className="text-[color:var(--color-primary)]">Ihr IT-Partner vor Ort.</span>
|
||||
</h1>
|
||||
<p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Wir vernetzen nicht nur Ihr Zuhause, wir sorgen auch dafür, dass Ihre Technik reibungslos läuft.
|
||||
Von der Planung bis zur Wartung.
|
||||
</p>
|
||||
<Link href="#it-services" className="btn btn-primary btn-lg">
|
||||
Zu den IT-Services
|
||||
</Link>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Zielgruppen */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>Für Privat- und Geschäftskunden</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Ob Zuhause oder im Unternehmen – wir haben die passende Lösung für Sie.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-xl)]">
|
||||
{targetGroups.map((group) => (
|
||||
<div key={group.title} className="card overflow-hidden">
|
||||
<div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
|
||||
<Image
|
||||
src={group.image}
|
||||
alt={group.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
|
||||
<group.icon className="h-5 w-5" aria-hidden="true" />
|
||||
<h3 className="heading-3">{group.title}</h3>
|
||||
</div>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">{group.description}</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
{group.features.map((feature) => (
|
||||
<li
|
||||
key={feature}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href={group.href} className="btn btn-primary">
|
||||
{group.cta}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
{/* Overview Core Services */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="text-center mb-[var(--spacing-2xl)]">
|
||||
<h2>Unsere Kernkompetenzen</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-[var(--spacing-xl)]">
|
||||
<div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">Internet & Glasfaser</h3>
|
||||
<p className="mb-[var(--spacing-md)] text-sm">Highspeed-Verbindungen für jede Anforderung.</p>
|
||||
<Link href="/internet" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
|
||||
</div>
|
||||
<div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">Fernsehen</h3>
|
||||
<p className="mb-[var(--spacing-md)] text-sm">TV-Genuss mit über 200 Programmen.</p>
|
||||
<Link href="/fernsehen" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
|
||||
</div>
|
||||
<div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie</h3>
|
||||
<p className="mb-[var(--spacing-md)] text-sm">Kostengünstig telefonieren über Kabel.</p>
|
||||
<Link href="/telefonie" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* IT-Services */}
|
||||
<Section id="services" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>IT-Services für Unternehmen</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Professionelle IT-Dienstleistungen von der Planung bis zur Wartung.
|
||||
Alles aus einer Hand, mit persönlichem Ansprechpartner vor Ort.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-lg)]">
|
||||
{services.map((service) => (
|
||||
<div key={service.title} className="card text-center">
|
||||
<div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] mb-[var(--spacing-md)]">
|
||||
<service.icon className="h-6 w-6" aria-hidden="true" />
|
||||
</div>
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{service.title}</h3>
|
||||
<p className="text-sm text-muted">{service.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
{/* IT Services Detail */}
|
||||
<Section id="it-services" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)]">
|
||||
<div>
|
||||
<h2 className="mb-[var(--spacing-lg)]">Unsere IT-Dienstleistungen</h2>
|
||||
<div className="space-y-[var(--spacing-xl)]">
|
||||
<div>
|
||||
<h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Netzwerktechnik</h3>
|
||||
<p>
|
||||
Planung und Installation von Firmennetzwerken, WLAN-Ausleuchtung, VPN-Standortvernetzung und Server-Schränken.
|
||||
Wir sorgen für eine stabile Infrastruktur.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Hardware & Software</h3>
|
||||
<p>
|
||||
Beratung und Verkauf von PCs, Laptops, Druckern und Zubehör. Installation von Betriebssystemen, Office-Lösungen
|
||||
und Antivirus-Software.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Reparatur & Wartung</h3>
|
||||
<p>
|
||||
Ihr PC streikt? Wir reparieren Hardware-Defekte, entfernen Viren und rüsten alte Geräte auf.
|
||||
Gerne auch per Fernwartung für schnelle Hilfe.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[var(--spacing-md)]">
|
||||
<div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] aspect-video flex items-center justify-center bg-[var(--color-muted)] text-[color:var(--color-muted-foreground)]">
|
||||
PLACEHOLDER: IT Hardware Image
|
||||
</div>
|
||||
<div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] aspect-video flex items-center justify-center bg-[var(--color-muted)] text-[color:var(--color-muted-foreground)]">
|
||||
PLACEHOLDER: Server Room Image
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Glasfaser Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div className="relative h-80 lg:h-full min-h-[320px] rounded-[var(--radius-lg)] overflow-hidden">
|
||||
<Image
|
||||
src="/images/services/lwl1-40360e27.jpg"
|
||||
alt="Glasfaser-Installation"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Cable className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Glasfaser</span>
|
||||
</div>
|
||||
<h2>Zukunftssichere Glasfaser-Infrastruktur</h2>
|
||||
<p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
|
||||
Wir planen und bauen Glasfasernetze für Gemeinden und Unternehmen.
|
||||
Profitieren Sie von unserer langjährigen Erfahrung.
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Glasfaser-Planung & Beratung</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Professioneller Netzausbau</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Behördliche Unterstützung</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Qualitätssicherung</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Projekt anfragen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Haben Sie Fragen zu unseren Leistungen?
|
||||
</h2>
|
||||
<p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Wir beraten Sie gerne persönlich und finden die optimale Lösung für Ihre Anforderungen.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90"
|
||||
>
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]"
|
||||
>
|
||||
+43 5672 5000
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
{/* Contact Anchor */}
|
||||
<Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
|
||||
<Container>
|
||||
<h2 className="text-white mb-[var(--spacing-md)]">IT-Probleme? Wir helfen.</h2>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||||
<a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
|
||||
📞 05672 / PLACEHOLDER
|
||||
</a>
|
||||
<a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
|
||||
✉️ support@tnr.at
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
+135
-260
@@ -1,139 +1,29 @@
|
||||
import Image from "next/image";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import {
|
||||
Tv,
|
||||
Wifi,
|
||||
Phone,
|
||||
Users,
|
||||
Shield,
|
||||
Clock,
|
||||
MapPin,
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
} from "lucide-react";
|
||||
|
||||
const services = [
|
||||
{
|
||||
icon: Tv,
|
||||
title: "Fernsehen",
|
||||
description:
|
||||
"Über 200 Programme inkl. 40 HDTV-Sendern. Erstklassige Unterhaltung für Ihr Zuhause – ab 16,47 € im Monat.",
|
||||
href: "/fernsehen",
|
||||
image: "/images/misc/tv-privat-76f60c7a-88eafcfb.jpg",
|
||||
},
|
||||
{
|
||||
icon: Wifi,
|
||||
title: "Internet",
|
||||
description:
|
||||
"Highspeed-Internet über Kabel und Glasfaser. Flexible Tarife für Privat- und Geschäftskunden – ab 14,50 € im Monat.",
|
||||
href: "/internet",
|
||||
image: "/images/misc/internet-7b594a2d-793cefee.jpg",
|
||||
},
|
||||
{
|
||||
icon: Phone,
|
||||
title: "Telefonie",
|
||||
description:
|
||||
"Günstige Telefonie-Tarife fürs Festnetz. Für Privat- und Geschäftskunden – ab 0 € mit Telenet-Internet.",
|
||||
href: "/telefonie",
|
||||
image: "/images/misc/telefon-fa5e8c21-271d2135.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
const usps = [
|
||||
{
|
||||
icon: MapPin,
|
||||
title: "Regionale Nähe",
|
||||
description:
|
||||
"Persönlicher Service direkt vor Ort im Bezirk Reutte. Bei uns kennt man sich noch persönlich.",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: "Seit 1976",
|
||||
description:
|
||||
"Fast 50 Jahre Erfahrung in der Telekommunikation. Verlässlichkeit, der Sie vertrauen können.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Voller Service",
|
||||
description:
|
||||
"Von TV über Internet bis IT-Support – alles aus einer Hand. Keine Servicepauschale bei unseren Tarifen.",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Schneller Support",
|
||||
description:
|
||||
"Probleme lösen wir direkt – telefonisch oder vor Ort. Kurze Wege, schnelle Hilfe.",
|
||||
},
|
||||
];
|
||||
|
||||
const trustItems = [
|
||||
"Keine versteckten Kosten",
|
||||
"Unlimitiertes Datenvolumen",
|
||||
"Persönlicher Ansprechpartner",
|
||||
"Regionaler Kundendienst",
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/misc/firma1-8a863d8b.jpg"
|
||||
alt="Telenet Systems Firmengebäude in Reutte"
|
||||
fill
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
|
||||
Ihr regionaler Partner in Tirol
|
||||
</p>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Telekommunikation und IT-Services aus einer Hand
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Seit 1976 versorgen wir den Bezirk Reutte mit zuverlässigem Fernsehen,
|
||||
schnellem Internet und flexibler Telefonie. Persönliche Beratung,
|
||||
ehrlicher Service – ohne komplizierte Prozesse.
|
||||
</p>
|
||||
<div className="flex flex-wrap 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 text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
Unsere Leistungen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* USP Section */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>Warum Telenet Systems?</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Als regionaler Anbieter verbinden wir modernste Technik mit persönlichem Service.
|
||||
</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="inline-flex items-center justify-center w-14 h-14 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] mb-[var(--spacing-md)]">
|
||||
<usp.icon className="h-6 w-6" aria-hidden="true" />
|
||||
</div>
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3>
|
||||
<p className="text-muted">{usp.description}</p>
|
||||
</div>
|
||||
))}
|
||||
<h1 className="mb-[var(--spacing-md)]">
|
||||
Ihr Partner für Telekom & IT <br />
|
||||
<span className="text-[color:var(--color-primary)]">in Reutte & Umgebung</span>
|
||||
</h1>
|
||||
<p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Highspeed-Internet, brillantes Fernsehen und professionelle IT-Lösungen aus einer Hand.
|
||||
Regional, persönlich und zuverlässig seit 1976.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||||
<Link href="#kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
<Link href="/internet" className="btn btn-outline btn-lg">
|
||||
Internet-Tarife prüfen
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
@@ -141,157 +31,142 @@ export default function HomePage() {
|
||||
{/* Services Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>Unsere Leistungen für Sie</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Fernsehen, Internet und Telefonie – alles aus einer Hand, ohne Servicepauschale.
|
||||
<div className="text-center mb-[var(--spacing-2xl)]">
|
||||
<h2 className="mb-[var(--spacing-sm)]">Rundum versorgt</h2>
|
||||
<p className="text-[color:var(--color-muted-foreground)]">
|
||||
Alles, was Sie für digitale Kommunikation benötigen.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--spacing-xl)]">
|
||||
{services.map((service) => (
|
||||
<Link
|
||||
key={service.title}
|
||||
href={service.href}
|
||||
className="card group overflow-hidden hover:shadow-[var(--shadow-lg)] transition-shadow"
|
||||
>
|
||||
<div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)] overflow-hidden">
|
||||
<Image
|
||||
src={service.image}
|
||||
alt={service.title}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
sizes="(max-width: 1024px) 100vw, 33vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
|
||||
<service.icon className="h-5 w-5" aria-hidden="true" />
|
||||
<h3 className="heading-4">{service.title}</h3>
|
||||
</div>
|
||||
<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 group-hover:gap-[var(--spacing-sm)] transition-all">
|
||||
Mehr erfahren
|
||||
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Trust Section */}
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div>
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Transparent und fair – ohne versteckte Kosten
|
||||
</h2>
|
||||
<p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Bei uns wissen Sie immer, woran Sie sind. Keine Überraschungen auf der Rechnung,
|
||||
keine komplizierte Tarifstruktur. Einfach, ehrlich, regional.
|
||||
<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>
|
||||
<ul className="space-y-[var(--spacing-sm)]">
|
||||
{trustItems.map((item) => (
|
||||
<li
|
||||
key={item}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-background)]"
|
||||
>
|
||||
<CheckCircle className="h-5 w-5 flex-shrink-0" aria-hidden="true" />
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href="/internet" className="btn btn-secondary w-full">
|
||||
Zu den Tarifen
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative h-80 lg:h-96 rounded-[var(--radius-lg)] overflow-hidden">
|
||||
<Image
|
||||
src="/images/services/tnr-leistungen-055053d5.jpg"
|
||||
alt="Telenet Systems Mitarbeiter bei der Arbeit"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
|
||||
{/* Fernsehen */}
|
||||
<div className="card text-center transition-transform hover:-translate-y-1">
|
||||
<div className="mb-[var(--spacing-md)] text-4xl">📺</div>
|
||||
<h3 className="heading-4 mb-[var(--spacing-sm)]">Kabelfernsehen</h3>
|
||||
<p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
|
||||
Über 200 Programme, davon 40 in HD. Beste Bildqualität direkt aus der Region.
|
||||
</p>
|
||||
<Link href="/fernsehen" className="btn btn-secondary w-full">
|
||||
Sender entdecken
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Telefonie */}
|
||||
<div className="card text-center transition-transform hover:-translate-y-1">
|
||||
<div className="mb-[var(--spacing-md)] text-4xl">📞</div>
|
||||
<h3 className="heading-4 mb-[var(--spacing-sm)]">Telefonie</h3>
|
||||
<p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
|
||||
Günstig telefonieren über Ihren Kabelanschluss. Keine Grundgebühr bei Internet-Kombi.
|
||||
</p>
|
||||
<Link href="/telefonie" className="btn btn-secondary w-full">
|
||||
Mehr erfahren
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* For Whom Section */}
|
||||
{/* IT Services Teaser */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
|
||||
<div>
|
||||
<h2 className="mb-[var(--spacing-md)]">
|
||||
Professionelle IT-Lösungen <br /> für Unternehmen & Privat
|
||||
</h2>
|
||||
<p className="mb-[var(--spacing-lg)]">
|
||||
Computer-Probleme? Netzwerk-Einrichtung? Wir sind Ihre IT-Experten vor Ort.
|
||||
Von der Reparatur Ihres Laptops bis zur Planung komplexer Firmennetzwerke.
|
||||
</p>
|
||||
<ul className="mb-[var(--spacing-xl)] space-y-[var(--spacing-sm)]">
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
✅ <span>Schnelle Fernwartung und Vor-Ort-Service</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
✅ <span>Netzwerk- und Serverplanung</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
✅ <span>Verkauf & Reparatur von Hardware</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="/leistungen" className="btn btn-primary">
|
||||
Zu den IT-Services
|
||||
</Link>
|
||||
</div>
|
||||
<div className="bg-white p-[var(--spacing-md)] rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)] rotate-1 hover:rotate-0 transition-transform duration-500">
|
||||
{/* Placeholder styled as a media frame */}
|
||||
<div className="aspect-video bg-[var(--color-muted)] rounded-[var(--radius-md)] flex flex-col items-center justify-center text-[color:var(--color-muted-foreground)] border-2 border-dashed border-[var(--color-border)]">
|
||||
<span className="text-4xl mb-2">📸</span>
|
||||
<span className="font-medium">IT-Service vor Ort</span>
|
||||
</div>
|
||||
<p className="text-xs text-[color:var(--color-muted-foreground)] text-center mt-[var(--spacing-sm)]">
|
||||
Symbolbild: Unser Team bei der Netzwerk-Installation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* USPs / Trust Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>Für Privat- und Geschäftskunden</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Ob Zuhause oder im Unternehmen – wir haben die passende Lösung für Sie.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-xl)]">
|
||||
{/* Privatkunden */}
|
||||
<div className="card relative overflow-hidden">
|
||||
<div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
|
||||
<Image
|
||||
src="/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg"
|
||||
alt="Familie vor dem Fernseher"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="heading-3 mb-[var(--spacing-sm)]">Privatkunden</h3>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
Zuverlässiges Fernsehen, schnelles Internet und günstige Telefonie für Ihr Zuhause.
|
||||
Flexible Tarife ohne Servicepauschale und mit persönlicher Betreuung vor Ort.
|
||||
</p>
|
||||
<Link href="/internet" className="btn btn-primary">
|
||||
Tarife für Privatkunden
|
||||
</Link>
|
||||
<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>
|
||||
|
||||
{/* Geschäftskunden */}
|
||||
<div className="card relative overflow-hidden">
|
||||
<div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
|
||||
<Image
|
||||
src="/images/misc/firmenkunden-96736712-5fa99704.jpg"
|
||||
alt="Geschäftsmann im Büro"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="heading-3 mb-[var(--spacing-sm)]">Geschäftskunden</h3>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
Maßgeschneiderte Business-Lösungen für Kommunikation und IT.
|
||||
Von der Netzwerkplanung bis zur Fernwartung – alles aus einer Hand.
|
||||
</p>
|
||||
<Link href="/leistungen" className="btn btn-primary">
|
||||
Business-Lösungen
|
||||
</Link>
|
||||
<div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
|
||||
<div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">100%</div>
|
||||
<p className="font-semibold text-[color:var(--color-foreground)]">Tirol</p>
|
||||
<p className="text-sm text-[color:var(--color-muted-foreground)]">Regional aus Reutte</p>
|
||||
</div>
|
||||
<div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
|
||||
<div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">24h</div>
|
||||
<p className="font-semibold text-[color:var(--color-foreground)]">Support</p>
|
||||
<p className="text-sm text-[color:var(--color-muted-foreground)]">Störungsdienst</p>
|
||||
</div>
|
||||
<div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
|
||||
<div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">Top</div>
|
||||
<p className="font-semibold text-[color:var(--color-foreground)]">Service</p>
|
||||
<p className="text-sm text-[color:var(--color-muted-foreground)]">Persönlicher Ansprechpartner</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-foreground)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Haben Sie Fragen? Wir beraten Sie gerne.
|
||||
</h2>
|
||||
<p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Unser Team in Reutte steht Ihnen persönlich zur Verfügung.
|
||||
Rufen Sie uns an oder senden Sie uns eine Nachricht.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Kontakt aufnehmen
|
||||
</Link>
|
||||
<a href="tel:+4356725000" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
+43 5672 5000
|
||||
</a>
|
||||
</div>
|
||||
{/* Contact CTA */}
|
||||
<Section id="kontakt" className="bg-[var(--color-primary)] text-[color:var(--color-background)]">
|
||||
<Container className="text-center">
|
||||
<h2 className="text-[color:var(--color-background)] mb-[var(--spacing-md)]">
|
||||
Noch Fragen? Wir sind für Sie da.
|
||||
</h2>
|
||||
<p className="text-xl mb-[var(--spacing-xl)] opacity-90">
|
||||
Rufen Sie uns an oder schreiben Sie uns. Wir beraten Sie gerne persönlich.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||||
<a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
|
||||
📞 Anrufen
|
||||
</a>
|
||||
<a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
|
||||
✉️ E-Mail schreiben
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
+119
-288
@@ -1,302 +1,133 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Phone, Building2, CheckCircle, Users } from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Telefonie",
|
||||
description:
|
||||
"Günstige Telefonie-Tarife fürs Festnetz im Bezirk Reutte. Für Privat- und Geschäftskunden – ab 0 € mit Telenet-Internet.",
|
||||
openGraph: {
|
||||
title: "Telefonie | Telenet Systems GmbH",
|
||||
description:
|
||||
"Günstige Telefonie-Tarife fürs Festnetz im Bezirk Reutte. Ab 0 € mit Telenet-Internet.",
|
||||
},
|
||||
export const metadata = {
|
||||
title: "Telefonie Tarife | TeleNetSystems",
|
||||
description: "Günstig telefonieren über Ihren Kabelanschluss. Privat- und Business-Tarife in Reutte.",
|
||||
};
|
||||
|
||||
const telefonieTarife = [
|
||||
{
|
||||
name: "telenet.zero",
|
||||
subtitle: "ohne Internet",
|
||||
price: "5,00",
|
||||
minutenpreis: "2,4",
|
||||
description: "Festnetz-Telefonie ohne Internet-Anschluss von Telenet.",
|
||||
features: [
|
||||
"Festnetzanschluss",
|
||||
"Günstiger Minutenpreis",
|
||||
"Keine Grundgebühr bei Internet",
|
||||
],
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.zero",
|
||||
subtitle: "mit Internet von Telenet",
|
||||
price: "0,00",
|
||||
minutenpreis: "2,4",
|
||||
description: "Festnetz-Telefonie ohne Grundgebühr für Telenet-Internet-Kunden.",
|
||||
features: [
|
||||
"Keine monatliche Grundgebühr",
|
||||
"Günstiger Minutenpreis",
|
||||
"Perfekt für Telenet-Kunden",
|
||||
],
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
name: "telenet.business",
|
||||
subtitle: "für Unternehmen",
|
||||
price: "8,90",
|
||||
minutenpreis: "3,24",
|
||||
description: "Professionelle Telefonie-Lösung für Geschäftskunden.",
|
||||
features: [
|
||||
"Business-Tarif",
|
||||
"Professioneller Service",
|
||||
"Individuelle Optionen",
|
||||
],
|
||||
popular: false,
|
||||
},
|
||||
];
|
||||
|
||||
const benefits = [
|
||||
"Günstige Minutenpreise",
|
||||
"Keine versteckten Kosten",
|
||||
"Einfache Einrichtung",
|
||||
"Persönlicher Support",
|
||||
];
|
||||
|
||||
export default function TelefoniePage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/misc/telefonie1-ad7595f9.jpg"
|
||||
alt="Telefonie"
|
||||
fill
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Phone className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Telefonie</span>
|
||||
</div>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Flexible Telefonie-Tarife für jeden Bedarf
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Günstig ins österreichische Festnetz telefonieren.
|
||||
Mit Telenet-Internet sogar ohne monatliche Grundgebühr.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
<a href="#tarife" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
Tarife ansehen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
return (
|
||||
<main>
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
<Container>
|
||||
<h1 className="mb-[var(--spacing-md)]">
|
||||
Klar verständlich. <span className="text-[color:var(--color-primary)]">Einfach günstig.</span>
|
||||
</h1>
|
||||
<p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Telefonieren Sie in bester Qualität über Ihren bestehenden Kabelanschluss.
|
||||
Ideal als Ergänzung zu Ihrem Internet-Paket.
|
||||
</p>
|
||||
<Link href="#tarife" className="btn btn-primary btn-lg">
|
||||
Tarife ansehen
|
||||
</Link>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Trust Bar */}
|
||||
<Section variant="sm" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
|
||||
{benefits.map((benefit) => (
|
||||
<div
|
||||
key={benefit}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-5 w-5 text-[var(--color-success)]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
<Section id="tarife">
|
||||
<Container>
|
||||
<div className="text-center mb-[var(--spacing-2xl)]">
|
||||
<h2>Unsere Telefonie-Tarife</h2>
|
||||
<p className="text-[color:var(--color-muted-foreground)]">Fair abgerechnet, ohne versteckte Kosten.</p>
|
||||
</div>
|
||||
|
||||
{/* Tarife */}
|
||||
<Section id="tarife">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>Unsere Telefonie-Tarife</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Einfache Preisstruktur ohne versteckte Kosten.
|
||||
Wählen Sie den passenden Tarif für Ihre Bedürfnisse.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-[var(--spacing-xl)] max-w-5xl mx-auto">
|
||||
{/* Zero (With Internet) */}
|
||||
<div className="card text-center border-[color:var(--color-primary)] shadow-[var(--shadow-md)]">
|
||||
<div className="bg-[var(--color-primary)] text-white text-xs py-1 px-3 rounded-full inline-block mb-[var(--spacing-sm)]">Empfehlung</div>
|
||||
<h3 className="heading-4 mb-[var(--spacing-xs)]">zero</h3>
|
||||
<p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(in Kombi mit Internet)</p>
|
||||
<div className="text-4xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
€ 0,00
|
||||
</div>
|
||||
<p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
|
||||
Grundgebühr pro Monat
|
||||
</p>
|
||||
<ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] mx-auto inline-block">
|
||||
<li>✅ Keine Grundgebühr!</li>
|
||||
<li>📞 Festnetz AT: ab 2,4 Cent/min</li>
|
||||
<li>🎯 Ideal für Gelegenheitsnutzer</li>
|
||||
</ul>
|
||||
<Link href="#kontakt" className="btn btn-primary w-full">Bestellen</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
|
||||
{telefonieTarife.map((tarif, index) => (
|
||||
<div
|
||||
key={`${tarif.name}-${index}`}
|
||||
className={`card relative ${
|
||||
tarif.popular
|
||||
? "border-[var(--color-primary)] border-2"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{tarif.popular && (
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-semibold px-3 py-1 rounded-full">
|
||||
Empfohlen
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center">
|
||||
<h3 className="heading-4 text-[var(--color-primary)]">
|
||||
{tarif.name}
|
||||
</h3>
|
||||
<p className="text-sm text-muted mb-[var(--spacing-md)]">
|
||||
{tarif.subtitle}
|
||||
</p>
|
||||
<div className="mb-[var(--spacing-md)]">
|
||||
<span className="heading-1">€ {tarif.price}</span>
|
||||
<span className="text-muted"> / Monat</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted mb-[var(--spacing-sm)]">
|
||||
Festnetz AT: ab {tarif.minutenpreis} Cent / Minute
|
||||
</p>
|
||||
</div>
|
||||
<hr className="border-[var(--color-border)] my-[var(--spacing-lg)]" />
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
{tarif.description}
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
{tarif.features.map((feature) => (
|
||||
<li
|
||||
key={feature}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className={`btn w-full ${
|
||||
tarif.popular ? "btn-primary" : "btn-outline"
|
||||
}`}
|
||||
>
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
{/* 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>
|
||||
|
||||
{/* Kombinieren Section */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Users className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Tipp</span>
|
||||
</div>
|
||||
<h2>Telefonie + Internet kombinieren</h2>
|
||||
<p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
|
||||
Als Telenet-Internet-Kunde telefonieren Sie ohne monatliche Grundgebühr.
|
||||
Sie zahlen nur für die tatsächlich geführten Gespräche.
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>0 € Grundgebühr mit Telenet-Internet</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Einfache Abrechnung über eine Rechnung</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Ein Ansprechpartner für alles</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="/internet" className="btn btn-primary">
|
||||
Internet-Tarife ansehen
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative h-80 lg:h-96 rounded-[var(--radius-lg)] overflow-hidden">
|
||||
<Image
|
||||
src="/images/misc/telefon-fa5e8c21-271d2135.jpg"
|
||||
alt="Person telefoniert"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
{/* Business */}
|
||||
<div className="card text-center">
|
||||
<h3 className="heading-4 mb-[var(--spacing-xs)]">business</h3>
|
||||
<p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(für Unternehmen)</p>
|
||||
<div className="text-4xl font-bold text-[color:var(--color-neutral)] mb-[var(--spacing-md)]">
|
||||
€ 8,90
|
||||
</div>
|
||||
<p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
|
||||
Grundgebühr pro Monat
|
||||
</p>
|
||||
<ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] mx-auto inline-block">
|
||||
<li>✅ Professionelle Lösung</li>
|
||||
<li>📞 Festnetz AT: ab 3,24 Cent/min</li>
|
||||
<li>👔 Für Firmenkunden</li>
|
||||
</ul>
|
||||
<Link href="#kontakt" className="btn btn-outline w-full">Anfragen</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Business Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Building2 className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Business</span>
|
||||
</div>
|
||||
<h2>Telefonie für Unternehmen</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Professionelle Telefonielösungen für Ihr Unternehmen.
|
||||
Wir beraten Sie gerne zu den verschiedenen Möglichkeiten.
|
||||
</p>
|
||||
</div>
|
||||
<div className="card max-w-2xl mx-auto text-center">
|
||||
<h3 className="heading-4 mb-[var(--spacing-md)]">
|
||||
Individuelle Business-Lösungen
|
||||
</h3>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
Für Unternehmen bieten wir maßgeschneiderte Telefonielösungen an.
|
||||
Von der klassischen Festnetzanbindung bis zu modernen VoIP-Systemen –
|
||||
wir finden die passende Lösung für Ihre Anforderungen.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Beratung anfragen
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] items-center">
|
||||
<div>
|
||||
<h3 className="mb-[var(--spacing-md)]">Rufnummernmitnahme? Kein Problem!</h3>
|
||||
<p className="mb-[var(--spacing-md)]">
|
||||
Sie hängen an Ihrer alten Nummer? Wir auch. Deshalb übernehmen wir gerne die Portierung Ihrer bestehenden Festnetznummer zu uns.
|
||||
</p>
|
||||
<p className="text-sm text-[color:var(--color-muted-foreground)]">
|
||||
Abhängig von Ihrem bisherigen Anbieter können Portierungskosten entstehen. Wir beraten Sie gerne zum Ablauf.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<div className="bg-white p-[var(--spacing-lg)] rounded-[var(--radius-lg)] shadow-[var(--shadow-sm)] rotate-3">
|
||||
<div className="text-6xl mb-2">☎️</div>
|
||||
<div className="font-bold">Ihre Nummer</div>
|
||||
<div className="text-sm">bleibt gleich.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-foreground)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Fragen zu unseren Telefonie-Tarifen?
|
||||
</h2>
|
||||
<p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Unser Team berät Sie gerne persönlich und findet den passenden Tarif für Sie.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Kontakt aufnehmen
|
||||
</Link>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]"
|
||||
>
|
||||
+43 5672 5000
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
<Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
|
||||
<Container>
|
||||
<h2 className="text-white mb-[var(--spacing-md)]">Jetzt Telefonie anmelden</h2>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||||
<a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
|
||||
📞 Anrufen
|
||||
</a>
|
||||
<a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
|
||||
✉️ E-Mail schreiben
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
|
||||
export const metadata = {
|
||||
title: "Über uns | TeleNetSystems",
|
||||
description: "TeleNetSystems GmbH - Ihr regionaler Telekommunikationsanbieter in Reutte seit 1976.",
|
||||
};
|
||||
|
||||
export default function UeberUnsPage() {
|
||||
return (
|
||||
<main>
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
<Container>
|
||||
<h1 className="mb-[var(--spacing-md)]">
|
||||
Regional. Persönlich. <span className="text-[color:var(--color-primary)]">Verlässlich.</span>
|
||||
</h1>
|
||||
<p className="lead max-w-2xl mx-auto">
|
||||
Seit 1976 verbinden wir Menschen in der Region Reutte.
|
||||
</p>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center mb-[var(--spacing-2xl)]">
|
||||
<div className="order-2 md:order-1">
|
||||
<div className="aspect-square bg-[var(--color-muted)] rounded-[var(--radius-lg)] flex items-center justify-center text-[color:var(--color-muted-foreground)]">
|
||||
PLACEHOLDER: Historic Image / Company Building
|
||||
</div>
|
||||
</div>
|
||||
<div className="order-1 md:order-2">
|
||||
<h2 className="mb-[var(--spacing-md)]">Unsere Geschichte</h2>
|
||||
<p className="mb-[var(--spacing-md)]">
|
||||
Die Telenet Systems GmbH blickt auf eine lange Tradition zurück. Gegründet 1976, haben wir uns von einem lokalen Anbieter für
|
||||
Antennen- und Kabelfernsehen zu einem modernen Full-Service-Provider entwickelt.
|
||||
</p>
|
||||
<p className="mb-[var(--spacing-md)]">
|
||||
In einer Zeit, in der Technologie immer komplexer wurde, war unser Ziel immer einfach: Technik verständlich und nutzbar zu machen.
|
||||
Heute versorgen wir Haushalte und Unternehmen im gesamten Bezirk Reutte mit Highspeed-Internet, digitalem Fernsehen und
|
||||
Telefonie.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
|
||||
<div>
|
||||
<h2 className="mb-[var(--spacing-md)]">Unsere Philosophie</h2>
|
||||
<p className="mb-[var(--spacing-md)]">
|
||||
Wir sind kein anonymer Konzern mit Call-Center im Ausland. Wir sind Ihre Nachbarn.
|
||||
Unsere Mitarbeiter leben in der Region und kennen die Anforderungen vor Ort.
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)]">
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">✅ Echte Ansprechpartner</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">✅ Schnelle Reaktionszeiten</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">✅ Handschlagqualität</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div className="aspect-video bg-[var(--color-muted)] rounded-[var(--radius-lg)] flex items-center justify-center text-[color:var(--color-muted-foreground)]">
|
||||
PLACEHOLDER: Team Image
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Contact Anchor */}
|
||||
<Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
|
||||
<Container>
|
||||
<h2 className="text-white mb-[var(--spacing-md)]">Werden Sie Teil unseres Netzes</h2>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||||
<a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
|
||||
📞 Kontakt aufnehmen
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,758 +0,0 @@
|
||||
[
|
||||
{
|
||||
"originalUrl": "https://tnr.at/stream/Plansee_1.jpg",
|
||||
"localPath": null,
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/sonstiges/livecam.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": null,
|
||||
"height": null,
|
||||
"fileSize": null,
|
||||
"format": null,
|
||||
"licensingConfidence": {
|
||||
"level": "medium",
|
||||
"reason": "Gleiche Root-Domain, aber andere Subdomain; Rechte sollten zusätzlich bestätigt werden."
|
||||
},
|
||||
"optimizedVariants": []
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://tnr.at/stream/Plansee_2.jpg",
|
||||
"localPath": null,
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/sonstiges/livecam.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": null,
|
||||
"height": null,
|
||||
"fileSize": null,
|
||||
"format": null,
|
||||
"licensingConfidence": {
|
||||
"level": "medium",
|
||||
"reason": "Gleiche Root-Domain, aber andere Subdomain; Rechte sollten zusätzlich bestätigt werden."
|
||||
},
|
||||
"optimizedVariants": []
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://tnr.at/stream/schollenwiesenlift.jpg",
|
||||
"localPath": null,
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/sonstiges/livecam.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": null,
|
||||
"height": null,
|
||||
"fileSize": null,
|
||||
"format": null,
|
||||
"licensingConfidence": {
|
||||
"level": "medium",
|
||||
"reason": "Gleiche Root-Domain, aber andere Subdomain; Rechte sollten zusätzlich bestätigt werden."
|
||||
},
|
||||
"optimizedVariants": []
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/0/Lukas%20Schennach-0f7160e5.jpg",
|
||||
"localPath": "assets/originals/misc/lukas-20schennach-0f7160e5-e8152f4f.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/ueber-uns.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 1000,
|
||||
"height": 1500,
|
||||
"fileSize": 82845,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/lukas-20schennach-0f7160e5-e8152f4f-480.webp",
|
||||
"public/media/misc/lukas-20schennach-0f7160e5-e8152f4f-480.avif",
|
||||
"public/media/misc/lukas-20schennach-0f7160e5-e8152f4f-768.webp",
|
||||
"public/media/misc/lukas-20schennach-0f7160e5-e8152f4f-768.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/0/Mario%20Kien-f5e3602f.jpg",
|
||||
"localPath": "assets/originals/misc/mario-20kien-f5e3602f-ddda3b58.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/ueber-uns.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 1000,
|
||||
"height": 1500,
|
||||
"fileSize": 99889,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/mario-20kien-f5e3602f-ddda3b58-480.webp",
|
||||
"public/media/misc/mario-20kien-f5e3602f-ddda3b58-480.avif",
|
||||
"public/media/misc/mario-20kien-f5e3602f-ddda3b58-768.webp",
|
||||
"public/media/misc/mario-20kien-f5e3602f-ddda3b58-768.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/0/timo-224648e7.jpg",
|
||||
"localPath": "assets/originals/misc/timo-224648e7-f0782cdb.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/ueber-uns.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 702,
|
||||
"height": 1053,
|
||||
"fileSize": 95160,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/timo-224648e7-f0782cdb-480.webp",
|
||||
"public/media/misc/timo-224648e7-f0782cdb-480.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/2/Franz-8b76ccff.jpg",
|
||||
"localPath": "assets/originals/misc/franz-8b76ccff-320f42cb.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/ueber-uns.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 700,
|
||||
"height": 1050,
|
||||
"fileSize": 92775,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/franz-8b76ccff-320f42cb-480.webp",
|
||||
"public/media/misc/franz-8b76ccff-320f42cb-480.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/2/Ju%CC%88rgen%20Gra%CC%88ssle-8e0dfbb3.jpg",
|
||||
"localPath": "assets/originals/misc/ju-cc-88rgen-20gra-cc-88ssle-8e0dfbb3-db96fd12.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/ueber-uns.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 1000,
|
||||
"height": 1500,
|
||||
"fileSize": 88653,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/ju-cc-88rgen-20gra-cc-88ssle-8e0dfbb3-db96fd12-480.webp",
|
||||
"public/media/misc/ju-cc-88rgen-20gra-cc-88ssle-8e0dfbb3-db96fd12-480.avif",
|
||||
"public/media/misc/ju-cc-88rgen-20gra-cc-88ssle-8e0dfbb3-db96fd12-768.webp",
|
||||
"public/media/misc/ju-cc-88rgen-20gra-cc-88ssle-8e0dfbb3-db96fd12-768.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/2/Martin%20M%C3%BCller-4422f545.jpg",
|
||||
"localPath": "assets/originals/misc/martin-20m-c3-bcller-4422f545-ddb853b7.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/ueber-uns.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 1000,
|
||||
"height": 1500,
|
||||
"fileSize": 72232,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/martin-20m-c3-bcller-4422f545-ddb853b7-480.webp",
|
||||
"public/media/misc/martin-20m-c3-bcller-4422f545-ddb853b7-480.avif",
|
||||
"public/media/misc/martin-20m-c3-bcller-4422f545-ddb853b7-768.webp",
|
||||
"public/media/misc/martin-20m-c3-bcller-4422f545-ddb853b7-768.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/3/telefon-fa5e8c21.jpg",
|
||||
"localPath": "assets/originals/misc/telefon-fa5e8c21-271d2135.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 1600,
|
||||
"height": 900,
|
||||
"fileSize": 127940,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/telefon-fa5e8c21-271d2135-480.webp",
|
||||
"public/media/misc/telefon-fa5e8c21-271d2135-480.avif",
|
||||
"public/media/misc/telefon-fa5e8c21-271d2135-768.webp",
|
||||
"public/media/misc/telefon-fa5e8c21-271d2135-768.avif",
|
||||
"public/media/misc/telefon-fa5e8c21-271d2135-1024.webp",
|
||||
"public/media/misc/telefon-fa5e8c21-271d2135-1024.avif",
|
||||
"public/media/misc/telefon-fa5e8c21-271d2135-1440.webp",
|
||||
"public/media/misc/telefon-fa5e8c21-271d2135-1440.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/4/internet-7b594a2d.jpg",
|
||||
"localPath": "assets/originals/misc/internet-7b594a2d-793cefee.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 1600,
|
||||
"height": 900,
|
||||
"fileSize": 160649,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/internet-7b594a2d-793cefee-480.webp",
|
||||
"public/media/misc/internet-7b594a2d-793cefee-480.avif",
|
||||
"public/media/misc/internet-7b594a2d-793cefee-768.webp",
|
||||
"public/media/misc/internet-7b594a2d-793cefee-768.avif",
|
||||
"public/media/misc/internet-7b594a2d-793cefee-1024.webp",
|
||||
"public/media/misc/internet-7b594a2d-793cefee-1024.avif",
|
||||
"public/media/misc/internet-7b594a2d-793cefee-1440.webp",
|
||||
"public/media/misc/internet-7b594a2d-793cefee-1440.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/6/Firmenkunden-96736712.jpg",
|
||||
"localPath": "assets/originals/misc/firmenkunden-96736712-5fa99704.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/leistungen.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 1600,
|
||||
"height": 900,
|
||||
"fileSize": 136399,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/firmenkunden-96736712-5fa99704-480.webp",
|
||||
"public/media/misc/firmenkunden-96736712-5fa99704-480.avif",
|
||||
"public/media/misc/firmenkunden-96736712-5fa99704-768.webp",
|
||||
"public/media/misc/firmenkunden-96736712-5fa99704-768.avif",
|
||||
"public/media/misc/firmenkunden-96736712-5fa99704-1024.webp",
|
||||
"public/media/misc/firmenkunden-96736712-5fa99704-1024.avif",
|
||||
"public/media/misc/firmenkunden-96736712-5fa99704-1440.webp",
|
||||
"public/media/misc/firmenkunden-96736712-5fa99704-1440.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/6/Lorena-c31636eb.jpg",
|
||||
"localPath": "assets/originals/misc/lorena-c31636eb-2f817bb4.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/ueber-uns.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 1000,
|
||||
"height": 1500,
|
||||
"fileSize": 126849,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/lorena-c31636eb-2f817bb4-480.webp",
|
||||
"public/media/misc/lorena-c31636eb-2f817bb4-480.avif",
|
||||
"public/media/misc/lorena-c31636eb-2f817bb4-768.webp",
|
||||
"public/media/misc/lorena-c31636eb-2f817bb4-768.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/8/Furkan_Demirel-4112a488.jpg",
|
||||
"localPath": "assets/originals/misc/furkan-demirel-4112a488-f6dfc223.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/ueber-uns.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 697,
|
||||
"height": 1046,
|
||||
"fileSize": 115769,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/furkan-demirel-4112a488-f6dfc223-480.webp",
|
||||
"public/media/misc/furkan-demirel-4112a488-f6dfc223-480.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/8/tv_business-c3bdfb94.jpg",
|
||||
"localPath": "assets/originals/misc/tv-business-c3bdfb94-23310090.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/fernsehen.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 848,
|
||||
"height": 477,
|
||||
"fileSize": 100776,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/tv-business-c3bdfb94-23310090-480.webp",
|
||||
"public/media/misc/tv-business-c3bdfb94-23310090-480.avif",
|
||||
"public/media/misc/tv-business-c3bdfb94-23310090-768.webp",
|
||||
"public/media/misc/tv-business-c3bdfb94-23310090-768.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/a/Julia%20Besler-f4fe1bff.jpg",
|
||||
"localPath": "assets/originals/misc/julia-20besler-f4fe1bff-fb0f3af2.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/ueber-uns.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 1000,
|
||||
"height": 1500,
|
||||
"fileSize": 126290,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/julia-20besler-f4fe1bff-fb0f3af2-480.webp",
|
||||
"public/media/misc/julia-20besler-f4fe1bff-fb0f3af2-480.avif",
|
||||
"public/media/misc/julia-20besler-f4fe1bff-fb0f3af2-768.webp",
|
||||
"public/media/misc/julia-20besler-f4fe1bff-fb0f3af2-768.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/b/tv_paytv-6cbac6e4.jpg",
|
||||
"localPath": "assets/originals/misc/tv-paytv-6cbac6e4-d140e2e4.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/fernsehen.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 887,
|
||||
"height": 499,
|
||||
"fileSize": 67541,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/tv-paytv-6cbac6e4-d140e2e4-480.webp",
|
||||
"public/media/misc/tv-paytv-6cbac6e4-d140e2e4-480.avif",
|
||||
"public/media/misc/tv-paytv-6cbac6e4-d140e2e4-768.webp",
|
||||
"public/media/misc/tv-paytv-6cbac6e4-d140e2e4-768.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/c/David%20Mu%CC%88ller-da85dab8.jpg",
|
||||
"localPath": "assets/originals/misc/david-20mu-cc-88ller-da85dab8-046e19ba.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/ueber-uns.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 1000,
|
||||
"height": 1500,
|
||||
"fileSize": 106693,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/david-20mu-cc-88ller-da85dab8-046e19ba-480.webp",
|
||||
"public/media/misc/david-20mu-cc-88ller-da85dab8-046e19ba-480.avif",
|
||||
"public/media/misc/david-20mu-cc-88ller-da85dab8-046e19ba-768.webp",
|
||||
"public/media/misc/david-20mu-cc-88ller-da85dab8-046e19ba-768.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/c/tv_privat-76f60c7a.jpg",
|
||||
"localPath": "assets/originals/misc/tv-privat-76f60c7a-88eafcfb.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/",
|
||||
"https://www.tnr.at/fernsehen.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 848,
|
||||
"height": 477,
|
||||
"fileSize": 56824,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/tv-privat-76f60c7a-88eafcfb-480.webp",
|
||||
"public/media/misc/tv-privat-76f60c7a-88eafcfb-480.avif",
|
||||
"public/media/misc/tv-privat-76f60c7a-88eafcfb-768.webp",
|
||||
"public/media/misc/tv-privat-76f60c7a-88eafcfb-768.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/d/Wolfgang%20Schwaiger-3fd3136b.jpg",
|
||||
"localPath": "assets/originals/misc/wolfgang-20schwaiger-3fd3136b-19e15245.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/ueber-uns.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 1000,
|
||||
"height": 1500,
|
||||
"fileSize": 130229,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/wolfgang-20schwaiger-3fd3136b-19e15245-480.webp",
|
||||
"public/media/misc/wolfgang-20schwaiger-3fd3136b-19e15245-480.avif",
|
||||
"public/media/misc/wolfgang-20schwaiger-3fd3136b-19e15245-768.webp",
|
||||
"public/media/misc/wolfgang-20schwaiger-3fd3136b-19e15245-768.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/f/LWL1-c8928579.jpg",
|
||||
"localPath": "assets/originals/misc/lwl1-c8928579-d408002b.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/leistungen.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 1600,
|
||||
"height": 900,
|
||||
"fileSize": 126513,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/lwl1-c8928579-d408002b-480.webp",
|
||||
"public/media/misc/lwl1-c8928579-d408002b-480.avif",
|
||||
"public/media/misc/lwl1-c8928579-d408002b-768.webp",
|
||||
"public/media/misc/lwl1-c8928579-d408002b-768.avif",
|
||||
"public/media/misc/lwl1-c8928579-d408002b-1024.webp",
|
||||
"public/media/misc/lwl1-c8928579-d408002b-1024.avif",
|
||||
"public/media/misc/lwl1-c8928579-d408002b-1440.webp",
|
||||
"public/media/misc/lwl1-c8928579-d408002b-1440.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/assets/images/f/Privatkunden-a54cf4d8.jpg",
|
||||
"localPath": "assets/originals/misc/privatkunden-a54cf4d8-0018c3fa.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/leistungen.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 1600,
|
||||
"height": 900,
|
||||
"fileSize": 147386,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/privatkunden-a54cf4d8-0018c3fa-480.webp",
|
||||
"public/media/misc/privatkunden-a54cf4d8-0018c3fa-480.avif",
|
||||
"public/media/misc/privatkunden-a54cf4d8-0018c3fa-768.webp",
|
||||
"public/media/misc/privatkunden-a54cf4d8-0018c3fa-768.avif",
|
||||
"public/media/misc/privatkunden-a54cf4d8-0018c3fa-1024.webp",
|
||||
"public/media/misc/privatkunden-a54cf4d8-0018c3fa-1024.avif",
|
||||
"public/media/misc/privatkunden-a54cf4d8-0018c3fa-1440.webp",
|
||||
"public/media/misc/privatkunden-a54cf4d8-0018c3fa-1440.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/files/bilder/fernsehen/tv-header.jpg",
|
||||
"localPath": "assets/originals/hero/tv-header-44c1e07b.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/fernsehen.html"
|
||||
],
|
||||
"detectedType": "hero",
|
||||
"width": 2500,
|
||||
"height": 1250,
|
||||
"fileSize": 232031,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/hero/tv-header-44c1e07b-480.webp",
|
||||
"public/media/hero/tv-header-44c1e07b-480.avif",
|
||||
"public/media/hero/tv-header-44c1e07b-768.webp",
|
||||
"public/media/hero/tv-header-44c1e07b-768.avif",
|
||||
"public/media/hero/tv-header-44c1e07b-1024.webp",
|
||||
"public/media/hero/tv-header-44c1e07b-1024.avif",
|
||||
"public/media/hero/tv-header-44c1e07b-1440.webp",
|
||||
"public/media/hero/tv-header-44c1e07b-1440.avif",
|
||||
"public/media/hero/tv-header-44c1e07b-1920.webp",
|
||||
"public/media/hero/tv-header-44c1e07b-1920.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/files/bilder/slider_internet/internet-header.jpg",
|
||||
"localPath": "assets/originals/hero/internet-header-431619ac.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/internet.html"
|
||||
],
|
||||
"detectedType": "hero",
|
||||
"width": 2500,
|
||||
"height": 1250,
|
||||
"fileSize": 258840,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/hero/internet-header-431619ac-480.webp",
|
||||
"public/media/hero/internet-header-431619ac-480.avif",
|
||||
"public/media/hero/internet-header-431619ac-768.webp",
|
||||
"public/media/hero/internet-header-431619ac-768.avif",
|
||||
"public/media/hero/internet-header-431619ac-1024.webp",
|
||||
"public/media/hero/internet-header-431619ac-1024.avif",
|
||||
"public/media/hero/internet-header-431619ac-1440.webp",
|
||||
"public/media/hero/internet-header-431619ac-1440.avif",
|
||||
"public/media/hero/internet-header-431619ac-1920.webp",
|
||||
"public/media/hero/internet-header-431619ac-1920.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/files/bilder/slider_leistungen/LWL1.jpg",
|
||||
"localPath": "assets/originals/services/lwl1-40360e27.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/"
|
||||
],
|
||||
"detectedType": "services",
|
||||
"width": 2500,
|
||||
"height": 1667,
|
||||
"fileSize": 327162,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/services/lwl1-40360e27-480.webp",
|
||||
"public/media/services/lwl1-40360e27-480.avif",
|
||||
"public/media/services/lwl1-40360e27-768.webp",
|
||||
"public/media/services/lwl1-40360e27-768.avif",
|
||||
"public/media/services/lwl1-40360e27-1024.webp",
|
||||
"public/media/services/lwl1-40360e27-1024.avif",
|
||||
"public/media/services/lwl1-40360e27-1440.webp",
|
||||
"public/media/services/lwl1-40360e27-1440.avif",
|
||||
"public/media/services/lwl1-40360e27-1920.webp",
|
||||
"public/media/services/lwl1-40360e27-1920.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/files/bilder/slider_leistungen/tnr-leistungen.jpg",
|
||||
"localPath": "assets/originals/services/tnr-leistungen-055053d5.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/leistungen.html"
|
||||
],
|
||||
"detectedType": "services",
|
||||
"width": 2500,
|
||||
"height": 1667,
|
||||
"fileSize": 699082,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/services/tnr-leistungen-055053d5-480.webp",
|
||||
"public/media/services/tnr-leistungen-055053d5-480.avif",
|
||||
"public/media/services/tnr-leistungen-055053d5-768.webp",
|
||||
"public/media/services/tnr-leistungen-055053d5-768.avif",
|
||||
"public/media/services/tnr-leistungen-055053d5-1024.webp",
|
||||
"public/media/services/tnr-leistungen-055053d5-1024.avif",
|
||||
"public/media/services/tnr-leistungen-055053d5-1440.webp",
|
||||
"public/media/services/tnr-leistungen-055053d5-1440.avif",
|
||||
"public/media/services/tnr-leistungen-055053d5-1920.webp",
|
||||
"public/media/services/tnr-leistungen-055053d5-1920.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/files/bilder/slider_telefonie/telefonie1.jpg",
|
||||
"localPath": "assets/originals/misc/telefonie1-ad7595f9.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/telefonie.html"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 2500,
|
||||
"height": 1250,
|
||||
"fileSize": 244570,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/telefonie1-ad7595f9-480.webp",
|
||||
"public/media/misc/telefonie1-ad7595f9-480.avif",
|
||||
"public/media/misc/telefonie1-ad7595f9-768.webp",
|
||||
"public/media/misc/telefonie1-ad7595f9-768.avif",
|
||||
"public/media/misc/telefonie1-ad7595f9-1024.webp",
|
||||
"public/media/misc/telefonie1-ad7595f9-1024.avif",
|
||||
"public/media/misc/telefonie1-ad7595f9-1440.webp",
|
||||
"public/media/misc/telefonie1-ad7595f9-1440.avif",
|
||||
"public/media/misc/telefonie1-ad7595f9-1920.webp",
|
||||
"public/media/misc/telefonie1-ad7595f9-1920.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/files/bilder/slider_ueber_uns/Firma1.jpg",
|
||||
"localPath": "assets/originals/misc/firma1-8a863d8b.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/"
|
||||
],
|
||||
"detectedType": "misc",
|
||||
"width": 2500,
|
||||
"height": 1250,
|
||||
"fileSize": 1298065,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/misc/firma1-8a863d8b-480.webp",
|
||||
"public/media/misc/firma1-8a863d8b-480.avif",
|
||||
"public/media/misc/firma1-8a863d8b-768.webp",
|
||||
"public/media/misc/firma1-8a863d8b-768.avif",
|
||||
"public/media/misc/firma1-8a863d8b-1024.webp",
|
||||
"public/media/misc/firma1-8a863d8b-1024.avif",
|
||||
"public/media/misc/firma1-8a863d8b-1440.webp",
|
||||
"public/media/misc/firma1-8a863d8b-1440.avif",
|
||||
"public/media/misc/firma1-8a863d8b-1920.webp",
|
||||
"public/media/misc/firma1-8a863d8b-1920.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/files/bilder/slider_ueber_uns/Team_Telenet.jpg",
|
||||
"localPath": "assets/originals/team/team-telenet-f9218567.jpg",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/ueber-uns.html"
|
||||
],
|
||||
"detectedType": "team",
|
||||
"width": 2500,
|
||||
"height": 1042,
|
||||
"fileSize": 281135,
|
||||
"format": "jpg",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/team/team-telenet-f9218567-480.webp",
|
||||
"public/media/team/team-telenet-f9218567-480.avif",
|
||||
"public/media/team/team-telenet-f9218567-768.webp",
|
||||
"public/media/team/team-telenet-f9218567-768.avif",
|
||||
"public/media/team/team-telenet-f9218567-1024.webp",
|
||||
"public/media/team/team-telenet-f9218567-1024.avif",
|
||||
"public/media/team/team-telenet-f9218567-1440.webp",
|
||||
"public/media/team/team-telenet-f9218567-1440.avif",
|
||||
"public/media/team/team-telenet-f9218567-1920.webp",
|
||||
"public/media/team/team-telenet-f9218567-1920.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/files/layout/img/logo_systems.png",
|
||||
"localPath": "assets/originals/brand/logo-systems-9fd0db14.png",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/",
|
||||
"https://www.tnr.at/fernsehen.html",
|
||||
"https://www.tnr.at/internet.html",
|
||||
"https://www.tnr.at/leistungen.html",
|
||||
"https://www.tnr.at/sonstiges/anfrage.html",
|
||||
"https://www.tnr.at/sonstiges/datenschutz.html",
|
||||
"https://www.tnr.at/sonstiges/impressum.html",
|
||||
"https://www.tnr.at/sonstiges/jugendschutzerklaerung.html",
|
||||
"https://www.tnr.at/sonstiges/livecam.html",
|
||||
"https://www.tnr.at/telefonie.html",
|
||||
"https://www.tnr.at/ueber-uns.html"
|
||||
],
|
||||
"detectedType": "brand",
|
||||
"width": 2500,
|
||||
"height": 793,
|
||||
"fileSize": 143798,
|
||||
"format": "png",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/brand/logo-systems-9fd0db14-480.webp",
|
||||
"public/media/brand/logo-systems-9fd0db14-480.avif",
|
||||
"public/media/brand/logo-systems-9fd0db14-768.webp",
|
||||
"public/media/brand/logo-systems-9fd0db14-768.avif",
|
||||
"public/media/brand/logo-systems-9fd0db14-1024.webp",
|
||||
"public/media/brand/logo-systems-9fd0db14-1024.avif",
|
||||
"public/media/brand/logo-systems-9fd0db14-1440.webp",
|
||||
"public/media/brand/logo-systems-9fd0db14-1440.avif",
|
||||
"public/media/brand/logo-systems-9fd0db14-1920.webp",
|
||||
"public/media/brand/logo-systems-9fd0db14-1920.avif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"originalUrl": "https://www.tnr.at/files/layout/img/logo_weiss.png",
|
||||
"localPath": "assets/originals/brand/logo-weiss-ffa4cbf6.png",
|
||||
"pageUsedOn": [
|
||||
"https://www.tnr.at/",
|
||||
"https://www.tnr.at/fernsehen.html",
|
||||
"https://www.tnr.at/internet.html",
|
||||
"https://www.tnr.at/leistungen.html",
|
||||
"https://www.tnr.at/sonstiges/anfrage.html",
|
||||
"https://www.tnr.at/sonstiges/datenschutz.html",
|
||||
"https://www.tnr.at/sonstiges/impressum.html",
|
||||
"https://www.tnr.at/sonstiges/jugendschutzerklaerung.html",
|
||||
"https://www.tnr.at/sonstiges/livecam.html",
|
||||
"https://www.tnr.at/telefonie.html",
|
||||
"https://www.tnr.at/ueber-uns.html"
|
||||
],
|
||||
"detectedType": "brand",
|
||||
"width": 2500,
|
||||
"height": 793,
|
||||
"fileSize": 94380,
|
||||
"format": "png",
|
||||
"licensingConfidence": {
|
||||
"level": "high",
|
||||
"reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
|
||||
},
|
||||
"optimizedVariants": [
|
||||
"public/media/brand/logo-weiss-ffa4cbf6-480.webp",
|
||||
"public/media/brand/logo-weiss-ffa4cbf6-480.avif",
|
||||
"public/media/brand/logo-weiss-ffa4cbf6-768.webp",
|
||||
"public/media/brand/logo-weiss-ffa4cbf6-768.avif",
|
||||
"public/media/brand/logo-weiss-ffa4cbf6-1024.webp",
|
||||
"public/media/brand/logo-weiss-ffa4cbf6-1024.avif",
|
||||
"public/media/brand/logo-weiss-ffa4cbf6-1440.webp",
|
||||
"public/media/brand/logo-weiss-ffa4cbf6-1440.avif",
|
||||
"public/media/brand/logo-weiss-ffa4cbf6-1920.webp",
|
||||
"public/media/brand/logo-weiss-ffa4cbf6-1920.avif"
|
||||
]
|
||||
}
|
||||
]
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 253 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 157 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 320 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 683 KiB |
Binary file not shown.
|
Before 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
|
||||
|
||||
type ContainerVariant = "default" | "narrow" | "wide";
|
||||
|
||||
interface ContainerProps {
|
||||
interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
as?: ElementType;
|
||||
variant?: ContainerVariant;
|
||||
variant?: "narrow" | "wide"; // Add variant support
|
||||
}
|
||||
|
||||
const variantClasses: Record<ContainerVariant, string> = {
|
||||
default: "container",
|
||||
narrow: "container container--narrow",
|
||||
wide: "container container--wide",
|
||||
};
|
||||
|
||||
export function Container({
|
||||
children,
|
||||
className = "",
|
||||
as: Tag = "div",
|
||||
variant = "default",
|
||||
variant,
|
||||
...props
|
||||
}: ContainerProps) {
|
||||
const variantClass = variant === "narrow" ? "container--narrow" :
|
||||
variant === "wide" ? "container--wide" : "";
|
||||
|
||||
return (
|
||||
<Tag className={`${variantClasses[variant]} ${className}`.trim()}>
|
||||
<Tag
|
||||
className={`container ${variantClass} ${className}`.trim()}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
|
||||
+47
-132
@@ -1,139 +1,54 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { MapPin, Phone, Mail, Clock } from "lucide-react";
|
||||
|
||||
const navigation = {
|
||||
leistungen: [
|
||||
{ name: "Fernsehen", href: "/fernsehen" },
|
||||
{ name: "Internet", href: "/internet" },
|
||||
{ name: "Telefonie", href: "/telefonie" },
|
||||
{ name: "IT-Services", href: "/leistungen" },
|
||||
],
|
||||
unternehmen: [
|
||||
{ name: "Über uns", href: "/ueber-uns" },
|
||||
{ name: "Kontakt", href: "/kontakt" },
|
||||
],
|
||||
rechtliches: [
|
||||
{ name: "Impressum", href: "/impressum" },
|
||||
{ name: "Datenschutz", href: "/datenschutz" },
|
||||
],
|
||||
};
|
||||
import Link from "next/link";
|
||||
import { Container } from "./Container";
|
||||
|
||||
export function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
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-4xl)]">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-2xl)]">
|
||||
{/* Company Info */}
|
||||
<div className="lg:col-span-1">
|
||||
<Image
|
||||
src="/images/brand/logo-weiss-ffa4cbf6.png"
|
||||
alt="Telenet Systems GmbH"
|
||||
width={160}
|
||||
height={51}
|
||||
className="h-10 w-auto mb-[var(--spacing-lg)]"
|
||||
/>
|
||||
<p className="text-sm text-gray-300 mb-[var(--spacing-lg)]">
|
||||
Ihr regionaler Partner für Telekommunikation und IT-Services in Tirol. Seit 1976 verbinden wir Menschen und Technik.
|
||||
</p>
|
||||
<div className="space-y-[var(--spacing-sm)]">
|
||||
<div className="flex items-start gap-[var(--spacing-sm)] text-sm text-gray-300">
|
||||
<MapPin className="h-4 w-4 mt-0.5 flex-shrink-0" aria-hidden="true" />
|
||||
<span>Reutte, Tirol, Österreich</span>
|
||||
return (
|
||||
<footer className="bg-[var(--color-muted)] border-t border-[color:var(--color-border)] py-[var(--spacing-xl)] mt-auto">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-[var(--spacing-xl)] mb-[var(--spacing-xl)]">
|
||||
<div className="md:col-span-1">
|
||||
<Link href="/" className="font-heading text-lg font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)] block">
|
||||
TeleNetSystems
|
||||
</Link>
|
||||
<p className="text-sm text-[color:var(--color-muted-foreground)]">
|
||||
Ihr regionaler Partner für Internet, TV und Telefonie in Reutte & Umgebung.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-bold mb-[var(--spacing-md)]">Produkte</h4>
|
||||
<ul className="space-y-[var(--spacing-xs)] text-sm">
|
||||
<li><Link href="/fernsehen" className="hover:text-[color:var(--color-primary)]">Fernsehen</Link></li>
|
||||
<li><Link href="/internet" className="hover:text-[color:var(--color-primary)]">Internet</Link></li>
|
||||
<li><Link href="/telefonie" className="hover:text-[color:var(--color-primary)]">Telefonie</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-bold mb-[var(--spacing-md)]">Unternehmen</h4>
|
||||
<ul className="space-y-[var(--spacing-xs)] text-sm">
|
||||
<li><Link href="/ueber-uns" className="hover:text-[color:var(--color-primary)]">Über uns</Link></li>
|
||||
<li><Link href="/leistungen" className="hover:text-[color:var(--color-primary)]">Leistungen</Link></li>
|
||||
<li><Link href="#kontakt" className="hover:text-[color:var(--color-primary)]">Kontakt</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-bold mb-[var(--spacing-md)]">Rechtliches</h4>
|
||||
<ul className="space-y-[var(--spacing-xs)] text-sm">
|
||||
<li><Link href="/impressum" className="hover:text-[color:var(--color-primary)]">Impressum</Link></li>
|
||||
<li><Link href="/datenschutz" className="hover:text-[color:var(--color-primary)]">Datenschutz</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
<Phone className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
|
||||
<span>+43 5672 5000</span>
|
||||
</a>
|
||||
<a
|
||||
href="mailto:info@tnr.at"
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
<Mail className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
|
||||
<span>info@tnr.at</span>
|
||||
</a>
|
||||
<div className="flex items-start gap-[var(--spacing-sm)] text-sm text-gray-300">
|
||||
<Clock className="h-4 w-4 mt-0.5 flex-shrink-0" aria-hidden="true" />
|
||||
<span>Mo–Fr: 8:00–12:00 & 13:00–17:00</span>
|
||||
|
||||
<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.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Leistungen */}
|
||||
<div>
|
||||
<h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Leistungen</h3>
|
||||
<ul className="space-y-[var(--spacing-sm)]">
|
||||
{navigation.leistungen.map((item) => (
|
||||
<li key={item.name}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-sm text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Unternehmen */}
|
||||
<div>
|
||||
<h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Unternehmen</h3>
|
||||
<ul className="space-y-[var(--spacing-sm)]">
|
||||
{navigation.unternehmen.map((item) => (
|
||||
<li key={item.name}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-sm text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Rechtliches & CTA */}
|
||||
<div>
|
||||
<h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Rechtliches</h3>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
{navigation.rechtliches.map((item) => (
|
||||
<li key={item.name}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-sm text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Kontakt aufnehmen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="border-t border-gray-700 py-[var(--spacing-lg)]">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-[var(--spacing-sm)]">
|
||||
<p className="text-sm text-gray-400">
|
||||
© {currentYear} Telenet Systems GmbH. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
Ihr Partner für Telekommunikation seit 1976
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
</Container>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
+33
-108
@@ -1,116 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import { Menu, X, Phone } from "lucide-react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { Container } from "./Container";
|
||||
import { Button } from "../ui/Button";
|
||||
|
||||
const navigation = [
|
||||
{ name: "Startseite", href: "/" },
|
||||
{ name: "Fernsehen", href: "/fernsehen" },
|
||||
{ name: "Internet", href: "/internet" },
|
||||
{ name: "Telefonie", href: "/telefonie" },
|
||||
{ name: "Leistungen", href: "/leistungen" },
|
||||
{ name: "Über uns", href: "/ueber-uns" },
|
||||
{ name: "Kontakt", href: "/kontakt" },
|
||||
const navLinks = [
|
||||
{ href: "/fernsehen", label: "Fernsehen" },
|
||||
{ href: "/internet", label: "Internet" },
|
||||
{ href: "/telefonie", label: "Telefonie" },
|
||||
{ href: "/leistungen", label: "Leistungen" },
|
||||
{ href: "/ueber-uns", label: "Über uns" },
|
||||
];
|
||||
|
||||
export function Header() {
|
||||
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 py-[var(--spacing-md)]">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex-shrink-0">
|
||||
<Image
|
||||
src="/images/brand/logo-systems-9fd0db14.png"
|
||||
alt="Telenet Systems GmbH"
|
||||
width={180}
|
||||
height={57}
|
||||
priority
|
||||
className="h-10 w-auto md:h-12"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden lg:flex lg:items-center lg:gap-[var(--spacing-lg)]">
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-sm font-medium text-[var(--color-foreground)] hover:text-[var(--color-primary)] transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA & Phone (Desktop) */}
|
||||
<div className="hidden lg:flex lg:items-center lg:gap-[var(--spacing-md)]">
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="flex items-center gap-[var(--spacing-xs)] text-sm font-medium text-[var(--color-muted-foreground)] hover:text-[var(--color-primary)] transition-colors"
|
||||
aria-label="Anrufen: +43 5672 5000"
|
||||
>
|
||||
<Phone className="h-4 w-4" aria-hidden="true" />
|
||||
<span>+43 5672 5000</span>
|
||||
</a>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
type="button"
|
||||
className="lg:hidden p-[var(--spacing-sm)] -mr-[var(--spacing-sm)] text-[var(--color-foreground)]"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-expanded={mobileMenuOpen}
|
||||
aria-label={mobileMenuOpen ? "Menü schließen" : "Menü öffnen"}
|
||||
>
|
||||
{mobileMenuOpen ? (
|
||||
<X className="h-6 w-6" aria-hidden="true" />
|
||||
) : (
|
||||
<Menu className="h-6 w-6" aria-hidden="true" />
|
||||
)}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="lg:hidden border-t border-[var(--color-border)] py-[var(--spacing-md)]">
|
||||
<div className="flex flex-col gap-[var(--spacing-sm)]">
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="py-[var(--spacing-sm)] text-base font-medium text-[var(--color-foreground)] hover:text-[var(--color-primary)] transition-colors"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
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>
|
||||
))}
|
||||
<hr className="border-[var(--color-border)] my-[var(--spacing-sm)]" />
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="flex items-center gap-[var(--spacing-sm)] py-[var(--spacing-sm)] text-base font-medium text-[var(--color-muted-foreground)]"
|
||||
>
|
||||
<Phone className="h-5 w-5" aria-hidden="true" />
|
||||
<span>+43 5672 5000</span>
|
||||
</a>
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-primary mt-[var(--spacing-sm)]"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
<nav className="hidden md:flex gap-6">
|
||||
{navLinks.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="text-sm font-medium hover:text-[color:var(--color-primary)] transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="#kontakt" className="btn btn-primary btn-sm">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,32 +1,29 @@
|
||||
import type { ElementType, ReactNode } from "react";
|
||||
|
||||
type SectionVariant = "default" | "sm" | "lg" | "hero" | "flush";
|
||||
|
||||
interface SectionProps {
|
||||
interface SectionProps extends React.HTMLAttributes<HTMLElement> {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
as?: ElementType;
|
||||
variant?: SectionVariant;
|
||||
id?: string;
|
||||
variant?: "sm" | "lg" | "hero" | "flush";
|
||||
}
|
||||
|
||||
const variantClasses: Record<SectionVariant, string> = {
|
||||
default: "section",
|
||||
sm: "section section--sm",
|
||||
lg: "section section--lg",
|
||||
hero: "section section--hero",
|
||||
flush: "section section--flush",
|
||||
};
|
||||
|
||||
export function Section({
|
||||
children,
|
||||
className = "",
|
||||
as: Tag = "section",
|
||||
variant = "default",
|
||||
id,
|
||||
variant,
|
||||
...props
|
||||
}: SectionProps) {
|
||||
const variantClass = variant === "sm" ? "section--sm" :
|
||||
variant === "lg" ? "section--lg" :
|
||||
variant === "hero" ? "section--hero" :
|
||||
variant === "flush" ? "section--flush" : "";
|
||||
|
||||
return (
|
||||
<Tag id={id} className={`${variantClasses[variant]} ${className}`.trim()}>
|
||||
<Tag
|
||||
className={`section ${variantClass} ${className}`.trim()}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
|
||||
+14
-22
@@ -1,42 +1,34 @@
|
||||
import type { ButtonHTMLAttributes, ReactNode } from "react";
|
||||
|
||||
type ButtonVariant = "primary" | "secondary" | "ghost";
|
||||
type ButtonSize = "sm" | "md" | "lg";
|
||||
type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
|
||||
type ButtonSize = "sm" | "lg";
|
||||
|
||||
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
children: ReactNode;
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
className?: string; // Explicitly allow className
|
||||
}
|
||||
|
||||
const baseClasses =
|
||||
"inline-flex items-center justify-center font-medium rounded-[var(--radius-md)] transition-all duration-[var(--duration-normal)] ease-[var(--easing-default)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--color-primary)] disabled:pointer-events-none disabled:opacity-50";
|
||||
|
||||
const variantClasses: Record<ButtonVariant, string> = {
|
||||
primary:
|
||||
"bg-[var(--color-primary)] text-[color:var(--color-background)] hover:opacity-90",
|
||||
secondary:
|
||||
"bg-[var(--color-muted)] text-[color:var(--color-foreground)] border border-[color:var(--color-border)] hover:opacity-80",
|
||||
ghost:
|
||||
"bg-transparent text-[color:var(--color-foreground)] hover:bg-[var(--color-muted)]",
|
||||
};
|
||||
|
||||
const sizeClasses: Record<ButtonSize, string> = {
|
||||
sm: "px-[var(--spacing-sm)] py-[var(--spacing-xs)] text-[length:var(--font-size-sm)]",
|
||||
md: "px-[var(--spacing-md)] py-[var(--spacing-sm)] text-[length:var(--font-size-base)]",
|
||||
lg: "px-[var(--spacing-lg)] py-[var(--spacing-md)] text-[length:var(--font-size-lg)]",
|
||||
};
|
||||
|
||||
export function Button({
|
||||
children,
|
||||
variant = "primary",
|
||||
size = "md",
|
||||
size,
|
||||
className = "",
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
// Construct class names based on stylesheet.css
|
||||
const variantClass = variant === "primary" ? "btn-primary" :
|
||||
variant === "secondary" ? "btn-secondary" :
|
||||
variant === "outline" ? "btn-outline" :
|
||||
variant === "ghost" ? "btn-ghost" : "";
|
||||
|
||||
const sizeClass = size === "sm" ? "btn-sm" :
|
||||
size === "lg" ? "btn-lg" : "";
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`.trim()}
|
||||
className={`btn ${variantClass} ${sizeClass} ${className}`.trim()}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -13,7 +13,7 @@ export function Card({
|
||||
}: CardProps) {
|
||||
return (
|
||||
<Tag
|
||||
className={`rounded-[var(--radius-md)] border border-[color:var(--color-border)] shadow-[var(--shadow-sm)] p-[var(--spacing-lg)] ${className}`.trim()}
|
||||
className={`card ${className}`.trim()}
|
||||
>
|
||||
{children}
|
||||
</Tag>
|
||||
|
||||
@@ -42,7 +42,7 @@ Die Website sollte in einem freundlichen, sachlichen und beratenden Ton kommuniz
|
||||
|
||||
### ✅ Was bei dieser Website BESONDERS WICHTIG ist:
|
||||
|
||||
Die Website soll sofort Vertrauen, Kompetenz und regionale Nähe vermitteln. Besucher sollen das Gefühl haben, bei einem verlässlichen Anbieter aus ihrer Region zu sein, der moderne Technik liefert, aber verständlich kommuniziert. Wichtig ist, dass die Inhalte klar strukturiert und leicht verständlich sind – auch für Menschen ohne technisches Vorwissen. Internet, Fernsehen und IT-Services sollen nicht kompliziert wirken, sondern als stabile, alltagstaugliche Lösungen. Die Seite soll zeigen, dass hinter dem Unternehmen echte Menschen mit Erfahrung stehen, die erreichbar sind und im Problemfall schnell helfen. Serviceorientierung und persönliche Betreuung sollen deutlich spürbar sein. Besonders wichtig ist außerdem: Übersichtlichkeit: Besucher sollen in wenigen Sekunden verstehen, welche Leistungen es gibt und für wen sie gedacht sind. Schnelle Ladezeit: Viele Nutzer kommen aus Regionen mit schwächerer Internetverbindung – die Seite muss technisch schlank sein. Klare Handlungsaufforderungen: Kontakt aufnehmen, Beratung anfragen oder Störung melden muss einfach und direkt möglich sein. Trennung von Privat- und Geschäftskunden: Beide Zielgruppen sollen sich sofort angesprochen fühlen und passende Inhalte finden. Seriöse, moderne Gestaltung: Zeitgemäß, professionell, aber nicht übertrieben futuristisch oder verspielt. Transparenz: Leistungen, Abläufe und Kontaktmöglichkeiten sollen offen und nachvollziehbar dargestellt sein. Der Gesamteindruck soll sein: „Hier bekomme ich zuverlässige Technik, ehrliche Beratung und echte Unterstützung – ohne komplizierte Prozesse.“ Außerdem soll von dem Ordner ( /Volumes/EliasExtern/Arbeit/EB-Solutions/Projekte/Testing/telenetsystems-2026-02-03-v1/assets/BilderUndLogos) das Logo und die bilder gleich passend eingebaut werden. Dass die webiste gleich die rihcitgen bilder nutzt.
|
||||
Die Website soll sofort Vertrauen, Kompetenz und regionale Nähe vermitteln. Besucher sollen das Gefühl haben, bei einem verlässlichen Anbieter aus ihrer Region zu sein, der moderne Technik liefert, aber verständlich kommuniziert. Wichtig ist, dass die Inhalte klar strukturiert und leicht verständlich sind – auch für Menschen ohne technisches Vorwissen. Internet, Fernsehen und IT-Services sollen nicht kompliziert wirken, sondern als stabile, alltagstaugliche Lösungen. Die Seite soll zeigen, dass hinter dem Unternehmen echte Menschen mit Erfahrung stehen, die erreichbar sind und im Problemfall schnell helfen. Serviceorientierung und persönliche Betreuung sollen deutlich spürbar sein. Besonders wichtig ist außerdem: Übersichtlichkeit: Besucher sollen in wenigen Sekunden verstehen, welche Leistungen es gibt und für wen sie gedacht sind. Schnelle Ladezeit: Viele Nutzer kommen aus Regionen mit schwächerer Internetverbindung – die Seite muss technisch schlank sein. Klare Handlungsaufforderungen: Kontakt aufnehmen, Beratung anfragen oder Störung melden muss einfach und direkt möglich sein. Trennung von Privat- und Geschäftskunden: Beide Zielgruppen sollen sich sofort angesprochen fühlen und passende Inhalte finden. Seriöse, moderne Gestaltung: Zeitgemäß, professionell, aber nicht übertrieben futuristisch oder verspielt. Transparenz: Leistungen, Abläufe und Kontaktmöglichkeiten sollen offen und nachvollziehbar dargestellt sein. Der Gesamteindruck soll sein: „Hier bekomme ich zuverlässige Technik, ehrliche Beratung und echte Unterstützung – ohne komplizierte Prozesse.“
|
||||
|
||||
### ❌ Was AUF KEINEN FALL passieren darf:
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 253 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 320 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 683 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 274 KiB |
+2
-1
@@ -7,7 +7,8 @@
|
||||
:root {
|
||||
/* ── Colors ──────────────────────────────────────── */
|
||||
--color-primary: #f39210;
|
||||
--color-secondary: #f39210;
|
||||
--color-secondary: #1e293b;
|
||||
/* Slate 800 - High contrast to primary orange */
|
||||
--color-accent: #eb5c24;
|
||||
--color-neutral: #6b7280;
|
||||
--color-background: #ffffff;
|
||||
|
||||
+82
-21
@@ -15,7 +15,9 @@
|
||||
|
||||
/* ── Base Resets ───────────────────────────────────── */
|
||||
|
||||
*, *::before, *::after {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -86,43 +88,54 @@ body {
|
||||
/* .heading-* Klassen gestylt werden. */
|
||||
/* VERBOTEN: style={{ fontSize: ... }} oder harte px */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: var(--font-heading-weight);
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
|
||||
h1, .heading-1 {
|
||||
h1,
|
||||
.heading-1 {
|
||||
font-size: var(--text-5xl);
|
||||
line-height: var(--text-5xl-line-height);
|
||||
letter-spacing: var(--text-5xl-letter-spacing);
|
||||
}
|
||||
|
||||
h2, .heading-2 {
|
||||
h2,
|
||||
.heading-2 {
|
||||
font-size: var(--text-4xl);
|
||||
line-height: var(--text-4xl-line-height);
|
||||
letter-spacing: var(--text-4xl-letter-spacing);
|
||||
}
|
||||
|
||||
h3, .heading-3 {
|
||||
h3,
|
||||
.heading-3 {
|
||||
font-size: var(--text-3xl);
|
||||
line-height: var(--text-3xl-line-height);
|
||||
letter-spacing: var(--text-3xl-letter-spacing);
|
||||
}
|
||||
|
||||
h4, .heading-4 {
|
||||
h4,
|
||||
.heading-4 {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--text-2xl-line-height);
|
||||
letter-spacing: var(--text-2xl-letter-spacing);
|
||||
}
|
||||
|
||||
h5, .heading-5 {
|
||||
h5,
|
||||
.heading-5 {
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--text-xl-line-height);
|
||||
letter-spacing: var(--text-xl-letter-spacing);
|
||||
}
|
||||
|
||||
h6, .heading-6 {
|
||||
h6,
|
||||
.heading-6 {
|
||||
font-size: var(--text-lg);
|
||||
line-height: var(--text-lg-line-height);
|
||||
letter-spacing: var(--text-lg-letter-spacing);
|
||||
@@ -130,11 +143,30 @@ h6, .heading-6 {
|
||||
|
||||
/* ── Body Text Utilities ───────────────────────────── */
|
||||
|
||||
.text-xs { font-size: var(--text-xs); line-height: var(--text-xs-line-height); }
|
||||
.text-sm { font-size: var(--text-sm); line-height: var(--text-sm-line-height); }
|
||||
.text-base { font-size: var(--text-base); line-height: var(--text-base-line-height); }
|
||||
.text-lg { font-size: var(--text-lg); line-height: var(--text-lg-line-height); }
|
||||
.text-xl { font-size: var(--text-xl); line-height: var(--text-xl-line-height); }
|
||||
.text-xs {
|
||||
font-size: var(--text-xs);
|
||||
line-height: var(--text-xs-line-height);
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--text-sm-line-height);
|
||||
}
|
||||
|
||||
.text-base {
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--text-base-line-height);
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: var(--text-lg);
|
||||
line-height: var(--text-lg-line-height);
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--text-xl-line-height);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--color-muted-foreground);
|
||||
@@ -216,7 +248,8 @@ h6, .heading-6 {
|
||||
.btn-ghost {
|
||||
background-color: transparent;
|
||||
color: var(--color-foreground);
|
||||
border-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
/* Keep size consistent */
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
@@ -241,6 +274,15 @@ h6, .heading-6 {
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
overflow: hidden;
|
||||
/* For children accents */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* ── Links ───────────────────────────────────────── */
|
||||
@@ -256,7 +298,9 @@ a:hover {
|
||||
|
||||
/* ── Images ──────────────────────────────────────── */
|
||||
|
||||
img, video, svg {
|
||||
img,
|
||||
video,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
@@ -278,12 +322,29 @@ img, video, svg {
|
||||
|
||||
/* ── Spacing Utilities ──────────────────────────── */
|
||||
|
||||
.stack-xs > * + * { margin-top: var(--spacing-xs); }
|
||||
.stack-sm > * + * { margin-top: var(--spacing-sm); }
|
||||
.stack-md > * + * { margin-top: var(--spacing-md); }
|
||||
.stack-lg > * + * { margin-top: var(--spacing-lg); }
|
||||
.stack-xl > * + * { margin-top: var(--spacing-xl); }
|
||||
.stack-2xl > * + * { margin-top: var(--spacing-2xl); }
|
||||
.stack-xs>*+* {
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.stack-sm>*+* {
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.stack-md>*+* {
|
||||
margin-top: var(--spacing-md);
|
||||
}
|
||||
|
||||
.stack-lg>*+* {
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.stack-xl>*+* {
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.stack-2xl>*+* {
|
||||
margin-top: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
/* ── Divider ───────────────────────────────────── */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user