feat: Scaffold new Next.js website with core pages, components, and assets.
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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 ->
|
||||
</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
@@ -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 ->
|
||||
</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) }}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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"
|
||||
};
|
||||
}
|
||||
@@ -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
|
||||
}));
|
||||
}
|
||||
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user