feat: Scaffold new Next.js website with core pages, components, and assets.

This commit is contained in:
1elle1
2026-02-06 11:19:57 +01:00
parent d63eb85218
commit db27ebf76f
53 changed files with 7756 additions and 0 deletions
+50
View File
@@ -0,0 +1,50 @@
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Datenschutz",
description: "Datenschutzhinweise der TeleNetSystems GmbH."
};
export default function DatenschutzPage() {
return (
<section className="section-block">
<div className="container-shell max-w-3xl space-y-7">
<header>
<p className="eyebrow">Rechtliches</p>
<h1 className="mt-2 text-4xl font-semibold text-alpine-900">Datenschutzerklaerung</h1>
</header>
<article className="surface-card space-y-4">
<h2 className="text-xl font-semibold text-alpine-900">1. Verantwortliche Stelle</h2>
<p className="text-sm text-alpine-700">
Verantwortlich fuer die Datenverarbeitung ist die TeleNetSystems GmbH, Untermarkt 12, 6600 Reutte,
Oesterreich, E-Mail: kontakt@telenetsystems.at.
</p>
<h2 className="text-xl font-semibold text-alpine-900">2. Zweck der Verarbeitung</h2>
<p className="text-sm text-alpine-700">
Personenbezogene Daten werden ausschliesslich fuer Anfragebearbeitung, Vertragsanbahnung und technischen
Support verarbeitet. Es werden keine Tracking- oder Marketing-Cookies ohne Einwilligung gesetzt.
</p>
<h2 className="text-xl font-semibold text-alpine-900">3. Ihre Rechte</h2>
<p className="text-sm text-alpine-700">
Sie haben das Recht auf Auskunft, Berichtigung, Loeschung, Einschraenkung, Datenuebertragbarkeit und
Widerspruch gemaess DSGVO. Anfragen richten Sie bitte an datenschutz@telenetsystems.at.
</p>
<h2 className="text-xl font-semibold text-alpine-900">4. Speicherdauer</h2>
<p className="text-sm text-alpine-700">
Daten werden nur so lange gespeichert, wie es fuer die jeweiligen Zwecke und gesetzliche Aufbewahrungspflichten
erforderlich ist.
</p>
<p className="text-sm text-alpine-700">
Hinweis: Vor Livegang sollten diese Informationen durch juristisch gepruefte, unternehmensspezifische Inhalte
ersetzt werden.
</p>
</article>
</div>
</section>
);
}
+135
View File
@@ -0,0 +1,135 @@
import type { Metadata } from "next";
import Image from "next/image";
import { ContactStrip } from "@/components/contact-strip";
import { PageHero } from "@/components/page-hero";
import { tvTariffs } from "@/lib/site-content";
export const metadata: Metadata = {
title: "Fernsehen fuer Privat und Business",
description:
"TV Privat, Pay TV und TV Business in Tirol: klar verglichen, einfach erklaert und mit persoenlicher Beratung in Reutte."
};
export default function FernsehenPage() {
return (
<>
<PageHero
eyebrow="Fernsehen"
title="TV-Pakete, die zu Ihrem Alltag passen"
intro="Privatpakete und Pay-TV sind direkt vergleichbar. TV Business planen wir separat, weil Anforderungen in Hotels, Gastro oder Unternehmen deutlich anders sind."
imageSrc="/assets/hero/tv-header-44c1e07b.jpg"
imageAlt="Fernsehangebot von TeleNetSystems"
primaryCta={{ label: "TV-Beratung anfragen", href: "/#kontakt" }}
secondaryCta={{ label: "Internet-Tarife", href: "/internet" }}
/>
<section className="section-block pt-6 bg-white/70">
<div className="container-shell space-y-10">
<div>
<p className="eyebrow">Vergleich | TV Privat</p>
<div className="mt-4 table-shell">
<table className="data-table">
<thead>
<tr>
<th>Paket</th>
<th>Sender</th>
<th>Extras</th>
<th>Passend fuer</th>
<th>Preis</th>
</tr>
</thead>
<tbody>
{tvTariffs.private.map((tariff) => (
<tr key={tariff.name}>
<td>{tariff.name}</td>
<td>{tariff.channels}</td>
<td>{tariff.extras}</td>
<td>{tariff.target}</td>
<td>{tariff.price}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<div>
<p className="eyebrow">Vergleich | Pay TV</p>
<div className="mt-4 table-shell">
<table className="data-table">
<thead>
<tr>
<th>Paket</th>
<th>Sender</th>
<th>Extras</th>
<th>Passend fuer</th>
<th>Preis</th>
</tr>
</thead>
<tbody>
{tvTariffs.payTv.map((tariff) => (
<tr key={tariff.name}>
<td>{tariff.name}</td>
<td>{tariff.channels}</td>
<td>{tariff.extras}</td>
<td>{tariff.target}</td>
<td>{tariff.price}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</section>
<section className="section-block">
<div className="container-shell grid gap-8 lg:grid-cols-[1fr_1fr] lg:items-center">
<div className="surface-card">
<p className="eyebrow">TV Business</p>
<h2 className="mt-2 text-3xl font-semibold text-alpine-900">Individuell statt One-Size-Fits-All.</h2>
<p className="mt-4 text-alpine-700">
Unternehmen brauchen meist mehr als ein Standardpaket. Darum planen wir TV Business immer als eigene
Loesung mit technischer Abstimmung vor Ort.
</p>
<ul className="mt-5 space-y-2 text-sm text-alpine-700">
{tvTariffs.business.map((point) => (
<li key={point}>- {point}</li>
))}
</ul>
</div>
<figure className="overflow-hidden rounded-3xl border border-alpine-200 bg-white shadow-soft">
<Image
alt="TV fuer Unternehmen"
className="h-[340px] w-full object-cover"
src="/assets/gallery/tv-business-c3bdfb94-23310090.jpg"
width={900}
height={560}
/>
</figure>
</div>
</section>
<section className="section-block bg-white/65">
<div className="container-shell grid gap-6 md:grid-cols-3">
<article className="surface-card">
<h3 className="text-xl font-semibold text-alpine-900">1. Bedarf klaeren</h3>
<p className="mt-3 text-sm text-alpine-700">Wie viele Geraete, welche Inhalte, welche Standorte?</p>
</article>
<article className="surface-card">
<h3 className="text-xl font-semibold text-alpine-900">2. Technik abstimmen</h3>
<p className="mt-3 text-sm text-alpine-700">Installation, Receiver, Netzstruktur und Laufzeit transparent festlegen.</p>
</article>
<article className="surface-card">
<h3 className="text-xl font-semibold text-alpine-900">3. Betrieb sichern</h3>
<p className="mt-3 text-sm text-alpine-700">Support aus Tirol, damit Ausfaelle in Stoerungszeiten kurz bleiben.</p>
</article>
</div>
</section>
<ContactStrip />
</>
);
}
+96
View File
@@ -0,0 +1,96 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--bg-main: #f5f9fc;
--bg-alt: #eef5fb;
--text-main: #143047;
--text-soft: #30526b;
--line: #d8e5f0;
--surface: #ffffff;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
}
body {
background:
radial-gradient(circle at 8% 0%, rgba(94, 156, 197, 0.2), transparent 34%),
radial-gradient(circle at 92% 12%, rgba(209, 126, 58, 0.14), transparent 30%),
linear-gradient(180deg, var(--bg-main), var(--bg-alt));
color: var(--text-main);
font-family: "Source Sans 3", "Avenir Next", "Segoe UI", sans-serif;
line-height: 1.45;
}
a {
color: inherit;
}
.font-heading,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Space Grotesk", "Trebuchet MS", "Avenir Next", sans-serif;
}
::selection {
background: rgba(205, 114, 45, 0.24);
}
@layer components {
.container-shell {
@apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
}
.section-block {
@apply py-14 md:py-20;
}
.eyebrow {
@apply font-heading text-xs font-semibold uppercase tracking-[0.24em] text-copper-600;
}
.surface-card {
@apply rounded-2xl border border-alpine-100 bg-white p-6 shadow-card;
}
.btn-primary {
@apply inline-flex items-center justify-center rounded-full border border-copper-600 bg-copper-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-copper-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-copper-500;
}
.btn-secondary {
@apply inline-flex items-center justify-center rounded-full border border-alpine-300 bg-white px-5 py-2.5 text-sm font-semibold text-alpine-700 transition hover:border-alpine-500 hover:text-alpine-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-alpine-500;
}
.nav-chip {
@apply inline-flex rounded-full border border-transparent px-3 py-1.5 transition hover:border-alpine-200 hover:bg-alpine-50 hover:text-alpine-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-alpine-500;
}
.table-shell {
@apply w-full overflow-hidden rounded-2xl border border-alpine-200 bg-white;
}
.data-table {
@apply w-full border-collapse text-left text-sm;
}
.data-table thead th {
@apply bg-alpine-50 px-4 py-3 font-semibold text-alpine-800;
}
.data-table tbody td {
@apply border-t border-alpine-100 px-4 py-3 text-alpine-700;
}
}
+42
View File
@@ -0,0 +1,42 @@
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Impressum",
description: "Impressum der TeleNetSystems GmbH gemaess oesterreichischer Informationspflichten."
};
export default function ImpressumPage() {
return (
<section className="section-block">
<div className="container-shell max-w-3xl space-y-7">
<header>
<p className="eyebrow">Rechtliches</p>
<h1 className="mt-2 text-4xl font-semibold text-alpine-900">Impressum</h1>
</header>
<article className="surface-card space-y-4">
<h2 className="text-xl font-semibold text-alpine-900">Angaben gemaess Paragraf 5 ECG</h2>
<p className="text-sm text-alpine-700">
TeleNetSystems GmbH<br />
Untermarkt 12<br />
6600 Reutte<br />
Oesterreich
</p>
<p className="text-sm text-alpine-700">
Telefon: +43 5672 219 40<br />
E-Mail: kontakt@telenetsystems.at
</p>
<p className="text-sm text-alpine-700">
Firmenbuchnummer: FN 000000a<br />
Firmenbuchgericht: Landesgericht Innsbruck<br />
UID-Nummer: ATU00000000
</p>
<p className="text-sm text-alpine-700">
Hinweis: Diese Angaben sind als Platzhalter zu verstehen und muessen vor Livegang mit den offiziellen
Unternehmensdaten abgeglichen werden.
</p>
</article>
</div>
</section>
);
}
+137
View File
@@ -0,0 +1,137 @@
import type { Metadata } from "next";
import Image from "next/image";
import { ContactStrip } from "@/components/contact-strip";
import { PageHero } from "@/components/page-hero";
import { internetTariffs } from "@/lib/site-content";
export const metadata: Metadata = {
title: "Internet in Reutte und Tirol",
description:
"Internet-Tarife fuer Reutte und Tirol: Kabel, Glasfaser und Business-Leitungen mit transparenten Preisen und regionalem Support."
};
export default function InternetPage() {
return (
<>
<PageHero
eyebrow="Internet"
title="Schnelles Internet fuer Alltag und Betrieb"
intro="Ob Familie, Homeoffice oder Unternehmensstandort: Sie sehen auf einen Blick, welche Geschwindigkeit, Vertragsdauer und Kosten zu Ihrem Bedarf passen."
imageSrc="/assets/gallery/internet-7b594a2d-793cefee.jpg"
imageAlt="Internetinfrastruktur von TeleNetSystems"
primaryCta={{ label: "Jetzt beraten lassen", href: "/#kontakt" }}
secondaryCta={{ label: "Fernsehen ansehen", href: "/fernsehen" }}
/>
<section className="section-block pt-6">
<div className="container-shell grid gap-5 md:grid-cols-3">
<article className="surface-card">
<h2 className="text-xl font-semibold text-alpine-900">Transparent kalkuliert</h2>
<p className="mt-3 text-sm text-alpine-700">Monatspreis, Aktivierung und Laufzeit sind offen dargestellt.</p>
</article>
<article className="surface-card">
<h2 className="text-xl font-semibold text-alpine-900">Stabil in Spitzenzeiten</h2>
<p className="mt-3 text-sm text-alpine-700">Tarife sind fuer Streaming, Homeoffice und Cloud-Nutzung ausgelegt.</p>
</article>
<article className="surface-card">
<h2 className="text-xl font-semibold text-alpine-900">Support vor Ort</h2>
<p className="mt-3 text-sm text-alpine-700">Keine Hotline-Odyssee. Unser Team sitzt in Tirol und kennt die Netze.</p>
</article>
</div>
</section>
<section className="section-block bg-white/70">
<div className="container-shell space-y-12">
<div>
<p className="eyebrow">Privatkunden | Kabel</p>
<div className="mt-4 table-shell">
<table className="data-table">
<thead>
<tr>
<th>Tarif</th>
<th>Geschwindigkeit</th>
<th>Laufzeit</th>
<th>Setup</th>
<th>Preis</th>
</tr>
</thead>
<tbody>
{internetTariffs.privateCable.map((tariff) => (
<tr key={tariff.name}>
<td>{tariff.name}</td>
<td>{tariff.speed}</td>
<td>{tariff.contract}</td>
<td>{tariff.setup}</td>
<td>{tariff.price}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<div>
<p className="eyebrow">Privatkunden | Glasfaser</p>
<div className="mt-4 table-shell">
<table className="data-table">
<thead>
<tr>
<th>Tarif</th>
<th>Geschwindigkeit</th>
<th>Laufzeit</th>
<th>Setup</th>
<th>Preis</th>
</tr>
</thead>
<tbody>
{internetTariffs.privateFiber.map((tariff) => (
<tr key={tariff.name}>
<td>{tariff.name}</td>
<td>{tariff.speed}</td>
<td>{tariff.contract}</td>
<td>{tariff.setup}</td>
<td>{tariff.price}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</section>
<section className="section-block">
<div className="container-shell grid gap-8 lg:grid-cols-[1fr_1fr] lg:items-center">
<div>
<p className="eyebrow">Business-Internet</p>
<h2 className="mt-2 text-3xl font-semibold text-alpine-900">Wenn Leitungen Teil Ihrer Betriebszeit sind.</h2>
<p className="mt-4 text-alpine-700">
Fuer Betriebe konfigurieren wir Internet nicht als Standardpaket, sondern passend zu Ausfallsicherheit,
Standortanzahl und Lastprofil.
</p>
<ul className="mt-4 space-y-2 text-sm text-alpine-700">
{internetTariffs.business.map((point) => (
<li className="surface-card py-3" key={point}>
{point}
</li>
))}
</ul>
</div>
<div className="overflow-hidden rounded-3xl border border-alpine-200 bg-white shadow-soft">
<Image
alt="Serverraum TeleNetSystems"
className="h-[340px] w-full object-cover"
src="/assets/gallery/serverraum-7225cb6a.jpg"
width={900}
height={560}
/>
</div>
</div>
</section>
<ContactStrip />
</>
);
}
+65
View File
@@ -0,0 +1,65 @@
import type { Metadata, Viewport } from "next";
import { SiteFooter } from "@/components/site-footer";
import { SiteHeader } from "@/components/site-header";
import "./globals.css";
export const metadata: Metadata = {
metadataBase: new URL("https://www.telenetsystems.at"),
title: {
default: "TeleNetSystems Reutte | Internet, TV und Telefonie in Tirol",
template: "%s | TeleNetSystems"
},
description:
"TeleNetSystems aus Reutte bietet Internet, Fernsehen, Telefonie und IT-Services fuer Privat- und Geschaeftskunden in Tirol. Transparent, regional und gut erreichbar.",
keywords: [
"Internet Reutte",
"TV Anbieter Tirol",
"Telefonie Tirol",
"IT Support Reutte",
"Telekommunikation Tirol",
"Business Internet Tirol"
],
openGraph: {
title: "TeleNetSystems Reutte",
description:
"Regionaler IT- und Telekompartner in Tirol fuer Internet, Fernsehen und Telefonie mit direktem Support.",
url: "https://www.telenetsystems.at",
siteName: "TeleNetSystems",
locale: "de_AT",
type: "website",
images: [
{
url: "/assets/hero/internet-header-431619ac.jpg",
width: 1200,
height: 630,
alt: "TeleNetSystems Infrastruktur in Tirol"
}
]
},
icons: {
icon: "/assets/logo/logo-systems-9fd0db14.png"
}
};
export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
themeColor: "#0c1d2a"
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="de">
<body>
<a className="sr-only focus:not-sr-only focus:absolute focus:left-3 focus:top-3 focus:z-50 focus:rounded-md focus:bg-white focus:px-3 focus:py-2" href="#inhalt">
Zum Inhalt springen
</a>
<SiteHeader />
<main id="inhalt">{children}</main>
<SiteFooter />
</body>
</html>
);
}
+111
View File
@@ -0,0 +1,111 @@
import type { Metadata } from "next";
import Link from "next/link";
import { ContactStrip } from "@/components/contact-strip";
import { PageHero } from "@/components/page-hero";
export const metadata: Metadata = {
title: "Leistungen fuer Privat und Business",
description:
"Uebersicht aller Leistungen von TeleNetSystems: Internet, Fernsehen, Telefonie und IT-Services fuer Privatkunden und Unternehmen in Tirol."
};
const serviceBlocks = [
{
title: "Internet",
text: "Kabel- und Glasfaseranschluesse fuer Zuhause sowie SLA-basierte Loesungen fuer Unternehmen.",
href: "/internet"
},
{
title: "Fernsehen",
text: "TV Privat, Pay TV und individuelle TV Business Konzepte fuer Hotels, Gastronomie und Betriebe.",
href: "/fernsehen"
},
{
title: "Telefonie",
text: "Festnetzpakete, SIP-Trunks und Erweiterungen fuer Teams mit mehreren Nebenstellen.",
href: "/telefonie"
},
{
title: "IT-Service",
text: "Planung, Inbetriebnahme und Wartung von Netzwerken sowie laufender technischer Support.",
href: "/#kontakt"
}
];
export default function LeistungenPage() {
return (
<>
<PageHero
eyebrow="Leistungen"
title="Alles aus einer Hand, ohne unnoetige Komplexitaet"
intro="TeleNetSystems kombiniert Telekommunikation mit praktischem IT-Service. Das reduziert Abstimmungsaufwand und sorgt dafuer, dass Technik zusammen funktioniert."
imageSrc="/assets/gallery/firma1-8a863d8b.jpg"
imageAlt="Standort TeleNetSystems in Tirol"
primaryCta={{ label: "Jetzt Bedarf klaeren", href: "/#kontakt" }}
secondaryCta={{ label: "Ueber uns", href: "/ueber-uns" }}
/>
<section className="section-block pt-6">
<div className="container-shell grid gap-5 md:grid-cols-2">
{serviceBlocks.map((service) => (
<article className="surface-card" key={service.title}>
<h2 className="text-2xl font-semibold text-alpine-900">{service.title}</h2>
<p className="mt-3 text-alpine-700">{service.text}</p>
<Link className="mt-4 inline-flex text-sm font-semibold text-copper-700 hover:text-copper-800" href={service.href}>
Mehr dazu -&gt;
</Link>
</article>
))}
</div>
</section>
<section className="section-block bg-white/70">
<div className="container-shell grid gap-6 lg:grid-cols-2">
<article className="surface-card border-moss-500/20 bg-gradient-to-br from-white via-white to-moss-500/5">
<p className="eyebrow text-moss-600">Privatkunden</p>
<h2 className="mt-2 text-2xl font-semibold text-alpine-900">Uebersichtlich und alltagstauglich</h2>
<ul className="mt-4 space-y-2 text-sm text-alpine-700">
<li>- Klare Pakete mit offenen Kosten</li>
<li>- Schnelle Hilfe bei Stoerungen</li>
<li>- Beratung ohne Fachjargon</li>
</ul>
</article>
<article className="surface-card border-copper-300/40 bg-gradient-to-br from-white via-white to-copper-100/40">
<p className="eyebrow">Geschaeftskunden</p>
<h2 className="mt-2 text-2xl font-semibold text-alpine-900">Planbar und skalierbar</h2>
<ul className="mt-4 space-y-2 text-sm text-alpine-700">
<li>- Individuelle Netz- und Kommunikationskonzepte</li>
<li>- SLA-orientierter Support</li>
<li>- Direkte Ansprechpartner fuer Technik und Projekte</li>
</ul>
</article>
</div>
</section>
<section className="section-block">
<div className="container-shell">
<p className="eyebrow">Zusammenarbeit</p>
<h2 className="mt-2 text-3xl font-semibold text-alpine-900">Wie wir Projekte in Tirol umsetzen</h2>
<div className="mt-7 grid gap-5 md:grid-cols-3">
<article className="surface-card">
<h3 className="text-xl font-semibold text-alpine-900">1. Analyse</h3>
<p className="mt-3 text-sm text-alpine-700">Wir nehmen Ist-Situation, Anforderungen und Budget sauber auf.</p>
</article>
<article className="surface-card">
<h3 className="text-xl font-semibold text-alpine-900">2. Umsetzung</h3>
<p className="mt-3 text-sm text-alpine-700">Installation und Inbetriebnahme erfolgen abgestimmt auf Ihren Betrieb.</p>
</article>
<article className="surface-card">
<h3 className="text-xl font-semibold text-alpine-900">3. Betrieb</h3>
<p className="mt-3 text-sm text-alpine-700">Wir bleiben als Servicepartner erreichbar, auch nach dem Go-live.</p>
</article>
</div>
</div>
</section>
<ContactStrip />
</>
);
}
+142
View File
@@ -0,0 +1,142 @@
import type { Metadata } from "next";
import Link from "next/link";
import { ContactStrip } from "@/components/contact-strip";
import { PageHero } from "@/components/page-hero";
import { company, faqItems, serviceHighlights, testimonials } from "@/lib/site-content";
export const metadata: Metadata = {
title: "Regionaler Telekom- und IT-Service in Reutte",
description:
"TeleNetSystems praesentiert Internet, Fernsehen und Telefonie fuer Privat- und Geschaeftskunden in Tirol. Mit klaren Tarifen und direktem Support aus Reutte."
};
const localBusinessSchema = {
"@context": "https://schema.org",
"@type": "LocalBusiness",
name: company.name,
areaServed: "Tirol",
address: {
"@type": "PostalAddress",
streetAddress: "Untermarkt 12",
postalCode: "6600",
addressLocality: "Reutte",
addressCountry: "AT"
},
telephone: company.phone,
email: company.email,
openingHours: ["Mo-Fr 08:00-17:30"],
sameAs: []
};
export default function HomePage() {
return (
<>
<PageHero
eyebrow="TeleNetSystems Reutte"
title="Technik, die laeuft. Support, der erreichbar bleibt."
intro="TeleNetSystems verbindet in Tirol private Haushalte und Betriebe mit stabilem Internet, Fernsehen und Telefonie. Sie bekommen transparente Angebote und ein Team aus der Region, das sich kuemmert."
imageSrc="/assets/hero/internet-header-431619ac.jpg"
imageAlt="Netzwerktechnik von TeleNetSystems"
primaryCta={{ label: "Beratung starten", href: "#kontakt" }}
secondaryCta={{ label: "Leistungen ansehen", href: "/leistungen" }}
/>
<section className="section-block pt-6">
<div className="container-shell">
<div className="mb-8 flex flex-wrap items-end justify-between gap-4">
<div>
<p className="eyebrow">Leistungsuebersicht</p>
<h2 className="mt-2 text-3xl font-semibold text-alpine-900">Drei Bereiche, klar getrennt aufgebaut.</h2>
</div>
<p className="max-w-xl text-alpine-700">
Erst Internet, dann Fernsehen, danach Telefonie: Die Reihenfolge folgt den haeufigsten Fragen in der
Beratung und macht die Entscheidung schneller.
</p>
</div>
<div className="grid gap-5 md:grid-cols-3">
{serviceHighlights.map((item) => (
<article className="surface-card flex h-full flex-col" key={item.title}>
<h3 className="text-xl font-semibold text-alpine-900">{item.title}</h3>
<p className="mt-3 flex-1 text-alpine-700">{item.text}</p>
<Link className="mt-5 inline-flex items-center text-sm font-semibold text-copper-700 hover:text-copper-800" href={item.href}>
Details ansehen -&gt;
</Link>
</article>
))}
</div>
</div>
</section>
<section className="section-block">
<div className="container-shell grid gap-6 lg:grid-cols-2">
<article className="surface-card border-moss-500/20 bg-gradient-to-br from-white via-white to-moss-500/5">
<p className="eyebrow text-moss-600">Privatkunden</p>
<h2 className="mt-2 text-2xl font-semibold text-alpine-900">Wenn Technik einfach funktionieren soll.</h2>
<ul className="mt-4 space-y-2 text-alpine-700">
<li>Klare Monatspreise ohne Tarifdschungel</li>
<li>TV-, Internet- und Telefoniepakete fuer den Alltag</li>
<li>Schnelle Hilfe bei Stoerungen, ohne Umwege</li>
</ul>
</article>
<article className="surface-card border-copper-300/40 bg-gradient-to-br from-white via-white to-copper-100/30">
<p className="eyebrow">Geschaeftskunden</p>
<h2 className="mt-2 text-2xl font-semibold text-alpine-900">Wenn Ausfaelle sofort Geld kosten.</h2>
<ul className="mt-4 space-y-2 text-alpine-700">
<li>Skalierbare Business-Leitungen mit SLA</li>
<li>Standortvernetzung und SIP-Telefonie aus einer Hand</li>
<li>Direkter Kontakt zu Technik und Projektleitung</li>
</ul>
</article>
</div>
</section>
<section className="section-block bg-white/65">
<div className="container-shell">
<p className="eyebrow">Stimmen aus Tirol</p>
<h2 className="mt-2 text-3xl font-semibold text-alpine-900">Vertrauen entsteht im Tagesgeschaeft.</h2>
<div className="mt-8 grid gap-5 md:grid-cols-3">
{testimonials.map((item) => (
<blockquote className="surface-card" key={item.author}>
<p className="text-alpine-700">{item.quote}</p>
<footer className="mt-4 text-sm text-alpine-600">
<span className="font-semibold text-alpine-800">{item.author}</span> | {item.context}
</footer>
</blockquote>
))}
</div>
</div>
</section>
<section className="section-block">
<div className="container-shell grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-start">
<div>
<p className="eyebrow">Hauefige Fragen</p>
<h2 className="mt-2 text-3xl font-semibold text-alpine-900">Was vor einem Wechsel oft unklar ist.</h2>
<p className="mt-4 text-alpine-700">
Diese Fragen kommen in der Erstberatung am haeufigsten. Wenn Ihr Punkt nicht dabei ist, klaeren wir ihn
telefonisch in wenigen Minuten.
</p>
</div>
<div className="space-y-3">
{faqItems.map((item) => (
<details className="surface-card p-0" key={item.question}>
<summary className="cursor-pointer list-none px-5 py-4 font-semibold text-alpine-900">{item.question}</summary>
<p className="border-t border-alpine-100 px-5 py-4 text-sm text-alpine-700">{item.answer}</p>
</details>
))}
</div>
</div>
</section>
<ContactStrip />
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(localBusinessSchema) }}
/>
</>
);
}
+11
View File
@@ -0,0 +1,11 @@
import type { MetadataRoute } from "next";
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: "*",
allow: "/"
},
sitemap: "https://www.telenetsystems.at/sitemap.xml"
};
}
+21
View File
@@ -0,0 +1,21 @@
import type { MetadataRoute } from "next";
const baseUrl = "https://www.telenetsystems.at";
export default function sitemap(): MetadataRoute.Sitemap {
return [
"",
"/internet",
"/fernsehen",
"/telefonie",
"/leistungen",
"/ueber-uns",
"/impressum",
"/datenschutz"
].map((path) => ({
url: `${baseUrl}${path}`,
lastModified: new Date(),
changeFrequency: "monthly",
priority: path === "" ? 1 : 0.8
}));
}
+105
View File
@@ -0,0 +1,105 @@
import type { Metadata } from "next";
import Image from "next/image";
import { ContactStrip } from "@/components/contact-strip";
import { PageHero } from "@/components/page-hero";
import { phoneTariffs } from "@/lib/site-content";
export const metadata: Metadata = {
title: "Telefonie fuer Privat und Unternehmen",
description:
"Telefonie-Angebote von TeleNetSystems in Tirol: einfache Pakete fuer Privatkunden und skalierbare SIP-Loesungen fuer Unternehmen."
};
export default function TelefoniePage() {
return (
<>
<PageHero
eyebrow="Telefonie"
title="Von Festnetz bis SIP: klar kalkulierbar"
intro="Telefonie muss im Alltag verlässlich sein. Deshalb zeigen wir Pakete mit klaren Inklusivleistungen und bieten fuer Unternehmen planbare SIP-Loesungen mit direktem Support."
imageSrc="/assets/gallery/telefon-fa5e8c21-271d2135.jpg"
imageAlt="Telefonie fuer Privat- und Geschaeftskunden"
primaryCta={{ label: "Telefonie anfragen", href: "/#kontakt" }}
secondaryCta={{ label: "Alle Leistungen", href: "/leistungen" }}
/>
<section className="section-block pt-6 bg-white/70">
<div className="container-shell">
<p className="eyebrow">Tarifvergleich</p>
<h2 className="mt-2 text-3xl font-semibold text-alpine-900">So unterscheiden sich die Pakete.</h2>
<div className="mt-6 table-shell">
<table className="data-table">
<thead>
<tr>
<th>Tarif</th>
<th>Rufnummern</th>
<th>Inklusive</th>
<th>Setup</th>
<th>Preis</th>
</tr>
</thead>
<tbody>
{phoneTariffs.map((tariff) => (
<tr key={tariff.name}>
<td>{tariff.name}</td>
<td>{tariff.lines}</td>
<td>{tariff.included}</td>
<td>{tariff.setup}</td>
<td>{tariff.price}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</section>
<section className="section-block">
<div className="container-shell grid gap-6 lg:grid-cols-2">
<article className="surface-card">
<p className="eyebrow">Privat</p>
<h2 className="mt-2 text-2xl font-semibold text-alpine-900">Einfach erreichbar bleiben</h2>
<p className="mt-3 text-alpine-700">
Ideal fuer Haushalte, die Festnetz als verlaesslichen Kanal behalten wollen. Portierung bestehender
Nummern ist bei jedem Paket vorgesehen.
</p>
</article>
<article className="surface-card">
<p className="eyebrow">Business</p>
<h2 className="mt-2 text-2xl font-semibold text-alpine-900">Skalierbar fuers Unternehmen</h2>
<p className="mt-3 text-alpine-700">
SIP-Trunks, Nebenstellen, zentrale Steuerung und saubere Einbindung in Ihre bestehende IT-Landschaft.
Genau abgestimmt auf Teamsize und Anrufvolumen.
</p>
</article>
</div>
</section>
<section className="section-block bg-white/65">
<div className="container-shell grid gap-7 lg:grid-cols-[1fr_1fr] lg:items-center">
<div>
<p className="eyebrow">Technik, verstaendlich erklaert</p>
<h2 className="mt-2 text-3xl font-semibold text-alpine-900">Keine Konfigurationsraetsel.</h2>
<p className="mt-4 text-alpine-700">
Einrichtung und Umstellung begleiten wir Schritt fuer Schritt. Das gilt fuer den privaten Router genauso
wie fuer Business-Telefonanlagen mit mehreren Standorten.
</p>
</div>
<div className="overflow-hidden rounded-3xl border border-alpine-200 bg-white shadow-soft">
<Image
alt="Telefonie-Setup"
className="h-[320px] w-full object-cover"
src="/assets/gallery/telefonie1-ad7595f9.jpg"
width={900}
height={560}
/>
</div>
</div>
</section>
<ContactStrip />
</>
);
}
+108
View File
@@ -0,0 +1,108 @@
import type { Metadata } from "next";
import Image from "next/image";
import { ContactStrip } from "@/components/contact-strip";
import { PageHero } from "@/components/page-hero";
import { teamMembers } from "@/lib/site-content";
export const metadata: Metadata = {
title: "Ueber TeleNetSystems",
description:
"TeleNetSystems aus Reutte: Team, Werte und Arbeitsweise fuer regionale Telekommunikations- und IT-Dienstleistungen in Tirol."
};
const values = [
{
title: "Verlaesslichkeit",
text: "Wir versprechen nur Leistungen, die wir technisch und organisatorisch halten koennen."
},
{
title: "Nahbarkeit",
text: "Sie sprechen mit Menschen aus der Region, nicht mit anonymen Weiterleitungen."
},
{
title: "Klarheit",
text: "Angebote und Entscheidungen bleiben nachvollziehbar, auch wenn die Technik komplex ist."
}
];
export default function UeberUnsPage() {
return (
<>
<PageHero
eyebrow="Ueber uns"
title="TeleNetSystems ist in Reutte zuhause"
intro="Wir arbeiten fuer Menschen und Betriebe in Tirol, die eine stabile technische Basis und eine erreichbare Betreuung brauchen. Genau darauf ist unser Team ausgerichtet."
imageSrc="/assets/gallery/firmenkunden-96736712-5fa99704.jpg"
imageAlt="Teamarbeit bei TeleNetSystems"
primaryCta={{ label: "Kontakt aufnehmen", href: "/#kontakt" }}
secondaryCta={{ label: "Leistungen", href: "/leistungen" }}
/>
<section className="section-block pt-6">
<div className="container-shell grid gap-8 lg:grid-cols-[1fr_1fr]">
<article className="surface-card">
<p className="eyebrow">Unsere Geschichte</p>
<h2 className="mt-2 text-3xl font-semibold text-alpine-900">Vom regionalen Anbieter zum festen IT-Partner</h2>
<p className="mt-4 text-alpine-700">
TeleNetSystems ist als regionales Telekom-Team gestartet und hat das Angebot schrittweise um
IT-Dienstleistungen erweitert. Heute betreuen wir private Haushalte, Handwerksbetriebe, Hotels und
mittelstaendische Unternehmen in ganz Tirol.
</p>
</article>
<article className="surface-card bg-alpine-900 text-alpine-50">
<p className="eyebrow text-copper-300">Regional verankert</p>
<h2 className="mt-2 text-3xl font-semibold text-white">Reutte als Basis, Tirol als Einsatzgebiet</h2>
<ul className="mt-4 space-y-2 text-sm text-alpine-100">
<li>- Kurze Wege zu Kundenterminen</li>
<li>- Schnelle Abstimmung zwischen Beratung und Technik</li>
<li>- Langfristige Kundenbeziehungen statt kurzfristiger Abschluesse</li>
</ul>
</article>
</div>
</section>
<section className="section-block bg-white/70">
<div className="container-shell">
<p className="eyebrow">Werte</p>
<h2 className="mt-2 text-3xl font-semibold text-alpine-900">So arbeiten wir im Alltag</h2>
<div className="mt-7 grid gap-5 md:grid-cols-3">
{values.map((value) => (
<article className="surface-card" key={value.title}>
<h3 className="text-xl font-semibold text-alpine-900">{value.title}</h3>
<p className="mt-3 text-sm text-alpine-700">{value.text}</p>
</article>
))}
</div>
</div>
</section>
<section className="section-block">
<div className="container-shell">
<p className="eyebrow">Team</p>
<h2 className="mt-2 text-3xl font-semibold text-alpine-900">Ihre Ansprechpartner bei TeleNetSystems</h2>
<div className="mt-7 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
{teamMembers.map((member) => (
<article className="overflow-hidden rounded-2xl border border-alpine-200 bg-white shadow-card" key={member.name}>
<Image
alt={`${member.name} von TeleNetSystems`}
className="h-56 w-full object-cover"
src={member.image}
width={420}
height={420}
/>
<div className="p-4">
<h3 className="font-semibold text-alpine-900">{member.name}</h3>
<p className="mt-1 text-sm text-alpine-700">{member.role}</p>
</div>
</article>
))}
</div>
</div>
</section>
<ContactStrip />
</>
);
}