feat: Introduce new service pages for 'Leistungen', 'Telefonie', 'Fernsehen', and 'Internet', accompanied by new layout components and image assets.
This commit is contained in:
1elle1
285
app/fernsehen/page.tsx
Normal file
285
app/fernsehen/page.tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Tv, Users, Building2, Play, CheckCircle, ArrowRight } from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Fernsehen",
|
||||
description:
|
||||
"Über 200 TV-Programme inkl. 40 HDTV-Sendern. Kabel-TV für Privat- und Geschäftskunden im Bezirk Reutte. Ab 16,47 € im Monat.",
|
||||
openGraph: {
|
||||
title: "Fernsehen | Telenet Systems GmbH",
|
||||
description:
|
||||
"Über 200 TV-Programme inkl. 40 HDTV-Sendern. Kabel-TV für Privat- und Geschäftskunden im Bezirk Reutte.",
|
||||
},
|
||||
};
|
||||
|
||||
const tvOptions = [
|
||||
{
|
||||
icon: Users,
|
||||
title: "TV Privat",
|
||||
price: "16,47",
|
||||
period: "Monat",
|
||||
description:
|
||||
"Über 200 Programme inkl. 40 HDTV-Sendern und rund 40 Radiosendern direkt in Ihr Wohnzimmer.",
|
||||
features: [
|
||||
"Über 200 TV-Programme",
|
||||
"40 HDTV-Sender inklusive",
|
||||
"Rund 40 Radiosender",
|
||||
"Erstklassige Bildqualität",
|
||||
],
|
||||
cta: "Jetzt bestellen",
|
||||
image: "/images/misc/tv-privat-76f60c7a-88eafcfb.jpg",
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: "TV Business",
|
||||
price: "Auf Anfrage",
|
||||
period: "",
|
||||
description:
|
||||
"Individuelle TV-Lösungen für Ihr Unternehmen. Hotels, Gaststätten, Wartezimmer – wir finden die passende Lösung.",
|
||||
features: [
|
||||
"Maßgeschneidertes Angebot",
|
||||
"Persönliche Beratung",
|
||||
"Individuelle Kanalauswahl",
|
||||
"Professionelle Installation",
|
||||
],
|
||||
cta: "Angebot anfragen",
|
||||
image: "/images/misc/tv-business-c3bdfb94-23310090.jpg",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
icon: Play,
|
||||
title: "Pay TV",
|
||||
price: "Auf Anfrage",
|
||||
period: "",
|
||||
description:
|
||||
"Exklusive Filme, Serien und Sport in HD/UHD. Ergänzen Sie Ihr TV-Erlebnis mit Premium-Inhalten.",
|
||||
features: [
|
||||
"Premium-Sender verfügbar",
|
||||
"HD/UHD Qualität",
|
||||
"Sport & Filme",
|
||||
"Flexible Pakete",
|
||||
],
|
||||
cta: "Mehr erfahren",
|
||||
image: "/images/misc/tv-paytv-6cbac6e4-d140e2e4.jpg",
|
||||
popular: false,
|
||||
},
|
||||
];
|
||||
|
||||
const benefits = [
|
||||
"Keine Servicepauschale",
|
||||
"Persönlicher Support vor Ort",
|
||||
"Schnelle Installation",
|
||||
"Faire und transparente Preise",
|
||||
];
|
||||
|
||||
export default function FernsehenPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/hero/tv-header-44c1e07b.jpg"
|
||||
alt="Familie genießt Fernsehen"
|
||||
fill
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Tv className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Fernsehen</span>
|
||||
</div>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Über 200 TV-Programme in bester Qualität
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Erstklassige Unterhaltung für Ihr Zuhause oder Unternehmen.
|
||||
Mit 40 HDTV-Sendern und rund 40 Radiosendern – ab nur 16,47 € im Monat.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
<a href="#angebote" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
Angebote ansehen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Trust Bar */}
|
||||
<Section variant="sm" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
|
||||
{benefits.map((benefit) => (
|
||||
<div
|
||||
key={benefit}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-5 w-5 text-[var(--color-success)]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* TV Options */}
|
||||
<Section id="angebote">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>Unsere TV-Angebote</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Ob für Ihr Zuhause oder Ihr Unternehmen – wir haben das passende Angebot.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--spacing-xl)]">
|
||||
{tvOptions.map((option) => (
|
||||
<div
|
||||
key={option.title}
|
||||
className={`card relative overflow-hidden ${
|
||||
option.popular
|
||||
? "border-[var(--color-primary)] border-2"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{option.popular && (
|
||||
<div className="absolute top-4 right-4 bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-semibold px-3 py-1 rounded-full">
|
||||
Beliebt
|
||||
</div>
|
||||
)}
|
||||
<div className="relative h-40 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
|
||||
<Image
|
||||
src={option.image}
|
||||
alt={option.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 33vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
|
||||
<option.icon className="h-5 w-5" aria-hidden="true" />
|
||||
<h3 className="heading-4">{option.title}</h3>
|
||||
</div>
|
||||
<div className="mb-[var(--spacing-md)]">
|
||||
<span className="heading-2 text-[var(--color-foreground)]">
|
||||
{option.price.includes("Anfrage") ? "" : "€ "}
|
||||
{option.price}
|
||||
</span>
|
||||
{option.period && (
|
||||
<span className="text-muted"> / {option.period}</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
{option.description}
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
{option.features.map((feature) => (
|
||||
<li
|
||||
key={feature}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className={`btn w-full ${
|
||||
option.popular ? "btn-primary" : "btn-outline"
|
||||
}`}
|
||||
>
|
||||
{option.cta}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container variant="narrow">
|
||||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||||
<h2>Häufige Fragen</h2>
|
||||
</div>
|
||||
<div className="space-y-[var(--spacing-lg)]">
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">
|
||||
Wie schnell ist die Installation?
|
||||
</h3>
|
||||
<p className="text-muted">
|
||||
In der Regel können wir innerhalb weniger Werktage einen Installationstermin
|
||||
vereinbaren. Unser Techniker kommt zu Ihnen und richtet alles ein.
|
||||
</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">
|
||||
Gibt es versteckte Kosten?
|
||||
</h3>
|
||||
<p className="text-muted">
|
||||
Nein. Der angezeigte Preis ist der Endpreis inklusive Mehrwertsteuer.
|
||||
Es gibt keine Servicepauschale und keine versteckten Gebühren.
|
||||
</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">
|
||||
Kann ich Pay-TV dazubuchen?
|
||||
</h3>
|
||||
<p className="text-muted">
|
||||
Ja, wir bieten verschiedene Pay-TV-Optionen an. Kontaktieren Sie uns
|
||||
und wir finden das passende Paket für Sie.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Bereit für bestes Fernsehen?
|
||||
</h2>
|
||||
<p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Kontaktieren Sie uns für eine persönliche Beratung oder bestellen Sie
|
||||
direkt Ihren TV-Anschluss.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90"
|
||||
>
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]"
|
||||
>
|
||||
+43 5672 5000
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
402
app/internet/page.tsx
Normal file
402
app/internet/page.tsx
Normal file
@@ -0,0 +1,402 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Wifi, Zap, Building2, CheckCircle, ArrowDown, ArrowUp } from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Internet",
|
||||
description:
|
||||
"Highspeed-Internet über Kabel und Glasfaser im Bezirk Reutte. Flexible Tarife für Privat- und Geschäftskunden ab 14,50 € im Monat. Ohne Servicepauschale.",
|
||||
openGraph: {
|
||||
title: "Internet | Telenet Systems GmbH",
|
||||
description:
|
||||
"Highspeed-Internet über Kabel und Glasfaser im Bezirk Reutte. Ab 14,50 € im Monat.",
|
||||
},
|
||||
};
|
||||
|
||||
const kabelTarife = [
|
||||
{
|
||||
name: "telenet.hit",
|
||||
price: "14,50",
|
||||
download: "40",
|
||||
upload: "6",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.eco",
|
||||
price: "19,00",
|
||||
download: "60",
|
||||
upload: "8",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.fun",
|
||||
price: "29,00",
|
||||
download: "80",
|
||||
upload: "12",
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
name: "telenet.pro",
|
||||
price: "39,00",
|
||||
download: "100",
|
||||
upload: "14",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.mega",
|
||||
price: "49,00",
|
||||
download: "180",
|
||||
upload: "22",
|
||||
popular: false,
|
||||
},
|
||||
];
|
||||
|
||||
const glasfaserTarife = [
|
||||
{
|
||||
name: "telenet.eco",
|
||||
price: "23,00",
|
||||
download: "100",
|
||||
upload: "100",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.fun",
|
||||
price: "29,00",
|
||||
download: "200",
|
||||
upload: "200",
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
name: "telenet.pro",
|
||||
price: "39,00",
|
||||
download: "300",
|
||||
upload: "300",
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.mega",
|
||||
price: "49,00",
|
||||
download: "500",
|
||||
upload: "500",
|
||||
popular: false,
|
||||
},
|
||||
];
|
||||
|
||||
const benefits = [
|
||||
"Keine Servicepauschale",
|
||||
"Unlimitiertes Datenvolumen",
|
||||
"IPv6 inklusive",
|
||||
"Persönlicher Support",
|
||||
];
|
||||
|
||||
export default function InternetPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/hero/internet-header-431619ac.jpg"
|
||||
alt="Highspeed Internet"
|
||||
fill
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Wifi className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Internet</span>
|
||||
</div>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Highspeed-Internet für Ihr Zuhause
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
|
||||
Flexible Tarife ohne Servicepauschale – ab 14,50 € im Monat.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
<a href="#tarife" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
Tarife vergleichen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Trust Bar */}
|
||||
<Section variant="sm" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
|
||||
{benefits.map((benefit) => (
|
||||
<div
|
||||
key={benefit}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-5 w-5 text-[var(--color-success)]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Kabel-Tarife */}
|
||||
<Section id="tarife">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Zap className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Kabel-Internet</span>
|
||||
</div>
|
||||
<h2>Tarife für Kabel-Kunden</h2>
|
||||
<p className="text-muted mt-[var(--spacing-md)]">
|
||||
Tarife gültig ab 01.05.2024. Alle Preise inkl. MwSt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-[var(--color-border)]">
|
||||
<th className="text-left py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
Tarif
|
||||
</th>
|
||||
<th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
<span className="flex items-center justify-center gap-1">
|
||||
<ArrowDown className="h-4 w-4" aria-hidden="true" />
|
||||
Download
|
||||
</span>
|
||||
</th>
|
||||
<th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
<span className="flex items-center justify-center gap-1">
|
||||
<ArrowUp className="h-4 w-4" aria-hidden="true" />
|
||||
Upload
|
||||
</span>
|
||||
</th>
|
||||
<th className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
Preis / Monat
|
||||
</th>
|
||||
<th className="py-[var(--spacing-md)] px-[var(--spacing-sm)]"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{kabelTarife.map((tarif) => (
|
||||
<tr
|
||||
key={tarif.name}
|
||||
className={`border-b border-[var(--color-border)] ${
|
||||
tarif.popular ? "bg-[var(--color-primary)]/5" : ""
|
||||
}`}
|
||||
>
|
||||
<td className="py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
<span className="font-medium">{tarif.name}</span>
|
||||
{tarif.popular && (
|
||||
<span className="ml-2 text-xs bg-[var(--color-primary)] text-[var(--color-background)] px-2 py-0.5 rounded-full">
|
||||
Beliebt
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.download} Mbit/s
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.upload} Mbit/s
|
||||
</td>
|
||||
<td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
€ {tarif.price}
|
||||
</td>
|
||||
<td className="py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-sm btn-outline"
|
||||
>
|
||||
Bestellen
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Empfohlen
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.download} Mbit/s
|
||||
</td>
|
||||
<td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
|
||||
{tarif.upload} Mbit/s
|
||||
</td>
|
||||
<td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
|
||||
€ {tarif.price}
|
||||
</td>
|
||||
<td className="py-[var(--spacing-md)] px-[var(--spacing-lg)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-sm btn-outline"
|
||||
>
|
||||
Bestellen
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted mt-[var(--spacing-lg)]">
|
||||
Glasfaser bietet symmetrische Geschwindigkeiten – ideal für Homeoffice und Videokonferenzen.
|
||||
Alle Tarife ohne Servicepauschale mit unlimitiertem Datenvolumen.
|
||||
</p>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Business Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div className="relative h-80 lg:h-full min-h-[320px] rounded-[var(--radius-lg)] overflow-hidden">
|
||||
<Image
|
||||
src="/images/misc/firmenkunden-96736712-5fa99704.jpg"
|
||||
alt="Geschäftskunde im Büro"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Building2 className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Business-Internet</span>
|
||||
</div>
|
||||
<h2>Maßgeschneiderte Lösungen für Ihr Unternehmen</h2>
|
||||
<p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
|
||||
Für Unternehmen erstellen wir individuelle Internet-Angebote
|
||||
inklusive passendem Service-Paket.
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Dedizierte Bandbreite</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Statische IP-Adressen</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Erweiterte SLA-Optionen</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Persönliche Betreuung</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Angebot anfragen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-foreground)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Welcher Tarif passt zu Ihnen?
|
||||
</h2>
|
||||
<p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Wir beraten Sie gerne persönlich und finden gemeinsam den idealen
|
||||
Internet-Tarif für Ihre Bedürfnisse.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Beratung anfragen
|
||||
</Link>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]"
|
||||
>
|
||||
+43 5672 5000
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
111
app/layout.tsx
111
app/layout.tsx
@@ -1,98 +1,69 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Header } from "@/components/layout/Header";
|
||||
import { Footer } from "@/components/layout/Footer";
|
||||
import "@/theme/globals.css";
|
||||
import "@/theme/stylesheet.css";
|
||||
|
||||
/**
|
||||
* Root Layout
|
||||
*
|
||||
* This layout is designed to work with the 9-category parameter system.
|
||||
* It supports:
|
||||
* - Dynamic locale (from spec.client.locale or content.defaultLanguage)
|
||||
* - Google Fonts loading (from spec.brand.fonts)
|
||||
* - Scroll behavior (from spec.interaction.scrollBehavior)
|
||||
* - Meta tags for SEO
|
||||
*
|
||||
* CUSTOMIZATION INSTRUCTIONS:
|
||||
* 1. Update `lang` attribute based on spec.client.locale (e.g., "de", "de-AT", "en")
|
||||
* 2. Add Google Fonts import based on spec.brand.fonts.heading.family and body.family
|
||||
* 3. Set scroll-behavior in globals.css based on spec.interaction.scrollBehavior
|
||||
* 4. Update metadata based on spec.brand and spec.seo
|
||||
*/
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
// TODO: Update these values based on ProjectSpec.json
|
||||
// - title: from spec.brand.name or spec.meta.projectName
|
||||
// - description: from spec.brand.description
|
||||
// - keywords: from spec.seo.primaryKeywords
|
||||
export const metadata: Metadata = {
|
||||
title: "Website",
|
||||
description: "Generated website",
|
||||
title: {
|
||||
default: "Telenet Systems GmbH | Telekommunikation & IT-Services in Tirol",
|
||||
template: "%s | Telenet Systems GmbH",
|
||||
},
|
||||
description:
|
||||
"Ihr regionaler Partner für TV, Internet, Telefonie und IT-Services im Bezirk Reutte. Seit 1976 verbinden wir Menschen und Technik. Persönliche Beratung, schneller Support.",
|
||||
keywords: [
|
||||
"Telekommunikation Tirol",
|
||||
"IT-Dienstleister Reutte",
|
||||
"Highspeed-Internet Österreich",
|
||||
"Glasfaser Tirol",
|
||||
"TeleNetSystems",
|
||||
"regionaler IT-Service",
|
||||
"Kabel-TV Anbieter",
|
||||
"Telefonie Tarife Österreich",
|
||||
],
|
||||
authors: [{ name: "Telenet Systems GmbH" }],
|
||||
creator: "Telenet Systems GmbH",
|
||||
publisher: "Telenet Systems GmbH",
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
// Open Graph tags - update based on spec
|
||||
openGraph: {
|
||||
type: "website",
|
||||
locale: "de_DE",
|
||||
// title, description, images will be set per project
|
||||
locale: "de_AT",
|
||||
url: "https://www.tnr.at",
|
||||
siteName: "Telenet Systems GmbH",
|
||||
title: "Telenet Systems GmbH | Telekommunikation & IT-Services in Tirol",
|
||||
description:
|
||||
"Ihr regionaler Partner für TV, Internet, Telefonie und IT-Services im Bezirk Reutte. Persönliche Beratung, schneller Support.",
|
||||
},
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
// TODO: Update themeColor from spec.brand.colors.primary or design_tokens
|
||||
themeColor: "#ffffff",
|
||||
themeColor: "#f39210",
|
||||
};
|
||||
|
||||
/**
|
||||
* Font Loading
|
||||
*
|
||||
* To add Google Fonts based on spec.brand.fonts:
|
||||
*
|
||||
* 1. Import from next/font/google:
|
||||
* import { Inter, Playfair_Display } from "next/font/google";
|
||||
*
|
||||
* 2. Configure fonts:
|
||||
* const headingFont = Playfair_Display({
|
||||
* subsets: ["latin"],
|
||||
* variable: "--font-heading",
|
||||
* display: "swap",
|
||||
* });
|
||||
*
|
||||
* const bodyFont = Inter({
|
||||
* subsets: ["latin"],
|
||||
* variable: "--font-body",
|
||||
* display: "swap",
|
||||
* });
|
||||
*
|
||||
* 3. Apply to html element:
|
||||
* <html lang="de" className={`${headingFont.variable} ${bodyFont.variable}`}>
|
||||
*
|
||||
* 4. Update globals.css to use the variables:
|
||||
* --font-sans: var(--font-body), system-ui, sans-serif;
|
||||
* --font-heading: var(--font-heading), Georgia, serif;
|
||||
*/
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
// TODO: Update lang attribute based on spec.client.locale
|
||||
// Examples: "de", "de-AT", "de-CH", "en", "en-US"
|
||||
const locale = "de";
|
||||
|
||||
return (
|
||||
<html lang={locale}>
|
||||
{/*
|
||||
Scroll Behavior:
|
||||
- If spec.interaction.scrollBehavior === "smooth", add className="scroll-smooth"
|
||||
- Or set scroll-behavior: smooth in globals.css on html element
|
||||
|
||||
Example with smooth scrolling:
|
||||
<html lang={locale} className="scroll-smooth">
|
||||
*/}
|
||||
<body>{children}</body>
|
||||
<html lang="de-AT" className={inter.variable}>
|
||||
<body className="flex min-h-screen flex-col">
|
||||
<Header />
|
||||
<main className="flex-1">{children}</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
304
app/leistungen/page.tsx
Normal file
304
app/leistungen/page.tsx
Normal file
@@ -0,0 +1,304 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import {
|
||||
Server,
|
||||
Network,
|
||||
Wrench,
|
||||
Monitor,
|
||||
Cable,
|
||||
Shield,
|
||||
Headphones,
|
||||
Building2,
|
||||
Users,
|
||||
CheckCircle,
|
||||
} from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Leistungen",
|
||||
description:
|
||||
"Umfassende Telekom- und IT-Services im Bezirk Reutte. Von Netzwerkplanung über IT-Installation bis Fernwartung – alles aus einer Hand.",
|
||||
openGraph: {
|
||||
title: "Leistungen | Telenet Systems GmbH",
|
||||
description:
|
||||
"Umfassende Telekom- und IT-Services im Bezirk Reutte. Netzwerkplanung, IT-Installation, Fernwartung.",
|
||||
},
|
||||
};
|
||||
|
||||
const services = [
|
||||
{
|
||||
icon: Network,
|
||||
title: "Netzwerkplanung",
|
||||
description:
|
||||
"Professionelle Planung und Konzeption von Netzwerkinfrastrukturen für Unternehmen jeder Größe.",
|
||||
},
|
||||
{
|
||||
icon: Server,
|
||||
title: "Serverplanung",
|
||||
description:
|
||||
"Beratung und Planung von Serverlösungen – von der Hardware bis zur Software-Konfiguration.",
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "IT-Installation",
|
||||
description:
|
||||
"Fachgerechte Installation von IT-Komponenten, Netzwerken und Kommunikationssystemen.",
|
||||
},
|
||||
{
|
||||
icon: Monitor,
|
||||
title: "Reparaturen",
|
||||
description:
|
||||
"Schnelle und zuverlässige Reparatur von IT-Geräten und Netzwerkkomponenten.",
|
||||
},
|
||||
{
|
||||
icon: Headphones,
|
||||
title: "Fernwartung",
|
||||
description:
|
||||
"Remote-Support für schnelle Problemlösung ohne Wartezeit auf einen Vor-Ort-Termin.",
|
||||
},
|
||||
{
|
||||
icon: Cable,
|
||||
title: "Glasfaser-Ausbau",
|
||||
description:
|
||||
"Planung und Umsetzung von Glasfaser-Infrastruktur für zukunftssichere Anbindungen.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Qualitätssicherung",
|
||||
description:
|
||||
"Kontinuierliche Überwachung und Optimierung Ihrer IT-Systeme für maximale Verfügbarkeit.",
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: "Behördliche Unterstützung",
|
||||
description:
|
||||
"Technisch-behördliche Unterstützung bei Netzprojekten und Genehmigungsverfahren.",
|
||||
},
|
||||
];
|
||||
|
||||
const targetGroups = [
|
||||
{
|
||||
icon: Users,
|
||||
title: "Privatkunden",
|
||||
description:
|
||||
"Zuverlässige TV-, Internet- und Telefonielösungen für Ihr Zuhause. Mit persönlichem Service vor Ort.",
|
||||
features: [
|
||||
"TV mit über 200 Programmen",
|
||||
"Highspeed-Internet bis 500 Mbit/s",
|
||||
"Günstige Telefonie-Tarife",
|
||||
"Persönliche Beratung",
|
||||
],
|
||||
cta: "Zu den Tarifen",
|
||||
href: "/internet",
|
||||
image: "/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg",
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: "Geschäftskunden",
|
||||
description:
|
||||
"Professionelle IT- und Kommunikationslösungen für Ihr Unternehmen. Maßgeschneidert und zuverlässig.",
|
||||
features: [
|
||||
"Business-Internet & Telefonie",
|
||||
"Netzwerk- & Serverplanung",
|
||||
"IT-Installation & Support",
|
||||
"Fernwartung & Monitoring",
|
||||
],
|
||||
cta: "Kontakt aufnehmen",
|
||||
href: "/kontakt",
|
||||
image: "/images/misc/firmenkunden-96736712-5fa99704.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
export default function LeistungenPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/services/tnr-leistungen-055053d5.jpg"
|
||||
alt="Telenet Systems Mitarbeiter"
|
||||
fill
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
|
||||
Unser Leistungsangebot
|
||||
</p>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Telekommunikation und IT-Services aus einer Hand
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Von TV und Internet über Telefonie bis zu professionellen IT-Dienstleistungen –
|
||||
wir bieten alles, was Sie für moderne Kommunikation benötigen.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
<a href="#services" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
Leistungen entdecken
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Zielgruppen */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>Für Privat- und Geschäftskunden</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Ob Zuhause oder im Unternehmen – wir haben die passende Lösung für Sie.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-xl)]">
|
||||
{targetGroups.map((group) => (
|
||||
<div key={group.title} className="card overflow-hidden">
|
||||
<div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
|
||||
<Image
|
||||
src={group.image}
|
||||
alt={group.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
|
||||
<group.icon className="h-5 w-5" aria-hidden="true" />
|
||||
<h3 className="heading-3">{group.title}</h3>
|
||||
</div>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">{group.description}</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
{group.features.map((feature) => (
|
||||
<li
|
||||
key={feature}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href={group.href} className="btn btn-primary">
|
||||
{group.cta}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* IT-Services */}
|
||||
<Section id="services" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>IT-Services für Unternehmen</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Professionelle IT-Dienstleistungen von der Planung bis zur Wartung.
|
||||
Alles aus einer Hand, mit persönlichem Ansprechpartner vor Ort.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-lg)]">
|
||||
{services.map((service) => (
|
||||
<div key={service.title} className="card text-center">
|
||||
<div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] mb-[var(--spacing-md)]">
|
||||
<service.icon className="h-6 w-6" aria-hidden="true" />
|
||||
</div>
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{service.title}</h3>
|
||||
<p className="text-sm text-muted">{service.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Glasfaser Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div className="relative h-80 lg:h-full min-h-[320px] rounded-[var(--radius-lg)] overflow-hidden">
|
||||
<Image
|
||||
src="/images/services/lwl1-40360e27.jpg"
|
||||
alt="Glasfaser-Installation"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Cable className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Glasfaser</span>
|
||||
</div>
|
||||
<h2>Zukunftssichere Glasfaser-Infrastruktur</h2>
|
||||
<p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
|
||||
Wir planen und bauen Glasfasernetze für Gemeinden und Unternehmen.
|
||||
Profitieren Sie von unserer langjährigen Erfahrung.
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Glasfaser-Planung & Beratung</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Professioneller Netzausbau</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Behördliche Unterstützung</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Qualitätssicherung</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Projekt anfragen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-primary)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Haben Sie Fragen zu unseren Leistungen?
|
||||
</h2>
|
||||
<p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Wir beraten Sie gerne persönlich und finden die optimale Lösung für Ihre Anforderungen.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90"
|
||||
>
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]"
|
||||
>
|
||||
+43 5672 5000
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
295
app/page.tsx
295
app/page.tsx
@@ -1,14 +1,297 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import {
|
||||
Tv,
|
||||
Wifi,
|
||||
Phone,
|
||||
Users,
|
||||
Shield,
|
||||
Clock,
|
||||
MapPin,
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function Page() {
|
||||
const services = [
|
||||
{
|
||||
icon: Tv,
|
||||
title: "Fernsehen",
|
||||
description:
|
||||
"Über 200 Programme inkl. 40 HDTV-Sendern. Erstklassige Unterhaltung für Ihr Zuhause – ab 16,47 € im Monat.",
|
||||
href: "/fernsehen",
|
||||
image: "/images/misc/tv-privat-76f60c7a-88eafcfb.jpg",
|
||||
},
|
||||
{
|
||||
icon: Wifi,
|
||||
title: "Internet",
|
||||
description:
|
||||
"Highspeed-Internet über Kabel und Glasfaser. Flexible Tarife für Privat- und Geschäftskunden – ab 14,50 € im Monat.",
|
||||
href: "/internet",
|
||||
image: "/images/misc/internet-7b594a2d-793cefee.jpg",
|
||||
},
|
||||
{
|
||||
icon: Phone,
|
||||
title: "Telefonie",
|
||||
description:
|
||||
"Günstige Telefonie-Tarife fürs Festnetz. Für Privat- und Geschäftskunden – ab 0 € mit Telenet-Internet.",
|
||||
href: "/telefonie",
|
||||
image: "/images/misc/telefon-fa5e8c21-271d2135.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
const usps = [
|
||||
{
|
||||
icon: MapPin,
|
||||
title: "Regionale Nähe",
|
||||
description:
|
||||
"Persönlicher Service direkt vor Ort im Bezirk Reutte. Bei uns kennt man sich noch persönlich.",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: "Seit 1976",
|
||||
description:
|
||||
"Fast 50 Jahre Erfahrung in der Telekommunikation. Verlässlichkeit, der Sie vertrauen können.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Voller Service",
|
||||
description:
|
||||
"Von TV über Internet bis IT-Support – alles aus einer Hand. Keine Servicepauschale bei unseren Tarifen.",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Schneller Support",
|
||||
description:
|
||||
"Probleme lösen wir direkt – telefonisch oder vor Ort. Kurze Wege, schnelle Hilfe.",
|
||||
},
|
||||
];
|
||||
|
||||
const trustItems = [
|
||||
"Keine versteckten Kosten",
|
||||
"Unlimitiertes Datenvolumen",
|
||||
"Persönlicher Ansprechpartner",
|
||||
"Regionaler Kundendienst",
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<main>
|
||||
<Section>
|
||||
<Container>
|
||||
<p>Ready</p>
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/misc/firma1-8a863d8b.jpg"
|
||||
alt="Telenet Systems Firmengebäude in Reutte"
|
||||
fill
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
|
||||
Ihr regionaler Partner in Tirol
|
||||
</p>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Telekommunikation und IT-Services aus einer Hand
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Seit 1976 versorgen wir den Bezirk Reutte mit zuverlässigem Fernsehen,
|
||||
schnellem Internet und flexibler Telefonie. Persönliche Beratung,
|
||||
ehrlicher Service – ohne komplizierte Prozesse.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
<Link href="/leistungen" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
Unsere Leistungen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
|
||||
{/* 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.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
|
||||
{usps.map((usp) => (
|
||||
<div key={usp.title} className="text-center">
|
||||
<div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] mb-[var(--spacing-md)]">
|
||||
<usp.icon className="h-6 w-6" aria-hidden="true" />
|
||||
</div>
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3>
|
||||
<p className="text-muted">{usp.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</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)]">
|
||||
<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)]"
|
||||
>
|
||||
<CheckCircle className="h-5 w-5 flex-shrink-0" aria-hidden="true" />
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="relative h-80 lg:h-96 rounded-[var(--radius-lg)] overflow-hidden">
|
||||
<Image
|
||||
src="/images/services/tnr-leistungen-055053d5.jpg"
|
||||
alt="Telenet Systems Mitarbeiter bei der Arbeit"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* For Whom Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<h2>Für Privat- und Geschäftskunden</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Ob Zuhause oder im Unternehmen – wir haben die passende Lösung für Sie.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-xl)]">
|
||||
{/* Privatkunden */}
|
||||
<div className="card relative overflow-hidden">
|
||||
<div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
|
||||
<Image
|
||||
src="/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg"
|
||||
alt="Familie vor dem Fernseher"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<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)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Haben Sie Fragen? Wir beraten Sie gerne.
|
||||
</h2>
|
||||
<p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Unser Team in Reutte steht Ihnen persönlich zur Verfügung.
|
||||
Rufen Sie uns an oder senden Sie uns eine Nachricht.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Kontakt aufnehmen
|
||||
</Link>
|
||||
<a href="tel:+4356725000" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
+43 5672 5000
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
302
app/telefonie/page.tsx
Normal file
302
app/telefonie/page.tsx
Normal file
@@ -0,0 +1,302 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Phone, Building2, CheckCircle, Users } from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Telefonie",
|
||||
description:
|
||||
"Günstige Telefonie-Tarife fürs Festnetz im Bezirk Reutte. Für Privat- und Geschäftskunden – ab 0 € mit Telenet-Internet.",
|
||||
openGraph: {
|
||||
title: "Telefonie | Telenet Systems GmbH",
|
||||
description:
|
||||
"Günstige Telefonie-Tarife fürs Festnetz im Bezirk Reutte. Ab 0 € mit Telenet-Internet.",
|
||||
},
|
||||
};
|
||||
|
||||
const telefonieTarife = [
|
||||
{
|
||||
name: "telenet.zero",
|
||||
subtitle: "ohne Internet",
|
||||
price: "5,00",
|
||||
minutenpreis: "2,4",
|
||||
description: "Festnetz-Telefonie ohne Internet-Anschluss von Telenet.",
|
||||
features: [
|
||||
"Festnetzanschluss",
|
||||
"Günstiger Minutenpreis",
|
||||
"Keine Grundgebühr bei Internet",
|
||||
],
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "telenet.zero",
|
||||
subtitle: "mit Internet von Telenet",
|
||||
price: "0,00",
|
||||
minutenpreis: "2,4",
|
||||
description: "Festnetz-Telefonie ohne Grundgebühr für Telenet-Internet-Kunden.",
|
||||
features: [
|
||||
"Keine monatliche Grundgebühr",
|
||||
"Günstiger Minutenpreis",
|
||||
"Perfekt für Telenet-Kunden",
|
||||
],
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
name: "telenet.business",
|
||||
subtitle: "für Unternehmen",
|
||||
price: "8,90",
|
||||
minutenpreis: "3,24",
|
||||
description: "Professionelle Telefonie-Lösung für Geschäftskunden.",
|
||||
features: [
|
||||
"Business-Tarif",
|
||||
"Professioneller Service",
|
||||
"Individuelle Optionen",
|
||||
],
|
||||
popular: false,
|
||||
},
|
||||
];
|
||||
|
||||
const benefits = [
|
||||
"Günstige Minutenpreise",
|
||||
"Keine versteckten Kosten",
|
||||
"Einfache Einrichtung",
|
||||
"Persönlicher Support",
|
||||
];
|
||||
|
||||
export default function TelefoniePage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/misc/telefonie1-ad7595f9.jpg"
|
||||
alt="Telefonie"
|
||||
fill
|
||||
priority
|
||||
className="object-cover opacity-40"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Phone className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Telefonie</span>
|
||||
</div>
|
||||
<h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
|
||||
Flexible Telefonie-Tarife für jeden Bedarf
|
||||
</h1>
|
||||
<p className="lead text-gray-300 mb-[var(--spacing-xl)]">
|
||||
Günstig ins österreichische Festnetz telefonieren.
|
||||
Mit Telenet-Internet sogar ohne monatliche Grundgebühr.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
<a href="#tarife" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
|
||||
Tarife ansehen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Trust Bar */}
|
||||
<Section variant="sm" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
|
||||
{benefits.map((benefit) => (
|
||||
<div
|
||||
key={benefit}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-5 w-5 text-[var(--color-success)]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* 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)]">
|
||||
{telefonieTarife.map((tarif, index) => (
|
||||
<div
|
||||
key={`${tarif.name}-${index}`}
|
||||
className={`card relative ${
|
||||
tarif.popular
|
||||
? "border-[var(--color-primary)] border-2"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{tarif.popular && (
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-semibold px-3 py-1 rounded-full">
|
||||
Empfohlen
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center">
|
||||
<h3 className="heading-4 text-[var(--color-primary)]">
|
||||
{tarif.name}
|
||||
</h3>
|
||||
<p className="text-sm text-muted mb-[var(--spacing-md)]">
|
||||
{tarif.subtitle}
|
||||
</p>
|
||||
<div className="mb-[var(--spacing-md)]">
|
||||
<span className="heading-1">€ {tarif.price}</span>
|
||||
<span className="text-muted"> / Monat</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted mb-[var(--spacing-sm)]">
|
||||
Festnetz AT: ab {tarif.minutenpreis} Cent / Minute
|
||||
</p>
|
||||
</div>
|
||||
<hr className="border-[var(--color-border)] my-[var(--spacing-lg)]" />
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
{tarif.description}
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
{tarif.features.map((feature) => (
|
||||
<li
|
||||
key={feature}
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm"
|
||||
>
|
||||
<CheckCircle
|
||||
className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className={`btn w-full ${
|
||||
tarif.popular ? "btn-primary" : "btn-outline"
|
||||
}`}
|
||||
>
|
||||
Jetzt bestellen
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Kombinieren Section */}
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Users className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Tipp</span>
|
||||
</div>
|
||||
<h2>Telefonie + Internet kombinieren</h2>
|
||||
<p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
|
||||
Als Telenet-Internet-Kunde telefonieren Sie ohne monatliche Grundgebühr.
|
||||
Sie zahlen nur für die tatsächlich geführten Gespräche.
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>0 € Grundgebühr mit Telenet-Internet</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Einfache Abrechnung über eine Rechnung</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">
|
||||
<CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
|
||||
<span>Ein Ansprechpartner für alles</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="/internet" className="btn btn-primary">
|
||||
Internet-Tarife ansehen
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative h-80 lg:h-96 rounded-[var(--radius-lg)] overflow-hidden">
|
||||
<Image
|
||||
src="/images/misc/telefon-fa5e8c21-271d2135.jpg"
|
||||
alt="Person telefoniert"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Business Section */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
|
||||
<div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
<Building2 className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="font-medium">Business</span>
|
||||
</div>
|
||||
<h2>Telefonie für Unternehmen</h2>
|
||||
<p className="lead mt-[var(--spacing-md)]">
|
||||
Professionelle Telefonielösungen für Ihr Unternehmen.
|
||||
Wir beraten Sie gerne zu den verschiedenen Möglichkeiten.
|
||||
</p>
|
||||
</div>
|
||||
<div className="card max-w-2xl mx-auto text-center">
|
||||
<h3 className="heading-4 mb-[var(--spacing-md)]">
|
||||
Individuelle Business-Lösungen
|
||||
</h3>
|
||||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||||
Für Unternehmen bieten wir maßgeschneiderte Telefonielösungen an.
|
||||
Von der klassischen Festnetzanbindung bis zu modernen VoIP-Systemen –
|
||||
wir finden die passende Lösung für Ihre Anforderungen.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Beratung anfragen
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-[var(--color-foreground)]">
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-[var(--color-background)]">
|
||||
Fragen zu unseren Telefonie-Tarifen?
|
||||
</h2>
|
||||
<p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
|
||||
Unser Team berät Sie gerne persönlich und findet den passenden Tarif für Sie.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-lg">
|
||||
Kontakt aufnehmen
|
||||
</Link>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]"
|
||||
>
|
||||
+43 5672 5000
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +1,28 @@
|
||||
import type { ElementType, ReactNode } from "react";
|
||||
|
||||
type ContainerVariant = "default" | "narrow" | "wide";
|
||||
|
||||
interface ContainerProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
as?: ElementType;
|
||||
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) {
|
||||
return (
|
||||
<Tag
|
||||
className={`mx-auto w-full max-w-[var(--container-max-width)] px-[var(--container-padding-x)] ${className}`.trim()}
|
||||
>
|
||||
<Tag className={`${variantClasses[variant]} ${className}`.trim()}>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
|
||||
139
components/layout/Footer.tsx
Normal file
139
components/layout/Footer.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { MapPin, Phone, Mail, Clock } from "lucide-react";
|
||||
|
||||
const navigation = {
|
||||
leistungen: [
|
||||
{ name: "Fernsehen", href: "/fernsehen" },
|
||||
{ name: "Internet", href: "/internet" },
|
||||
{ name: "Telefonie", href: "/telefonie" },
|
||||
{ name: "IT-Services", href: "/leistungen" },
|
||||
],
|
||||
unternehmen: [
|
||||
{ name: "Über uns", href: "/ueber-uns" },
|
||||
{ name: "Kontakt", href: "/kontakt" },
|
||||
],
|
||||
rechtliches: [
|
||||
{ name: "Impressum", href: "/impressum" },
|
||||
{ name: "Datenschutz", href: "/datenschutz" },
|
||||
],
|
||||
};
|
||||
|
||||
export function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<footer className="bg-[var(--color-foreground)] text-[var(--color-background)]">
|
||||
<div className="container">
|
||||
{/* Main Footer Content */}
|
||||
<div className="py-[var(--spacing-4xl)]">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-2xl)]">
|
||||
{/* Company Info */}
|
||||
<div className="lg:col-span-1">
|
||||
<Image
|
||||
src="/images/brand/logo-weiss-ffa4cbf6.png"
|
||||
alt="Telenet Systems GmbH"
|
||||
width={160}
|
||||
height={51}
|
||||
className="h-10 w-auto mb-[var(--spacing-lg)]"
|
||||
/>
|
||||
<p className="text-sm text-gray-300 mb-[var(--spacing-lg)]">
|
||||
Ihr regionaler Partner für Telekommunikation und IT-Services in Tirol. Seit 1976 verbinden wir Menschen und Technik.
|
||||
</p>
|
||||
<div className="space-y-[var(--spacing-sm)]">
|
||||
<div className="flex items-start gap-[var(--spacing-sm)] text-sm text-gray-300">
|
||||
<MapPin className="h-4 w-4 mt-0.5 flex-shrink-0" aria-hidden="true" />
|
||||
<span>Reutte, Tirol, Österreich</span>
|
||||
</div>
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
<Phone className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
|
||||
<span>+43 5672 5000</span>
|
||||
</a>
|
||||
<a
|
||||
href="mailto:info@tnr.at"
|
||||
className="flex items-center gap-[var(--spacing-sm)] text-sm text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
<Mail className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
|
||||
<span>info@tnr.at</span>
|
||||
</a>
|
||||
<div className="flex items-start gap-[var(--spacing-sm)] text-sm text-gray-300">
|
||||
<Clock className="h-4 w-4 mt-0.5 flex-shrink-0" aria-hidden="true" />
|
||||
<span>Mo–Fr: 8:00–12:00 & 13:00–17:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Leistungen */}
|
||||
<div>
|
||||
<h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Leistungen</h3>
|
||||
<ul className="space-y-[var(--spacing-sm)]">
|
||||
{navigation.leistungen.map((item) => (
|
||||
<li key={item.name}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-sm text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Unternehmen */}
|
||||
<div>
|
||||
<h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Unternehmen</h3>
|
||||
<ul className="space-y-[var(--spacing-sm)]">
|
||||
{navigation.unternehmen.map((item) => (
|
||||
<li key={item.name}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-sm text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Rechtliches & CTA */}
|
||||
<div>
|
||||
<h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Rechtliches</h3>
|
||||
<ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
|
||||
{navigation.rechtliches.map((item) => (
|
||||
<li key={item.name}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-sm text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Kontakt aufnehmen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="border-t border-gray-700 py-[var(--spacing-lg)]">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-[var(--spacing-sm)]">
|
||||
<p className="text-sm text-gray-400">
|
||||
© {currentYear} Telenet Systems GmbH. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
Ihr Partner für Telekommunikation seit 1976
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
116
components/layout/Header.tsx
Normal file
116
components/layout/Header.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
"use client";
|
||||
|
||||
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() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-[var(--color-background)] border-b border-[var(--color-border)]">
|
||||
<div className="container">
|
||||
<nav className="flex items-center justify-between py-[var(--spacing-md)]">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex-shrink-0">
|
||||
<Image
|
||||
src="/images/brand/logo-systems-9fd0db14.png"
|
||||
alt="Telenet Systems GmbH"
|
||||
width={180}
|
||||
height={57}
|
||||
priority
|
||||
className="h-10 w-auto md:h-12"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden lg:flex lg:items-center lg:gap-[var(--spacing-lg)]">
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-sm font-medium text-[var(--color-foreground)] hover:text-[var(--color-primary)] transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA & Phone (Desktop) */}
|
||||
<div className="hidden lg:flex lg:items-center lg:gap-[var(--spacing-md)]">
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="flex items-center gap-[var(--spacing-xs)] text-sm font-medium text-[var(--color-muted-foreground)] hover:text-[var(--color-primary)] transition-colors"
|
||||
aria-label="Anrufen: +43 5672 5000"
|
||||
>
|
||||
<Phone className="h-4 w-4" aria-hidden="true" />
|
||||
<span>+43 5672 5000</span>
|
||||
</a>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
type="button"
|
||||
className="lg:hidden p-[var(--spacing-sm)] -mr-[var(--spacing-sm)] text-[var(--color-foreground)]"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-expanded={mobileMenuOpen}
|
||||
aria-label={mobileMenuOpen ? "Menü schließen" : "Menü öffnen"}
|
||||
>
|
||||
{mobileMenuOpen ? (
|
||||
<X className="h-6 w-6" aria-hidden="true" />
|
||||
) : (
|
||||
<Menu className="h-6 w-6" aria-hidden="true" />
|
||||
)}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="lg:hidden border-t border-[var(--color-border)] py-[var(--spacing-md)]">
|
||||
<div className="flex flex-col gap-[var(--spacing-sm)]">
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="py-[var(--spacing-sm)] text-base font-medium text-[var(--color-foreground)] hover:text-[var(--color-primary)] transition-colors"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
<hr className="border-[var(--color-border)] my-[var(--spacing-sm)]" />
|
||||
<a
|
||||
href="tel:+4356725000"
|
||||
className="flex items-center gap-[var(--spacing-sm)] py-[var(--spacing-sm)] text-base font-medium text-[var(--color-muted-foreground)]"
|
||||
>
|
||||
<Phone className="h-5 w-5" aria-hidden="true" />
|
||||
<span>+43 5672 5000</span>
|
||||
</a>
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="btn btn-primary mt-[var(--spacing-sm)]"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Jetzt beraten lassen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +1,32 @@
|
||||
import type { ElementType, ReactNode } from "react";
|
||||
|
||||
type SectionVariant = "default" | "sm" | "lg" | "hero" | "flush";
|
||||
|
||||
interface SectionProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
as?: ElementType;
|
||||
variant?: SectionVariant;
|
||||
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 = "",
|
||||
as: Tag = "section",
|
||||
variant = "default",
|
||||
id,
|
||||
}: SectionProps) {
|
||||
return (
|
||||
<Tag
|
||||
className={`py-[var(--section-spacing-y)] ${className}`.trim()}
|
||||
>
|
||||
<Tag id={id} className={`${variantClasses[variant]} ${className}`.trim()}>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
|
||||
BIN
public/images/brand/logo-systems-9fd0db14.png
Normal file
BIN
public/images/brand/logo-systems-9fd0db14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
BIN
public/images/brand/logo-weiss-ffa4cbf6.png
Normal file
BIN
public/images/brand/logo-weiss-ffa4cbf6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
public/images/hero/internet-header-431619ac.jpg
Normal file
BIN
public/images/hero/internet-header-431619ac.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
BIN
public/images/hero/tv-header-44c1e07b.jpg
Normal file
BIN
public/images/hero/tv-header-44c1e07b.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
BIN
public/images/misc/david-20mu-cc-88ller-da85dab8-046e19ba.jpg
Normal file
BIN
public/images/misc/david-20mu-cc-88ller-da85dab8-046e19ba.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
public/images/misc/firma1-8a863d8b.jpg
Normal file
BIN
public/images/misc/firma1-8a863d8b.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
public/images/misc/firmenkunden-96736712-5fa99704.jpg
Normal file
BIN
public/images/misc/firmenkunden-96736712-5fa99704.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
BIN
public/images/misc/franz-8b76ccff-320f42cb.jpg
Normal file
BIN
public/images/misc/franz-8b76ccff-320f42cb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
public/images/misc/furkan-demirel-4112a488-f6dfc223.jpg
Normal file
BIN
public/images/misc/furkan-demirel-4112a488-f6dfc223.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
BIN
public/images/misc/internet-7b594a2d-793cefee.jpg
Normal file
BIN
public/images/misc/internet-7b594a2d-793cefee.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
public/images/misc/julia-20besler-f4fe1bff-fb0f3af2.jpg
Normal file
BIN
public/images/misc/julia-20besler-f4fe1bff-fb0f3af2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
BIN
public/images/misc/lorena-c31636eb-2f817bb4.jpg
Normal file
BIN
public/images/misc/lorena-c31636eb-2f817bb4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
BIN
public/images/misc/lukas-20schennach-0f7160e5-e8152f4f.jpg
Normal file
BIN
public/images/misc/lukas-20schennach-0f7160e5-e8152f4f.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
public/images/misc/lwl1-c8928579-d408002b.jpg
Normal file
BIN
public/images/misc/lwl1-c8928579-d408002b.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
BIN
public/images/misc/mario-20kien-f5e3602f-ddda3b58.jpg
Normal file
BIN
public/images/misc/mario-20kien-f5e3602f-ddda3b58.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
public/images/misc/martin-20m-c3-bcller-4422f545-ddb853b7.jpg
Normal file
BIN
public/images/misc/martin-20m-c3-bcller-4422f545-ddb853b7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
public/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg
Normal file
BIN
public/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
public/images/misc/serverraum-7225cb6a.jpg
Normal file
BIN
public/images/misc/serverraum-7225cb6a.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
public/images/misc/telefon-fa5e8c21-271d2135.jpg
Normal file
BIN
public/images/misc/telefon-fa5e8c21-271d2135.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
public/images/misc/telefonie1-ad7595f9.jpg
Normal file
BIN
public/images/misc/telefonie1-ad7595f9.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
BIN
public/images/misc/timo-224648e7-f0782cdb.jpg
Normal file
BIN
public/images/misc/timo-224648e7-f0782cdb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
public/images/misc/tv-business-c3bdfb94-23310090.jpg
Normal file
BIN
public/images/misc/tv-business-c3bdfb94-23310090.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
public/images/misc/tv-paytv-6cbac6e4-d140e2e4.jpg
Normal file
BIN
public/images/misc/tv-paytv-6cbac6e4-d140e2e4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
public/images/misc/tv-privat-76f60c7a-88eafcfb.jpg
Normal file
BIN
public/images/misc/tv-privat-76f60c7a-88eafcfb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
public/images/misc/wolfgang-20schwaiger-3fd3136b-19e15245.jpg
Normal file
BIN
public/images/misc/wolfgang-20schwaiger-3fd3136b-19e15245.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
public/images/services/lwl1-40360e27.jpg
Normal file
BIN
public/images/services/lwl1-40360e27.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 320 KiB |
BIN
public/images/services/tnr-leistungen-055053d5.jpg
Normal file
BIN
public/images/services/tnr-leistungen-055053d5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 683 KiB |
BIN
public/images/team/team-telenet-f9218567.jpg
Normal file
BIN
public/images/team/team-telenet-f9218567.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 274 KiB |
Reference in New Issue
Block a user