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

Compare commits

merge into: SkeletonMan/telenetsystems-2026-02-03-v1:main
Branches Tags
SkeletonMan/telenetsystems-2026-02-03-v1:main SkeletonMan/telenetsystems-2026-02-03-v1:testing-v2-ueber-antigreavity SkeletonMan/telenetsystems-2026-02-03-v1:testing-v3-ueber-antigreavity-gemini
..
pull from: SkeletonMan/telenetsystems-2026-02-03-v1:testing-v2-ueber-antigreavity
Branches Tags
SkeletonMan/telenetsystems-2026-02-03-v1:testing-v2-ueber-antigreavity SkeletonMan/telenetsystems-2026-02-03-v1:testing-v3-ueber-antigreavity-gemini SkeletonMan/telenetsystems-2026-02-03-v1:main
2 Commits
main .. testing-v2-ueber-antigreavity
Author SHA1 Message Date
1elle1 747e52133a feat: Add new image assets and update components to use them, replacing the footer text logo with an image. 2026-02-03 22:11:21 +01:00
1elle1 578bb8edb3 feat: Implement initial website structure, core pages, and layout components, including a redesigned homepage. 2026-02-03 21:41:03 +01:00
47 changed files with 1566 additions and 2435 deletions
Expand all files Collapse all files
app/datenschutz/page.tsx
+93
View File
@@ -0,0 +1,93 @@
import { Metadata } from "next";
import { Section } from "@/components/layout/Section";
import { Container } from "@/components/layout/Container";
export const metadata: Metadata = {
title: "Datenschutz",
description: "Datenschutzerklärung der Telenet Systems GmbH",
};
export default function DatenschutzPage() {
return (
<main>
<Section variant="hero" className="bg-[var(--color-muted)]">
<Container variant="narrow">
<h1>Datenschutzerklärung</h1>
</Container>
</Section>
<Section>
<Container variant="narrow">
<div className="prose max-w-none">
<div className="card mb-[var(--spacing-xl)]">
<p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-sm)]">
⚠️ PLATZHALTER – Bitte durch vollständige Datenschutzerklärung ersetzen
</p>
<p className="text-muted text-sm">
Die folgende Datenschutzerklärung ist ein Platzhalter und muss durch eine
rechtlich geprüfte, vollständige Datenschutzerklärung ersetzt werden.
</p>
</div>
<h2 className="heading-3">1. Verantwortlicher</h2>
<p className="text-muted">
Telenet Systems GmbH<br />
PLACEHOLDER: Adresse<br />
6600 Reutte, Österreich<br />
E-Mail: PLACEHOLDER: E-Mail-Adresse
</p>
<h2 className="heading-3 mt-[var(--spacing-2xl)]">2. Erhebung und Speicherung personenbezogener Daten</h2>
<p className="text-muted">
Beim Besuch unserer Website werden automatisch folgende Daten erhoben:
</p>
<ul className="stack-sm text-muted">
<li>IP-Adresse des anfragenden Rechners</li>
<li>Datum und Uhrzeit des Zugriffs</li>
<li>Name und URL der abgerufenen Datei</li>
<li>Website, von der aus der Zugriff erfolgt (Referrer-URL)</li>
<li>Verwendeter Browser und ggf. das Betriebssystem Ihres Rechners</li>
</ul>
<h2 className="heading-3 mt-[var(--spacing-2xl)]">3. Kontaktformular</h2>
<p className="text-muted">
Wenn Sie uns über das Kontaktformular kontaktieren, werden die von Ihnen
mitgeteilten Daten (Name, E-Mail-Adresse, Nachricht) zur Bearbeitung Ihrer
Anfrage gespeichert. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.
</p>
<h2 className="heading-3 mt-[var(--spacing-2xl)]">4. Ihre Rechte</h2>
<p className="text-muted">
Sie haben das Recht:
</p>
<ul className="stack-sm text-muted">
<li>Auskunft über Ihre bei uns gespeicherten Daten zu erhalten</li>
<li>Berichtigung unrichtiger Daten zu verlangen</li>
<li>Löschung Ihrer Daten zu verlangen</li>
<li>Die Verarbeitung einzuschränken</li>
<li>Der Verarbeitung zu widersprechen</li>
<li>Datenübertragbarkeit zu verlangen</li>
</ul>
<h2 className="heading-3 mt-[var(--spacing-2xl)]">5. Cookies</h2>
<p className="text-muted">
Diese Website verwendet technisch notwendige Cookies, die für den Betrieb
der Website erforderlich sind. Eine weitergehende Nutzung von Cookies erfolgt
nur mit Ihrer ausdrücklichen Einwilligung.
</p>
<h2 className="heading-3 mt-[var(--spacing-2xl)]">6. Änderung dieser Datenschutzerklärung</h2>
<p className="text-muted">
Wir behalten uns vor, diese Datenschutzerklärung bei Bedarf anzupassen,
damit sie stets den aktuellen rechtlichen Anforderungen entspricht.
</p>
<p className="text-sm text-muted mt-[var(--spacing-2xl)]">
Stand: Februar 2026
</p>
</div>
</Container>
</Section>
</main>
);
}
app/fernsehen/page.tsx
+170 -270
View File
@@ -1,285 +1,185 @@
import type { Metadata } from "next"; import { Metadata } from "next";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { Container } from "@/components/layout/Container"; import Image from "next/image";
import { Section } from "@/components/layout/Section"; import { Section } from "@/components/layout/Section";
import { Tv, Users, Building2, Play, CheckCircle, ArrowRight } from "lucide-react"; import { Container } from "@/components/layout/Container";
import { Tv, Check, Phone, ArrowRight } from "lucide-react";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Fernsehen", 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: description:
"Über 200 TV-Programme inkl. 40 HDTV-Sendern. Kabel-TV für Privat- und Geschäftskunden im Bezirk Reutte.", "Über 200 TV-Programme inkl. 40 HDTV-Sender. Kabel-TV für Privat- und Geschäftskunden in Tirol.",
},
}; };
const tvOptions = [ const tvFeatures = [
{ "Über 200 Programme",
icon: Users, "40 HDTV-Sender",
title: "TV Privat", "Rund 40 Radiosender",
price: "16,47", "Kristallklare Bildqualität",
period: "Monat", "Keine Servicepauschale",
description: "Regionale Sender inklusive",
"Ü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() { export default function FernsehenPage() {
return ( return (
<> <main>
{/* Hero Section */} {/* Hero Section */}
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]"> <Section variant="hero" className="bg-[var(--color-muted)]">
<div className="absolute inset-0 z-0"> <Container>
<Image <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
src="/images/hero/tv-header-44c1e07b.jpg" <div className="max-w-xl">
alt="Familie genießt Fernsehen" <div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
fill <Tv size={32} className="text-[var(--color-background)]" />
priority </div>
className="object-cover opacity-40" <h1 className="mb-[var(--spacing-lg)]">
sizes="100vw" Fernsehen in
/> <span className="text-[var(--color-primary)]"> bester Qualität</span>
</div> </h1>
<Container className="relative z-10"> <p className="lead mb-[var(--spacing-2xl)]">
<div className="max-w-3xl"> Genießen Sie über 200 TV-Programme inkl. 40 HDTV-Sendern –
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]"> direkt über das Kabelnetz von TeleNetSystems.
<Tv className="h-5 w-5" aria-hidden="true" /> </p>
<span className="font-medium">Fernsehen</span> <Link href="/kontakt" className="btn btn-primary btn-lg">
</div> Jetzt beraten lassen
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]"> </Link>
Über 200 TV-Programme in bester Qualität </div>
</h1> <div className="relative">
<p className="lead text-gray-300 mb-[var(--spacing-xl)]"> <Image
Erstklassige Unterhaltung für Ihr Zuhause oder Unternehmen. src="/images/hero/tv-header-44c1e07b.jpg"
Mit 40 HDTV-Sendern und rund 40 Radiosendern – ab nur 16,47 € im Monat. alt="Familie schaut gemütlich fern"
</p> width={800}
<div className="flex flex-wrap gap-[var(--spacing-md)]"> height={600}
<Link href="/kontakt" className="btn btn-primary btn-lg"> className="rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]"
Jetzt bestellen priority
</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)]"> </div>
Angebote ansehen </div>
</a> </Container>
</div> </Section>
</div>
</Container>
</Section>
{/* Trust Bar */} {/* Trust Elements */}
<Section variant="sm" className="bg-[var(--color-muted)]"> <Section variant="sm" className="bg-[var(--color-background)] border-b border-[var(--color-border)]">
<Container> <Container>
<div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]"> <div className="flex flex-wrap justify-center gap-[var(--spacing-xl)]">
{benefits.map((benefit) => ( {tvFeatures.slice(0, 4).map((feature) => (
<div <div key={feature} className="flex items-center gap-[var(--spacing-sm)]">
key={benefit} <Check size={18} className="text-[var(--color-primary)]" />
className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium" <span className="text-sm font-medium">{feature}</span>
> </div>
<CheckCircle ))}
className="h-5 w-5 text-[var(--color-success)]" </div>
aria-hidden="true" </Container>
/> </Section>
<span>{benefit}</span>
</div>
))}
</div>
</Container>
</Section>
{/* TV Options */} {/* TV Privat Section */}
<Section id="angebote"> <Section id="privat">
<Container> <Container>
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]"> <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
<h2>Unsere TV-Angebote</h2> <div>
<p className="lead mt-[var(--spacing-md)]"> <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
Ob für Ihr Zuhause oder Ihr Unternehmen – wir haben das passende Angebot. Für Privatkunden
</p> </span>
</div> <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--spacing-xl)]"> TV Privat
{tvOptions.map((option) => ( </h2>
<div <p className="text-muted mb-[var(--spacing-lg)]">
key={option.title} Holen Sie sich über 200 Programme inkl. 40 HDTV-Sendern und rund 40 Radiosendern
className={`card relative overflow-hidden ${ direkt in Ihr Wohnzimmer. Genießen Sie beste Unterhaltung für die ganze Familie.
option.popular </p>
? "border-[var(--color-primary)] border-2" <ul className="stack-sm mb-[var(--spacing-xl)]">
: "" {tvFeatures.map((feature) => (
}`} <li key={feature} className="flex items-center gap-[var(--spacing-sm)]">
> <Check size={18} className="text-[var(--color-primary)] shrink-0" />
{option.popular && ( <span>{feature}</span>
<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"> </li>
Beliebt ))}
</div> </ul>
)} </div>
<div className="relative h-40 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]"> <div className="card text-center">
<Image <p className="text-sm text-muted uppercase tracking-wide mb-[var(--spacing-sm)]">
src={option.image} TV Privat
alt={option.title} </p>
fill <p className="text-5xl font-bold text-[var(--color-primary)] mb-[var(--spacing-xs)]">
className="object-cover" € 16,47
sizes="(max-width: 1024px) 100vw, 33vw" </p>
/> <p className="text-muted mb-[var(--spacing-lg)]">
</div> pro Monat inkl. MwSt.
<div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]"> </p>
<option.icon className="h-5 w-5" aria-hidden="true" /> <Link href="/kontakt" className="btn btn-primary w-full">
<h3 className="heading-4">{option.title}</h3> Jetzt anfragen
</div> </Link>
<div className="mb-[var(--spacing-md)]"> </div>
<span className="heading-2 text-[var(--color-foreground)]"> </div>
{option.price.includes("Anfrage") ? "" : "€ "} </Container>
{option.price} </Section>
</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>
{/* FAQ Section */} {/* TV Business Section */}
<Section className="bg-[var(--color-muted)]"> <Section className="bg-[var(--color-muted)]">
<Container variant="narrow"> <Container>
<div className="text-center mb-[var(--spacing-3xl)]"> <div className="max-w-3xl mx-auto text-center">
<h2>Häufige Fragen</h2> <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
</div> Für Geschäftskunden
<div className="space-y-[var(--spacing-lg)]"> </span>
<div className="card"> <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
<h3 className="heading-5 mb-[var(--spacing-sm)]"> TV Business
Wie schnell ist die Installation? </h2>
</h3> <p className="text-muted mb-[var(--spacing-xl)]">
<p className="text-muted"> Sie sind noch auf der Suche nach der passenden TV-Lösung für Ihr Unternehmen?
In der Regel können wir innerhalb weniger Werktage einen Installationstermin Gerne erstellen wir Ihnen ein individuelles Angebot, das genau zu Ihren Anforderungen passt.
vereinbaren. Unser Techniker kommt zu Ihnen und richtet alles ein. </p>
</p> <Link href="/kontakt" className="btn btn-primary">
</div> Individuelle Lösung anfragen
<div className="card"> <ArrowRight size={18} />
<h3 className="heading-5 mb-[var(--spacing-sm)]"> </Link>
Gibt es versteckte Kosten? </div>
</h3> </Container>
<p className="text-muted"> </Section>
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>
{/* CTA Section */} {/* Pay TV Section */}
<Section className="bg-[var(--color-primary)]"> <Section>
<Container> <Container>
<div className="text-center max-w-2xl mx-auto"> <div className="max-w-3xl mx-auto text-center">
<h2 className="text-[var(--color-background)]"> <h2 className="mb-[var(--spacing-lg)]">Pay-TV</h2>
Bereit für bestes Fernsehen? <p className="text-muted mb-[var(--spacing-xl)]">
</h2> Auf Wunsch bieten wir zusätzlich Pay-TV-Lösungen an.
<p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]"> Sie möchten exklusive Filme, Serien und Sport in HD oder UHD?
Kontaktieren Sie uns für eine persönliche Beratung oder bestellen Sie Kontaktieren Sie uns einfach und wir finden das passende Angebot für Sie.
direkt Ihren TV-Anschluss. </p>
</p> <Link href="/kontakt" className="btn btn-outline">
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]"> Pay-TV anfragen
<Link </Link>
href="/kontakt" </div>
className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90" </Container>
> </Section>
Jetzt bestellen
</Link> {/* CTA Section */}
<a <Section className="bg-[var(--color-primary)]">
href="tel:+4356725000" <Container>
className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]" <div className="text-center text-[var(--color-background)]">
> <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
+43 5672 5000 Interesse an unserem TV-Angebot?
</a> </h2>
</div> <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
</div> Wir beraten Sie gerne persönlich und finden die passende Lösung für Sie.
</Container> </p>
</Section> <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
</> <Link
); href="/kontakt"
className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
>
Jetzt beraten lassen
</Link>
<a
href="tel:+43567612345"
className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
>
<Phone size={18} />
PLACEHOLDER: Telefon
</a>
</div>
</div>
</Container>
</Section>
</main>
);
} }
app/impressum/page.tsx
+110
View File
@@ -0,0 +1,110 @@
import { Metadata } from "next";
import { Section } from "@/components/layout/Section";
import { Container } from "@/components/layout/Container";
export const metadata: Metadata = {
title: "Impressum",
description: "Impressum der Telenet Systems GmbH",
};
export default function ImpressumPage() {
return (
<main>
<Section variant="hero" className="bg-[var(--color-muted)]">
<Container variant="narrow">
<h1>Impressum</h1>
</Container>
</Section>
<Section>
<Container variant="narrow">
<div className="prose max-w-none">
<h2 className="heading-3">Angaben gemäß § 5 ECG</h2>
<div className="card mb-[var(--spacing-xl)]">
<p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-sm)]">
⚠️ PLATZHALTER – Bitte durch echte Daten ersetzen
</p>
<p className="text-muted text-sm">
Die folgenden Angaben sind Platzhalter und müssen durch die korrekten
Unternehmensdaten ersetzt werden.
</p>
</div>
<h3 className="heading-4 mt-[var(--spacing-xl)]">Unternehmensbezeichnung</h3>
<p className="text-muted">
Telenet Systems GmbH<br />
PLACEHOLDER: Straße und Hausnummer<br />
6600 Reutte<br />
Österreich
</p>
<h3 className="heading-4 mt-[var(--spacing-xl)]">Kontakt</h3>
<p className="text-muted">
Telefon: PLACEHOLDER: Telefonnummer<br />
E-Mail: PLACEHOLDER: E-Mail-Adresse<br />
Website: https://www.tnr.at
</p>
<h3 className="heading-4 mt-[var(--spacing-xl)]">Unternehmensgegenstand</h3>
<p className="text-muted">
Telekommunikationsdienstleistungen und IT-Services
</p>
<h3 className="heading-4 mt-[var(--spacing-xl)]">Firmenbuchnummer</h3>
<p className="text-muted">
PLACEHOLDER: FN XXXXXX x
</p>
<h3 className="heading-4 mt-[var(--spacing-xl)]">Firmenbuchgericht</h3>
<p className="text-muted">
PLACEHOLDER: Landesgericht Innsbruck
</p>
<h3 className="heading-4 mt-[var(--spacing-xl)]">UID-Nummer</h3>
<p className="text-muted">
PLACEHOLDER: ATU XXXXXXXX
</p>
<h3 className="heading-4 mt-[var(--spacing-xl)]">Geschäftsführung</h3>
<p className="text-muted">
PLACEHOLDER: Name des/der Geschäftsführer(s)
</p>
<h3 className="heading-4 mt-[var(--spacing-xl)]">Aufsichtsbehörde</h3>
<p className="text-muted">
Bezirkshauptmannschaft Reutte
</p>
<h3 className="heading-4 mt-[var(--spacing-xl)]">Berufsrecht</h3>
<p className="text-muted">
Gewerbeordnung: www.ris.bka.gv.at
</p>
<h3 className="heading-4 mt-[var(--spacing-xl)]">Streitbeilegung</h3>
<p className="text-muted">
Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit,
die Sie unter{" "}
<a
href="https://ec.europa.eu/consumers/odr"
target="_blank"
rel="noopener noreferrer"
className="text-[var(--color-primary)]"
>
ec.europa.eu/consumers/odr
</a>{" "}
finden.
</p>
<h3 className="heading-4 mt-[var(--spacing-xl)]">Haftungsausschluss</h3>
<p className="text-muted">
Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die
Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich
deren Betreiber verantwortlich.
</p>
</div>
</Container>
</Section>
</main>
);
}
app/internet/page.tsx
+263 -380
View File
@@ -1,402 +1,285 @@
import type { Metadata } from "next"; import { Metadata } from "next";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { Container } from "@/components/layout/Container"; import Image from "next/image";
import { Section } from "@/components/layout/Section"; import { Section } from "@/components/layout/Section";
import { Wifi, Zap, Building2, CheckCircle, ArrowDown, ArrowUp } from "lucide-react"; import { Container } from "@/components/layout/Container";
import { Wifi, Check, Phone, ArrowRight } from "lucide-react";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Internet", 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: description:
"Highspeed-Internet über Kabel und Glasfaser im Bezirk Reutte. Ab 14,50 € im Monat.", "Highspeed-Internet über Kabel oder Glasfaser. Schnell, stabil, unlimitiert – für Privat- und Geschäftskunden in Tirol.",
},
}; };
const kabelTarife = [ const kabelTarife = [
{ {
name: "telenet.hit", name: "telenet.hit",
price: "14,50", preis: "€ 14,50",
download: "40", download: "40 Mbit/s",
upload: "6", upload: "6 Mbit/s",
popular: false, features: ["Keine Servicepauschale", "Unlimitierte Daten"],
}, },
{ {
name: "telenet.eco", name: "telenet.eco",
price: "19,00", preis: "€ 19,00",
download: "60", download: "60 Mbit/s",
upload: "8", upload: "8 Mbit/s",
popular: false, features: ["Keine Servicepauschale", "Unlimitierte Daten"],
}, },
{ {
name: "telenet.fun", name: "telenet.fun",
price: "29,00", preis: "€ 29,00",
download: "80", download: "80 Mbit/s",
upload: "12", upload: "12 Mbit/s",
popular: true, features: ["Keine Servicepauschale", "Unlimitierte Daten"],
}, },
{ {
name: "telenet.pro", name: "telenet.pro",
price: "39,00", preis: "€ 39,00",
download: "100", download: "100 Mbit/s",
upload: "14", upload: "14 Mbit/s",
popular: false, features: ["Keine Servicepauschale", "Unlimitierte Daten", "Öffentliche IPv4"],
}, highlight: true,
{ },
name: "telenet.mega", {
price: "49,00", name: "telenet.mega",
download: "180", preis: "€ 49,00",
upload: "22", download: "180 Mbit/s",
popular: false, upload: "22 Mbit/s",
}, features: ["Keine Servicepauschale", "Unlimitierte Daten", "Öffentliche IPv4"],
},
]; ];
const glasfaserTarife = [ const glasfaserTarife = [
{ {
name: "telenet.eco", name: "telenet.eco",
price: "23,00", preis: "€ 23,00",
download: "100", download: "100 Mbit/s",
upload: "100", upload: "100 Mbit/s",
popular: false, features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch"],
}, },
{ {
name: "telenet.fun", name: "telenet.fun",
price: "29,00", preis: "€ 29,00",
download: "200", download: "200 Mbit/s",
upload: "200", upload: "200 Mbit/s",
popular: true, features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch"],
}, },
{ {
name: "telenet.pro", name: "telenet.pro",
price: "39,00", preis: "€ 39,00",
download: "300", download: "300 Mbit/s",
upload: "300", upload: "300 Mbit/s",
popular: false, features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch", "Öffentliche IPv4"],
}, highlight: true,
{ },
name: "telenet.mega", {
price: "49,00", name: "telenet.mega",
download: "500", preis: "€ 49,00",
upload: "500", download: "500 Mbit/s",
popular: false, upload: "500 Mbit/s",
}, features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch", "Öffentliche IPv4"],
]; },
const benefits = [
"Keine Servicepauschale",
"Unlimitiertes Datenvolumen",
"IPv6 inklusive",
"Persönlicher Support",
]; ];
export default function InternetPage() { export default function InternetPage() {
return ( return (
<> <main>
{/* Hero Section */} {/* Hero Section */}
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]"> <Section variant="hero" className="bg-[var(--color-muted)]">
<div className="absolute inset-0 z-0"> <Container>
<Image <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
src="/images/hero/internet-header-431619ac.jpg" <div className="max-w-xl">
alt="Highspeed Internet" <div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
fill <Wifi size={32} className="text-[var(--color-background)]" />
priority </div>
className="object-cover opacity-40" <h1 className="mb-[var(--spacing-lg)]">
sizes="100vw" Highspeed-Internet
/> <span className="text-[var(--color-primary)]"> für Tirol</span>
</div> </h1>
<Container className="relative z-10"> <p className="lead mb-[var(--spacing-2xl)]">
<div className="max-w-3xl"> Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]"> Flexible Tarife ohne Servicepauschale – für Privat- und Geschäftskunden.
<Wifi className="h-5 w-5" aria-hidden="true" /> </p>
<span className="font-medium">Internet</span> <Link href="/kontakt" className="btn btn-primary btn-lg">
</div> Jetzt beraten lassen
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]"> </Link>
Highspeed-Internet für Ihr Zuhause </div>
</h1> <div className="relative">
<p className="lead text-gray-300 mb-[var(--spacing-xl)]"> <Image
Schnelles und zuverlässiges Internet über Kabel oder Glasfaser. src="/images/hero/internet-header-431619ac.jpg"
Flexible Tarife ohne Servicepauschale – ab 14,50 € im Monat. alt="Highspeed Internet Verbindung"
</p> width={800}
<div className="flex flex-wrap gap-[var(--spacing-md)]"> height={600}
<Link href="/kontakt" className="btn btn-primary btn-lg"> className="rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]"
Jetzt bestellen priority
</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)]"> </div>
Tarife vergleichen </div>
</a> </Container>
</div> </Section>
</div>
</Container>
</Section>
{/* Trust Bar */} {/* Trust Elements */}
<Section variant="sm" className="bg-[var(--color-muted)]"> <Section variant="sm" className="border-b border-[var(--color-border)]">
<Container> <Container>
<div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]"> <div className="flex flex-wrap justify-center gap-[var(--spacing-xl)]">
{benefits.map((benefit) => ( {["Keine Servicepauschale", "Unlimitierte Daten", "IPv6 inklusive", "Regionaler Support"].map((feature) => (
<div <div key={feature} className="flex items-center gap-[var(--spacing-sm)]">
key={benefit} <Check size={18} className="text-[var(--color-primary)]" />
className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium" <span className="text-sm font-medium">{feature}</span>
> </div>
<CheckCircle ))}
className="h-5 w-5 text-[var(--color-success)]" </div>
aria-hidden="true" </Container>
/> </Section>
<span>{benefit}</span>
</div>
))}
</div>
</Container>
</Section>
{/* Kabel-Tarife */} {/* Kabel-Internet Section */}
<Section id="tarife"> <Section id="kabel">
<Container> <Container>
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]"> <div className="text-center mb-[var(--spacing-3xl)]">
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]"> <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
<Zap className="h-5 w-5" aria-hidden="true" /> Tarife für Kabel-Kunden
<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>
<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> </span>
)} <h2 className="mt-[var(--spacing-sm)]">Kabel-Internet</h2>
</td> </div>
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-[var(--spacing-lg)]">
{tarif.download} Mbit/s {kabelTarife.map((tarif) => (
</td> <div
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]"> key={tarif.name}
{tarif.upload} Mbit/s className={`card text-center ${tarif.highlight ? "ring-2 ring-[var(--color-primary)]" : ""}`}
</td> >
<td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold"> {tarif.highlight && (
€ {tarif.price} <span className="inline-block bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-medium px-[var(--spacing-sm)] py-[var(--spacing-xs)] rounded-full mb-[var(--spacing-md)]">
</td> Empfohlen
<td className="py-[var(--spacing-md)] px-[var(--spacing-sm)]"> </span>
<Link )}
href="/kontakt" <h3 className="heading-5 mb-[var(--spacing-sm)]">{tarif.name}</h3>
className="btn btn-sm btn-outline" <p className="text-3xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
> <p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
Bestellen <div className="text-sm mb-[var(--spacing-md)]">
</Link> <p><strong>{tarif.download}</strong> Download</p>
</td> <p><strong>{tarif.upload}</strong> Upload</p>
</tr> </div>
))} <ul className="stack-xs text-left text-sm mb-[var(--spacing-lg)]">
</tbody> {tarif.features.map((feature) => (
</table> <li key={feature} className="flex items-center gap-[var(--spacing-xs)]">
</div> <Check size={14} className="text-[var(--color-primary)] shrink-0" />
<span>{feature}</span>
</li>
))}
</ul>
<Link href="/kontakt" className="btn btn-outline btn-sm w-full">
Anfragen
</Link>
</div>
))}
</div>
<p className="text-xs text-muted text-center mt-[var(--spacing-xl)]">
Tarife gültig ab 01.05.2024. Für die Installation fallen einmalige Installationskosten an.
</p>
</Container>
</Section>
<p className="text-sm text-muted mt-[var(--spacing-lg)]"> {/* Glasfaser-Internet Section */}
Alle Tarife enthalten unlimitiertes Datenvolumen und IPv6-Adressen. <Section id="glasfaser" className="bg-[var(--color-muted)]">
Für die Tarife ab telenet.pro ist eine öffentliche IPv4-Adresse enthalten. <Container>
Einmalige Installationskosten je nach Aufwand. <div className="text-center mb-[var(--spacing-3xl)]">
</p> <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
</Container> Tarife für Glasfaser-Kunden
</Section>
{/* 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>
<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> </span>
)} <h2 className="mt-[var(--spacing-sm)]">Glasfaser-Internet</h2>
</td> <p className="lead max-w-2xl mx-auto mt-[var(--spacing-md)]">
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]"> Symmetrische Geschwindigkeiten – gleich schnell im Download und Upload.
{tarif.download} Mbit/s </p>
</td> </div>
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-lg)] max-w-5xl mx-auto">
{tarif.upload} Mbit/s {glasfaserTarife.map((tarif) => (
</td> <div
<td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold"> key={tarif.name + "-glas"}
€ {tarif.price} className={`card text-center ${tarif.highlight ? "ring-2 ring-[var(--color-primary)]" : ""}`}
</td> >
<td className="py-[var(--spacing-md)] px-[var(--spacing-lg)]"> {tarif.highlight && (
<Link <span className="inline-block bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-medium px-[var(--spacing-sm)] py-[var(--spacing-xs)] rounded-full mb-[var(--spacing-md)]">
href="/kontakt" Empfohlen
className="btn btn-sm btn-outline" </span>
> )}
Bestellen <h3 className="heading-5 mb-[var(--spacing-sm)]">{tarif.name}</h3>
</Link> <p className="text-3xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
</td> <p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
</tr> <div className="text-sm mb-[var(--spacing-md)]">
))} <p><strong>{tarif.download}</strong> Download</p>
</tbody> <p><strong>{tarif.upload}</strong> Upload</p>
</table> </div>
</div> <ul className="stack-xs text-left text-sm mb-[var(--spacing-lg)]">
{tarif.features.map((feature) => (
<li key={feature} className="flex items-center gap-[var(--spacing-xs)]">
<Check size={14} className="text-[var(--color-primary)] shrink-0" />
<span>{feature}</span>
</li>
))}
</ul>
<Link href="/kontakt" className="btn btn-outline btn-sm w-full">
Anfragen
</Link>
</div>
))}
</div>
<p className="text-xs text-muted text-center mt-[var(--spacing-xl)]">
Tarife gültig ab 01.04.2025. Für die Installation fallen einmalige Installationskosten an.
</p>
</Container>
</Section>
<p className="text-sm text-muted mt-[var(--spacing-lg)]"> {/* Business Section */}
Glasfaser bietet symmetrische Geschwindigkeiten – ideal für Homeoffice und Videokonferenzen. <Section>
Alle Tarife ohne Servicepauschale mit unlimitiertem Datenvolumen. <Container>
</p> <div className="max-w-3xl mx-auto text-center">
</Container> <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
</Section> Für Geschäftskunden
</span>
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
Business-Internet
</h2>
<p className="text-muted mb-[var(--spacing-xl)]">
Gerne erstellen wir für Ihr Unternehmen ein maßgeschneidertes Business-Internet-Angebot
inkl. passendem Service-Paket. Schicken Sie uns einfach Ihre Anfrage.
</p>
<Link href="/kontakt" className="btn btn-primary">
Individuelle Lösung anfragen
<ArrowRight size={18} />
</Link>
</div>
</Container>
</Section>
{/* Business Section */} {/* CTA Section */}
<Section> <Section className="bg-[var(--color-primary)]">
<Container> <Container>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center"> <div className="text-center text-[var(--color-background)]">
<div className="relative h-80 lg:h-full min-h-[320px] rounded-[var(--radius-lg)] overflow-hidden"> <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
<Image Welcher Tarif passt zu Ihnen?
src="/images/misc/firmenkunden-96736712-5fa99704.jpg" </h2>
alt="Geschäftskunde im Büro" <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
fill Wir beraten Sie gerne und finden die beste Lösung für Ihre Anforderungen.
className="object-cover" </p>
sizes="(max-width: 1024px) 100vw, 50vw" <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
/> <Link
</div> href="/kontakt"
<div> className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
<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" /> Jetzt beraten lassen
<span className="font-medium">Business-Internet</span> </Link>
</div> <a
<h2>Maßgeschneiderte Lösungen für Ihr Unternehmen</h2> href="tel:+43567612345"
<p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]"> className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
Für Unternehmen erstellen wir individuelle Internet-Angebote >
inklusive passendem Service-Paket. <Phone size={18} />
</p> PLACEHOLDER: Telefon
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]"> </a>
<li className="flex items-center gap-[var(--spacing-sm)]"> </div>
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" /> </div>
<span>Dedizierte Bandbreite</span> </Container>
</li> </Section>
<li className="flex items-center gap-[var(--spacing-sm)]"> </main>
<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>
{/* 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>
</>
);
} }
app/layout.tsx
+8 -13
View File
@@ -13,11 +13,11 @@ const inter = Inter({
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
default: "Telenet Systems GmbH | Telekommunikation & IT-Services in Tirol", default: "TeleNetSystems | Telekom & IT aus Tirol",
template: "%s | Telenet Systems GmbH", template: "%s | TeleNetSystems",
}, },
description: 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.", "Ihr regionaler Telekom- und IT-Partner in Reutte, Tirol. Fernsehen, Internet, Telefonie und IT-Services – zuverlässig, persönlich, seit 1976.",
keywords: [ keywords: [
"Telekommunikation Tirol", "Telekommunikation Tirol",
"IT-Dienstleister Reutte", "IT-Dienstleister Reutte",
@@ -26,11 +26,7 @@ export const metadata: Metadata = {
"TeleNetSystems", "TeleNetSystems",
"regionaler IT-Service", "regionaler IT-Service",
"Kabel-TV Anbieter", "Kabel-TV Anbieter",
"Telefonie Tarife Österreich",
], ],
authors: [{ name: "Telenet Systems GmbH" }],
creator: "Telenet Systems GmbH",
publisher: "Telenet Systems GmbH",
robots: { robots: {
index: true, index: true,
follow: true, follow: true,
@@ -38,11 +34,10 @@ export const metadata: Metadata = {
openGraph: { openGraph: {
type: "website", type: "website",
locale: "de_AT", locale: "de_AT",
url: "https://www.tnr.at", siteName: "TeleNetSystems",
siteName: "Telenet Systems GmbH", title: "TeleNetSystems | Telekom & IT aus Tirol",
title: "Telenet Systems GmbH | Telekommunikation & IT-Services in Tirol",
description: description:
"Ihr regionaler Partner für TV, Internet, Telefonie und IT-Services im Bezirk Reutte. Persönliche Beratung, schneller Support.", "Ihr regionaler Telekom- und IT-Partner in Reutte, Tirol. Fernsehen, Internet, Telefonie und IT-Services.",
}, },
}; };
@@ -59,9 +54,9 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="de-AT" className={inter.variable}> <html lang="de-AT" className={inter.variable}>
<body className="flex min-h-screen flex-col"> <body>
<Header /> <Header />
<main className="flex-1">{children}</main> {children}
<Footer /> <Footer />
</body> </body>
</html> </html>
app/leistungen/page.tsx
+218 -285
View File
@@ -1,304 +1,237 @@
import type { Metadata } from "next"; import { Metadata } from "next";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { Container } from "@/components/layout/Container";
import { Section } from "@/components/layout/Section"; import { Section } from "@/components/layout/Section";
import { Container } from "@/components/layout/Container";
import { import {
Server, Tv,
Network, Wifi,
Wrench, Phone,
Monitor, Server,
Cable, Wrench,
Shield, MonitorSmartphone,
Headphones, Cable,
Building2, Shield,
Users, ArrowRight
CheckCircle,
} from "lucide-react"; } from "lucide-react";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Leistungen", 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: description:
"Umfassende Telekom- und IT-Services im Bezirk Reutte. Netzwerkplanung, IT-Installation, Fernwartung.", "Umfassende Telekom- und IT-Services für Tirol. Fernsehen, Internet, Telefonie, IT-Support und Netzwerkplanung.",
},
}; };
const services = [ const mainServices = [
{ {
icon: Network, title: "Fernsehen",
title: "Netzwerkplanung", description: "Über 200 Programme inkl. 40 HDTV-Sender für Privat- und Geschäftskunden.",
description: icon: Tv,
"Professionelle Planung und Konzeption von Netzwerkinfrastrukturen für Unternehmen jeder Größe.", href: "/fernsehen",
}, },
{ {
icon: Server, title: "Internet",
title: "Serverplanung", description: "Highspeed-Internet über Kabel oder Glasfaser – schnell, stabil, unlimitiert.",
description: icon: Wifi,
"Beratung und Planung von Serverlösungen – von der Hardware bis zur Software-Konfiguration.", href: "/internet",
}, },
{ {
icon: Wrench, title: "Telefonie",
title: "IT-Installation", description: "Flexible Festnetz-Tarife. Mit oder ohne Internet nutzbar.",
description: icon: Phone,
"Fachgerechte Installation von IT-Komponenten, Netzwerken und Kommunikationssystemen.", href: "/telefonie",
}, },
{
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 = [ const itServices = [
{ {
icon: Users, title: "Netzwerk- & Serverplanung",
title: "Privatkunden", description: "Professionelle Planung und Umsetzung Ihrer IT-Infrastruktur.",
description: icon: Server,
"Zuverlässige TV-, Internet- und Telefonielösungen für Ihr Zuhause. Mit persönlichem Service vor Ort.", },
features: [ {
"TV mit über 200 Programmen", title: "IT-Installation",
"Highspeed-Internet bis 500 Mbit/s", description: "Fachgerechte Installation von Hard- und Software vor Ort.",
"Günstige Telefonie-Tarife", icon: MonitorSmartphone,
"Persönliche Beratung", },
], {
cta: "Zu den Tarifen", title: "Reparatur & Wartung",
href: "/internet", description: "Schnelle Hilfe bei Problemen, regelmäßige Wartung Ihrer Systeme.",
image: "/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg", icon: Wrench,
}, },
{ {
icon: Building2, title: "Fernwartung",
title: "Geschäftskunden", description: "Schnelle Problembehebung aus der Ferne – ohne Wartezeit vor Ort.",
description: icon: Shield,
"Professionelle IT- und Kommunikationslösungen für Ihr Unternehmen. Maßgeschneidert und zuverlässig.", },
features: [ {
"Business-Internet & Telefonie", title: "Glasfaser-Planung & -Ausbau",
"Netzwerk- & Serverplanung", description: "Beratung und Umsetzung für Glasfaser-Anbindungen.",
"IT-Installation & Support", icon: Cable,
"Fernwartung & Monitoring", },
],
cta: "Kontakt aufnehmen",
href: "/kontakt",
image: "/images/misc/firmenkunden-96736712-5fa99704.jpg",
},
]; ];
export default function LeistungenPage() { export default function LeistungenPage() {
return ( return (
<> <main>
{/* Hero Section */} {/* Hero Section */}
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]"> <Section variant="hero" className="bg-[var(--color-muted)]">
<div className="absolute inset-0 z-0"> <Container>
<Image <div className="max-w-3xl">
src="/images/services/tnr-leistungen-055053d5.jpg" <h1 className="mb-[var(--spacing-lg)]">
alt="Telenet Systems Mitarbeiter" Alle Leistungen
fill <span className="text-[var(--color-primary)]"> im Überblick</span>
priority </h1>
className="object-cover opacity-40" <p className="lead mb-[var(--spacing-2xl)]">
sizes="100vw" Von Fernsehen über Internet bis zu IT-Services –
/> wir bieten Ihnen umfassende Lösungen aus einer Hand.
</div> </p>
<Container className="relative z-10"> <Link href="/kontakt" className="btn btn-primary btn-lg">
<div className="max-w-3xl"> Jetzt beraten lassen
<p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]"> </Link>
Unser Leistungsangebot </div>
</p> </Container>
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]"> </Section>
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>
{/* Zielgruppen */} {/* Telekom Services */}
<Section> <Section>
<Container> <Container>
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]"> <div className="text-center mb-[var(--spacing-3xl)]">
<h2>Für Privat- und Geschäftskunden</h2> <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
<p className="lead mt-[var(--spacing-md)]"> Telekommunikation
Ob Zuhause oder im Unternehmen – wir haben die passende Lösung für Sie. </span>
</p> <h2 className="mt-[var(--spacing-sm)]">Fernsehen, Internet & Telefonie</h2>
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-xl)]"> <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
{targetGroups.map((group) => ( {mainServices.map((service) => (
<div key={group.title} className="card overflow-hidden"> <Link
<div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]"> key={service.title}
<Image href={service.href}
src={group.image} className="card group hover:shadow-lg transition-shadow hover:no-underline"
alt={group.title} >
fill <div className="w-12 h-12 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-lg)] group-hover:bg-[var(--color-primary)] transition-colors">
className="object-cover" <service.icon
sizes="(max-width: 1024px) 100vw, 50vw" size={24}
/> className="text-[var(--color-primary)] group-hover:text-[var(--color-background)] transition-colors"
</div> />
<div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]"> </div>
<group.icon className="h-5 w-5" aria-hidden="true" /> <h3 className="heading-4 mb-[var(--spacing-sm)] text-[var(--color-foreground)]">
<h3 className="heading-3">{group.title}</h3> {service.title}
</div> </h3>
<p className="text-muted mb-[var(--spacing-lg)]">{group.description}</p> <p className="text-muted mb-[var(--spacing-md)]">
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]"> {service.description}
{group.features.map((feature) => ( </p>
<li <span className="inline-flex items-center gap-[var(--spacing-xs)] text-[var(--color-primary)] font-medium">
key={feature} Mehr erfahren
className="flex items-center gap-[var(--spacing-sm)] text-sm" <ArrowRight size={16} />
> </span>
<CheckCircle </Link>
className="h-4 w-4 text-[var(--color-success)] flex-shrink-0" ))}
aria-hidden="true" </div>
/> </Container>
<span>{feature}</span> </Section>
</li>
))}
</ul>
<Link href={group.href} className="btn btn-primary">
{group.cta}
</Link>
</div>
))}
</div>
</Container>
</Section>
{/* IT-Services */} {/* IT Services */}
<Section id="services" className="bg-[var(--color-muted)]"> <Section className="bg-[var(--color-muted)]">
<Container> <Container>
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]"> <div className="text-center mb-[var(--spacing-3xl)]">
<h2>IT-Services für Unternehmen</h2> <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
<p className="lead mt-[var(--spacing-md)]"> IT-Dienstleistungen
Professionelle IT-Dienstleistungen von der Planung bis zur Wartung. </span>
Alles aus einer Hand, mit persönlichem Ansprechpartner vor Ort. <h2 className="mt-[var(--spacing-sm)]">IT-Services & Support</h2>
</p> <p className="lead max-w-2xl mx-auto mt-[var(--spacing-md)]">
</div> Professionelle IT-Lösungen für Unternehmen und Privatkunden.
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-lg)]"> </p>
{services.map((service) => ( </div>
<div key={service.title} className="card text-center"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--spacing-lg)]">
<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)]"> {itServices.map((service) => (
<service.icon className="h-6 w-6" aria-hidden="true" /> <div key={service.title} className="card">
</div> <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-md)]">
<h3 className="heading-5 mb-[var(--spacing-sm)]">{service.title}</h3> <service.icon size={20} className="text-[var(--color-primary)]" />
<p className="text-sm text-muted">{service.description}</p> </div>
</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> </div>
<div className="text-center mt-[var(--spacing-2xl)]">
<Link href="/kontakt" className="btn btn-primary">
IT-Beratung anfragen
<ArrowRight size={18} />
</Link>
</div>
</Container>
</Section>
{/* Glasfaser Section */} {/* Business Section */}
<Section> <Section>
<Container> <Container>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center"> <div className="grid 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"> <div>
<Image <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
src="/images/services/lwl1-40360e27.jpg" Für Unternehmen
alt="Glasfaser-Installation" </span>
fill <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
className="object-cover" Maßgeschneiderte Lösungen
sizes="(max-width: 1024px) 100vw, 50vw" </h2>
/> <p className="text-muted mb-[var(--spacing-lg)]">
</div> Sie benötigen eine individuelle Lösung für Ihr Unternehmen?
<div> Wir analysieren Ihre Anforderungen und erstellen ein maßgeschneidertes Angebot –
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]"> von der Telekommunikation bis zur kompletten IT-Infrastruktur.
<Cable className="h-5 w-5" aria-hidden="true" /> </p>
<span className="font-medium">Glasfaser</span> <ul className="stack-sm mb-[var(--spacing-xl)]">
</div> <li className="flex items-start gap-[var(--spacing-sm)]">
<h2>Zukunftssichere Glasfaser-Infrastruktur</h2> <span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">1</span>
<p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]"> <span>Bedarfsanalyse vor Ort</span>
Wir planen und bauen Glasfasernetze für Gemeinden und Unternehmen. </li>
Profitieren Sie von unserer langjährigen Erfahrung. <li className="flex items-start gap-[var(--spacing-sm)]">
</p> <span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">2</span>
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]"> <span>Individuelles Angebot</span>
<li className="flex items-center gap-[var(--spacing-sm)]"> </li>
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" /> <li className="flex items-start gap-[var(--spacing-sm)]">
<span>Glasfaser-Planung & Beratung</span> <span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">3</span>
</li> <span>Professionelle Umsetzung</span>
<li className="flex items-center gap-[var(--spacing-sm)]"> </li>
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" /> <li className="flex items-start gap-[var(--spacing-sm)]">
<span>Professioneller Netzausbau</span> <span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">4</span>
</li> <span>Laufender Support</span>
<li className="flex items-center gap-[var(--spacing-sm)]"> </li>
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" /> </ul>
<span>Behördliche Unterstützung</span> <Link href="/kontakt" className="btn btn-primary">
</li> Beratungstermin vereinbaren
<li className="flex items-center gap-[var(--spacing-sm)]"> </Link>
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" /> </div>
<span>Qualitätssicherung</span> <div className="bg-[var(--color-muted)] rounded-[var(--radius-lg)] p-[var(--spacing-2xl)] text-center">
</li> <p className="text-6xl font-bold text-[var(--color-primary)] mb-[var(--spacing-md)]">
</ul> 50
<Link href="/kontakt" className="btn btn-primary"> </p>
Projekt anfragen <p className="text-xl font-semibold mb-[var(--spacing-sm)]">Jahre Erfahrung</p>
</Link> <p className="text-muted">
</div> Seit 1976 sind wir Ihr zuverlässiger Partner für Telekommunikation und IT in Tirol.
</div> </p>
</Container> </div>
</Section> </div>
</Container>
</Section>
{/* CTA Section */} {/* CTA Section */}
<Section className="bg-[var(--color-primary)]"> <Section className="bg-[var(--color-primary)]">
<Container> <Container>
<div className="text-center max-w-2xl mx-auto"> <div className="text-center text-[var(--color-background)]">
<h2 className="text-[var(--color-background)]"> <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
Haben Sie Fragen zu unseren Leistungen? Haben Sie Fragen zu unseren Leistungen?
</h2> </h2>
<p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]"> <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
Wir beraten Sie gerne persönlich und finden die optimale Lösung für Ihre Anforderungen. Kontaktieren Sie uns für eine unverbindliche Beratung.
</p> Wir finden gemeinsam die passende Lösung.
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]"> </p>
<Link <Link
href="/kontakt" href="/kontakt"
className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90" className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
> >
Jetzt beraten lassen Jetzt beraten lassen
</Link> </Link>
<a </div>
href="tel:+4356725000" </Container>
className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]" </Section>
> </main>
+43 5672 5000 );
</a>
</div>
</div>
</Container>
</Section>
</>
);
} }
app/page.tsx
+126 -199
View File
@@ -1,297 +1,224 @@
import Image from "next/image"; import { Metadata } from "next";
import Link from "next/link"; import Link from "next/link";
import { Container } from "@/components/layout/Container"; import Image from "next/image";
import { Section } from "@/components/layout/Section"; import { Section } from "@/components/layout/Section";
import { Container } from "@/components/layout/Container";
import { import {
Tv, Tv,
Wifi, Wifi,
Phone, Phone,
MapPin,
Clock,
Users, Users,
Shield, Shield,
Clock, Award,
MapPin, ArrowRight
ArrowRight,
CheckCircle,
} from "lucide-react"; } from "lucide-react";
export const metadata: Metadata = {
title: "TeleNetSystems | Telekom & IT aus Tirol",
description:
"Ihr regionaler Telekom- und IT-Partner in Reutte, Tirol. Fernsehen, Internet, Telefonie und IT-Services – zuverlässig, persönlich, seit 1976.",
};
const services = [ const services = [
{ {
icon: Tv,
title: "Fernsehen", title: "Fernsehen",
description: description:
"Über 200 Programme inkl. 40 HDTV-Sendern. Erstklassige Unterhaltung für Ihr Zuhause – ab 16,47 € im Monat.", "Über 200 Programme inkl. 40 HDTV-Sender – für Privat- und Geschäftskunden.",
icon: Tv,
href: "/fernsehen", href: "/fernsehen",
image: "/images/misc/tv-privat-76f60c7a-88eafcfb.jpg", price: "ab € 16,47/Monat",
}, },
{ {
icon: Wifi,
title: "Internet", title: "Internet",
description: description:
"Highspeed-Internet über Kabel und Glasfaser. Flexible Tarife für Privat- und Geschäftskunden – ab 14,50 € im Monat.", "Highspeed-Internet über Kabel oder Glasfaser. Schnell, stabil, unlimitiert.",
icon: Wifi,
href: "/internet", href: "/internet",
image: "/images/misc/internet-7b594a2d-793cefee.jpg", price: "ab € 14,50/Monat",
}, },
{ {
icon: Phone,
title: "Telefonie", title: "Telefonie",
description: description:
"Günstige Telefonie-Tarife fürs Festnetz. Für Privat- und Geschäftskunden – ab 0 € mit Telenet-Internet.", "Flexible Telefonie-Tarife für Festnetz. Mit oder ohne Internet nutzbar.",
icon: Phone,
href: "/telefonie", href: "/telefonie",
image: "/images/misc/telefon-fa5e8c21-271d2135.jpg", price: "ab € 0,00/Monat",
}, },
]; ];
const usps = [ const usps = [
{ {
icon: MapPin, icon: MapPin,
title: "Regionale Nähe", title: "Regional & Persönlich",
description: description:
"Persönlicher Service direkt vor Ort im Bezirk Reutte. Bei uns kennt man sich noch persönlich.", "Wir sind vor Ort in Reutte. Bei Fragen oder Problemen erreichen Sie echte Ansprechpartner aus der Region.",
}, },
{ {
icon: Clock, icon: Clock,
title: "Seit 1976", title: "Schnelle Hilfe",
description: description:
"Fast 50 Jahre Erfahrung in der Telekommunikation. Verlässlichkeit, der Sie vertrauen können.", "Bei Störungen reagieren wir schnell. Unser Support ist für Sie da – ohne lange Warteschleifen.",
},
{
icon: Shield,
title: "Voller Service",
description:
"Von TV über Internet bis IT-Support – alles aus einer Hand. Keine Servicepauschale bei unseren Tarifen.",
}, },
{ {
icon: Users, icon: Users,
title: "Schneller Support", title: "Seit 1976",
description: description:
"Probleme lösen wir direkt – telefonisch oder vor Ort. Kurze Wege, schnelle Hilfe.", "Fast 50 Jahre Erfahrung in Telekommunikation und IT. Wir kennen die Technik – und die Region.",
},
{
icon: Shield,
title: "Zuverlässig",
description:
"Stabile Netze, bewährte Technik, dauerhafte Lösungen. Darauf können Sie sich verlassen.",
}, },
]; ];
const trustItems = [ const trustElements = [
"Keine versteckten Kosten", { icon: Award, text: "Zertifizierter Partner" },
"Unlimitiertes Datenvolumen", { icon: Users, text: "Über 5.000 zufriedene Kunden" },
"Persönlicher Ansprechpartner", { icon: Clock, text: "Fast 50 Jahre Erfahrung" },
"Regionaler Kundendienst",
]; ];
export default function HomePage() { export default function HomePage() {
return ( return (
<> <main>
{/* Hero Section */} {/* Hero Section */}
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]"> <Section variant="hero" className="bg-[var(--color-muted)]">
<div className="absolute inset-0 z-0"> <Container>
<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"> <div className="max-w-3xl">
<p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]"> <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
Ihr regionaler Partner in Tirol Ihr Telekom- und IT-Partner in Tirol
</p> </p>
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]"> <h1 className="mb-[var(--spacing-lg)]">
Telekommunikation und IT-Services aus einer Hand Zuverlässige Technik.
<br />
<span className="text-[var(--color-primary)]">Persönlicher Service.</span>
</h1> </h1>
<p className="lead text-gray-300 mb-[var(--spacing-xl)]"> <p className="lead mb-[var(--spacing-2xl)] max-w-2xl">
Seit 1976 versorgen wir den Bezirk Reutte mit zuverlässigem Fernsehen, Fernsehen, Internet und Telefonie aus einer Hand –
schnellem Internet und flexibler Telefonie. Persönliche Beratung, direkt aus Reutte für den Bezirk und die Region.
ehrlicher Service – ohne komplizierte Prozesse. Mit persönlicher Beratung und schnellem Support.
</p> </p>
<div className="flex flex-wrap gap-[var(--spacing-md)]"> <div className="flex flex-col sm:flex-row gap-[var(--spacing-md)]">
<Link href="/kontakt" className="btn btn-primary btn-lg"> <Link href="/kontakt" className="btn btn-primary btn-lg">
Jetzt beraten lassen Jetzt beraten lassen
</Link> </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)]"> <Link href="/leistungen" className="btn btn-outline btn-lg">
Unsere Leistungen Unsere Leistungen
<ArrowRight size={18} />
</Link> </Link>
</div> </div>
</div> </div>
</Container> </Container>
</Section> </Section>
{/* Services Section */}
<Section id="leistungen">
<Container>
<div className="text-center mb-[var(--spacing-3xl)]">
<h2 className="mb-[var(--spacing-md)]">Unsere Leistungen</h2>
<p className="lead max-w-2xl mx-auto">
Von Fernsehen über Internet bis zur Telefonie –
wir bieten Ihnen alles aus einer Hand.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
{services.map((service) => (
<article key={service.title} className="card group">
<div className="w-12 h-12 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-lg)]">
<service.icon size={24} className="text-[var(--color-primary)]" />
</div>
<h3 className="heading-4 mb-[var(--spacing-sm)]">{service.title}</h3>
<p className="text-muted mb-[var(--spacing-md)]">
{service.description}
</p>
<p className="font-semibold text-[var(--color-primary)] mb-[var(--spacing-lg)]">
{service.price}
</p>
<Link
href={service.href}
className="btn btn-ghost justify-start p-0 hover:text-[var(--color-primary)]"
>
Mehr erfahren
<ArrowRight size={16} />
</Link>
</article>
))}
</div>
</Container>
</Section>
{/* USP Section */} {/* USP Section */}
<Section className="bg-[var(--color-muted)]"> <Section className="bg-[var(--color-muted)]">
<Container> <Container>
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]"> <div className="text-center mb-[var(--spacing-3xl)]">
<h2>Warum Telenet Systems?</h2> <h2 className="mb-[var(--spacing-md)]">Warum TeleNetSystems?</h2>
<p className="lead mt-[var(--spacing-md)]"> <p className="lead max-w-2xl mx-auto">
Als regionaler Anbieter verbinden wir modernste Technik mit persönlichem Service. Wir sind kein anonymer Großkonzern – sondern Ihr Partner vor Ort.
</p> </p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
{usps.map((usp) => ( {usps.map((usp) => (
<div key={usp.title} className="text-center"> <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)]"> <div className="w-14 h-14 rounded-full bg-[var(--color-primary)] flex items-center justify-center mx-auto mb-[var(--spacing-md)]">
<usp.icon className="h-6 w-6" aria-hidden="true" /> <usp.icon size={24} className="text-[var(--color-background)]" />
</div> </div>
<h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3> <h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3>
<p className="text-muted">{usp.description}</p> <p className="text-sm text-muted">{usp.description}</p>
</div> </div>
))} ))}
</div> </div>
</Container> </Container>
</Section> </Section>
{/* 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.
</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 */} {/* Trust Section */}
<Section className="bg-[var(--color-primary)]"> <Section variant="sm">
<Container> <Container>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center"> <div className="flex flex-wrap justify-center gap-[var(--spacing-2xl)] items-center">
<div> {trustElements.map((item) => (
<h2 className="text-[var(--color-background)]"> <div
Transparent und fair – ohne versteckte Kosten key={item.text}
</h2> className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-muted-foreground)]"
<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, <item.icon size={20} className="text-[var(--color-primary)]" />
keine komplizierte Tarifstruktur. Einfach, ehrlich, regional. <span className="text-sm font-medium">{item.text}</span>
</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>
</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"
/>
</div>
</div>
</Container>
</Section>
{/* For Whom 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> </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>
</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>
</div> </div>
</Container> </Container>
</Section> </Section>
{/* CTA Section */} {/* CTA Section */}
<Section className="bg-[var(--color-foreground)]"> <Section className="bg-[var(--color-primary)]">
<Container> <Container>
<div className="text-center max-w-2xl mx-auto"> <div className="text-center text-[var(--color-background)]">
<h2 className="text-[var(--color-background)]"> <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
Haben Sie Fragen? Wir beraten Sie gerne. Bereit für zuverlässige Technik?
</h2> </h2>
<p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]"> <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
Unser Team in Reutte steht Ihnen persönlich zur Verfügung. Kontaktieren Sie uns für eine unverbindliche Beratung.
Rufen Sie uns an oder senden Sie uns eine Nachricht. Wir finden die passende Lösung für Sie.
</p> </p>
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]"> <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
<Link href="/kontakt" className="btn btn-primary btn-lg"> <Link
Kontakt aufnehmen href="/kontakt"
className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
>
Jetzt beraten lassen
</Link> </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)]"> <a
+43 5672 5000 href="tel:+43567612345"
className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
>
<Phone size={18} />
PLACEHOLDER: Telefon
</a> </a>
</div> </div>
</div> </div>
</Container> </Container>
</Section> </Section>
</> </main>
); );
} }
app/telefonie/page.tsx
+152 -287
View File
@@ -1,302 +1,167 @@
import type { Metadata } from "next"; import { Metadata } from "next";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { Container } from "@/components/layout/Container";
import { Section } from "@/components/layout/Section"; import { Section } from "@/components/layout/Section";
import { Phone, Building2, CheckCircle, Users } from "lucide-react"; import { Container } from "@/components/layout/Container";
import { Phone as PhoneIcon, Check, ArrowRight } from "lucide-react";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Telefonie", 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: description:
"Günstige Telefonie-Tarife fürs Festnetz im Bezirk Reutte. Ab 0 € mit Telenet-Internet.", "Flexible Telefonie-Tarife für Festnetz. Mit oder ohne Internet nutzbar – für Privat- und Geschäftskunden in Tirol.",
},
}; };
const telefonieTarife = [ const telefonieTarife = [
{ {
name: "telenet.zero", name: "telenet.zero",
subtitle: "ohne Internet", beschreibung: "Ohne Internet",
price: "5,00", preis: "€ 5,00",
minutenpreis: "2,4", kosten: "Festnetz AT: ab 2,4 Cent/Min.",
description: "Festnetz-Telefonie ohne Internet-Anschluss von Telenet.", features: ["Nur Telefonie", "Günstige Minutenpreise"],
features: [ },
"Festnetzanschluss", {
"Günstiger Minutenpreis", name: "telenet.zero",
"Keine Grundgebühr bei Internet", beschreibung: "Mit Internet von Telenet",
], preis: "€ 0,00",
popular: false, kosten: "Festnetz AT: ab 2,4 Cent/Min.",
}, features: ["Kostenlos zu Ihrem Internet", "Günstige Minutenpreise"],
{ highlight: true,
name: "telenet.zero", },
subtitle: "mit Internet von Telenet", {
price: "0,00", name: "telenet.business",
minutenpreis: "2,4", beschreibung: "Für Geschäftskunden",
description: "Festnetz-Telefonie ohne Grundgebühr für Telenet-Internet-Kunden.", preis: "€ 8,90",
features: [ kosten: "Festnetz AT: ab 3,24 Cent/Min.",
"Keine monatliche Grundgebühr", features: ["Business-Funktionen", "Professioneller Support"],
"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() { export default function TelefoniePage() {
return ( return (
<> <main>
{/* Hero Section */} {/* Hero Section */}
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]"> <Section variant="hero" className="bg-[var(--color-muted)]">
<div className="absolute inset-0 z-0"> <Container>
<Image <div className="max-w-3xl">
src="/images/misc/telefonie1-ad7595f9.jpg" <div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
alt="Telefonie" <PhoneIcon size={32} className="text-[var(--color-background)]" />
fill </div>
priority <h1 className="mb-[var(--spacing-lg)]">
className="object-cover opacity-40" Telefonie
sizes="100vw" <span className="text-[var(--color-primary)]"> ohne Kompromisse</span>
/> </h1>
</div> <p className="lead mb-[var(--spacing-2xl)]">
<Container className="relative z-10"> Flexible Telefonie-Tarife für Ihr Festnetz.
<div className="max-w-3xl"> Mit oder ohne Internet nutzbar – Sie haben die Wahl.
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]"> </p>
<Phone className="h-5 w-5" aria-hidden="true" /> <Link href="/kontakt" className="btn btn-primary btn-lg">
<span className="font-medium">Telefonie</span> Jetzt beraten lassen
</div> </Link>
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]"> </div>
Flexible Telefonie-Tarife für jeden Bedarf </Container>
</h1> </Section>
<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>
{/* Trust Bar */} {/* Tarife Section */}
<Section variant="sm" className="bg-[var(--color-muted)]"> <Section>
<Container> <Container>
<div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]"> <div className="text-center mb-[var(--spacing-3xl)]">
{benefits.map((benefit) => ( <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
<div Kabel-Telefonie-Tarife
key={benefit} </span>
className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium" <h2 className="mt-[var(--spacing-sm)]">Unsere Tarife</h2>
> </div>
<CheckCircle <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)] max-w-4xl mx-auto">
className="h-5 w-5 text-[var(--color-success)]" {telefonieTarife.map((tarif, index) => (
aria-hidden="true" <div
/> key={`${tarif.name}-${index}`}
<span>{benefit}</span> className={`card text-center ${tarif.highlight ? "ring-2 ring-[var(--color-primary)]" : ""}`}
</div> >
))} {tarif.highlight && (
</div> <span className="inline-block bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-medium px-[var(--spacing-sm)] py-[var(--spacing-xs)] rounded-full mb-[var(--spacing-md)]">
</Container> Empfohlen
</Section> </span>
)}
<h3 className="heading-5 mb-[var(--spacing-xs)]">{tarif.name}</h3>
<p className="text-sm text-muted mb-[var(--spacing-md)]">{tarif.beschreibung}</p>
<p className="text-4xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
<p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
<p className="text-sm mb-[var(--spacing-lg)]">{tarif.kosten}</p>
<ul className="stack-sm text-left mb-[var(--spacing-lg)]">
{tarif.features.map((feature) => (
<li key={feature} className="flex items-center gap-[var(--spacing-sm)]">
<Check size={16} className="text-[var(--color-primary)] shrink-0" />
<span className="text-sm">{feature}</span>
</li>
))}
</ul>
<Link href="/kontakt" className="btn btn-outline w-full">
Anfragen
</Link>
</div>
))}
</div>
</Container>
</Section>
{/* Tarife */} {/* Info Section */}
<Section id="tarife"> <Section className="bg-[var(--color-muted)]">
<Container> <Container variant="narrow">
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]"> <div className="text-center">
<h2>Unsere Telefonie-Tarife</h2> <h2 className="mb-[var(--spacing-lg)]">So funktioniert es</h2>
<p className="lead mt-[var(--spacing-md)]"> <div className="stack-lg text-left">
Einfache Preisstruktur ohne versteckte Kosten. <div className="card">
Wählen Sie den passenden Tarif für Ihre Bedürfnisse. <h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie mit Telenet-Internet</h3>
</p> <p className="text-muted">
</div> Wenn Sie bereits Internet von TeleNetSystems nutzen, können Sie unsere Telefonie
kostenlos hinzubuchen. Sie zahlen nur die tatsächlich geführten Gespräche nach Minutenpreis.
</p>
</div>
<div className="card">
<h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie ohne Internet</h3>
<p className="text-muted">
Sie möchten nur Telefonie ohne Internet? Kein Problem.
Für nur € 5,00 pro Monat erhalten Sie einen Festnetzanschluss mit günstigen Minutenpreisen.
</p>
</div>
<div className="card">
<h3 className="heading-5 mb-[var(--spacing-sm)]">Business-Telefonie</h3>
<p className="text-muted">
Für Geschäftskunden bieten wir professionelle Telefonie-Lösungen mit erweiterten Funktionen
und dediziertem Support.
</p>
</div>
</div>
</div>
</Container>
</Section>
<div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]"> {/* CTA Section */}
{telefonieTarife.map((tarif, index) => ( <Section className="bg-[var(--color-primary)]">
<div <Container>
key={`${tarif.name}-${index}`} <div className="text-center text-[var(--color-background)]">
className={`card relative ${ <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
tarif.popular Fragen zu unseren Telefonie-Tarifen?
? "border-[var(--color-primary)] border-2" </h2>
: "" <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
}`} Wir beraten Sie gerne und finden die passende Lösung für Ihre Anforderungen.
> </p>
{tarif.popular && ( <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
<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"> <Link
Empfohlen href="/kontakt"
</div> className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
)} >
<div className="text-center"> Jetzt beraten lassen
<h3 className="heading-4 text-[var(--color-primary)]"> </Link>
{tarif.name} <a
</h3> href="tel:+43567612345"
<p className="text-sm text-muted mb-[var(--spacing-md)]"> className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
{tarif.subtitle} >
</p> <PhoneIcon size={18} />
<div className="mb-[var(--spacing-md)]"> PLACEHOLDER: Telefon
<span className="heading-1">€ {tarif.price}</span> </a>
<span className="text-muted"> / Monat</span> </div>
</div> </div>
<p className="text-sm text-muted mb-[var(--spacing-sm)]"> </Container>
Festnetz AT: ab {tarif.minutenpreis} Cent / Minute </Section>
</p> </main>
</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>
{/* 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 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>
{/* 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>
</>
);
} }
app/ueber-uns/page.tsx
+203
View File
@@ -0,0 +1,203 @@
import { Metadata } from "next";
import Link from "next/link";
import { Section } from "@/components/layout/Section";
import { Container } from "@/components/layout/Container";
import { MapPin, Clock, Users, Heart, Shield, ArrowRight } from "lucide-react";
export const metadata: Metadata = {
title: "Über uns",
description:
"Lernen Sie TeleNetSystems kennen – Ihr regionaler Telekom- und IT-Partner in Tirol seit 1976.",
};
const values = [
{
icon: Heart,
title: "Persönlich",
description: "Wir sind kein anonymer Konzern. Bei uns bekommen Sie echte Ansprechpartner.",
},
{
icon: MapPin,
title: "Regional",
description: "In Reutte verwurzelt, für die Region da. Wir kennen Land und Leute.",
},
{
icon: Shield,
title: "Zuverlässig",
description: "Stabile Technik, bewährte Lösungen, transparente Kommunikation.",
},
{
icon: Clock,
title: "Schnell",
description: "Bei Problemen sind wir schnell zur Stelle – ohne lange Warteschleifen.",
},
];
const milestones = [
{ year: "1976", text: "Gründung als regionaler Telekom-Anbieter" },
{ year: "1990er", text: "Ausbau des Kabelnetzes in Reutte und Umgebung" },
{ year: "2000er", text: "Einführung von Highspeed-Internet" },
{ year: "2010er", text: "Erweiterung um IT-Dienstleistungen" },
{ year: "Heute", text: "Ihr verlässlicher Partner für Telekom & IT" },
];
export default function UeberUnsPage() {
return (
<main>
{/* Hero Section */}
<Section variant="hero" className="bg-[var(--color-muted)]">
<Container>
<div className="max-w-3xl">
<h1 className="mb-[var(--spacing-lg)]">
Wir sind
<span className="text-[var(--color-primary)]"> TeleNetSystems</span>
</h1>
<p className="lead mb-[var(--spacing-2xl)]">
Ihr regionaler Telekom- und IT-Partner in Tirol.
Seit 1976 verbinden wir Menschen – mit zuverlässiger Technik, ehrlicher Beratung und persönlichem Service.
</p>
</div>
</Container>
</Section>
{/* Story Section */}
<Section>
<Container>
<div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
<div>
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
Unsere Geschichte
</span>
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
Fast 50 Jahre Erfahrung
</h2>
<p className="text-muted mb-[var(--spacing-lg)]">
1976 gegründet, sind wir heute einer der führenden regionalen Anbieter für
Telekommunikation und IT-Services in Tirol. Was als kleines Unternehmen begann,
ist heute ein verlässlicher Partner für Tausende von Privat- und Geschäftskunden.
</p>
<p className="text-muted mb-[var(--spacing-lg)]">
Trotz des Wachstums sind wir unseren Werten treu geblieben:
persönlicher Service, regionale Nähe und ehrliche Beratung.
Wir kennen unsere Kunden – viele seit Jahrzehnten.
</p>
</div>
<div className="stack-md">
{milestones.map((milestone) => (
<div key={milestone.year} className="flex items-start gap-[var(--spacing-md)]">
<span className="text-[var(--color-primary)] font-bold text-lg min-w-[80px]">
{milestone.year}
</span>
<span className="text-muted pt-0.5">{milestone.text}</span>
</div>
))}
</div>
</div>
</Container>
</Section>
{/* Values Section */}
<Section className="bg-[var(--color-muted)]">
<Container>
<div className="text-center mb-[var(--spacing-3xl)]">
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
Wofür wir stehen
</span>
<h2 className="mt-[var(--spacing-sm)]">Unsere Werte</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
{values.map((value) => (
<div key={value.title} className="text-center">
<div className="w-14 h-14 rounded-full bg-[var(--color-primary)] flex items-center justify-center mx-auto mb-[var(--spacing-md)]">
<value.icon size={24} className="text-[var(--color-background)]" />
</div>
<h3 className="heading-5 mb-[var(--spacing-sm)]">{value.title}</h3>
<p className="text-sm text-muted">{value.description}</p>
</div>
))}
</div>
</Container>
</Section>
{/* Team Section */}
<Section>
<Container variant="narrow">
<div className="text-center">
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
Unser Team
</span>
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
Menschen, die für Sie da sind
</h2>
<p className="text-muted mb-[var(--spacing-xl)]">
Hinter TeleNetSystems steht ein engagiertes Team aus Technikern, Beratern und
Service-Mitarbeitern. Wir kennen die Region, wir kennen die Technik – und wir
sind für Sie da, wenn Sie uns brauchen.
</p>
<div className="flex items-center justify-center gap-[var(--spacing-sm)]">
<Users size={20} className="text-[var(--color-primary)]" />
<span className="font-medium">PLACEHOLDER: Anzahl Mitarbeiter</span>
</div>
</div>
</Container>
</Section>
{/* Region Section */}
<Section className="bg-[var(--color-muted)]">
<Container>
<div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
<div className="lg:order-2">
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
Unser Standort
</span>
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
Verwurzelt in Reutte
</h2>
<p className="text-muted mb-[var(--spacing-lg)]">
Unser Hauptsitz ist in Reutte – mitten im Herzen des Außerferns.
Von hier aus betreuen wir Kunden in der gesamten Region.
</p>
<p className="text-muted mb-[var(--spacing-lg)]">
Der Vorteil für Sie: Kurze Wege, schnelle Reaktionszeiten und
persönliche Betreuung vor Ort. Bei uns sind Sie keine Nummer –
sondern ein geschätzter Kunde.
</p>
<div className="flex items-start gap-[var(--spacing-sm)]">
<MapPin size={20} className="text-[var(--color-primary)] shrink-0 mt-0.5" />
<span className="text-muted">
PLACEHOLDER: Adresse<br />
6600 Reutte, Tirol
</span>
</div>
</div>
<div className="lg:order-1 bg-[var(--color-background)] rounded-[var(--radius-lg)] aspect-video flex items-center justify-center border border-[var(--color-border)]">
<p className="text-muted">PLACEHOLDER: Karte oder Bild</p>
</div>
</div>
</Container>
</Section>
{/* CTA Section */}
<Section className="bg-[var(--color-primary)]">
<Container>
<div className="text-center text-[var(--color-background)]">
<h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
Lernen Sie uns kennen
</h2>
<p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
Besuchen Sie uns vor Ort oder kontaktieren Sie uns –
wir freuen uns auf Sie.
</p>
<Link
href="/kontakt"
className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
>
Kontakt aufnehmen
<ArrowRight size={18} />
</Link>
</div>
</Container>
</Section>
</main>
);
}
assets/BilderUndLogos/originals/brand/logo-systems-9fd0db14.png → assets/BilderUndLogos/brand/logo-systems-9fd0db14.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 140 KiB

After

Width:  |  Height:  |  Size: 140 KiB

assets/BilderUndLogos/originals/brand/logo-weiss-ffa4cbf6.png → assets/BilderUndLogos/brand/logo-weiss-ffa4cbf6.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 92 KiB

assets/BilderUndLogos/originals/hero/internet-header-431619ac.jpg → assets/BilderUndLogos/hero/internet-header-431619ac.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 253 KiB

After

Width:  |  Height:  |  Size: 253 KiB

assets/BilderUndLogos/originals/hero/tv-header-44c1e07b.jpg → assets/BilderUndLogos/hero/tv-header-44c1e07b.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 227 KiB

After

Width:  |  Height:  |  Size: 227 KiB

assets/BilderUndLogos/manifest.json
-758
View File
@@ -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"
]
}
]
assets/BilderUndLogos/originals/misc/david-20mu-cc-88ller-da85dab8-046e19ba.jpg → assets/BilderUndLogos/misc/david-20mu-cc-88ller-da85dab8-046e19ba.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 104 KiB

assets/BilderUndLogos/originals/misc/firma1-8a863d8b.jpg → assets/BilderUndLogos/misc/firma1-8a863d8b.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

assets/BilderUndLogos/originals/misc/firmenkunden-96736712-5fa99704.jpg → assets/BilderUndLogos/misc/firmenkunden-96736712-5fa99704.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 133 KiB

assets/BilderUndLogos/originals/misc/franz-8b76ccff-320f42cb.jpg → assets/BilderUndLogos/misc/franz-8b76ccff-320f42cb.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 91 KiB

assets/BilderUndLogos/originals/misc/furkan-demirel-4112a488-f6dfc223.jpg → assets/BilderUndLogos/misc/furkan-demirel-4112a488-f6dfc223.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 113 KiB

assets/BilderUndLogos/originals/misc/internet-7b594a2d-793cefee.jpg → assets/BilderUndLogos/misc/internet-7b594a2d-793cefee.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 157 KiB

After

Width:  |  Height:  |  Size: 157 KiB

assets/BilderUndLogos/originals/misc/ju-cc-88rgen-20gra-cc-88ssle-8e0dfbb3-db96fd12.jpg → assets/BilderUndLogos/misc/ju-cc-88rgen-20gra-cc-88ssle-8e0dfbb3-db96fd12.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 87 KiB

After

Width:  |  Height:  |  Size: 87 KiB

assets/BilderUndLogos/originals/misc/julia-20besler-f4fe1bff-fb0f3af2.jpg → assets/BilderUndLogos/misc/julia-20besler-f4fe1bff-fb0f3af2.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 123 KiB

After

Width:  |  Height:  |  Size: 123 KiB

assets/BilderUndLogos/originals/misc/lorena-c31636eb-2f817bb4.jpg → assets/BilderUndLogos/misc/lorena-c31636eb-2f817bb4.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 124 KiB

After

Width:  |  Height:  |  Size: 124 KiB

assets/BilderUndLogos/originals/misc/lukas-20schennach-0f7160e5-e8152f4f.jpg → assets/BilderUndLogos/misc/lukas-20schennach-0f7160e5-e8152f4f.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 81 KiB

assets/BilderUndLogos/originals/misc/lwl1-c8928579-d408002b.jpg → assets/BilderUndLogos/misc/lwl1-c8928579-d408002b.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 124 KiB

After

Width:  |  Height:  |  Size: 124 KiB

assets/BilderUndLogos/originals/misc/mario-20kien-f5e3602f-ddda3b58.jpg → assets/BilderUndLogos/misc/mario-20kien-f5e3602f-ddda3b58.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 98 KiB

assets/BilderUndLogos/originals/misc/martin-20m-c3-bcller-4422f545-ddb853b7.jpg → assets/BilderUndLogos/misc/martin-20m-c3-bcller-4422f545-ddb853b7.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 70 KiB

assets/BilderUndLogos/originals/misc/privatkunden-a54cf4d8-0018c3fa.jpg → assets/BilderUndLogos/misc/privatkunden-a54cf4d8-0018c3fa.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 144 KiB

After

Width:  |  Height:  |  Size: 144 KiB

assets/BilderUndLogos/originals/misc/serverraum-7225cb6a.jpg → assets/BilderUndLogos/misc/serverraum-7225cb6a.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

assets/BilderUndLogos/originals/misc/telefon-fa5e8c21-271d2135.jpg → assets/BilderUndLogos/misc/telefon-fa5e8c21-271d2135.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 125 KiB

After

Width:  |  Height:  |  Size: 125 KiB

assets/BilderUndLogos/originals/misc/telefonie1-ad7595f9.jpg → assets/BilderUndLogos/misc/telefonie1-ad7595f9.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 239 KiB

After

Width:  |  Height:  |  Size: 239 KiB

assets/BilderUndLogos/originals/misc/timo-224648e7-f0782cdb.jpg → assets/BilderUndLogos/misc/timo-224648e7-f0782cdb.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 93 KiB

assets/BilderUndLogos/originals/misc/tv-business-c3bdfb94-23310090.jpg → assets/BilderUndLogos/misc/tv-business-c3bdfb94-23310090.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 98 KiB

assets/BilderUndLogos/originals/misc/tv-paytv-6cbac6e4-d140e2e4.jpg → assets/BilderUndLogos/misc/tv-paytv-6cbac6e4-d140e2e4.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

assets/BilderUndLogos/originals/misc/tv-privat-76f60c7a-88eafcfb.jpg → assets/BilderUndLogos/misc/tv-privat-76f60c7a-88eafcfb.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 56 KiB

assets/BilderUndLogos/originals/misc/wolfgang-20schwaiger-3fd3136b-19e15245.jpg → assets/BilderUndLogos/misc/wolfgang-20schwaiger-3fd3136b-19e15245.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 127 KiB

After

Width:  |  Height:  |  Size: 127 KiB

assets/BilderUndLogos/originals/services/lwl1-40360e27.jpg → assets/BilderUndLogos/services/lwl1-40360e27.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 320 KiB

After

Width:  |  Height:  |  Size: 320 KiB

assets/BilderUndLogos/originals/services/tnr-leistungen-055053d5.jpg → assets/BilderUndLogos/services/tnr-leistungen-055053d5.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 683 KiB

After

Width:  |  Height:  |  Size: 683 KiB

assets/BilderUndLogos/originals/team/team-telenet-f9218567.jpg → assets/BilderUndLogos/team/team-telenet-f9218567.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 274 KiB

After

Width:  |  Height:  |  Size: 274 KiB

components/layout/Container.tsx
+6 -6
View File
@@ -9,18 +9,18 @@ interface ContainerProps {
variant?: ContainerVariant; variant?: ContainerVariant;
} }
const variantClasses: Record<ContainerVariant, string> = {
default: "container",
narrow: "container container--narrow",
wide: "container container--wide",
};
export function Container({ export function Container({
children, children,
className = "", className = "",
as: Tag = "div", as: Tag = "div",
variant = "default", variant = "default",
}: ContainerProps) { }: ContainerProps) {
const variantClasses: Record<ContainerVariant, string> = {
default: "container",
narrow: "container container--narrow",
wide: "container container--wide",
};
return ( return (
<Tag className={`${variantClasses[variant]} ${className}`.trim()}> <Tag className={`${variantClasses[variant]} ${className}`.trim()}>
{children} {children}
components/layout/Footer.tsx
+119 -128
View File
@@ -1,139 +1,130 @@
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { MapPin, Phone, Mail, Clock } from "lucide-react"; import { Phone, Mail, MapPin } from "lucide-react";
const navigation = { const footerLinks = {
leistungen: [ services: [
{ name: "Fernsehen", href: "/fernsehen" }, { name: "Fernsehen", href: "/fernsehen" },
{ name: "Internet", href: "/internet" }, { name: "Internet", href: "/internet" },
{ name: "Telefonie", href: "/telefonie" }, { name: "Telefonie", href: "/telefonie" },
{ name: "IT-Services", href: "/leistungen" }, { name: "Leistungen", href: "/leistungen" },
], ],
unternehmen: [ company: [
{ name: "Über uns", href: "/ueber-uns" }, { name: "Über uns", href: "/ueber-uns" },
{ name: "Kontakt", href: "/kontakt" }, { name: "Kontakt", href: "/kontakt" },
], { name: "Impressum", href: "/impressum" },
rechtliches: [ { name: "Datenschutz", href: "/datenschutz" },
{ name: "Impressum", href: "/impressum" }, ],
{ name: "Datenschutz", href: "/datenschutz" },
],
}; };
export function Footer() { export function Footer() {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
return ( return (
<footer className="bg-[var(--color-foreground)] text-[var(--color-background)]"> <footer className="bg-[var(--color-foreground)] text-[var(--color-background)]">
<div className="container"> <div className="container">
{/* Main Footer Content */} {/* Main Footer Content */}
<div className="py-[var(--spacing-4xl)]"> <div className="py-[var(--spacing-3xl)] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-2xl)]">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-2xl)]"> {/* Company Info */}
{/* Company Info */} <div className="stack-md">
<div className="lg:col-span-1"> <Link
<Image href="/"
src="/images/brand/logo-weiss-ffa4cbf6.png" className="hover:no-underline"
alt="Telenet Systems GmbH" >
width={160} <Image
height={51} src="/images/logo/logo-weiss-ffa4cbf6.png"
className="h-10 w-auto mb-[var(--spacing-lg)]" alt="TeleNetSystems Logo"
/> width={160}
<p className="text-sm text-gray-300 mb-[var(--spacing-lg)]"> height={36}
Ihr regionaler Partner für Telekommunikation und IT-Services in Tirol. Seit 1976 verbinden wir Menschen und Technik. className="h-8 w-auto"
</p> />
<div className="space-y-[var(--spacing-sm)]"> </Link>
<div className="flex items-start gap-[var(--spacing-sm)] text-sm text-gray-300"> <p className="text-sm opacity-80">
<MapPin className="h-4 w-4 mt-0.5 flex-shrink-0" aria-hidden="true" /> Ihr regionaler Telekom- und IT-Partner in Tirol.
<span>Reutte, Tirol, Österreich</span> Zuverlässige Technik, ehrliche Beratung und persönlicher Service seit 1976.
</p>
</div>
{/* Services Links */}
<div>
<h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
Leistungen
</h3>
<ul className="stack-sm">
{footerLinks.services.map((link) => (
<li key={link.name}>
<Link
href={link.href}
className="text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
>
{link.name}
</Link>
</li>
))}
</ul>
</div>
{/* Company Links */}
<div>
<h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
Unternehmen
</h3>
<ul className="stack-sm">
{footerLinks.company.map((link) => (
<li key={link.name}>
<Link
href={link.href}
className="text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
>
{link.name}
</Link>
</li>
))}
</ul>
</div>
{/* Contact Info */}
<div>
<h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
Kontakt
</h3>
<ul className="stack-md">
<li className="flex items-start gap-[var(--spacing-sm)]">
<MapPin size={18} className="shrink-0 mt-0.5 text-[var(--color-primary)]" />
<span className="text-sm opacity-80">
PLACEHOLDER: Adresse<br />
6600 Reutte, Tirol
</span>
</li>
<li>
<a
href="tel:+43567612345"
className="flex items-center gap-[var(--spacing-sm)] text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
>
<Phone size={18} className="shrink-0 text-[var(--color-primary)]" />
PLACEHOLDER: Telefon
</a>
</li>
<li>
<a
href="mailto:info@tnr.at"
className="flex items-center gap-[var(--spacing-sm)] text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
>
<Mail size={18} className="shrink-0 text-[var(--color-primary)]" />
PLACEHOLDER: E-Mail
</a>
</li>
</ul>
</div>
</div> </div>
<a
href="tel:+4356725000" {/* Bottom Bar */}
className="flex items-center gap-[var(--spacing-sm)] text-sm text-gray-300 hover:text-white transition-colors" <div className="py-[var(--spacing-lg)] border-t border-[var(--color-background)]/10">
> <p className="text-sm opacity-60 text-center">
<Phone className="h-4 w-4 flex-shrink-0" aria-hidden="true" /> © {currentYear} Telenet Systems GmbH. Alle Rechte vorbehalten.
<span>+43 5672 5000</span> </p>
</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 &amp; 13:00–17:00</span>
</div> </div>
</div>
</div> </div>
</footer>
{/* 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>
);
} }
components/layout/Header.tsx
+88 -99
View File
@@ -1,116 +1,105 @@
"use client"; "use client";
import { useState } from "react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { useState } from "react";
import { Menu, X, Phone } from "lucide-react"; import { Menu, X, Phone } from "lucide-react";
const navigation = [ const navigation = [
{ name: "Startseite", href: "/" }, { name: "Fernsehen", href: "/fernsehen" },
{ name: "Fernsehen", href: "/fernsehen" }, { name: "Internet", href: "/internet" },
{ name: "Internet", href: "/internet" }, { name: "Telefonie", href: "/telefonie" },
{ name: "Telefonie", href: "/telefonie" }, { name: "Leistungen", href: "/leistungen" },
{ name: "Leistungen", href: "/leistungen" }, { name: "Über uns", href: "/ueber-uns" },
{ name: "Über uns", href: "/ueber-uns" },
{ name: "Kontakt", href: "/kontakt" },
]; ];
export function Header() { export function Header() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return ( return (
<header className="sticky top-0 z-50 bg-[var(--color-background)] border-b border-[var(--color-border)]"> <header className="sticky top-0 z-50 bg-[var(--color-background)] border-b border-[var(--color-border)]">
<div className="container"> <div className="container">
<nav className="flex items-center justify-between py-[var(--spacing-md)]"> <nav className="flex items-center justify-between h-16 md:h-20">
{/* Logo */} {/* Logo */}
<Link href="/" className="flex-shrink-0"> <Link
<Image href="/"
src="/images/brand/logo-systems-9fd0db14.png" className="hover:no-underline"
alt="Telenet Systems GmbH" >
width={180} <Image
height={57} src="/images/logo/logo-systems-9fd0db14.png"
priority alt="TeleNetSystems Logo"
className="h-10 w-auto md:h-12" width={180}
/> height={40}
</Link> priority
className="h-8 md:h-10 w-auto"
/>
</Link>
{/* Desktop Navigation */} {/* Desktop Navigation */}
<div className="hidden lg:flex lg:items-center lg:gap-[var(--spacing-lg)]"> <div className="hidden lg:flex items-center gap-[var(--spacing-lg)]">
{navigation.map((item) => ( {navigation.map((item) => (
<Link <Link
key={item.name} key={item.name}
href={item.href} href={item.href}
className="text-sm font-medium text-[var(--color-foreground)] hover:text-[var(--color-primary)] transition-colors" className="text-[var(--color-foreground)] hover:text-[var(--color-primary)] hover:no-underline transition-colors"
> >
{item.name} {item.name}
</Link> </Link>
))} ))}
</div> </div>
{/* CTA & Phone (Desktop) */} {/* Desktop CTAs */}
<div className="hidden lg:flex lg:items-center lg:gap-[var(--spacing-md)]"> <div className="hidden lg:flex items-center gap-[var(--spacing-md)]">
<a <a
href="tel:+4356725000" href="tel:+43567612345"
className="flex items-center gap-[var(--spacing-xs)] text-sm font-medium text-[var(--color-muted-foreground)] hover:text-[var(--color-primary)] transition-colors" className="flex items-center gap-[var(--spacing-xs)] text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:no-underline transition-colors"
aria-label="Anrufen: +43 5672 5000" >
> <Phone size={18} />
<Phone className="h-4 w-4" aria-hidden="true" /> <span className="text-sm">PLACEHOLDER: Telefon</span>
<span>+43 5672 5000</span> </a>
</a> <Link href="/kontakt" className="btn btn-primary">
<Link href="/kontakt" className="btn btn-primary"> Jetzt beraten lassen
Jetzt beraten lassen </Link>
</Link> </div>
</div>
{/* Mobile Menu Button */} {/* Mobile Menu Button */}
<button <button
type="button" type="button"
className="lg:hidden p-[var(--spacing-sm)] -mr-[var(--spacing-sm)] text-[var(--color-foreground)]" className="lg:hidden p-2 text-[var(--color-foreground)]"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)} onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
aria-expanded={mobileMenuOpen} aria-label={mobileMenuOpen ? "Menü schließen" : "Menü öffnen"}
aria-label={mobileMenuOpen ? "Menü schließen" : "Menü öffnen"} >
> {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
{mobileMenuOpen ? ( </button>
<X className="h-6 w-6" aria-hidden="true" /> </nav>
) : (
<Menu className="h-6 w-6" aria-hidden="true" />
)}
</button>
</nav>
{/* Mobile Navigation */} {/* Mobile Navigation */}
{mobileMenuOpen && ( {mobileMenuOpen && (
<div className="lg:hidden border-t border-[var(--color-border)] py-[var(--spacing-md)]"> <div className="lg:hidden border-t border-[var(--color-border)] pb-[var(--spacing-lg)]">
<div className="flex flex-col gap-[var(--spacing-sm)]"> <div className="stack-sm pt-[var(--spacing-md)]">
{navigation.map((item) => ( {navigation.map((item) => (
<Link <Link
key={item.name} key={item.name}
href={item.href} href={item.href}
className="py-[var(--spacing-sm)] text-base font-medium text-[var(--color-foreground)] hover:text-[var(--color-primary)] transition-colors" className="block py-[var(--spacing-sm)] text-[var(--color-foreground)] hover:text-[var(--color-primary)] hover:no-underline"
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}
> >
{item.name} {item.name}
</Link> </Link>
))} ))}
<hr className="border-[var(--color-border)] my-[var(--spacing-sm)]" /> <div className="pt-[var(--spacing-md)] border-t border-[var(--color-border)] mt-[var(--spacing-md)]">
<a <Link
href="tel:+4356725000" href="/kontakt"
className="flex items-center gap-[var(--spacing-sm)] py-[var(--spacing-sm)] text-base font-medium text-[var(--color-muted-foreground)]" className="btn btn-primary w-full"
> onClick={() => setMobileMenuOpen(false)}
<Phone className="h-5 w-5" aria-hidden="true" /> >
<span>+43 5672 5000</span> Jetzt beraten lassen
</a> </Link>
<Link </div>
href="/kontakt" </div>
className="btn btn-primary mt-[var(--spacing-sm)]" </div>
onClick={() => setMobileMenuOpen(false)} )}
>
Jetzt beraten lassen
</Link>
</div> </div>
</div> </header>
)} );
</div>
</header>
);
} }
components/layout/Section.tsx
+9 -9
View File
@@ -1,6 +1,6 @@
import type { ElementType, ReactNode } from "react"; import type { ElementType, ReactNode } from "react";
type SectionVariant = "default" | "sm" | "lg" | "hero" | "flush"; type SectionVariant = "default" | "hero" | "sm" | "lg" | "flush";
interface SectionProps { interface SectionProps {
children: ReactNode; children: ReactNode;
@@ -10,14 +10,6 @@ interface SectionProps {
id?: string; id?: string;
} }
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({ export function Section({
children, children,
className = "", className = "",
@@ -25,6 +17,14 @@ export function Section({
variant = "default", variant = "default",
id, id,
}: SectionProps) { }: SectionProps) {
const variantClasses: Record<SectionVariant, string> = {
default: "section",
hero: "section section--hero",
sm: "section section--sm",
lg: "section section--lg",
flush: "section section--flush",
};
return ( return (
<Tag id={id} className={`${variantClasses[variant]} ${className}`.trim()}> <Tag id={id} className={`${variantClasses[variant]} ${className}`.trim()}>
{children} {children}
prompts/master_prompt.md
+1 -1
View File
@@ -42,7 +42,7 @@ Die Website sollte in einem freundlichen, sachlichen und beratenden Ton kommuniz
### ✅ Was bei dieser Website BESONDERS WICHTIG ist: ### ✅ 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: ### ❌ Was AUF KEINEN FALL passieren darf:
public/images/brand/logo-systems-9fd0db14.png → public/images/logo/logo-systems-9fd0db14.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 140 KiB

After

Width:  |  Height:  |  Size: 140 KiB

public/images/brand/logo-weiss-ffa4cbf6.png → public/images/logo/logo-weiss-ffa4cbf6.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 92 KiB

public/images/team/team-telenet-f9218567.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 274 KiB