Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 1elle1
|
747e52133a | ||
|
1elle1
|
578bb8edb3 |
@@ -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>
|
||||
);
|
||||
}
|
||||
+114
-214
@@ -1,253 +1,153 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import Image from "next/image";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { 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 = {
|
||||
title: "Fernsehen",
|
||||
description:
|
||||
"Über 200 TV-Programme inkl. 40 HDTV-Sendern. Kabel-TV für Privat- und Geschäftskunden im Bezirk Reutte. Ab 16,47 € im Monat.",
|
||||
openGraph: {
|
||||
title: "Fernsehen | Telenet Systems GmbH",
|
||||
description:
|
||||
"Über 200 TV-Programme inkl. 40 HDTV-Sendern. Kabel-TV für Privat- und Geschäftskunden im Bezirk Reutte.",
|
||||
},
|
||||
"Über 200 TV-Programme inkl. 40 HDTV-Sender. Kabel-TV für Privat- und Geschäftskunden in Tirol.",
|
||||
};
|
||||
|
||||
const tvOptions = [
|
||||
{
|
||||
icon: Users,
|
||||
title: "TV Privat",
|
||||
price: "16,47",
|
||||
period: "Monat",
|
||||
description:
|
||||
"Über 200 Programme inkl. 40 HDTV-Sendern und rund 40 Radiosendern direkt in Ihr Wohnzimmer.",
|
||||
features: [
|
||||
"Über 200 TV-Programme",
|
||||
"40 HDTV-Sender inklusive",
|
||||
const tvFeatures = [
|
||||
"Über 200 Programme",
|
||||
"40 HDTV-Sender",
|
||||
"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 = [
|
||||
"Kristallklare Bildqualität",
|
||||
"Keine Servicepauschale",
|
||||
"Persönlicher Support vor Ort",
|
||||
"Schnelle Installation",
|
||||
"Faire und transparente Preise",
|
||||
"Regionale Sender inklusive",
|
||||
];
|
||||
|
||||
export default function FernsehenPage() {
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div className="max-w-xl">
|
||||
<div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
|
||||
<Tv size={32} className="text-[var(--color-background)]" />
|
||||
</div>
|
||||
<h1 className="mb-[var(--spacing-lg)]">
|
||||
Fernsehen in
|
||||
<span className="text-[var(--color-primary)]"> bester Qualität</span>
|
||||
</h1>
|
||||
<p className="lead mb-[var(--spacing-2xl)]">
|
||||
Genießen Sie über 200 TV-Programme inkl. 40 HDTV-Sendern –
|
||||
direkt über das Kabelnetz von TeleNetSystems.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Image
|
||||
src="/images/hero/tv-header-44c1e07b.jpg"
|
||||
alt="Familie genießt Fernsehen"
|
||||
fill
|
||||
alt="Familie schaut gemütlich fern"
|
||||
width={800}
|
||||
height={600}
|
||||
className="rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]"
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Tv className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Fernsehen</span>
|
||||
</div>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Über 200 TV-Programme in bester Qualität
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Erstklassige Unterhaltung für Ihr Zuhause oder Unternehmen.
|
||||
Mit 40 HDTV-Sendern und rund 40 Radiosendern – ab nur 16,47 € im Monat.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
<a href="#angebote" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
Angebote ansehen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Trust Bar */}
|
||||
<Section variant="sm" className="bg-[var(--color-muted)]">
|
||||
{/* Trust Elements */}
|
||||
<Section variant="sm" className="bg-[var(--color-background)] border-b border-[var(--color-border)]">
|
||||
<Container>
|
||||
<div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
|
||||
{benefits.map((benefit) => (
|
||||
<div
|
||||
key={benefit}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-5 w-5 text-[var(--color-success)]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{benefit}</span>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-xl)]">
|
||||
{tvFeatures.slice(0, 4).map((feature) => (
|
||||
<div key={feature} className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<Check size={18} className="text-[var(--color-primary)]" />
|
||||
<span className="text-sm font-medium">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* TV Options */}
|
||||
<Section id="angebote">
|
||||
{/* TV Privat Section */}
|
||||
<Section id="privat">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>Unsere TV-Angebote</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Ob für Ihr Zuhause oder Ihr Unternehmen – wir haben das passende Angebot.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--spacing-xl)]">
|
||||
{tvOptions.map((option) => (
|
||||
<div
|
||||
key={option.title}
|
||||
className={`card relative overflow-hidden ${
|
||||
option.popular
|
||||
? "border-[var(--color-primary)] border-2"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{option.popular && (
|
||||
<div className="absolute top-4 right-4 bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-semibold px-3 py-1 rounded-full">
|
||||
Beliebt
|
||||
</div>
|
||||
)}
|
||||
<div className="relative h-40 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
|
||||
<Image
|
||||
src={option.image}
|
||||
alt={option.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 33vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
|
||||
<option.icon className="h-5 w-5" aria-hidden="true" />
|
||||
<h3 className="heading-4">{option.title}</h3>
|
||||
</div>
|
||||
<div className="mb-[var(--spacing-md)]">
|
||||
<span className="heading-2 text-[var(--color-foreground)]">
|
||||
{option.price.includes("Anfrage") ? "" : "€ "}
|
||||
{option.price}
|
||||
<div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div>
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Für Privatkunden
|
||||
</span>
|
||||
{option.period && (
|
||||
<span className="text-muted"> / {option.period}</span>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||||
TV Privat
|
||||
</h2>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
{option.description}
|
||||
Holen Sie sich über 200 Programme inkl. 40 HDTV-Sendern und rund 40 Radiosendern
|
||||
direkt in Ihr Wohnzimmer. Genießen Sie beste Unterhaltung für die ganze Familie.
|
||||
</p>
|
||||
<ul className="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"
|
||||
/>
|
||||
<ul className="stack-sm mb-[var(--spacing-xl)]">
|
||||
{tvFeatures.map((feature) => (
|
||||
<li key={feature} className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<Check size={18} className="text-[var(--color-primary)] shrink-0" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className={`btn w-full ${
|
||||
option.popular ? "btn-primary" : "btn-outline"
|
||||
}`}
|
||||
>
|
||||
{option.cta}
|
||||
</div>
|
||||
<div className="card text-center">
|
||||
<p className="text-sm text-muted uppercase tracking-wide mb-[var(--spacing-sm)]">
|
||||
TV Privat
|
||||
</p>
|
||||
<p className="text-5xl font-bold text-[var(--color-primary)] mb-[var(--spacing-xs)]">
|
||||
€ 16,47
|
||||
</p>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
pro Monat inkl. MwSt.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn btn-primary w-full">
|
||||
Jetzt anfragen
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
{/* TV Business Section */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container variant="narrow">
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<h2>Häufige Fragen</h2>
|
||||
</div>
|
||||
<div className="space-y-[var(--spacing-lg)]">
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">
|
||||
Wie schnell ist die Installation?
|
||||
</h3>
|
||||
<p className="text-muted">
|
||||
In der Regel können wir innerhalb weniger Werktage einen Installationstermin
|
||||
vereinbaren. Unser Techniker kommt zu Ihnen und richtet alles ein.
|
||||
<Container>
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Für Geschäftskunden
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||||
TV Business
|
||||
</h2>
|
||||
<p className="text-muted mb-[var(--spacing-xl)]">
|
||||
Sie sind noch auf der Suche nach der passenden TV-Lösung für Ihr Unternehmen?
|
||||
Gerne erstellen wir Ihnen ein individuelles Angebot, das genau zu Ihren Anforderungen passt.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Individuelle Lösung anfragen
|
||||
<ArrowRight size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">
|
||||
Gibt es versteckte Kosten?
|
||||
</h3>
|
||||
<p className="text-muted">
|
||||
Nein. Der angezeigte Preis ist der Endpreis inklusive Mehrwertsteuer.
|
||||
Es gibt keine Servicepauschale und keine versteckten Gebühren.
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Pay TV Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h2 className="mb-[var(--spacing-lg)]">Pay-TV</h2>
|
||||
<p className="text-muted mb-[var(--spacing-xl)]">
|
||||
Auf Wunsch bieten wir zusätzlich Pay-TV-Lösungen an.
|
||||
Sie möchten exklusive Filme, Serien und Sport in HD oder UHD?
|
||||
Kontaktieren Sie uns einfach und wir finden das passende Angebot für Sie.
|
||||
</p>
|
||||
</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>
|
||||
<Link href="/kontakt" className="btn btn-outline">
|
||||
Pay-TV anfragen
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
@@ -255,31 +155,31 @@ export default function FernsehenPage() {
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Bereit für bestes Fernsehen?
|
||||
<div className="text-center text-[var(--color-background)]">
|
||||
<h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||
Interesse an unserem TV-Angebot?
|
||||
</h2>
|
||||
<p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Kontaktieren Sie uns für eine persönliche Beratung oder bestellen Sie
|
||||
direkt Ihren TV-Anschluss.
|
||||
<p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Wir beraten Sie gerne persönlich und finden die passende Lösung für Sie.
|
||||
</p>
|
||||
<div className="flex flex-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-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 bestellen
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]"
|
||||
href="tel:+43567612345"
|
||||
className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
|
||||
>
|
||||
+43 5672 5000
|
||||
<Phone size={18} />
|
||||
PLACEHOLDER: Telefon
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
+186
-303
@@ -1,324 +1,231 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import Image from "next/image";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { 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 = {
|
||||
title: "Internet",
|
||||
description:
|
||||
"Highspeed-Internet über Kabel und Glasfaser im Bezirk Reutte. Flexible Tarife für Privat- und Geschäftskunden ab 14,50 € im Monat. Ohne Servicepauschale.",
|
||||
openGraph: {
|
||||
title: "Internet | Telenet Systems GmbH",
|
||||
description:
|
||||
"Highspeed-Internet über Kabel und Glasfaser im Bezirk Reutte. Ab 14,50 € im Monat.",
|
||||
},
|
||||
"Highspeed-Internet über Kabel oder Glasfaser. Schnell, stabil, unlimitiert – für Privat- und Geschäftskunden in Tirol.",
|
||||
};
|
||||
|
||||
const kabelTarife = [
|
||||
{
|
||||
name: "telenet.hit",
|
||||
price: "14,50",
|
||||
download: "40",
|
||||
upload: "6",
|
||||
popular: false,
|
||||
preis: "€ 14,50",
|
||||
download: "40 Mbit/s",
|
||||
upload: "6 Mbit/s",
|
||||
features: ["Keine Servicepauschale", "Unlimitierte Daten"],
|
||||
},
|
||||
{
|
||||
name: "telenet.eco",
|
||||
price: "19,00",
|
||||
download: "60",
|
||||
upload: "8",
|
||||
popular: false,
|
||||
preis: "€ 19,00",
|
||||
download: "60 Mbit/s",
|
||||
upload: "8 Mbit/s",
|
||||
features: ["Keine Servicepauschale", "Unlimitierte Daten"],
|
||||
},
|
||||
{
|
||||
name: "telenet.fun",
|
||||
price: "29,00",
|
||||
download: "80",
|
||||
upload: "12",
|
||||
popular: true,
|
||||
preis: "€ 29,00",
|
||||
download: "80 Mbit/s",
|
||||
upload: "12 Mbit/s",
|
||||
features: ["Keine Servicepauschale", "Unlimitierte Daten"],
|
||||
},
|
||||
{
|
||||
name: "telenet.pro",
|
||||
price: "39,00",
|
||||
download: "100",
|
||||
upload: "14",
|
||||
popular: false,
|
||||
preis: "€ 39,00",
|
||||
download: "100 Mbit/s",
|
||||
upload: "14 Mbit/s",
|
||||
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Öffentliche IPv4"],
|
||||
highlight: true,
|
||||
},
|
||||
{
|
||||
name: "telenet.mega",
|
||||
price: "49,00",
|
||||
download: "180",
|
||||
upload: "22",
|
||||
popular: false,
|
||||
preis: "€ 49,00",
|
||||
download: "180 Mbit/s",
|
||||
upload: "22 Mbit/s",
|
||||
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Öffentliche IPv4"],
|
||||
},
|
||||
];
|
||||
|
||||
const glasfaserTarife = [
|
||||
{
|
||||
name: "telenet.eco",
|
||||
price: "23,00",
|
||||
download: "100",
|
||||
upload: "100",
|
||||
popular: false,
|
||||
preis: "€ 23,00",
|
||||
download: "100 Mbit/s",
|
||||
upload: "100 Mbit/s",
|
||||
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch"],
|
||||
},
|
||||
{
|
||||
name: "telenet.fun",
|
||||
price: "29,00",
|
||||
download: "200",
|
||||
upload: "200",
|
||||
popular: true,
|
||||
preis: "€ 29,00",
|
||||
download: "200 Mbit/s",
|
||||
upload: "200 Mbit/s",
|
||||
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch"],
|
||||
},
|
||||
{
|
||||
name: "telenet.pro",
|
||||
price: "39,00",
|
||||
download: "300",
|
||||
upload: "300",
|
||||
popular: false,
|
||||
preis: "€ 39,00",
|
||||
download: "300 Mbit/s",
|
||||
upload: "300 Mbit/s",
|
||||
features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch", "Öffentliche IPv4"],
|
||||
highlight: true,
|
||||
},
|
||||
{
|
||||
name: "telenet.mega",
|
||||
price: "49,00",
|
||||
download: "500",
|
||||
upload: "500",
|
||||
popular: false,
|
||||
preis: "€ 49,00",
|
||||
download: "500 Mbit/s",
|
||||
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() {
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div className="max-w-xl">
|
||||
<div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
|
||||
<Wifi size={32} className="text-[var(--color-background)]" />
|
||||
</div>
|
||||
<h1 className="mb-[var(--spacing-lg)]">
|
||||
Highspeed-Internet
|
||||
<span className="text-[var(--color-primary)]"> für Tirol</span>
|
||||
</h1>
|
||||
<p className="lead mb-[var(--spacing-2xl)]">
|
||||
Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
|
||||
Flexible Tarife ohne Servicepauschale – für Privat- und Geschäftskunden.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Image
|
||||
src="/images/hero/internet-header-431619ac.jpg"
|
||||
alt="Highspeed Internet"
|
||||
fill
|
||||
alt="Highspeed Internet Verbindung"
|
||||
width={800}
|
||||
height={600}
|
||||
className="rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]"
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Wifi className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Internet</span>
|
||||
</div>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Highspeed-Internet für Ihr Zuhause
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
|
||||
Flexible Tarife ohne Servicepauschale – ab 14,50 € im Monat.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
<a href="#tarife" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
Tarife vergleichen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Trust Bar */}
|
||||
<Section variant="sm" className="bg-[var(--color-muted)]">
|
||||
{/* Trust Elements */}
|
||||
<Section variant="sm" className="border-b border-[var(--color-border)]">
|
||||
<Container>
|
||||
<div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
|
||||
{benefits.map((benefit) => (
|
||||
<div
|
||||
key={benefit}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-5 w-5 text-[var(--color-success)]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{benefit}</span>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-xl)]">
|
||||
{["Keine Servicepauschale", "Unlimitierte Daten", "IPv6 inklusive", "Regionaler Support"].map((feature) => (
|
||||
<div key={feature} className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<Check size={18} className="text-[var(--color-primary)]" />
|
||||
<span className="text-sm font-medium">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Kabel-Tarife */}
|
||||
<Section id="tarife">
|
||||
{/* Kabel-Internet Section */}
|
||||
<Section id="kabel">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Zap className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Kabel-Internet</span>
|
||||
</div>
|
||||
<h2>Tarife für Kabel-Kunden</h2>
|
||||
<p className="text-muted mt-[var(--spacing-md)]">
|
||||
Tarife gültig ab 01.05.2024. Alle Preise inkl. MwSt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Tarife für Kabel-Kunden
|
||||
</span>
|
||||
</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>
|
||||
<h2 className="mt-[var(--spacing-sm)]">Kabel-Internet</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-[var(--spacing-lg)]">
|
||||
{kabelTarife.map((tarif) => (
|
||||
<tr
|
||||
<div
|
||||
key={tarif.name}
|
||||
className={`border-b border-[var(--color-border)] ${
|
||||
tarif.popular ? "bg-[var(--color-primary)]/5" : ""
|
||||
}`}
|
||||
className={`card text-center ${tarif.highlight ? "ring-2 ring-[var(--color-primary)]" : ""}`}
|
||||
>
|
||||
<td className="py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
<span className="font-medium">{tarif.name}</span>
|
||||
{tarif.popular && (
|
||||
<span className="ml-2 text-xs bg-[var(--color-primary)] text-[var(--color-background)] px-2 py-0.5 rounded-full">
|
||||
Beliebt
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.download} Mbit/s
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.upload} Mbit/s
|
||||
</td>
|
||||
<td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
€ {tarif.price}
|
||||
</td>
|
||||
<td className="py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-sm btn-outline"
|
||||
>
|
||||
Bestellen
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted mt-[var(--spacing-lg)]">
|
||||
Alle Tarife enthalten unlimitiertes Datenvolumen und IPv6-Adressen.
|
||||
Für die Tarife ab telenet.pro ist eine öffentliche IPv4-Adresse enthalten.
|
||||
Einmalige Installationskosten je nach Aufwand.
|
||||
</p>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* 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">
|
||||
{tarif.highlight && (
|
||||
<span className="inline-block bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-medium px-[var(--spacing-sm)] py-[var(--spacing-xs)] rounded-full mb-[var(--spacing-md)]">
|
||||
Empfohlen
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.download} Mbit/s
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.upload} Mbit/s
|
||||
</td>
|
||||
<td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
€ {tarif.price}
|
||||
</td>
|
||||
<td className="py-[var(--spacing-md)] px-[var(--spacing-lg)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-sm btn-outline"
|
||||
>
|
||||
Bestellen
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{tarif.name}</h3>
|
||||
<p className="text-3xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
|
||||
<p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
|
||||
<div className="text-sm mb-[var(--spacing-md)]">
|
||||
<p><strong>{tarif.download}</strong> Download</p>
|
||||
<p><strong>{tarif.upload}</strong> Upload</p>
|
||||
</div>
|
||||
<ul className="stack-xs text-left text-sm mb-[var(--spacing-lg)]">
|
||||
{tarif.features.map((feature) => (
|
||||
<li key={feature} className="flex items-center gap-[var(--spacing-xs)]">
|
||||
<Check size={14} className="text-[var(--color-primary)] shrink-0" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-outline btn-sm w-full">
|
||||
Anfragen
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-muted text-center mt-[var(--spacing-xl)]">
|
||||
Tarife gültig ab 01.05.2024. Für die Installation fallen einmalige Installationskosten an.
|
||||
</p>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<p className="text-sm text-muted mt-[var(--spacing-lg)]">
|
||||
Glasfaser bietet symmetrische Geschwindigkeiten – ideal für Homeoffice und Videokonferenzen.
|
||||
Alle Tarife ohne Servicepauschale mit unlimitiertem Datenvolumen.
|
||||
{/* Glasfaser-Internet Section */}
|
||||
<Section id="glasfaser" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Tarife für Glasfaser-Kunden
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)]">Glasfaser-Internet</h2>
|
||||
<p className="lead max-w-2xl mx-auto mt-[var(--spacing-md)]">
|
||||
Symmetrische Geschwindigkeiten – gleich schnell im Download und Upload.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-lg)] max-w-5xl mx-auto">
|
||||
{glasfaserTarife.map((tarif) => (
|
||||
<div
|
||||
key={tarif.name + "-glas"}
|
||||
className={`card text-center ${tarif.highlight ? "ring-2 ring-[var(--color-primary)]" : ""}`}
|
||||
>
|
||||
{tarif.highlight && (
|
||||
<span className="inline-block bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-medium px-[var(--spacing-sm)] py-[var(--spacing-xs)] rounded-full mb-[var(--spacing-md)]">
|
||||
Empfohlen
|
||||
</span>
|
||||
)}
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{tarif.name}</h3>
|
||||
<p className="text-3xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
|
||||
<p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
|
||||
<div className="text-sm mb-[var(--spacing-md)]">
|
||||
<p><strong>{tarif.download}</strong> Download</p>
|
||||
<p><strong>{tarif.upload}</strong> Upload</p>
|
||||
</div>
|
||||
<ul className="stack-xs text-left text-sm mb-[var(--spacing-lg)]">
|
||||
{tarif.features.map((feature) => (
|
||||
<li key={feature} className="flex items-center gap-[var(--spacing-xs)]">
|
||||
<Check size={14} className="text-[var(--color-primary)] shrink-0" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-outline btn-sm w-full">
|
||||
Anfragen
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-muted text-center mt-[var(--spacing-xl)]">
|
||||
Tarife gültig ab 01.04.2025. Für die Installation fallen einmalige Installationskosten an.
|
||||
</p>
|
||||
</Container>
|
||||
</Section>
|
||||
@@ -326,77 +233,53 @@ export default function InternetPage() {
|
||||
{/* Business Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div className="relative h-80 lg:h-full min-h-[320px] rounded-[var(--radius-lg)] overflow-hidden">
|
||||
<Image
|
||||
src="/images/misc/firmenkunden-96736712-5fa99704.jpg"
|
||||
alt="Geschäftskunde im Büro"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Building2 className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Business-Internet</span>
|
||||
</div>
|
||||
<h2>Maßgeschneiderte Lösungen für Ihr Unternehmen</h2>
|
||||
<p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
|
||||
Für Unternehmen erstellen wir individuelle Internet-Angebote
|
||||
inklusive passendem Service-Paket.
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Für Geschäftskunden
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||||
Business-Internet
|
||||
</h2>
|
||||
<p className="text-muted mb-[var(--spacing-xl)]">
|
||||
Gerne erstellen wir für Ihr Unternehmen ein maßgeschneidertes Business-Internet-Angebot
|
||||
inkl. passendem Service-Paket. Schicken Sie uns einfach Ihre Anfrage.
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Dedizierte Bandbreite</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Statische IP-Adressen</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Erweiterte SLA-Optionen</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Persönliche Betreuung</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Angebot anfragen
|
||||
Individuelle Lösung anfragen
|
||||
<ArrowRight size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-foreground)]">
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
<div className="text-center text-[var(--color-background)]">
|
||||
<h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||
Welcher Tarif passt zu Ihnen?
|
||||
</h2>
|
||||
<p className="text-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 className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Wir beraten Sie gerne und finden die beste Lösung für Ihre Anforderungen.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Beratung anfragen
|
||||
<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:+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)]"
|
||||
href="tel:+43567612345"
|
||||
className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
|
||||
>
|
||||
+43 5672 5000
|
||||
<Phone size={18} />
|
||||
PLACEHOLDER: Telefon
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
+8
-13
@@ -13,11 +13,11 @@ const inter = Inter({
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
default: "Telenet Systems GmbH | Telekommunikation & IT-Services in Tirol",
|
||||
template: "%s | Telenet Systems GmbH",
|
||||
default: "TeleNetSystems | Telekom & IT aus Tirol",
|
||||
template: "%s | TeleNetSystems",
|
||||
},
|
||||
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: [
|
||||
"Telekommunikation Tirol",
|
||||
"IT-Dienstleister Reutte",
|
||||
@@ -26,11 +26,7 @@ export const metadata: Metadata = {
|
||||
"TeleNetSystems",
|
||||
"regionaler IT-Service",
|
||||
"Kabel-TV Anbieter",
|
||||
"Telefonie Tarife Österreich",
|
||||
],
|
||||
authors: [{ name: "Telenet Systems GmbH" }],
|
||||
creator: "Telenet Systems GmbH",
|
||||
publisher: "Telenet Systems GmbH",
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
@@ -38,11 +34,10 @@ export const metadata: Metadata = {
|
||||
openGraph: {
|
||||
type: "website",
|
||||
locale: "de_AT",
|
||||
url: "https://www.tnr.at",
|
||||
siteName: "Telenet Systems GmbH",
|
||||
title: "Telenet Systems GmbH | Telekommunikation & IT-Services in Tirol",
|
||||
siteName: "TeleNetSystems",
|
||||
title: "TeleNetSystems | Telekom & IT aus Tirol",
|
||||
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 (
|
||||
<html lang="de-AT" className={inter.variable}>
|
||||
<body className="flex min-h-screen flex-col">
|
||||
<body>
|
||||
<Header />
|
||||
<main className="flex-1">{children}</main>
|
||||
{children}
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+141
-208
@@ -1,273 +1,213 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import {
|
||||
Tv,
|
||||
Wifi,
|
||||
Phone,
|
||||
Server,
|
||||
Network,
|
||||
Wrench,
|
||||
Monitor,
|
||||
MonitorSmartphone,
|
||||
Cable,
|
||||
Shield,
|
||||
Headphones,
|
||||
Building2,
|
||||
Users,
|
||||
CheckCircle,
|
||||
ArrowRight
|
||||
} from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Leistungen",
|
||||
description:
|
||||
"Umfassende Telekom- und IT-Services im Bezirk Reutte. Von Netzwerkplanung über IT-Installation bis Fernwartung – alles aus einer Hand.",
|
||||
openGraph: {
|
||||
title: "Leistungen | Telenet Systems GmbH",
|
||||
description:
|
||||
"Umfassende Telekom- und IT-Services im Bezirk Reutte. Netzwerkplanung, IT-Installation, Fernwartung.",
|
||||
},
|
||||
"Umfassende Telekom- und IT-Services für Tirol. Fernsehen, Internet, Telefonie, IT-Support und Netzwerkplanung.",
|
||||
};
|
||||
|
||||
const services = [
|
||||
const mainServices = [
|
||||
{
|
||||
icon: Network,
|
||||
title: "Netzwerkplanung",
|
||||
description:
|
||||
"Professionelle Planung und Konzeption von Netzwerkinfrastrukturen für Unternehmen jeder Größe.",
|
||||
title: "Fernsehen",
|
||||
description: "Über 200 Programme inkl. 40 HDTV-Sender für Privat- und Geschäftskunden.",
|
||||
icon: Tv,
|
||||
href: "/fernsehen",
|
||||
},
|
||||
{
|
||||
icon: Server,
|
||||
title: "Serverplanung",
|
||||
description:
|
||||
"Beratung und Planung von Serverlösungen – von der Hardware bis zur Software-Konfiguration.",
|
||||
title: "Internet",
|
||||
description: "Highspeed-Internet über Kabel oder Glasfaser – schnell, stabil, unlimitiert.",
|
||||
icon: Wifi,
|
||||
href: "/internet",
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "IT-Installation",
|
||||
description:
|
||||
"Fachgerechte Installation von IT-Komponenten, Netzwerken und Kommunikationssystemen.",
|
||||
},
|
||||
{
|
||||
icon: Monitor,
|
||||
title: "Reparaturen",
|
||||
description:
|
||||
"Schnelle und zuverlässige Reparatur von IT-Geräten und Netzwerkkomponenten.",
|
||||
},
|
||||
{
|
||||
icon: Headphones,
|
||||
title: "Fernwartung",
|
||||
description:
|
||||
"Remote-Support für schnelle Problemlösung ohne Wartezeit auf einen Vor-Ort-Termin.",
|
||||
},
|
||||
{
|
||||
icon: Cable,
|
||||
title: "Glasfaser-Ausbau",
|
||||
description:
|
||||
"Planung und Umsetzung von Glasfaser-Infrastruktur für zukunftssichere Anbindungen.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Qualitätssicherung",
|
||||
description:
|
||||
"Kontinuierliche Überwachung und Optimierung Ihrer IT-Systeme für maximale Verfügbarkeit.",
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: "Behördliche Unterstützung",
|
||||
description:
|
||||
"Technisch-behördliche Unterstützung bei Netzprojekten und Genehmigungsverfahren.",
|
||||
title: "Telefonie",
|
||||
description: "Flexible Festnetz-Tarife. Mit oder ohne Internet nutzbar.",
|
||||
icon: Phone,
|
||||
href: "/telefonie",
|
||||
},
|
||||
];
|
||||
|
||||
const targetGroups = [
|
||||
const itServices = [
|
||||
{
|
||||
icon: Users,
|
||||
title: "Privatkunden",
|
||||
description:
|
||||
"Zuverlässige TV-, Internet- und Telefonielösungen für Ihr Zuhause. Mit persönlichem Service vor Ort.",
|
||||
features: [
|
||||
"TV mit über 200 Programmen",
|
||||
"Highspeed-Internet bis 500 Mbit/s",
|
||||
"Günstige Telefonie-Tarife",
|
||||
"Persönliche Beratung",
|
||||
],
|
||||
cta: "Zu den Tarifen",
|
||||
href: "/internet",
|
||||
image: "/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg",
|
||||
title: "Netzwerk- & Serverplanung",
|
||||
description: "Professionelle Planung und Umsetzung Ihrer IT-Infrastruktur.",
|
||||
icon: Server,
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: "Geschäftskunden",
|
||||
description:
|
||||
"Professionelle IT- und Kommunikationslösungen für Ihr Unternehmen. Maßgeschneidert und zuverlässig.",
|
||||
features: [
|
||||
"Business-Internet & Telefonie",
|
||||
"Netzwerk- & Serverplanung",
|
||||
"IT-Installation & Support",
|
||||
"Fernwartung & Monitoring",
|
||||
],
|
||||
cta: "Kontakt aufnehmen",
|
||||
href: "/kontakt",
|
||||
image: "/images/misc/firmenkunden-96736712-5fa99704.jpg",
|
||||
title: "IT-Installation",
|
||||
description: "Fachgerechte Installation von Hard- und Software vor Ort.",
|
||||
icon: MonitorSmartphone,
|
||||
},
|
||||
{
|
||||
title: "Reparatur & Wartung",
|
||||
description: "Schnelle Hilfe bei Problemen, regelmäßige Wartung Ihrer Systeme.",
|
||||
icon: Wrench,
|
||||
},
|
||||
{
|
||||
title: "Fernwartung",
|
||||
description: "Schnelle Problembehebung aus der Ferne – ohne Wartezeit vor Ort.",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
title: "Glasfaser-Planung & -Ausbau",
|
||||
description: "Beratung und Umsetzung für Glasfaser-Anbindungen.",
|
||||
icon: Cable,
|
||||
},
|
||||
];
|
||||
|
||||
export default function LeistungenPage() {
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/services/tnr-leistungen-055053d5.jpg"
|
||||
alt="Telenet Systems Mitarbeiter"
|
||||
fill
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
|
||||
Unser Leistungsangebot
|
||||
</p>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Telekommunikation und IT-Services aus einer Hand
|
||||
<h1 className="mb-[var(--spacing-lg)]">
|
||||
Alle Leistungen
|
||||
<span className="text-[var(--color-primary)]"> im Überblick</span>
|
||||
</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 className="lead mb-[var(--spacing-2xl)]">
|
||||
Von Fernsehen über Internet bis zu IT-Services –
|
||||
wir bieten Ihnen umfassende Lösungen aus einer Hand.
|
||||
</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>
|
||||
<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 className="text-center mb-[var(--spacing-3xl)]">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Telekommunikation
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)]">Fernsehen, Internet & Telefonie</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-xl)]">
|
||||
{targetGroups.map((group) => (
|
||||
<div key={group.title} className="card overflow-hidden">
|
||||
<div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
|
||||
<Image
|
||||
src={group.image}
|
||||
alt={group.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
|
||||
<group.icon className="h-5 w-5" aria-hidden="true" />
|
||||
<h3 className="heading-3">{group.title}</h3>
|
||||
</div>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">{group.description}</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
{group.features.map((feature) => (
|
||||
<li
|
||||
key={feature}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm"
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
|
||||
{mainServices.map((service) => (
|
||||
<Link
|
||||
key={service.title}
|
||||
href={service.href}
|
||||
className="card group hover:shadow-lg transition-shadow hover:no-underline"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
|
||||
aria-hidden="true"
|
||||
<div className="w-12 h-12 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-lg)] group-hover:bg-[var(--color-primary)] transition-colors">
|
||||
<service.icon
|
||||
size={24}
|
||||
className="text-[var(--color-primary)] group-hover:text-[var(--color-background)] transition-colors"
|
||||
/>
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href={group.href} className="btn btn-primary">
|
||||
{group.cta}
|
||||
</Link>
|
||||
</div>
|
||||
<h3 className="heading-4 mb-[var(--spacing-sm)] text-[var(--color-foreground)]">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-muted mb-[var(--spacing-md)]">
|
||||
{service.description}
|
||||
</p>
|
||||
<span className="inline-flex items-center gap-[var(--spacing-xs)] text-[var(--color-primary)] font-medium">
|
||||
Mehr erfahren
|
||||
<ArrowRight size={16} />
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* IT-Services */}
|
||||
<Section id="services" className="bg-[var(--color-muted)]">
|
||||
{/* IT Services */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>IT-Services für Unternehmen</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Professionelle IT-Dienstleistungen von der Planung bis zur Wartung.
|
||||
Alles aus einer Hand, mit persönlichem Ansprechpartner vor Ort.
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
IT-Dienstleistungen
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)]">IT-Services & Support</h2>
|
||||
<p className="lead max-w-2xl mx-auto mt-[var(--spacing-md)]">
|
||||
Professionelle IT-Lösungen für Unternehmen und Privatkunden.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-lg)]">
|
||||
{services.map((service) => (
|
||||
<div key={service.title} className="card text-center">
|
||||
<div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] mb-[var(--spacing-md)]">
|
||||
<service.icon className="h-6 w-6" aria-hidden="true" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--spacing-lg)]">
|
||||
{itServices.map((service) => (
|
||||
<div key={service.title} className="card">
|
||||
<div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-md)]">
|
||||
<service.icon size={20} className="text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{service.title}</h3>
|
||||
<p className="text-sm text-muted">{service.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center mt-[var(--spacing-2xl)]">
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
IT-Beratung anfragen
|
||||
<ArrowRight size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Glasfaser Section */}
|
||||
{/* Business Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div className="relative h-80 lg:h-full min-h-[320px] rounded-[var(--radius-lg)] overflow-hidden">
|
||||
<Image
|
||||
src="/images/services/lwl1-40360e27.jpg"
|
||||
alt="Glasfaser-Installation"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid 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)]">
|
||||
<Cable className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Glasfaser</span>
|
||||
</div>
|
||||
<h2>Zukunftssichere Glasfaser-Infrastruktur</h2>
|
||||
<p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
|
||||
Wir planen und bauen Glasfasernetze für Gemeinden und Unternehmen.
|
||||
Profitieren Sie von unserer langjährigen Erfahrung.
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Für Unternehmen
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||||
Maßgeschneiderte Lösungen
|
||||
</h2>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
Sie benötigen eine individuelle Lösung für Ihr Unternehmen?
|
||||
Wir analysieren Ihre Anforderungen und erstellen ein maßgeschneidertes Angebot –
|
||||
von der Telekommunikation bis zur kompletten IT-Infrastruktur.
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Glasfaser-Planung & Beratung</span>
|
||||
<ul className="stack-sm mb-[var(--spacing-xl)]">
|
||||
<li className="flex items-start gap-[var(--spacing-sm)]">
|
||||
<span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">1</span>
|
||||
<span>Bedarfsanalyse vor Ort</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Professioneller Netzausbau</span>
|
||||
<li className="flex items-start gap-[var(--spacing-sm)]">
|
||||
<span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">2</span>
|
||||
<span>Individuelles Angebot</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Behördliche Unterstützung</span>
|
||||
<li className="flex items-start gap-[var(--spacing-sm)]">
|
||||
<span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">3</span>
|
||||
<span>Professionelle Umsetzung</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Qualitätssicherung</span>
|
||||
<li className="flex items-start gap-[var(--spacing-sm)]">
|
||||
<span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">4</span>
|
||||
<span>Laufender Support</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Projekt anfragen
|
||||
Beratungstermin vereinbaren
|
||||
</Link>
|
||||
</div>
|
||||
<div className="bg-[var(--color-muted)] rounded-[var(--radius-lg)] p-[var(--spacing-2xl)] text-center">
|
||||
<p className="text-6xl font-bold text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
50
|
||||
</p>
|
||||
<p className="text-xl font-semibold mb-[var(--spacing-sm)]">Jahre Erfahrung</p>
|
||||
<p className="text-muted">
|
||||
Seit 1976 sind wir Ihr zuverlässiger Partner für Telekommunikation und IT in Tirol.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
@@ -275,30 +215,23 @@ export default function LeistungenPage() {
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
<div className="text-center text-[var(--color-background)]">
|
||||
<h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||
Haben Sie Fragen zu unseren Leistungen?
|
||||
</h2>
|
||||
<p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Wir beraten Sie gerne persönlich und finden die optimale Lösung für Ihre Anforderungen.
|
||||
<p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Kontaktieren Sie uns für eine unverbindliche Beratung.
|
||||
Wir finden gemeinsam die passende Lösung.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90"
|
||||
className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
|
||||
>
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]"
|
||||
>
|
||||
+43 5672 5000
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
+125
-198
@@ -1,297 +1,224 @@
|
||||
import Image from "next/image";
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import Image from "next/image";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import {
|
||||
Tv,
|
||||
Wifi,
|
||||
Phone,
|
||||
MapPin,
|
||||
Clock,
|
||||
Users,
|
||||
Shield,
|
||||
Clock,
|
||||
MapPin,
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
Award,
|
||||
ArrowRight
|
||||
} 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 = [
|
||||
{
|
||||
icon: Tv,
|
||||
title: "Fernsehen",
|
||||
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",
|
||||
image: "/images/misc/tv-privat-76f60c7a-88eafcfb.jpg",
|
||||
price: "ab € 16,47/Monat",
|
||||
},
|
||||
{
|
||||
icon: Wifi,
|
||||
title: "Internet",
|
||||
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",
|
||||
image: "/images/misc/internet-7b594a2d-793cefee.jpg",
|
||||
price: "ab € 14,50/Monat",
|
||||
},
|
||||
{
|
||||
icon: Phone,
|
||||
title: "Telefonie",
|
||||
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",
|
||||
image: "/images/misc/telefon-fa5e8c21-271d2135.jpg",
|
||||
price: "ab € 0,00/Monat",
|
||||
},
|
||||
];
|
||||
|
||||
const usps = [
|
||||
{
|
||||
icon: MapPin,
|
||||
title: "Regionale Nähe",
|
||||
title: "Regional & Persönlich",
|
||||
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,
|
||||
title: "Seit 1976",
|
||||
title: "Schnelle Hilfe",
|
||||
description:
|
||||
"Fast 50 Jahre Erfahrung in der Telekommunikation. Verlässlichkeit, der Sie vertrauen können.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Voller Service",
|
||||
description:
|
||||
"Von TV über Internet bis IT-Support – alles aus einer Hand. Keine Servicepauschale bei unseren Tarifen.",
|
||||
"Bei Störungen reagieren wir schnell. Unser Support ist für Sie da – ohne lange Warteschleifen.",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Schneller Support",
|
||||
title: "Seit 1976",
|
||||
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 = [
|
||||
"Keine versteckten Kosten",
|
||||
"Unlimitiertes Datenvolumen",
|
||||
"Persönlicher Ansprechpartner",
|
||||
"Regionaler Kundendienst",
|
||||
const trustElements = [
|
||||
{ icon: Award, text: "Zertifizierter Partner" },
|
||||
{ icon: Users, text: "Über 5.000 zufriedene Kunden" },
|
||||
{ icon: Clock, text: "Fast 50 Jahre Erfahrung" },
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/misc/firma1-8a863d8b.jpg"
|
||||
alt="Telenet Systems Firmengebäude in Reutte"
|
||||
fill
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="max-w-3xl">
|
||||
<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>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Telekommunikation und IT-Services aus einer Hand
|
||||
<h1 className="mb-[var(--spacing-lg)]">
|
||||
Zuverlässige Technik.
|
||||
<br />
|
||||
<span className="text-[var(--color-primary)]">Persönlicher Service.</span>
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Seit 1976 versorgen wir den Bezirk Reutte mit zuverlässigem Fernsehen,
|
||||
schnellem Internet und flexibler Telefonie. Persönliche Beratung,
|
||||
ehrlicher Service – ohne komplizierte Prozesse.
|
||||
<p className="lead mb-[var(--spacing-2xl)] max-w-2xl">
|
||||
Fernsehen, Internet und Telefonie aus einer Hand –
|
||||
direkt aus Reutte für den Bezirk und die Region.
|
||||
Mit persönlicher Beratung und schnellem Support.
|
||||
</p>
|
||||
<div className="flex flex-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">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
<Link href="/leistungen" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
<Link href="/leistungen" className="btn btn-outline btn-lg">
|
||||
Unsere Leistungen
|
||||
<ArrowRight size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Services Section */}
|
||||
<Section id="leistungen">
|
||||
<Container>
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<h2 className="mb-[var(--spacing-md)]">Unsere Leistungen</h2>
|
||||
<p className="lead max-w-2xl mx-auto">
|
||||
Von Fernsehen über Internet bis zur Telefonie –
|
||||
wir bieten Ihnen alles aus einer Hand.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
|
||||
{services.map((service) => (
|
||||
<article key={service.title} className="card group">
|
||||
<div className="w-12 h-12 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-lg)]">
|
||||
<service.icon size={24} className="text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<h3 className="heading-4 mb-[var(--spacing-sm)]">{service.title}</h3>
|
||||
<p className="text-muted mb-[var(--spacing-md)]">
|
||||
{service.description}
|
||||
</p>
|
||||
<p className="font-semibold text-[var(--color-primary)] mb-[var(--spacing-lg)]">
|
||||
{service.price}
|
||||
</p>
|
||||
<Link
|
||||
href={service.href}
|
||||
className="btn btn-ghost justify-start p-0 hover:text-[var(--color-primary)]"
|
||||
>
|
||||
Mehr erfahren
|
||||
<ArrowRight size={16} />
|
||||
</Link>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* USP Section */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>Warum Telenet Systems?</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Als regionaler Anbieter verbinden wir modernste Technik mit persönlichem Service.
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<h2 className="mb-[var(--spacing-md)]">Warum TeleNetSystems?</h2>
|
||||
<p className="lead max-w-2xl mx-auto">
|
||||
Wir sind kein anonymer Großkonzern – sondern Ihr Partner vor Ort.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
|
||||
{usps.map((usp) => (
|
||||
<div key={usp.title} className="text-center">
|
||||
<div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] mb-[var(--spacing-md)]">
|
||||
<usp.icon className="h-6 w-6" aria-hidden="true" />
|
||||
<div className="w-14 h-14 rounded-full bg-[var(--color-primary)] flex items-center justify-center mx-auto mb-[var(--spacing-md)]">
|
||||
<usp.icon size={24} className="text-[var(--color-background)]" />
|
||||
</div>
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3>
|
||||
<p className="text-muted">{usp.description}</p>
|
||||
<p className="text-sm text-muted">{usp.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</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 */}
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<Section variant="sm">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div>
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Transparent und fair – ohne versteckte Kosten
|
||||
</h2>
|
||||
<p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Bei uns wissen Sie immer, woran Sie sind. Keine Überraschungen auf der Rechnung,
|
||||
keine komplizierte Tarifstruktur. Einfach, ehrlich, regional.
|
||||
</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)]"
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-2xl)] items-center">
|
||||
{trustElements.map((item) => (
|
||||
<div
|
||||
key={item.text}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-muted-foreground)]"
|
||||
>
|
||||
<CheckCircle className="h-5 w-5 flex-shrink-0" aria-hidden="true" />
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
<item.icon size={20} className="text-[var(--color-primary)]" />
|
||||
<span className="text-sm font-medium">{item.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</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>
|
||||
<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>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-foreground)]">
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Haben Sie Fragen? Wir beraten Sie gerne.
|
||||
<div className="text-center text-[var(--color-background)]">
|
||||
<h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||
Bereit für zuverlässige Technik?
|
||||
</h2>
|
||||
<p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Unser Team in Reutte steht Ihnen persönlich zur Verfügung.
|
||||
Rufen Sie uns an oder senden Sie uns eine Nachricht.
|
||||
<p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Kontaktieren Sie uns für eine unverbindliche Beratung.
|
||||
Wir finden die passende Lösung für Sie.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Kontakt aufnehmen
|
||||
<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:+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
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
+92
-227
@@ -1,196 +1,100 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Phone, Building2, CheckCircle, Users } from "lucide-react";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Phone as PhoneIcon, Check, ArrowRight } from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Telefonie",
|
||||
description:
|
||||
"Günstige Telefonie-Tarife fürs Festnetz im Bezirk Reutte. Für Privat- und Geschäftskunden – ab 0 € mit Telenet-Internet.",
|
||||
openGraph: {
|
||||
title: "Telefonie | Telenet Systems GmbH",
|
||||
description:
|
||||
"Günstige Telefonie-Tarife fürs Festnetz im Bezirk Reutte. Ab 0 € mit Telenet-Internet.",
|
||||
},
|
||||
"Flexible Telefonie-Tarife für Festnetz. Mit oder ohne Internet nutzbar – für Privat- und Geschäftskunden in Tirol.",
|
||||
};
|
||||
|
||||
const telefonieTarife = [
|
||||
{
|
||||
name: "telenet.zero",
|
||||
subtitle: "ohne Internet",
|
||||
price: "5,00",
|
||||
minutenpreis: "2,4",
|
||||
description: "Festnetz-Telefonie ohne Internet-Anschluss von Telenet.",
|
||||
features: [
|
||||
"Festnetzanschluss",
|
||||
"Günstiger Minutenpreis",
|
||||
"Keine Grundgebühr bei Internet",
|
||||
],
|
||||
popular: false,
|
||||
beschreibung: "Ohne Internet",
|
||||
preis: "€ 5,00",
|
||||
kosten: "Festnetz AT: ab 2,4 Cent/Min.",
|
||||
features: ["Nur Telefonie", "Günstige Minutenpreise"],
|
||||
},
|
||||
{
|
||||
name: "telenet.zero",
|
||||
subtitle: "mit Internet von Telenet",
|
||||
price: "0,00",
|
||||
minutenpreis: "2,4",
|
||||
description: "Festnetz-Telefonie ohne Grundgebühr für Telenet-Internet-Kunden.",
|
||||
features: [
|
||||
"Keine monatliche Grundgebühr",
|
||||
"Günstiger Minutenpreis",
|
||||
"Perfekt für Telenet-Kunden",
|
||||
],
|
||||
popular: true,
|
||||
beschreibung: "Mit Internet von Telenet",
|
||||
preis: "€ 0,00",
|
||||
kosten: "Festnetz AT: ab 2,4 Cent/Min.",
|
||||
features: ["Kostenlos zu Ihrem Internet", "Günstige Minutenpreise"],
|
||||
highlight: true,
|
||||
},
|
||||
{
|
||||
name: "telenet.business",
|
||||
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,
|
||||
beschreibung: "Für Geschäftskunden",
|
||||
preis: "€ 8,90",
|
||||
kosten: "Festnetz AT: ab 3,24 Cent/Min.",
|
||||
features: ["Business-Funktionen", "Professioneller Support"],
|
||||
},
|
||||
];
|
||||
|
||||
const benefits = [
|
||||
"Günstige Minutenpreise",
|
||||
"Keine versteckten Kosten",
|
||||
"Einfache Einrichtung",
|
||||
"Persönlicher Support",
|
||||
];
|
||||
|
||||
export default function TelefoniePage() {
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/misc/telefonie1-ad7595f9.jpg"
|
||||
alt="Telefonie"
|
||||
fill
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Phone className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Telefonie</span>
|
||||
<div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
|
||||
<PhoneIcon size={32} className="text-[var(--color-background)]" />
|
||||
</div>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Flexible Telefonie-Tarife für jeden Bedarf
|
||||
<h1 className="mb-[var(--spacing-lg)]">
|
||||
Telefonie
|
||||
<span className="text-[var(--color-primary)]"> ohne Kompromisse</span>
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Günstig ins österreichische Festnetz telefonieren.
|
||||
Mit Telenet-Internet sogar ohne monatliche Grundgebühr.
|
||||
<p className="lead mb-[var(--spacing-2xl)]">
|
||||
Flexible Telefonie-Tarife für Ihr Festnetz.
|
||||
Mit oder ohne Internet nutzbar – Sie haben die Wahl.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt bestellen
|
||||
Jetzt beraten lassen
|
||||
</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 */}
|
||||
<Section variant="sm" className="bg-[var(--color-muted)]">
|
||||
{/* Tarife Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
|
||||
{benefits.map((benefit) => (
|
||||
<div
|
||||
key={benefit}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-5 w-5 text-[var(--color-success)]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{benefit}</span>
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||||
Kabel-Telefonie-Tarife
|
||||
</span>
|
||||
<h2 className="mt-[var(--spacing-sm)]">Unsere Tarife</h2>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Tarife */}
|
||||
<Section id="tarife">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>Unsere Telefonie-Tarife</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Einfache Preisstruktur ohne versteckte Kosten.
|
||||
Wählen Sie den passenden Tarif für Ihre Bedürfnisse.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)] max-w-4xl mx-auto">
|
||||
{telefonieTarife.map((tarif, index) => (
|
||||
<div
|
||||
key={`${tarif.name}-${index}`}
|
||||
className={`card relative ${
|
||||
tarif.popular
|
||||
? "border-[var(--color-primary)] border-2"
|
||||
: ""
|
||||
}`}
|
||||
className={`card text-center ${tarif.highlight ? "ring-2 ring-[var(--color-primary)]" : ""}`}
|
||||
>
|
||||
{tarif.popular && (
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-semibold px-3 py-1 rounded-full">
|
||||
{tarif.highlight && (
|
||||
<span className="inline-block bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-medium px-[var(--spacing-sm)] py-[var(--spacing-xs)] rounded-full mb-[var(--spacing-md)]">
|
||||
Empfohlen
|
||||
</div>
|
||||
</span>
|
||||
)}
|
||||
<div className="text-center">
|
||||
<h3 className="heading-4 text-[var(--color-primary)]">
|
||||
{tarif.name}
|
||||
</h3>
|
||||
<p className="text-sm text-muted mb-[var(--spacing-md)]">
|
||||
{tarif.subtitle}
|
||||
</p>
|
||||
<div className="mb-[var(--spacing-md)]">
|
||||
<span className="heading-1">€ {tarif.price}</span>
|
||||
<span className="text-muted"> / Monat</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted mb-[var(--spacing-sm)]">
|
||||
Festnetz AT: ab {tarif.minutenpreis} Cent / Minute
|
||||
</p>
|
||||
</div>
|
||||
<hr className="border-[var(--color-border)] my-[var(--spacing-lg)]" />
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
{tarif.description}
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
<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)] text-sm"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{feature}</span>
|
||||
<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 w-full ${
|
||||
tarif.popular ? "btn-primary" : "btn-outline"
|
||||
}`}
|
||||
>
|
||||
Jetzt bestellen
|
||||
<Link href="/kontakt" className="btn btn-outline w-full">
|
||||
Anfragen
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
@@ -198,105 +102,66 @@ export default function TelefoniePage() {
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Kombinieren Section */}
|
||||
{/* Info 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.
|
||||
<Container variant="narrow">
|
||||
<div className="text-center">
|
||||
<h2 className="mb-[var(--spacing-lg)]">So funktioniert es</h2>
|
||||
<div className="stack-lg text-left">
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie mit Telenet-Internet</h3>
|
||||
<p className="text-muted">
|
||||
Wenn Sie bereits Internet von TeleNetSystems nutzen, können Sie unsere Telefonie
|
||||
kostenlos hinzubuchen. Sie zahlen nur die tatsächlich geführten Gespräche nach Minutenpreis.
|
||||
</p>
|
||||
</div>
|
||||
<div className="card 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.
|
||||
<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>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Beratung anfragen
|
||||
</Link>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">Business-Telefonie</h3>
|
||||
<p className="text-muted">
|
||||
Für Geschäftskunden bieten wir professionelle Telefonie-Lösungen mit erweiterten Funktionen
|
||||
und dediziertem Support.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-foreground)]">
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
<div className="text-center text-[var(--color-background)]">
|
||||
<h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||
Fragen zu unseren Telefonie-Tarifen?
|
||||
</h2>
|
||||
<p className="text-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 className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Wir beraten Sie gerne und finden die passende Lösung für Ihre Anforderungen.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Kontakt aufnehmen
|
||||
<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:+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)]"
|
||||
href="tel:+43567612345"
|
||||
className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
|
||||
>
|
||||
+43 5672 5000
|
||||
<PhoneIcon size={18} />
|
||||
PLACEHOLDER: Telefon
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 140 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 253 KiB After Width: | Height: | Size: 253 KiB |
|
Before Width: | Height: | Size: 227 KiB After Width: | Height: | Size: 227 KiB |
@@ -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"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 104 KiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 133 KiB After Width: | Height: | Size: 133 KiB |
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 113 KiB After Width: | Height: | Size: 113 KiB |
|
Before Width: | Height: | Size: 157 KiB After Width: | Height: | Size: 157 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 123 KiB After Width: | Height: | Size: 123 KiB |
|
Before Width: | Height: | Size: 124 KiB After Width: | Height: | Size: 124 KiB |
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 124 KiB After Width: | Height: | Size: 124 KiB |
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 144 KiB After Width: | Height: | Size: 144 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 239 KiB After Width: | Height: | Size: 239 KiB |
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 93 KiB |
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 127 KiB |
|
Before Width: | Height: | Size: 320 KiB After Width: | Height: | Size: 320 KiB |
|
Before Width: | Height: | Size: 683 KiB After Width: | Height: | Size: 683 KiB |
|
Before Width: | Height: | Size: 274 KiB After Width: | Height: | Size: 274 KiB |
@@ -9,18 +9,18 @@ interface ContainerProps {
|
||||
variant?: ContainerVariant;
|
||||
}
|
||||
|
||||
const variantClasses: Record<ContainerVariant, string> = {
|
||||
default: "container",
|
||||
narrow: "container container--narrow",
|
||||
wide: "container container--wide",
|
||||
};
|
||||
|
||||
export function Container({
|
||||
children,
|
||||
className = "",
|
||||
as: Tag = "div",
|
||||
variant = "default",
|
||||
}: ContainerProps) {
|
||||
const variantClasses: Record<ContainerVariant, string> = {
|
||||
default: "container",
|
||||
narrow: "container container--narrow",
|
||||
wide: "container container--wide",
|
||||
};
|
||||
|
||||
return (
|
||||
<Tag className={`${variantClasses[variant]} ${className}`.trim()}>
|
||||
{children}
|
||||
|
||||
@@ -1,19 +1,17 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { MapPin, Phone, Mail, Clock } from "lucide-react";
|
||||
import { Phone, Mail, MapPin } from "lucide-react";
|
||||
|
||||
const navigation = {
|
||||
leistungen: [
|
||||
const footerLinks = {
|
||||
services: [
|
||||
{ name: "Fernsehen", href: "/fernsehen" },
|
||||
{ name: "Internet", href: "/internet" },
|
||||
{ name: "Telefonie", href: "/telefonie" },
|
||||
{ name: "IT-Services", href: "/leistungen" },
|
||||
{ name: "Leistungen", href: "/leistungen" },
|
||||
],
|
||||
unternehmen: [
|
||||
company: [
|
||||
{ name: "Über uns", href: "/ueber-uns" },
|
||||
{ name: "Kontakt", href: "/kontakt" },
|
||||
],
|
||||
rechtliches: [
|
||||
{ name: "Impressum", href: "/impressum" },
|
||||
{ name: "Datenschutz", href: "/datenschutz" },
|
||||
],
|
||||
@@ -26,112 +24,105 @@ export function Footer() {
|
||||
<footer className="bg-[var(--color-foreground)] text-[var(--color-background)]">
|
||||
<div className="container">
|
||||
{/* Main Footer Content */}
|
||||
<div className="py-[var(--spacing-4xl)]">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-2xl)]">
|
||||
<div className="py-[var(--spacing-3xl)] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-2xl)]">
|
||||
{/* Company Info */}
|
||||
<div className="lg:col-span-1">
|
||||
<Image
|
||||
src="/images/brand/logo-weiss-ffa4cbf6.png"
|
||||
alt="Telenet Systems GmbH"
|
||||
width={160}
|
||||
height={51}
|
||||
className="h-10 w-auto mb-[var(--spacing-lg)]"
|
||||
/>
|
||||
<p className="text-sm text-gray-300 mb-[var(--spacing-lg)]">
|
||||
Ihr regionaler Partner für Telekommunikation und IT-Services in Tirol. Seit 1976 verbinden wir Menschen und Technik.
|
||||
</p>
|
||||
<div className="space-y-[var(--spacing-sm)]">
|
||||
<div className="flex items-start gap-[var(--spacing-sm)] text-sm text-gray-300">
|
||||
<MapPin className="h-4 w-4 mt-0.5 flex-shrink-0" aria-hidden="true" />
|
||||
<span>Reutte, Tirol, Österreich</span>
|
||||
</div>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm text-gray-300 hover:text-white transition-colors"
|
||||
<div className="stack-md">
|
||||
<Link
|
||||
href="/"
|
||||
className="hover:no-underline"
|
||||
>
|
||||
<Phone className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
|
||||
<span>+43 5672 5000</span>
|
||||
<Image
|
||||
src="/images/logo/logo-weiss-ffa4cbf6.png"
|
||||
alt="TeleNetSystems Logo"
|
||||
width={160}
|
||||
height={36}
|
||||
className="h-8 w-auto"
|
||||
/>
|
||||
</Link>
|
||||
<p className="text-sm opacity-80">
|
||||
Ihr regionaler Telekom- und IT-Partner in Tirol.
|
||||
Zuverlässige Technik, ehrliche Beratung und persönlicher Service seit 1976.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Services Links */}
|
||||
<div>
|
||||
<h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||
Leistungen
|
||||
</h3>
|
||||
<ul className="stack-sm">
|
||||
{footerLinks.services.map((link) => (
|
||||
<li key={link.name}>
|
||||
<Link
|
||||
href={link.href}
|
||||
className="text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Company Links */}
|
||||
<div>
|
||||
<h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||
Unternehmen
|
||||
</h3>
|
||||
<ul className="stack-sm">
|
||||
{footerLinks.company.map((link) => (
|
||||
<li key={link.name}>
|
||||
<Link
|
||||
href={link.href}
|
||||
className="text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div>
|
||||
<h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||||
Kontakt
|
||||
</h3>
|
||||
<ul className="stack-md">
|
||||
<li className="flex items-start gap-[var(--spacing-sm)]">
|
||||
<MapPin size={18} className="shrink-0 mt-0.5 text-[var(--color-primary)]" />
|
||||
<span className="text-sm opacity-80">
|
||||
PLACEHOLDER: Adresse<br />
|
||||
6600 Reutte, Tirol
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="tel:+43567612345"
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
|
||||
>
|
||||
<Phone size={18} className="shrink-0 text-[var(--color-primary)]" />
|
||||
PLACEHOLDER: Telefon
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="mailto:info@tnr.at"
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm text-gray-300 hover:text-white transition-colors"
|
||||
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 className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
|
||||
<span>info@tnr.at</span>
|
||||
<Mail size={18} className="shrink-0 text-[var(--color-primary)]" />
|
||||
PLACEHOLDER: E-Mail
|
||||
</a>
|
||||
<div className="flex items-start gap-[var(--spacing-sm)] text-sm text-gray-300">
|
||||
<Clock className="h-4 w-4 mt-0.5 flex-shrink-0" aria-hidden="true" />
|
||||
<span>Mo–Fr: 8:00–12:00 & 13:00–17:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Leistungen */}
|
||||
<div>
|
||||
<h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Leistungen</h3>
|
||||
<ul className="space-y-[var(--spacing-sm)]">
|
||||
{navigation.leistungen.map((item) => (
|
||||
<li key={item.name}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-sm text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Unternehmen */}
|
||||
<div>
|
||||
<h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Unternehmen</h3>
|
||||
<ul className="space-y-[var(--spacing-sm)]">
|
||||
{navigation.unternehmen.map((item) => (
|
||||
<li key={item.name}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-sm text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Rechtliches & CTA */}
|
||||
<div>
|
||||
<h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Rechtliches</h3>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
{navigation.rechtliches.map((item) => (
|
||||
<li key={item.name}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-sm text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Kontakt aufnehmen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="border-t border-gray-700 py-[var(--spacing-lg)]">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-[var(--spacing-sm)]">
|
||||
<p className="text-sm text-gray-400">
|
||||
<div className="py-[var(--spacing-lg)] border-t border-[var(--color-background)]/10">
|
||||
<p className="text-sm opacity-60 text-center">
|
||||
© {currentYear} Telenet Systems GmbH. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
Ihr Partner für Telekommunikation seit 1976
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import { Menu, X, Phone } from "lucide-react";
|
||||
|
||||
const navigation = [
|
||||
{ name: "Startseite", href: "/" },
|
||||
{ name: "Fernsehen", href: "/fernsehen" },
|
||||
{ name: "Internet", href: "/internet" },
|
||||
{ name: "Telefonie", href: "/telefonie" },
|
||||
{ name: "Leistungen", href: "/leistungen" },
|
||||
{ name: "Über uns", href: "/ueber-uns" },
|
||||
{ name: "Kontakt", href: "/kontakt" },
|
||||
];
|
||||
|
||||
export function Header() {
|
||||
@@ -21,41 +19,43 @@ export function Header() {
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-[var(--color-background)] border-b border-[var(--color-border)]">
|
||||
<div className="container">
|
||||
<nav className="flex items-center justify-between py-[var(--spacing-md)]">
|
||||
<nav className="flex items-center justify-between h-16 md:h-20">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex-shrink-0">
|
||||
<Link
|
||||
href="/"
|
||||
className="hover:no-underline"
|
||||
>
|
||||
<Image
|
||||
src="/images/brand/logo-systems-9fd0db14.png"
|
||||
alt="Telenet Systems GmbH"
|
||||
src="/images/logo/logo-systems-9fd0db14.png"
|
||||
alt="TeleNetSystems Logo"
|
||||
width={180}
|
||||
height={57}
|
||||
height={40}
|
||||
priority
|
||||
className="h-10 w-auto md:h-12"
|
||||
className="h-8 md:h-10 w-auto"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* 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) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
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}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA & Phone (Desktop) */}
|
||||
<div className="hidden lg:flex lg:items-center lg:gap-[var(--spacing-md)]">
|
||||
{/* Desktop CTAs */}
|
||||
<div className="hidden lg:flex items-center gap-[var(--spacing-md)]">
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="flex items-center gap-[var(--spacing-xs)] text-sm font-medium text-[var(--color-muted-foreground)] hover:text-[var(--color-primary)] transition-colors"
|
||||
aria-label="Anrufen: +43 5672 5000"
|
||||
href="tel:+43567612345"
|
||||
className="flex items-center gap-[var(--spacing-xs)] text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:no-underline transition-colors"
|
||||
>
|
||||
<Phone className="h-4 w-4" aria-hidden="true" />
|
||||
<span>+43 5672 5000</span>
|
||||
<Phone size={18} />
|
||||
<span className="text-sm">PLACEHOLDER: Telefon</span>
|
||||
</a>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Jetzt beraten lassen
|
||||
@@ -65,50 +65,39 @@ export function Header() {
|
||||
{/* Mobile Menu Button */}
|
||||
<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)}
|
||||
aria-expanded={mobileMenuOpen}
|
||||
aria-label={mobileMenuOpen ? "Menü schließen" : "Menü öffnen"}
|
||||
>
|
||||
{mobileMenuOpen ? (
|
||||
<X className="h-6 w-6" aria-hidden="true" />
|
||||
) : (
|
||||
<Menu className="h-6 w-6" aria-hidden="true" />
|
||||
)}
|
||||
{mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="lg:hidden border-t border-[var(--color-border)] py-[var(--spacing-md)]">
|
||||
<div className="flex flex-col gap-[var(--spacing-sm)]">
|
||||
<div className="lg:hidden border-t border-[var(--color-border)] pb-[var(--spacing-lg)]">
|
||||
<div className="stack-sm pt-[var(--spacing-md)]">
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="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)}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
<hr className="border-[var(--color-border)] my-[var(--spacing-sm)]" />
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="flex items-center gap-[var(--spacing-sm)] py-[var(--spacing-sm)] text-base font-medium text-[var(--color-muted-foreground)]"
|
||||
>
|
||||
<Phone className="h-5 w-5" aria-hidden="true" />
|
||||
<span>+43 5672 5000</span>
|
||||
</a>
|
||||
<div className="pt-[var(--spacing-md)] border-t border-[var(--color-border)] mt-[var(--spacing-md)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-primary mt-[var(--spacing-sm)]"
|
||||
className="btn btn-primary w-full"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { ElementType, ReactNode } from "react";
|
||||
|
||||
type SectionVariant = "default" | "sm" | "lg" | "hero" | "flush";
|
||||
type SectionVariant = "default" | "hero" | "sm" | "lg" | "flush";
|
||||
|
||||
interface SectionProps {
|
||||
children: ReactNode;
|
||||
@@ -10,14 +10,6 @@ interface SectionProps {
|
||||
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({
|
||||
children,
|
||||
className = "",
|
||||
@@ -25,6 +17,14 @@ export function Section({
|
||||
variant = "default",
|
||||
id,
|
||||
}: 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 (
|
||||
<Tag id={id} className={`${variantClasses[variant]} ${className}`.trim()}>
|
||||
{children}
|
||||
|
||||
@@ -42,7 +42,7 @@ Die Website sollte in einem freundlichen, sachlichen und beratenden Ton kommuniz
|
||||
|
||||
### ✅ Was bei dieser Website BESONDERS WICHTIG ist:
|
||||
|
||||
Die Website soll sofort Vertrauen, Kompetenz und regionale Nähe vermitteln. Besucher sollen das Gefühl haben, bei einem verlässlichen Anbieter aus ihrer Region zu sein, der moderne Technik liefert, aber verständlich kommuniziert. Wichtig ist, dass die Inhalte klar strukturiert und leicht verständlich sind – auch für Menschen ohne technisches Vorwissen. Internet, Fernsehen und IT-Services sollen nicht kompliziert wirken, sondern als stabile, alltagstaugliche Lösungen. Die Seite soll zeigen, dass hinter dem Unternehmen echte Menschen mit Erfahrung stehen, die erreichbar sind und im Problemfall schnell helfen. Serviceorientierung und persönliche Betreuung sollen deutlich spürbar sein. Besonders wichtig ist außerdem: Übersichtlichkeit: Besucher sollen in wenigen Sekunden verstehen, welche Leistungen es gibt und für wen sie gedacht sind. Schnelle Ladezeit: Viele Nutzer kommen aus Regionen mit schwächerer Internetverbindung – die Seite muss technisch schlank sein. Klare Handlungsaufforderungen: Kontakt aufnehmen, Beratung anfragen oder Störung melden muss einfach und direkt möglich sein. Trennung von Privat- und Geschäftskunden: Beide Zielgruppen sollen sich sofort angesprochen fühlen und passende Inhalte finden. Seriöse, moderne Gestaltung: Zeitgemäß, professionell, aber nicht übertrieben futuristisch oder verspielt. Transparenz: Leistungen, Abläufe und Kontaktmöglichkeiten sollen offen und nachvollziehbar dargestellt sein. Der Gesamteindruck soll sein: „Hier bekomme ich zuverlässige Technik, ehrliche Beratung und echte Unterstützung – ohne komplizierte Prozesse.“ Außerdem soll von dem Ordner ( /Volumes/EliasExtern/Arbeit/EB-Solutions/Projekte/Testing/telenetsystems-2026-02-03-v1/assets/BilderUndLogos) das Logo und die bilder gleich passend eingebaut werden. Dass die webiste gleich die rihcitgen bilder nutzt.
|
||||
Die Website soll sofort Vertrauen, Kompetenz und regionale Nähe vermitteln. Besucher sollen das Gefühl haben, bei einem verlässlichen Anbieter aus ihrer Region zu sein, der moderne Technik liefert, aber verständlich kommuniziert. Wichtig ist, dass die Inhalte klar strukturiert und leicht verständlich sind – auch für Menschen ohne technisches Vorwissen. Internet, Fernsehen und IT-Services sollen nicht kompliziert wirken, sondern als stabile, alltagstaugliche Lösungen. Die Seite soll zeigen, dass hinter dem Unternehmen echte Menschen mit Erfahrung stehen, die erreichbar sind und im Problemfall schnell helfen. Serviceorientierung und persönliche Betreuung sollen deutlich spürbar sein. Besonders wichtig ist außerdem: Übersichtlichkeit: Besucher sollen in wenigen Sekunden verstehen, welche Leistungen es gibt und für wen sie gedacht sind. Schnelle Ladezeit: Viele Nutzer kommen aus Regionen mit schwächerer Internetverbindung – die Seite muss technisch schlank sein. Klare Handlungsaufforderungen: Kontakt aufnehmen, Beratung anfragen oder Störung melden muss einfach und direkt möglich sein. Trennung von Privat- und Geschäftskunden: Beide Zielgruppen sollen sich sofort angesprochen fühlen und passende Inhalte finden. Seriöse, moderne Gestaltung: Zeitgemäß, professionell, aber nicht übertrieben futuristisch oder verspielt. Transparenz: Leistungen, Abläufe und Kontaktmöglichkeiten sollen offen und nachvollziehbar dargestellt sein. Der Gesamteindruck soll sein: „Hier bekomme ich zuverlässige Technik, ehrliche Beratung und echte Unterstützung – ohne komplizierte Prozesse.“
|
||||
|
||||
### ❌ Was AUF KEINEN FALL passieren darf:
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 140 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 274 KiB |
Reference in New Issue
Block a user