feat: Add initial Next.js website for TelenetSystems, including core pages, components, and assets.

website/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

website/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

website/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

website/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

website/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "website",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "framer-motion": "^12.31.1",
+    "lucide-react": "^0.563.0",
+    "next": "16.1.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

website/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

website/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

website/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

website/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

website/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

website/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

website/src/app/datenschutz/page.tsx

@@ -0,0 +1,209 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Datenschutz",
+  description: "Datenschutzerklärung von TeleNetSystems gemäß DSGVO.",
+};
+
+export default function DatenschutzPage() {
+  return (
+    <div className="py-20 bg-white">
+      <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
+        <h1 className="text-3xl sm:text-4xl font-bold text-foreground mb-8">
+          Datenschutzerklärung
+        </h1>
+
+        <div className="prose prose-lg max-w-none text-muted-foreground">
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              1. Datenschutz auf einen Blick
+            </h2>
+            <h3 className="text-lg font-medium text-foreground mt-6 mb-3">
+              Allgemeine Hinweise
+            </h3>
+            <p>
+              Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit
+              Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen.
+              Personenbezogene Daten sind alle Daten, mit denen Sie persönlich
+              identifiziert werden können.
+            </p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              2. Verantwortliche Stelle
+            </h2>
+            <p>
+              TeleNetSystems GmbH<br />
+              Musterstraße 1<br />
+              6600 Reutte<br />
+              Österreich
+            </p>
+            <p className="mt-4">
+              Telefon: +43 5672 2000<br />
+              E-Mail: info@telenetsystems.at
+            </p>
+            <p className="mt-4">
+              Verantwortliche Stelle ist die natürliche oder juristische Person, die
+              allein oder gemeinsam mit anderen über die Zwecke und Mittel der
+              Verarbeitung von personenbezogenen Daten entscheidet.
+            </p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              3. Datenerfassung auf dieser Website
+            </h2>
+
+            <h3 className="text-lg font-medium text-foreground mt-6 mb-3">
+              Server-Log-Dateien
+            </h3>
+            <p>
+              Der Provider dieser Website erhebt und speichert automatisch
+              Informationen in so genannten Server-Log-Dateien, die Ihr Browser
+              automatisch an uns übermittelt. Dies sind:
+            </p>
+            <ul className="list-disc pl-6 mt-2 space-y-1">
+              <li>Browsertyp und Browserversion</li>
+              <li>Verwendetes Betriebssystem</li>
+              <li>Referrer URL</li>
+              <li>Hostname des zugreifenden Rechners</li>
+              <li>Uhrzeit der Serveranfrage</li>
+              <li>IP-Adresse</li>
+            </ul>
+            <p className="mt-4">
+              Eine Zusammenführung dieser Daten mit anderen Datenquellen wird nicht
+              vorgenommen. Die Erfassung dieser Daten erfolgt auf Grundlage von Art. 6
+              Abs. 1 lit. f DSGVO.
+            </p>
+
+            <h3 className="text-lg font-medium text-foreground mt-6 mb-3">
+              Kontaktformular
+            </h3>
+            <p>
+              Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre
+              Angaben aus dem Anfrageformular inklusive der von Ihnen dort angegebenen
+              Kontaktdaten zwecks Bearbeitung der Anfrage und für den Fall von
+              Anschlussfragen bei uns gespeichert.
+            </p>
+            <p className="mt-4">
+              Die Verarbeitung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1
+              lit. b DSGVO, sofern Ihre Anfrage mit der Erfüllung eines Vertrags
+              zusammenhängt oder zur Durchführung vorvertraglicher Maßnahmen
+              erforderlich ist.
+            </p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              4. Ihre Rechte
+            </h2>
+            <p>
+              Sie haben jederzeit das Recht, unentgeltlich Auskunft über Herkunft,
+              Empfänger und Zweck Ihrer gespeicherten personenbezogenen Daten zu
+              erhalten. Sie haben außerdem ein Recht, die Berichtigung oder Löschung
+              dieser Daten zu verlangen.
+            </p>
+            <p className="mt-4">Ihnen stehen folgende Rechte zu:</p>
+            <ul className="list-disc pl-6 mt-2 space-y-1">
+              <li>
+                <strong>Auskunftsrecht (Art. 15 DSGVO):</strong> Sie können Auskunft
+                über Ihre von uns verarbeiteten personenbezogenen Daten verlangen.
+              </li>
+              <li>
+                <strong>Recht auf Berichtigung (Art. 16 DSGVO):</strong> Sie können
+                die Berichtigung unrichtiger oder die Vervollständigung Ihrer bei uns
+                gespeicherten personenbezogenen Daten verlangen.
+              </li>
+              <li>
+                <strong>Recht auf Löschung (Art. 17 DSGVO):</strong> Sie können die
+                Löschung Ihrer bei uns gespeicherten personenbezogenen Daten
+                verlangen.
+              </li>
+              <li>
+                <strong>Recht auf Einschränkung (Art. 18 DSGVO):</strong> Sie können
+                die Einschränkung der Verarbeitung Ihrer personenbezogenen Daten
+                verlangen.
+              </li>
+              <li>
+                <strong>Recht auf Datenübertragbarkeit (Art. 20 DSGVO):</strong> Sie
+                können verlangen, Ihre personenbezogenen Daten in einem
+                maschinenlesbaren Format zu erhalten.
+              </li>
+              <li>
+                <strong>Widerspruchsrecht (Art. 21 DSGVO):</strong> Sie können
+                jederzeit gegen die Verarbeitung Ihrer personenbezogenen Daten
+                Widerspruch einlegen.
+              </li>
+            </ul>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              5. Keine Verwendung von Tracking-Tools
+            </h2>
+            <p>
+              Diese Website verwendet keine Tracking-Tools, Analyse-Dienste oder
+              Cookies zu Werbezwecken. Wir verzichten bewusst auf die Erfassung Ihres
+              Nutzungsverhaltens über solche Dienste.
+            </p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              6. SSL-/TLS-Verschlüsselung
+            </h2>
+            <p>
+              Diese Seite nutzt aus Sicherheitsgründen und zum Schutz der Übertragung
+              vertraulicher Inhalte eine SSL-/TLS-Verschlüsselung. Eine verschlüsselte
+              Verbindung erkennen Sie daran, dass die Adresszeile des Browsers von
+              &quot;http://&quot; auf &quot;https://&quot; wechselt und an dem Schloss-Symbol in Ihrer
+              Browserzeile.
+            </p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              7. Beschwerderecht bei der Aufsichtsbehörde
+            </h2>
+            <p>
+              Wenn Sie der Ansicht sind, dass die Verarbeitung Ihrer personenbezogenen
+              Daten gegen die DSGVO verstößt, haben Sie das Recht, bei einer
+              Aufsichtsbehörde Beschwerde einzulegen.
+            </p>
+            <p className="mt-4">
+              Zuständige Aufsichtsbehörde in Österreich:<br />
+              Österreichische Datenschutzbehörde<br />
+              Barichgasse 40-42<br />
+              1030 Wien<br />
+              <a
+                href="https://www.dsb.gv.at"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary hover:underline"
+              >
+                www.dsb.gv.at
+              </a>
+            </p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              8. Änderungen dieser Datenschutzerklärung
+            </h2>
+            <p>
+              Wir behalten uns vor, diese Datenschutzerklärung anzupassen, damit sie
+              stets den aktuellen rechtlichen Anforderungen entspricht oder um
+              Änderungen unserer Leistungen umzusetzen. Für Ihren erneuten Besuch gilt
+              dann die neue Datenschutzerklärung.
+            </p>
+          </section>
+        </div>
+
+        <p className="text-sm text-muted-foreground mt-12">
+          Stand: Februar 2026
+        </p>
+      </div>
+    </div>
+  );
+}

website/src/app/fernsehen/layout.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Fernsehen",
+  description:
+    "Erleben Sie kristallklares TV-Vergnügen mit TeleNetSystems. Große Senderauswahl, HD-Qualität und regionale Programme in Tirol.",
+};
+
+export default function FernsehenLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

website/src/app/fernsehen/page.tsx

@@ -0,0 +1,360 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import {
+  Tv,
+  Check,
+  ChevronRight,
+  Play,
+  Monitor,
+  Film,
+  Sparkles,
+  Users,
+} from "lucide-react";
+
+const features = [
+  {
+    icon: Monitor,
+    title: "HD-Qualität",
+    description: "Gestochen scharfes Bild auf allen Sendern in HD-Auflösung.",
+  },
+  {
+    icon: Film,
+    title: "Große Senderauswahl",
+    description: "Über 100 Sender aus Österreich, Deutschland und international.",
+  },
+  {
+    icon: Play,
+    title: "Mediatheken",
+    description: "Zugriff auf Mediatheken für zeitversetztes Fernsehen.",
+  },
+  {
+    icon: Sparkles,
+    title: "Regionale Sender",
+    description: "Lokale Tiroler Sender für Nachrichten aus der Region.",
+  },
+];
+
+const packages = [
+  {
+    name: "Basis",
+    description: "Das Wesentliche für den täglichen TV-Genuss",
+    channels: "60+",
+    highlights: [
+      "Alle österreichischen Hauptsender",
+      "Deutsche Free-TV-Sender",
+      "SD & HD-Qualität",
+      "Elektronische Programmzeitschrift",
+    ],
+  },
+  {
+    name: "Komfort",
+    description: "Mehr Auswahl für die ganze Familie",
+    channels: "100+",
+    highlights: [
+      "Alle Basis-Sender",
+      "Zusätzliche Spartensender",
+      "Internationale Sender",
+      "Aufnahmefunktion",
+    ],
+    popular: true,
+  },
+  {
+    name: "Premium",
+    description: "Das volle Programm für Vielseher",
+    channels: "150+",
+    highlights: [
+      "Alle Komfort-Sender",
+      "Pay-TV-Pakete inklusive",
+      "Sport & Film Channels",
+      "4K-Inhalte verfügbar",
+    ],
+  },
+];
+
+const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.5 },
+};
+
+export default function FernsehenPage() {
+  return (
+    <>
+      {/* Hero Section */}
+      <section className="relative bg-gradient-to-br from-muted to-white overflow-hidden">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary/5 via-transparent to-transparent" />
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <div className="flex items-center gap-2 mb-6">
+                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <Tv className="w-5 h-5 text-primary" />
+                </div>
+                <span className="text-sm font-medium text-muted-foreground">
+                  TV-Dienste
+                </span>
+              </div>
+              <h1 className="text-4xl sm:text-5xl font-bold text-foreground leading-tight mb-6">
+                Fernsehen in{" "}
+                <span className="text-primary">bester Qualität</span>
+              </h1>
+              <p className="text-lg text-muted-foreground leading-relaxed mb-8">
+                Erleben Sie kristallklares TV-Vergnügen mit einer großen Auswahl an
+                Sendern. Von regionalen Tiroler Programmen bis hin zu internationalen
+                Channels – alles in HD-Qualität.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Link
+                  href="#pakete"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3.5 text-base font-medium text-white hover:bg-primary-dark transition-colors"
+                >
+                  Pakete ansehen
+                  <ChevronRight className="w-5 h-5" />
+                </Link>
+                <Link
+                  href="#kontakt"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg border-2 border-foreground/10 px-6 py-3.5 text-base font-medium text-foreground hover:border-primary hover:text-primary transition-colors"
+                >
+                  Beratung anfragen
+                </Link>
+              </div>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="relative hidden lg:block"
+            >
+              <div className="relative aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl">
+                <Image
+                  src="/images/hero/tv-header.jpg"
+                  alt="Familie genießt TV-Unterhaltung"
+                  fill
+                  className="object-cover"
+                  priority
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-foreground/30 to-transparent" />
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-20 bg-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="text-center max-w-2xl mx-auto mb-16"
+          >
+            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
+              TV-Erlebnis der Extraklasse
+            </h2>
+            <p className="text-lg text-muted-foreground">
+              Modernste Technik für ungetrübten Fernsehgenuss – einfach anschließen und
+              loslegen.
+            </p>
+          </motion.div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
+            {features.map((feature, index) => (
+              <motion.div
+                key={feature.title}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className="text-center p-6"
+              >
+                <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-5">
+                  <feature.icon className="w-7 h-7 text-primary" />
+                </div>
+                <h3 className="text-lg font-semibold text-foreground mb-2">
+                  {feature.title}
+                </h3>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  {feature.description}
+                </p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Packages Section */}
+      <section id="pakete" className="py-20 bg-muted">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="text-center max-w-2xl mx-auto mb-16"
+          >
+            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
+              Unsere TV-Pakete
+            </h2>
+            <p className="text-lg text-muted-foreground">
+              Wählen Sie das Paket, das zu Ihren Sehgewohnheiten passt. Alle Pakete
+              ohne versteckte Kosten.
+            </p>
+          </motion.div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {packages.map((pkg, index) => (
+              <motion.div
+                key={pkg.name}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className={`relative rounded-2xl p-8 ${
+                  pkg.popular
+                    ? "bg-foreground text-white"
+                    : "bg-white border border-border"
+                }`}
+              >
+                {pkg.popular && (
+                  <span className="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 bg-primary text-white text-xs font-medium rounded-full">
+                    Beliebt
+                  </span>
+                )}
+                <h3
+                  className={`text-xl font-bold mb-2 ${
+                    pkg.popular ? "text-white" : "text-foreground"
+                  }`}
+                >
+                  {pkg.name}
+                </h3>
+                <p
+                  className={`text-sm mb-6 ${
+                    pkg.popular ? "text-white/70" : "text-muted-foreground"
+                  }`}
+                >
+                  {pkg.description}
+                </p>
+                <div className="mb-6">
+                  <span
+                    className={`text-4xl font-bold ${
+                      pkg.popular ? "text-primary" : "text-primary"
+                    }`}
+                  >
+                    {pkg.channels}
+                  </span>
+                  <span
+                    className={`text-sm ml-2 ${
+                      pkg.popular ? "text-white/70" : "text-muted-foreground"
+                    }`}
+                  >
+                    Sender
+                  </span>
+                </div>
+                <ul className="space-y-3 mb-8">
+                  {pkg.highlights.map((highlight) => (
+                    <li key={highlight} className="flex items-start gap-3">
+                      <Check
+                        className={`w-5 h-5 flex-shrink-0 ${
+                          pkg.popular ? "text-primary" : "text-primary"
+                        }`}
+                      />
+                      <span
+                        className={`text-sm ${
+                          pkg.popular ? "text-white/90" : "text-muted-foreground"
+                        }`}
+                      >
+                        {highlight}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+                <Link
+                  href="#kontakt"
+                  className={`block w-full text-center rounded-lg px-6 py-3 text-sm font-medium transition-colors ${
+                    pkg.popular
+                      ? "bg-primary text-white hover:bg-primary-dark"
+                      : "bg-foreground text-white hover:bg-foreground/90"
+                  }`}
+                >
+                  Jetzt anfragen
+                </Link>
+              </motion.div>
+            ))}
+          </div>
+
+          <p className="text-center text-sm text-muted-foreground mt-8">
+            Preise auf Anfrage. Wir beraten Sie gerne zu dem für Sie passenden Paket.
+          </p>
+        </div>
+      </section>
+
+      {/* Testimonial Section */}
+      <section className="py-20 bg-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="max-w-3xl mx-auto text-center"
+          >
+            <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-6">
+              <Users className="w-8 h-8 text-primary" />
+            </div>
+            <blockquote className="text-xl sm:text-2xl text-foreground leading-relaxed mb-6">
+              &ldquo;Seit wir zu TeleNetSystems gewechselt haben, ist das Fernsehbild
+              endlich stabil und scharf. Besonders die regionalen Sender gefallen uns
+              sehr gut.&rdquo;
+            </blockquote>
+            <p className="font-semibold text-foreground">Familie Hofer</p>
+            <p className="text-sm text-muted-foreground">Reutte</p>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section id="kontakt" className="py-20 bg-primary">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+              Interesse geweckt?
+            </h2>
+            <p className="text-lg text-white/80 max-w-2xl mx-auto mb-8">
+              Lassen Sie sich unverbindlich beraten. Wir finden das passende TV-Paket
+              für Ihre Bedürfnisse.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Link
+                href="/#kontakt"
+                className="inline-flex items-center justify-center gap-2 rounded-lg bg-white px-6 py-3.5 text-base font-medium text-primary hover:bg-white/90 transition-colors"
+              >
+                Kontakt aufnehmen
+                <ChevronRight className="w-5 h-5" />
+              </Link>
+              <a
+                href="tel:+4356722000"
+                className="inline-flex items-center justify-center gap-2 rounded-lg border-2 border-white/30 px-6 py-3.5 text-base font-medium text-white hover:bg-white/10 transition-colors"
+              >
+                +43 5672 2000
+              </a>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+    </>
+  );
+}

website/src/app/globals.css

@@ -0,0 +1,50 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #1a1a1a;
+  --primary: #f39210;
+  --primary-dark: #d97d06;
+  --secondary: #e95b24;
+  --accent: #f59e0b;
+  --muted: #f5f5f5;
+  --muted-foreground: #737373;
+  --border: #e5e5e5;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-primary-dark: var(--primary-dark);
+  --color-secondary: var(--secondary);
+  --color-accent: var(--accent);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans), system-ui, sans-serif;
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Focus styles for accessibility */
+*:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+/* Selection styling */
+::selection {
+  background-color: var(--primary);
+  color: white;
+}

website/src/app/impressum/page.tsx

@@ -0,0 +1,167 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Impressum",
+  description: "Impressum und rechtliche Informationen zu TeleNetSystems.",
+};
+
+export default function ImpressumPage() {
+  return (
+    <div className="py-20 bg-white">
+      <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
+        <h1 className="text-3xl sm:text-4xl font-bold text-foreground mb-8">
+          Impressum
+        </h1>
+
+        <div className="prose prose-lg max-w-none text-muted-foreground">
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              Angaben gemäß § 5 ECG
+            </h2>
+            <p>
+              TeleNetSystems GmbH<br />
+              Musterstraße 1<br />
+              6600 Reutte<br />
+              Österreich
+            </p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">Kontakt</h2>
+            <p>
+              Telefon: +43 5672 2000<br />
+              E-Mail: info@telenetsystems.at
+            </p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              Unternehmensgegenstand
+            </h2>
+            <p>
+              IT- und Telekommunikationsdienstleistungen, Bereitstellung von TV-,
+              Internet- und Telefoniediensten.
+            </p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              Firmenbuchnummer
+            </h2>
+            <p>FN XXXXXX (Landesgericht Innsbruck)</p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              UID-Nummer
+            </h2>
+            <p>ATU XXXXXXXX</p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              Geschäftsführung
+            </h2>
+            <p>[Name der Geschäftsführung]</p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              Aufsichtsbehörde
+            </h2>
+            <p>
+              Bezirkshauptmannschaft Reutte<br />
+              Rundfunk und Telekom Regulierungs-GmbH (RTR)
+            </p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              Berufsbezeichnung und berufsrechtliche Regelungen
+            </h2>
+            <p>
+              Gewerbeordnung (GewO)<br />
+              Telekommunikationsgesetz (TKG 2021)
+            </p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              Streitschlichtung
+            </h2>
+            <p>
+              Die Europäische Kommission stellt eine Plattform zur
+              Online-Streitbeilegung (OS) bereit:{" "}
+              <a
+                href="https://ec.europa.eu/consumers/odr"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary hover:underline"
+              >
+                https://ec.europa.eu/consumers/odr
+              </a>
+            </p>
+            <p className="mt-4">
+              Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren
+              vor einer Verbraucherschlichtungsstelle teilzunehmen.
+            </p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              Haftung für Inhalte
+            </h2>
+            <p>
+              Als Diensteanbieter sind wir für eigene Inhalte auf diesen Seiten nach
+              den allgemeinen Gesetzen verantwortlich. Wir sind jedoch nicht
+              verpflichtet, übermittelte oder gespeicherte fremde Informationen zu
+              überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige
+              Tätigkeit hinweisen.
+            </p>
+            <p className="mt-4">
+              Verpflichtungen zur Entfernung oder Sperrung der Nutzung von
+              Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt.
+              Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der
+              Kenntnis einer konkreten Rechtsverletzung möglich.
+            </p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              Haftung für Links
+            </h2>
+            <p>
+              Unser Angebot enthält Links zu externen Websites Dritter, auf deren
+              Inhalte wir keinen Einfluss haben. Für die Inhalte der verlinkten
+              Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten
+              verantwortlich.
+            </p>
+            <p className="mt-4">
+              Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch
+              ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei
+              Bekanntwerden von Rechtsverletzungen werden wir derartige Links
+              umgehend entfernen.
+            </p>
+          </section>
+
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              Urheberrecht
+            </h2>
+            <p>
+              Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen
+              Seiten unterliegen dem österreichischen Urheberrecht. Die
+              Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung
+              außerhalb der Grenzen des Urheberrechts bedürfen der schriftlichen
+              Zustimmung des jeweiligen Autors bzw. Erstellers.
+            </p>
+          </section>
+        </div>
+
+        <p className="text-sm text-muted-foreground mt-12">
+          Stand: Februar 2026
+        </p>
+      </div>
+    </div>
+  );
+}

website/src/app/internet/layout.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Internet",
+  description:
+    "Schnelles und stabiles Internet von TeleNetSystems. Zuverlässige Verbindungen für Privat- und Geschäftskunden in Tirol.",
+};
+
+export default function InternetLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

website/src/app/internet/page.tsx

@@ -0,0 +1,419 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import {
+  Wifi,
+  Check,
+  ChevronRight,
+  Zap,
+  Shield,
+  Clock,
+  Home,
+  Building2,
+  Users,
+} from "lucide-react";
+
+const features = [
+  {
+    icon: Zap,
+    title: "Schnelle Verbindung",
+    description: "Hohe Bandbreiten für Streaming, Gaming und Arbeiten von zu Hause.",
+  },
+  {
+    icon: Shield,
+    title: "Stabile Leitung",
+    description: "Zuverlässige Infrastruktur für unterbrechungsfreies Surfen.",
+  },
+  {
+    icon: Clock,
+    title: "Schneller Support",
+    description: "Bei Problemen sind wir schnell für Sie da – regional vor Ort.",
+  },
+  {
+    icon: Home,
+    title: "Einfache Installation",
+    description: "Unkomplizierte Einrichtung durch unsere Techniker.",
+  },
+];
+
+const packages = [
+  {
+    name: "Starter",
+    description: "Ideal für Einsteiger und gelegentliche Nutzung",
+    speed: "50",
+    highlights: [
+      "Bis zu 50 Mbit/s Download",
+      "Ideal für E-Mail & Surfen",
+      "Stabiler Anschluss",
+      "WLAN-Router inklusive",
+    ],
+  },
+  {
+    name: "Komfort",
+    description: "Perfekt für Familien und Home-Office",
+    speed: "100",
+    highlights: [
+      "Bis zu 100 Mbit/s Download",
+      "HD-Streaming ohne Ruckeln",
+      "Mehrere Geräte gleichzeitig",
+      "WLAN-Router inklusive",
+    ],
+    popular: true,
+  },
+  {
+    name: "Power",
+    description: "Maximale Leistung für höchste Ansprüche",
+    speed: "200",
+    highlights: [
+      "Bis zu 200 Mbit/s Download",
+      "4K-Streaming & Gaming",
+      "Home-Office ohne Grenzen",
+      "Premium WLAN-Router",
+    ],
+  },
+];
+
+const businessFeatures = [
+  "Dedizierte Geschäftsleitungen",
+  "Service Level Agreements (SLA)",
+  "Persönlicher Ansprechpartner",
+  "Priorisierter Support",
+  "Statische IP-Adressen",
+  "Individuelle Bandbreiten",
+];
+
+const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.5 },
+};
+
+export default function InternetPage() {
+  return (
+    <>
+      {/* Hero Section */}
+      <section className="relative bg-gradient-to-br from-muted to-white overflow-hidden">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary/5 via-transparent to-transparent" />
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <div className="flex items-center gap-2 mb-6">
+                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <Wifi className="w-5 h-5 text-primary" />
+                </div>
+                <span className="text-sm font-medium text-muted-foreground">
+                  Internet-Dienste
+                </span>
+              </div>
+              <h1 className="text-4xl sm:text-5xl font-bold text-foreground leading-tight mb-6">
+                Schnelles Internet{" "}
+                <span className="text-primary">aus der Region</span>
+              </h1>
+              <p className="text-lg text-muted-foreground leading-relaxed mb-8">
+                Zuverlässige Internetverbindungen für Ihr Zuhause oder Ihr Unternehmen.
+                Mit TeleNetSystems surfen Sie stabil und schnell – unterstützt durch
+                lokalen Service vor Ort.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Link
+                  href="#pakete"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3.5 text-base font-medium text-white hover:bg-primary-dark transition-colors"
+                >
+                  Tarife ansehen
+                  <ChevronRight className="w-5 h-5" />
+                </Link>
+                <Link
+                  href="#kontakt"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg border-2 border-foreground/10 px-6 py-3.5 text-base font-medium text-foreground hover:border-primary hover:text-primary transition-colors"
+                >
+                  Verfügbarkeit prüfen
+                </Link>
+              </div>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="relative hidden lg:block"
+            >
+              <div className="relative aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl">
+                <Image
+                  src="/images/hero/internet-header.jpg"
+                  alt="Schnelles Internet für Ihr Zuhause"
+                  fill
+                  className="object-cover"
+                  priority
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-foreground/30 to-transparent" />
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-20 bg-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="text-center max-w-2xl mx-auto mb-16"
+          >
+            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
+              Internet, auf das Sie sich verlassen können
+            </h2>
+            <p className="text-lg text-muted-foreground">
+              Stabile Verbindungen, transparente Tarife und persönlicher Service – das
+              zeichnet uns aus.
+            </p>
+          </motion.div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
+            {features.map((feature, index) => (
+              <motion.div
+                key={feature.title}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className="text-center p-6"
+              >
+                <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-5">
+                  <feature.icon className="w-7 h-7 text-primary" />
+                </div>
+                <h3 className="text-lg font-semibold text-foreground mb-2">
+                  {feature.title}
+                </h3>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  {feature.description}
+                </p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Packages Section */}
+      <section id="pakete" className="py-20 bg-muted">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="text-center max-w-2xl mx-auto mb-16"
+          >
+            <div className="flex items-center justify-center gap-2 mb-4">
+              <Home className="w-5 h-5 text-primary" />
+              <span className="text-sm font-medium text-primary">Für Privatkunden</span>
+            </div>
+            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
+              Internet-Tarife für zu Hause
+            </h2>
+            <p className="text-lg text-muted-foreground">
+              Wählen Sie die Geschwindigkeit, die zu Ihrem Nutzungsverhalten passt.
+            </p>
+          </motion.div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {packages.map((pkg, index) => (
+              <motion.div
+                key={pkg.name}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className={`relative rounded-2xl p-8 ${
+                  pkg.popular
+                    ? "bg-foreground text-white"
+                    : "bg-white border border-border"
+                }`}
+              >
+                {pkg.popular && (
+                  <span className="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 bg-primary text-white text-xs font-medium rounded-full">
+                    Empfohlen
+                  </span>
+                )}
+                <h3
+                  className={`text-xl font-bold mb-2 ${
+                    pkg.popular ? "text-white" : "text-foreground"
+                  }`}
+                >
+                  {pkg.name}
+                </h3>
+                <p
+                  className={`text-sm mb-6 ${
+                    pkg.popular ? "text-white/70" : "text-muted-foreground"
+                  }`}
+                >
+                  {pkg.description}
+                </p>
+                <div className="mb-6">
+                  <span className="text-4xl font-bold text-primary">{pkg.speed}</span>
+                  <span
+                    className={`text-sm ml-2 ${
+                      pkg.popular ? "text-white/70" : "text-muted-foreground"
+                    }`}
+                  >
+                    Mbit/s
+                  </span>
+                </div>
+                <ul className="space-y-3 mb-8">
+                  {pkg.highlights.map((highlight) => (
+                    <li key={highlight} className="flex items-start gap-3">
+                      <Check className="w-5 h-5 flex-shrink-0 text-primary" />
+                      <span
+                        className={`text-sm ${
+                          pkg.popular ? "text-white/90" : "text-muted-foreground"
+                        }`}
+                      >
+                        {highlight}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+                <Link
+                  href="#kontakt"
+                  className={`block w-full text-center rounded-lg px-6 py-3 text-sm font-medium transition-colors ${
+                    pkg.popular
+                      ? "bg-primary text-white hover:bg-primary-dark"
+                      : "bg-foreground text-white hover:bg-foreground/90"
+                  }`}
+                >
+                  Jetzt anfragen
+                </Link>
+              </motion.div>
+            ))}
+          </div>
+
+          <p className="text-center text-sm text-muted-foreground mt-8">
+            Verfügbarkeit und Geschwindigkeit abhängig vom Standort. Wir beraten Sie
+            gerne.
+          </p>
+        </div>
+      </section>
+
+      {/* Business Section */}
+      <section className="py-20 bg-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+            >
+              <div className="flex items-center gap-2 mb-4">
+                <Building2 className="w-5 h-5 text-primary" />
+                <span className="text-sm font-medium text-primary">
+                  Für Geschäftskunden
+                </span>
+              </div>
+              <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-6">
+                Business-Internet für Ihr Unternehmen
+              </h2>
+              <p className="text-lg text-muted-foreground leading-relaxed mb-8">
+                Professionelle Internetlösungen für Unternehmen in Tirol. Wir bieten
+                maßgeschneiderte Pakete mit garantierter Verfügbarkeit und
+                persönlichem Service.
+              </p>
+              <ul className="grid sm:grid-cols-2 gap-4 mb-8">
+                {businessFeatures.map((feature) => (
+                  <li key={feature} className="flex items-center gap-3">
+                    <Check className="w-5 h-5 text-primary flex-shrink-0" />
+                    <span className="text-sm text-muted-foreground">{feature}</span>
+                  </li>
+                ))}
+              </ul>
+              <Link
+                href="#kontakt"
+                className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3.5 text-base font-medium text-white hover:bg-primary-dark transition-colors"
+              >
+                Business-Beratung anfragen
+                <ChevronRight className="w-5 h-5" />
+              </Link>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="relative hidden lg:flex items-center justify-center"
+            >
+              <div className="w-full max-w-md aspect-square rounded-3xl bg-gradient-to-br from-primary/10 to-secondary/10 p-8 flex items-center justify-center">
+                <Building2 className="w-32 h-32 text-primary/50" />
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonial Section */}
+      <section className="py-20 bg-muted">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="max-w-3xl mx-auto text-center"
+          >
+            <div className="w-16 h-16 rounded-full bg-white flex items-center justify-center mx-auto mb-6 shadow-md">
+              <Users className="w-8 h-8 text-primary" />
+            </div>
+            <blockquote className="text-xl sm:text-2xl text-foreground leading-relaxed mb-6">
+              &ldquo;Für unser Büro brauchen wir zuverlässiges Internet.
+              TeleNetSystems liefert genau das – und bei Fragen ist immer jemand
+              erreichbar.&rdquo;
+            </blockquote>
+            <p className="font-semibold text-foreground">Steuerberatung Mair</p>
+            <p className="text-sm text-muted-foreground">Reutte</p>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section id="kontakt" className="py-20 bg-primary">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+              Verfügbarkeit prüfen
+            </h2>
+            <p className="text-lg text-white/80 max-w-2xl mx-auto mb-8">
+              Kontaktieren Sie uns für eine unverbindliche Beratung. Wir prüfen die
+              Verfügbarkeit an Ihrem Standort und finden den passenden Tarif.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Link
+                href="/#kontakt"
+                className="inline-flex items-center justify-center gap-2 rounded-lg bg-white px-6 py-3.5 text-base font-medium text-primary hover:bg-white/90 transition-colors"
+              >
+                Kontakt aufnehmen
+                <ChevronRight className="w-5 h-5" />
+              </Link>
+              <a
+                href="tel:+4356722000"
+                className="inline-flex items-center justify-center gap-2 rounded-lg border-2 border-white/30 px-6 py-3.5 text-base font-medium text-white hover:bg-white/10 transition-colors"
+              >
+                +43 5672 2000
+              </a>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+    </>
+  );
+}

website/src/app/layout.tsx

@@ -0,0 +1,52 @@
+import type { Metadata } from "next";
+import { Geist } from "next/font/google";
+import "./globals.css";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: {
+    default: "TeleNetSystems - TV, Internet & Telefonie in Tirol",
+    template: "%s | TeleNetSystems",
+  },
+  description:
+    "TeleNetSystems ist Ihr regionaler Partner für TV, Internet und Telefonie in Reutte, Tirol. Persönlicher Service, zuverlässige Technik und faire Preise.",
+  keywords: [
+    "Internet Tirol",
+    "TV Reutte",
+    "Telefonie Tirol",
+    "Telekommunikation Reutte",
+    "IT-Dienstleistungen Tirol",
+    "TeleNetSystems",
+  ],
+  authors: [{ name: "TeleNetSystems" }],
+  openGraph: {
+    type: "website",
+    locale: "de_AT",
+    siteName: "TeleNetSystems",
+    title: "TeleNetSystems - TV, Internet & Telefonie in Tirol",
+    description:
+      "Ihr regionaler Partner für TV, Internet und Telefonie in Reutte, Tirol. Persönlicher Service und zuverlässige Technik.",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="de">
+      <body className={`${geistSans.variable} antialiased`}>
+        <Header />
+        <main>{children}</main>
+        <Footer />
+      </body>
+    </html>
+  );
+}

website/src/app/leistungen/layout.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Leistungen",
+  description:
+    "Alle Leistungen von TeleNetSystems im Überblick. TV, Internet und Telefonie für Privat- und Geschäftskunden in Tirol.",
+};
+
+export default function LeistungenLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

website/src/app/leistungen/page.tsx

@@ -0,0 +1,351 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import {
+  Tv,
+  Wifi,
+  Phone,
+  Home,
+  Building2,
+  ChevronRight,
+  Check,
+  Wrench,
+  HeadphonesIcon,
+  Shield,
+} from "lucide-react";
+
+const privateServices = [
+  {
+    icon: Tv,
+    title: "Fernsehen",
+    description:
+      "HD-Fernsehen mit großer Senderauswahl. Regionale und internationale Programme für die ganze Familie.",
+    href: "/fernsehen",
+    features: ["60-150+ Sender", "HD-Qualität", "Regionale Sender", "Mediatheken"],
+  },
+  {
+    icon: Wifi,
+    title: "Internet",
+    description:
+      "Schnelles und stabiles Internet für Ihr Zuhause. Streaming, Home-Office und mehr – ohne Unterbrechungen.",
+    href: "/internet",
+    features: ["Bis zu 200 Mbit/s", "WLAN-Router inklusive", "Stabile Verbindung", "Faire Tarife"],
+  },
+  {
+    icon: Phone,
+    title: "Telefonie",
+    description:
+      "Günstig telefonieren mit bester Sprachqualität. Festnetz und VoIP für jeden Bedarf.",
+    href: "/telefonie",
+    features: ["Kristallklare Qualität", "Günstige Tarife", "Rufnummernmitnahme", "Flatrate-Optionen"],
+  },
+];
+
+const businessServices = [
+  {
+    icon: Wifi,
+    title: "Business-Internet",
+    description:
+      "Professionelle Internetlösungen mit garantierter Verfügbarkeit und Service Level Agreements.",
+    features: ["Dedizierte Leitungen", "Statische IP-Adressen", "SLA-Garantie", "Priorisierter Support"],
+  },
+  {
+    icon: Phone,
+    title: "Cloud-Telefonanlage",
+    description:
+      "Moderne VoIP-Telefonanlagen ohne Hardware-Investition. Flexibel und skalierbar für Ihr Unternehmen.",
+    features: ["Virtuelle PBX", "Mehrere Nebenstellen", "Konferenzschaltungen", "Integration"],
+  },
+  {
+    icon: Wrench,
+    title: "IT-Service",
+    description:
+      "Beratung, Installation und Support für Ihre IT-Infrastruktur. Vor Ort in Tirol.",
+    features: ["Netzwerk-Setup", "Hardware-Beratung", "Wartung & Support", "Schulungen"],
+  },
+];
+
+const additionalServices = [
+  {
+    icon: Wrench,
+    title: "Installation & Einrichtung",
+    description: "Professionelle Installation aller Dienste durch unsere Techniker.",
+  },
+  {
+    icon: HeadphonesIcon,
+    title: "Support & Hotline",
+    description: "Schnelle Hilfe bei Fragen und Problemen – telefonisch oder vor Ort.",
+  },
+  {
+    icon: Shield,
+    title: "Störungsbehebung",
+    description: "Rasche Problemlösung durch unser regionales Service-Team.",
+  },
+];
+
+const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.5 },
+};
+
+export default function LeistungenPage() {
+  return (
+    <>
+      {/* Hero Section */}
+      <section className="relative bg-gradient-to-br from-muted to-white overflow-hidden">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary/5 via-transparent to-transparent" />
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="text-center max-w-3xl mx-auto"
+          >
+            <h1 className="text-4xl sm:text-5xl font-bold text-foreground leading-tight mb-6">
+              Unsere <span className="text-primary">Leistungen</span>
+            </h1>
+            <p className="text-lg text-muted-foreground leading-relaxed">
+              Von TV über Internet bis Telefonie – TeleNetSystems bietet Ihnen alles
+              aus einer Hand. Für Privathaushalte und Unternehmen in Tirol.
+            </p>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Private Services Section */}
+      <section className="py-20 bg-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="mb-16"
+          >
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                <Home className="w-5 h-5 text-primary" />
+              </div>
+              <h2 className="text-2xl font-bold text-foreground">Für Privatkunden</h2>
+            </div>
+            <p className="text-muted-foreground max-w-2xl">
+              Zuverlässige Telekommunikation für Ihr Zuhause. Einfach, verständlich und
+              zu fairen Preisen.
+            </p>
+          </motion.div>
+
+          <div className="grid lg:grid-cols-3 gap-8">
+            {privateServices.map((service, index) => (
+              <motion.div
+                key={service.title}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+              >
+                <Link
+                  href={service.href}
+                  className="group block h-full p-8 rounded-2xl border border-border bg-white hover:border-primary/30 hover:shadow-lg transition-all duration-300"
+                >
+                  <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6 group-hover:bg-primary group-hover:scale-110 transition-all duration-300">
+                    <service.icon className="w-7 h-7 text-primary group-hover:text-white transition-colors" />
+                  </div>
+                  <h3 className="text-xl font-semibold text-foreground mb-3 group-hover:text-primary transition-colors">
+                    {service.title}
+                  </h3>
+                  <p className="text-muted-foreground leading-relaxed mb-6">
+                    {service.description}
+                  </p>
+                  <ul className="space-y-2 mb-6">
+                    {service.features.map((feature) => (
+                      <li key={feature} className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <Check className="w-4 h-4 text-primary flex-shrink-0" />
+                        {feature}
+                      </li>
+                    ))}
+                  </ul>
+                  <span className="inline-flex items-center gap-1 text-sm font-medium text-primary">
+                    Mehr erfahren
+                    <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+                  </span>
+                </Link>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Business Services Section */}
+      <section className="py-20 bg-muted">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="mb-16"
+          >
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                <Building2 className="w-5 h-5 text-primary" />
+              </div>
+              <h2 className="text-2xl font-bold text-foreground">Für Geschäftskunden</h2>
+            </div>
+            <p className="text-muted-foreground max-w-2xl">
+              Professionelle Lösungen für Unternehmen. Mit persönlicher Betreuung und
+              Service vor Ort.
+            </p>
+          </motion.div>
+
+          <div className="grid lg:grid-cols-3 gap-8">
+            {businessServices.map((service, index) => (
+              <motion.div
+                key={service.title}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className="p-8 rounded-2xl bg-white border border-border"
+              >
+                <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
+                  <service.icon className="w-7 h-7 text-primary" />
+                </div>
+                <h3 className="text-xl font-semibold text-foreground mb-3">
+                  {service.title}
+                </h3>
+                <p className="text-muted-foreground leading-relaxed mb-6">
+                  {service.description}
+                </p>
+                <ul className="space-y-2">
+                  {service.features.map((feature) => (
+                    <li key={feature} className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Check className="w-4 h-4 text-primary flex-shrink-0" />
+                      {feature}
+                    </li>
+                  ))}
+                </ul>
+              </motion.div>
+            ))}
+          </div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="mt-12 text-center"
+          >
+            <Link
+              href="/#kontakt"
+              className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3.5 text-base font-medium text-white hover:bg-primary-dark transition-colors"
+            >
+              Business-Beratung anfragen
+              <ChevronRight className="w-5 h-5" />
+            </Link>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Additional Services Section */}
+      <section className="py-20 bg-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="text-center max-w-2xl mx-auto mb-16"
+          >
+            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
+              Service & Support
+            </h2>
+            <p className="text-lg text-muted-foreground">
+              Bei uns bekommen Sie mehr als nur Technik. Persönlicher Service ist für
+              uns selbstverständlich.
+            </p>
+          </motion.div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {additionalServices.map((service, index) => (
+              <motion.div
+                key={service.title}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className="text-center p-8"
+              >
+                <div className="w-16 h-16 rounded-2xl bg-muted flex items-center justify-center mx-auto mb-5">
+                  <service.icon className="w-8 h-8 text-primary" />
+                </div>
+                <h3 className="text-lg font-semibold text-foreground mb-2">
+                  {service.title}
+                </h3>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  {service.description}
+                </p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-20 bg-foreground text-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+            >
+              <h2 className="text-3xl sm:text-4xl font-bold mb-6">
+                Welches Paket passt zu Ihnen?
+              </h2>
+              <p className="text-white/70 text-lg leading-relaxed mb-8">
+                Lassen Sie sich unverbindlich beraten. Wir analysieren Ihren Bedarf und
+                finden die passende Lösung – für Privat oder Business.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Link
+                  href="/#kontakt"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3.5 text-base font-medium text-white hover:bg-primary-dark transition-colors"
+                >
+                  Beratung anfragen
+                  <ChevronRight className="w-5 h-5" />
+                </Link>
+                <a
+                  href="tel:+4356722000"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg border-2 border-white/20 px-6 py-3.5 text-base font-medium text-white hover:bg-white/10 transition-colors"
+                >
+                  +43 5672 2000
+                </a>
+              </div>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="hidden lg:block"
+            >
+              <div className="grid grid-cols-2 gap-4">
+                {[Tv, Wifi, Phone, Wrench].map((Icon, index) => (
+                  <div
+                    key={index}
+                    className="aspect-square rounded-2xl bg-white/5 flex items-center justify-center"
+                  >
+                    <Icon className="w-12 h-12 text-primary" />
+                  </div>
+                ))}
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

website/src/app/page.tsx

@@ -0,0 +1,468 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import {
+  Tv,
+  Wifi,
+  Phone,
+  Users,
+  Shield,
+  HeadphonesIcon,
+  MapPin,
+  Clock,
+  ChevronRight,
+  Mail,
+  CheckCircle2,
+} from "lucide-react";
+
+const services = [
+  {
+    icon: Tv,
+    title: "Fernsehen",
+    description:
+      "Erleben Sie kristallklares TV-Vergnügen mit einer großen Auswahl an Sendern und HD-Qualität.",
+    href: "/fernsehen",
+    image: "/images/services/tv.jpg",
+  },
+  {
+    icon: Wifi,
+    title: "Internet",
+    description:
+      "Schnelles und stabiles Internet für Ihr Zuhause oder Unternehmen. Zuverlässig und fair.",
+    href: "/internet",
+    image: "/images/services/internet.jpg",
+  },
+  {
+    icon: Phone,
+    title: "Telefonie",
+    description:
+      "Günstige Telefontarife mit bester Sprachqualität. Festnetz und VoIP-Lösungen.",
+    href: "/telefonie",
+    image: "/images/services/telefonie.jpg",
+  },
+];
+
+const benefits = [
+  {
+    icon: MapPin,
+    title: "Regional vor Ort",
+    description: "Persönliche Betreuung durch unser Team direkt in Reutte, Tirol.",
+  },
+  {
+    icon: Shield,
+    title: "Zuverlässig & Stabil",
+    description: "Robuste Infrastruktur für durchgehend beste Verbindungsqualität.",
+  },
+  {
+    icon: HeadphonesIcon,
+    title: "Schneller Support",
+    description: "Bei Fragen und Problemen sind wir schnell für Sie erreichbar.",
+  },
+  {
+    icon: Clock,
+    title: "Faire Konditionen",
+    description: "Transparente Preise ohne versteckte Kosten oder komplizierte Klauseln.",
+  },
+];
+
+const testimonials = [
+  {
+    quote:
+      "Endlich ein Anbieter, der hält was er verspricht. Stabile Verbindung und bei Fragen ist immer jemand erreichbar.",
+    author: "Familie Müller",
+    location: "Reutte",
+  },
+  {
+    quote:
+      "Als Unternehmen brauchen wir zuverlässige Technik. TeleNetSystems liefert genau das – und der Service ist top.",
+    author: "Gasthaus Alpenblick",
+    location: "Tirol",
+  },
+  {
+    quote:
+      "Unkomplizierte Abwicklung und faire Preise. So muss das sein!",
+    author: "Thomas K.",
+    location: "Außerfern",
+  },
+];
+
+const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.5 },
+};
+
+export default function Home() {
+  return (
+    <>
+      {/* Hero Section */}
+      <section className="relative bg-gradient-to-br from-muted to-white overflow-hidden">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary/5 via-transparent to-transparent" />
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 lg:py-32">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6">
+                <MapPin className="w-4 h-4" />
+                Ihr Partner in Tirol
+              </span>
+              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-foreground leading-tight mb-6">
+                TV, Internet & Telefonie{" "}
+                <span className="text-primary">aus der Region</span>
+              </h1>
+              <p className="text-lg text-muted-foreground leading-relaxed mb-8 max-w-xl">
+                TeleNetSystems ist Ihr verlässlicher Partner für Telekommunikation in Reutte
+                und Umgebung. Persönlicher Service, stabile Technik und faire Preise – das ist
+                unser Versprechen.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Link
+                  href="#leistungen"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3.5 text-base font-medium text-white hover:bg-primary-dark transition-colors"
+                >
+                  Leistungen entdecken
+                  <ChevronRight className="w-5 h-5" />
+                </Link>
+                <Link
+                  href="#kontakt"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg border-2 border-foreground/10 px-6 py-3.5 text-base font-medium text-foreground hover:border-primary hover:text-primary transition-colors"
+                >
+                  Beratung anfragen
+                </Link>
+              </div>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="relative hidden lg:block"
+            >
+              <div className="relative aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl">
+                <Image
+                  src="/images/hero/firma.jpg"
+                  alt="TeleNetSystems Firmengebäude in Reutte"
+                  fill
+                  className="object-cover"
+                  priority
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-foreground/20 to-transparent" />
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Services Section */}
+      <section id="leistungen" className="py-20 lg:py-28 bg-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="text-center max-w-2xl mx-auto mb-16"
+          >
+            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
+              Unsere Leistungen
+            </h2>
+            <p className="text-lg text-muted-foreground">
+              Von TV über Internet bis Telefonie – wir bieten Ihnen alles aus einer Hand.
+              Zuverlässig, verständlich und regional.
+            </p>
+          </motion.div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {services.map((service, index) => (
+              <motion.div
+                key={service.title}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+              >
+                <Link
+                  href={service.href}
+                  className="group block h-full rounded-2xl border border-border bg-white hover:border-primary/30 hover:shadow-lg transition-all duration-300 overflow-hidden"
+                >
+                  <div className="relative h-48 overflow-hidden">
+                    <Image
+                      src={service.image}
+                      alt={service.title}
+                      fill
+                      className="object-cover group-hover:scale-105 transition-transform duration-500"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-foreground/60 to-transparent" />
+                    <div className="absolute bottom-4 left-4 w-12 h-12 rounded-xl bg-primary flex items-center justify-center">
+                      <service.icon className="w-6 h-6 text-white" />
+                    </div>
+                  </div>
+                  <div className="p-6">
+                    <h3 className="text-xl font-semibold text-foreground mb-3 group-hover:text-primary transition-colors">
+                      {service.title}
+                    </h3>
+                    <p className="text-muted-foreground leading-relaxed mb-4">
+                      {service.description}
+                    </p>
+                    <span className="inline-flex items-center gap-1 text-sm font-medium text-primary">
+                      Mehr erfahren
+                      <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+                    </span>
+                  </div>
+                </Link>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Benefits Section */}
+      <section className="py-20 lg:py-28 bg-muted">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="text-center max-w-2xl mx-auto mb-16"
+          >
+            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
+              Warum TeleNetSystems?
+            </h2>
+            <p className="text-lg text-muted-foreground">
+              Wir verbinden moderne Technik mit persönlichem Service. Das macht den
+              Unterschied.
+            </p>
+          </motion.div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
+            {benefits.map((benefit, index) => (
+              <motion.div
+                key={benefit.title}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className="text-center"
+              >
+                <div className="w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center mx-auto mb-5">
+                  <benefit.icon className="w-8 h-8 text-primary" />
+                </div>
+                <h3 className="text-lg font-semibold text-foreground mb-2">
+                  {benefit.title}
+                </h3>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  {benefit.description}
+                </p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials Section */}
+      <section className="py-20 lg:py-28 bg-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="text-center max-w-2xl mx-auto mb-16"
+          >
+            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
+              Das sagen unsere Kunden
+            </h2>
+            <p className="text-lg text-muted-foreground">
+              Zufriedene Kunden sind unser bestes Kompliment. Hier einige Stimmen aus der
+              Region.
+            </p>
+          </motion.div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {testimonials.map((testimonial, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className="p-8 rounded-2xl bg-muted"
+              >
+                <blockquote className="text-foreground leading-relaxed mb-6">
+                  &ldquo;{testimonial.quote}&rdquo;
+                </blockquote>
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
+                    <Users className="w-5 h-5 text-primary" />
+                  </div>
+                  <div>
+                    <p className="font-semibold text-foreground text-sm">
+                      {testimonial.author}
+                    </p>
+                    <p className="text-xs text-muted-foreground">{testimonial.location}</p>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Contact Section */}
+      <section id="kontakt" className="py-20 lg:py-28 bg-foreground text-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 lg:gap-20">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+            >
+              <h2 className="text-3xl sm:text-4xl font-bold mb-6">
+                Wir sind für Sie da
+              </h2>
+              <p className="text-white/70 text-lg leading-relaxed mb-8">
+                Haben Sie Fragen zu unseren Leistungen oder benötigen Sie Unterstützung?
+                Kontaktieren Sie uns – wir helfen Ihnen gerne weiter.
+              </p>
+
+              <div className="space-y-6">
+                <div className="flex items-start gap-4">
+                  <div className="w-12 h-12 rounded-xl bg-primary flex items-center justify-center flex-shrink-0">
+                    <Phone className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <h3 className="font-semibold mb-1">Telefon</h3>
+                    <a
+                      href="tel:+4356722000"
+                      className="text-white/70 hover:text-primary transition-colors"
+                    >
+                      +43 5672 2000
+                    </a>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-4">
+                  <div className="w-12 h-12 rounded-xl bg-primary flex items-center justify-center flex-shrink-0">
+                    <Mail className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <h3 className="font-semibold mb-1">E-Mail</h3>
+                    <a
+                      href="mailto:info@telenetsystems.at"
+                      className="text-white/70 hover:text-primary transition-colors"
+                    >
+                      info@telenetsystems.at
+                    </a>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-4">
+                  <div className="w-12 h-12 rounded-xl bg-primary flex items-center justify-center flex-shrink-0">
+                    <MapPin className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <h3 className="font-semibold mb-1">Adresse</h3>
+                    <p className="text-white/70">
+                      Musterstraße 1<br />
+                      6600 Reutte, Tirol
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-4">
+                  <div className="w-12 h-12 rounded-xl bg-primary flex items-center justify-center flex-shrink-0">
+                    <Clock className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <h3 className="font-semibold mb-1">Öffnungszeiten</h3>
+                    <p className="text-white/70">
+                      Mo - Fr: 08:00 - 17:00 Uhr<br />
+                      Sa: nach Vereinbarung
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+            >
+              <form className="bg-white rounded-2xl p-8 text-foreground">
+                <h3 className="text-xl font-semibold mb-6">Nachricht senden</h3>
+                <div className="space-y-5">
+                  <div>
+                    <label htmlFor="name" className="block text-sm font-medium mb-2">
+                      Name
+                    </label>
+                    <input
+                      type="text"
+                      id="name"
+                      name="name"
+                      required
+                      className="w-full px-4 py-3 rounded-lg border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
+                      placeholder="Ihr Name"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="email" className="block text-sm font-medium mb-2">
+                      E-Mail
+                    </label>
+                    <input
+                      type="email"
+                      id="email"
+                      name="email"
+                      required
+                      className="w-full px-4 py-3 rounded-lg border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
+                      placeholder="ihre@email.at"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="phone" className="block text-sm font-medium mb-2">
+                      Telefon (optional)
+                    </label>
+                    <input
+                      type="tel"
+                      id="phone"
+                      name="phone"
+                      className="w-full px-4 py-3 rounded-lg border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
+                      placeholder="+43 ..."
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="message" className="block text-sm font-medium mb-2">
+                      Nachricht
+                    </label>
+                    <textarea
+                      id="message"
+                      name="message"
+                      rows={4}
+                      required
+                      className="w-full px-4 py-3 rounded-lg border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all resize-none"
+                      placeholder="Wie können wir Ihnen helfen?"
+                    />
+                  </div>
+                  <button
+                    type="submit"
+                    className="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3.5 text-base font-medium text-white hover:bg-primary-dark transition-colors"
+                  >
+                    <CheckCircle2 className="w-5 h-5" />
+                    Nachricht senden
+                  </button>
+                </div>
+              </form>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

website/src/app/telefonie/layout.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Telefonie",
+  description:
+    "Günstige Telefontarife mit bester Sprachqualität von TeleNetSystems. Festnetz und VoIP-Lösungen für Privat- und Geschäftskunden in Tirol.",
+};
+
+export default function TelefonieLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

website/src/app/telefonie/page.tsx

@@ -0,0 +1,394 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import {
+  Phone,
+  Check,
+  ChevronRight,
+  PhoneCall,
+  Globe,
+  Building2,
+  Users,
+  Headphones,
+  Shield,
+} from "lucide-react";
+
+const features = [
+  {
+    icon: PhoneCall,
+    title: "Kristallklare Qualität",
+    description: "Beste Sprachqualität durch moderne VoIP-Technologie.",
+  },
+  {
+    icon: Globe,
+    title: "Günstig telefonieren",
+    description: "Faire Tarife für Orts-, Fern- und Auslandsgespräche.",
+  },
+  {
+    icon: Headphones,
+    title: "Zuverlässiger Service",
+    description: "Persönlicher Support bei allen Fragen rund ums Telefon.",
+  },
+  {
+    icon: Shield,
+    title: "Stabile Verbindung",
+    description: "Zuverlässige Telefonie ohne Ausfälle oder Störungen.",
+  },
+];
+
+const packages = [
+  {
+    name: "Festnetz Basis",
+    description: "Klassisches Festnetz für gelegentliche Telefonierer",
+    highlights: [
+      "Ortsgespräche inklusive",
+      "Günstige Ferngespräche",
+      "Rufnummernmitnahme möglich",
+      "Anrufbeantworter",
+    ],
+  },
+  {
+    name: "Festnetz Komfort",
+    description: "Für alle, die viel telefonieren",
+    highlights: [
+      "Flatrate ins österr. Festnetz",
+      "Günstige Mobilfunktarife",
+      "Mehrere Rufnummern möglich",
+      "Anklopfen & Makeln",
+    ],
+    popular: true,
+  },
+  {
+    name: "VoIP Business",
+    description: "Professionelle Telefonanlage für Unternehmen",
+    highlights: [
+      "Virtuelle Telefonanlage",
+      "Mehrere Nebenstellen",
+      "Konferenzschaltungen",
+      "Integration mit IT-Systemen",
+    ],
+  },
+];
+
+const businessFeatures = [
+  "Virtuelle Telefonanlagen (Cloud PBX)",
+  "Mehrere Nebenstellen und Durchwahlen",
+  "Professionelle Warteschleifen",
+  "Anrufweiterleitung & Zeitsteuerung",
+  "Integration mit bestehenden Systemen",
+  "Persönliche Einrichtung vor Ort",
+];
+
+const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.5 },
+};
+
+export default function TelefoniePage() {
+  return (
+    <>
+      {/* Hero Section */}
+      <section className="relative bg-gradient-to-br from-muted to-white overflow-hidden">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary/5 via-transparent to-transparent" />
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <div className="flex items-center gap-2 mb-6">
+                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <Phone className="w-5 h-5 text-primary" />
+                </div>
+                <span className="text-sm font-medium text-muted-foreground">
+                  Telefonie-Dienste
+                </span>
+              </div>
+              <h1 className="text-4xl sm:text-5xl font-bold text-foreground leading-tight mb-6">
+                Telefonie{" "}
+                <span className="text-primary">einfach & günstig</span>
+              </h1>
+              <p className="text-lg text-muted-foreground leading-relaxed mb-8">
+                Günstige Telefontarife mit bester Sprachqualität. Ob klassisches
+                Festnetz oder moderne VoIP-Lösungen – wir haben das passende Angebot
+                für Sie.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Link
+                  href="#pakete"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3.5 text-base font-medium text-white hover:bg-primary-dark transition-colors"
+                >
+                  Tarife ansehen
+                  <ChevronRight className="w-5 h-5" />
+                </Link>
+                <Link
+                  href="#kontakt"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg border-2 border-foreground/10 px-6 py-3.5 text-base font-medium text-foreground hover:border-primary hover:text-primary transition-colors"
+                >
+                  Beratung anfragen
+                </Link>
+              </div>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="relative hidden lg:flex items-center justify-center"
+            >
+              <div className="w-80 h-80 rounded-full bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
+                <div className="w-64 h-64 rounded-3xl bg-white shadow-2xl flex items-center justify-center">
+                  <Phone className="w-24 h-24 text-primary" />
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-20 bg-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="text-center max-w-2xl mx-auto mb-16"
+          >
+            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
+              Telefonie ohne Kompromisse
+            </h2>
+            <p className="text-lg text-muted-foreground">
+              Beste Sprachqualität, faire Tarife und zuverlässiger Service – das
+              bieten wir Ihnen.
+            </p>
+          </motion.div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
+            {features.map((feature, index) => (
+              <motion.div
+                key={feature.title}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className="text-center p-6"
+              >
+                <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-5">
+                  <feature.icon className="w-7 h-7 text-primary" />
+                </div>
+                <h3 className="text-lg font-semibold text-foreground mb-2">
+                  {feature.title}
+                </h3>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  {feature.description}
+                </p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Packages Section */}
+      <section id="pakete" className="py-20 bg-muted">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="text-center max-w-2xl mx-auto mb-16"
+          >
+            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
+              Unsere Telefonie-Tarife
+            </h2>
+            <p className="text-lg text-muted-foreground">
+              Vom klassischen Festnetz bis zur professionellen VoIP-Lösung – wir haben
+              für jeden das passende Angebot.
+            </p>
+          </motion.div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {packages.map((pkg, index) => (
+              <motion.div
+                key={pkg.name}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className={`relative rounded-2xl p-8 ${
+                  pkg.popular
+                    ? "bg-foreground text-white"
+                    : "bg-white border border-border"
+                }`}
+              >
+                {pkg.popular && (
+                  <span className="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 bg-primary text-white text-xs font-medium rounded-full">
+                    Beliebt
+                  </span>
+                )}
+                <h3
+                  className={`text-xl font-bold mb-2 ${
+                    pkg.popular ? "text-white" : "text-foreground"
+                  }`}
+                >
+                  {pkg.name}
+                </h3>
+                <p
+                  className={`text-sm mb-6 ${
+                    pkg.popular ? "text-white/70" : "text-muted-foreground"
+                  }`}
+                >
+                  {pkg.description}
+                </p>
+                <ul className="space-y-3 mb-8">
+                  {pkg.highlights.map((highlight) => (
+                    <li key={highlight} className="flex items-start gap-3">
+                      <Check className="w-5 h-5 flex-shrink-0 text-primary" />
+                      <span
+                        className={`text-sm ${
+                          pkg.popular ? "text-white/90" : "text-muted-foreground"
+                        }`}
+                      >
+                        {highlight}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+                <Link
+                  href="#kontakt"
+                  className={`block w-full text-center rounded-lg px-6 py-3 text-sm font-medium transition-colors ${
+                    pkg.popular
+                      ? "bg-primary text-white hover:bg-primary-dark"
+                      : "bg-foreground text-white hover:bg-foreground/90"
+                  }`}
+                >
+                  Jetzt anfragen
+                </Link>
+              </motion.div>
+            ))}
+          </div>
+
+          <p className="text-center text-sm text-muted-foreground mt-8">
+            Preise auf Anfrage. Gerne beraten wir Sie zu Ihrem individuellen Bedarf.
+          </p>
+        </div>
+      </section>
+
+      {/* Business Section */}
+      <section className="py-20 bg-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+            >
+              <div className="flex items-center gap-2 mb-4">
+                <Building2 className="w-5 h-5 text-primary" />
+                <span className="text-sm font-medium text-primary">
+                  Für Geschäftskunden
+                </span>
+              </div>
+              <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-6">
+                Professionelle Telefonanlagen
+              </h2>
+              <p className="text-lg text-muted-foreground leading-relaxed mb-8">
+                Moderne Cloud-Telefonanlagen für Ihr Unternehmen. Flexibel, skalierbar
+                und ohne teure Hardware-Investitionen. Wir richten alles für Sie ein.
+              </p>
+              <ul className="grid sm:grid-cols-2 gap-4 mb-8">
+                {businessFeatures.map((feature) => (
+                  <li key={feature} className="flex items-center gap-3">
+                    <Check className="w-5 h-5 text-primary flex-shrink-0" />
+                    <span className="text-sm text-muted-foreground">{feature}</span>
+                  </li>
+                ))}
+              </ul>
+              <Link
+                href="#kontakt"
+                className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3.5 text-base font-medium text-white hover:bg-primary-dark transition-colors"
+              >
+                Business-Beratung anfragen
+                <ChevronRight className="w-5 h-5" />
+              </Link>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="relative hidden lg:flex items-center justify-center"
+            >
+              <div className="w-full max-w-md aspect-square rounded-3xl bg-gradient-to-br from-primary/10 to-secondary/10 p-8 flex items-center justify-center">
+                <Building2 className="w-32 h-32 text-primary/50" />
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonial Section */}
+      <section className="py-20 bg-muted">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="max-w-3xl mx-auto text-center"
+          >
+            <div className="w-16 h-16 rounded-full bg-white flex items-center justify-center mx-auto mb-6 shadow-md">
+              <Users className="w-8 h-8 text-primary" />
+            </div>
+            <blockquote className="text-xl sm:text-2xl text-foreground leading-relaxed mb-6">
+              &ldquo;Die neue VoIP-Anlage hat unsere Bürokommunikation komplett
+              vereinfacht. Installation und Einrichtung liefen reibungslos.&rdquo;
+            </blockquote>
+            <p className="font-semibold text-foreground">Planungsbüro Tirol</p>
+            <p className="text-sm text-muted-foreground">Reutte</p>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section id="kontakt" className="py-20 bg-primary">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+              Fragen zur Telefonie?
+            </h2>
+            <p className="text-lg text-white/80 max-w-2xl mx-auto mb-8">
+              Wir beraten Sie gerne zu unseren Telefonie-Lösungen. Ob Festnetz oder
+              VoIP – wir finden das Richtige für Sie.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Link
+                href="/#kontakt"
+                className="inline-flex items-center justify-center gap-2 rounded-lg bg-white px-6 py-3.5 text-base font-medium text-primary hover:bg-white/90 transition-colors"
+              >
+                Kontakt aufnehmen
+                <ChevronRight className="w-5 h-5" />
+              </Link>
+              <a
+                href="tel:+4356722000"
+                className="inline-flex items-center justify-center gap-2 rounded-lg border-2 border-white/30 px-6 py-3.5 text-base font-medium text-white hover:bg-white/10 transition-colors"
+              >
+                +43 5672 2000
+              </a>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+    </>
+  );
+}

website/src/app/ueber-uns/layout.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Über uns",
+  description:
+    "Lernen Sie TeleNetSystems kennen. Ihr regionaler Partner für TV, Internet und Telefonie in Reutte, Tirol.",
+};
+
+export default function UeberUnsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

website/src/app/ueber-uns/page.tsx

@@ -0,0 +1,384 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import {
+  MapPin,
+  Users,
+  Heart,
+  Shield,
+  Award,
+  ChevronRight,
+  Phone,
+  Mail,
+  Clock,
+} from "lucide-react";
+
+const values = [
+  {
+    icon: Heart,
+    title: "Persönlich & Nahbar",
+    description:
+      "Bei uns sind Sie keine Nummer. Wir kennen unsere Kunden und ihre Bedürfnisse.",
+  },
+  {
+    icon: Shield,
+    title: "Zuverlässig & Ehrlich",
+    description:
+      "Was wir versprechen, halten wir. Transparente Kommunikation ist für uns selbstverständlich.",
+  },
+  {
+    icon: MapPin,
+    title: "Regional & Verwurzelt",
+    description:
+      "Als Unternehmen aus Reutte kennen wir die Region und sind schnell vor Ort.",
+  },
+  {
+    icon: Award,
+    title: "Kompetent & Modern",
+    description:
+      "Wir bilden uns kontinuierlich weiter und setzen auf bewährte, moderne Technologie.",
+  },
+];
+
+const milestones = [
+  {
+    year: "Gründung",
+    title: "Start in Reutte",
+    description: "TeleNetSystems wird als regionaler Telekommunikationsanbieter gegründet.",
+  },
+  {
+    year: "Ausbau",
+    title: "Netzwerk-Erweiterung",
+    description: "Kontinuierlicher Ausbau der Infrastruktur im Bezirk Reutte.",
+  },
+  {
+    year: "Heute",
+    title: "Ihr Partner",
+    description: "Zuverlässiger Service für hunderte zufriedene Kunden in der Region.",
+  },
+];
+
+const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.5 },
+};
+
+export default function UeberUnsPage() {
+  return (
+    <>
+      {/* Hero Section */}
+      <section className="relative bg-gradient-to-br from-muted to-white overflow-hidden">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary/5 via-transparent to-transparent" />
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <h1 className="text-4xl sm:text-5xl font-bold text-foreground leading-tight mb-6">
+                Ihr <span className="text-primary">regionaler Partner</span> für
+                Telekommunikation
+              </h1>
+              <p className="text-lg text-muted-foreground leading-relaxed mb-8">
+                TeleNetSystems ist ein IT- und Telekommunikationsunternehmen mit Sitz in
+                Reutte, Tirol. Wir versorgen Privat- und Geschäftskunden in der Region
+                mit TV, Internet und Telefonie – persönlich, zuverlässig und fair.
+              </p>
+              <div className="flex items-center gap-6">
+                <div className="flex items-center gap-2">
+                  <MapPin className="w-5 h-5 text-primary" />
+                  <span className="text-sm text-muted-foreground">Reutte, Tirol</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Users className="w-5 h-5 text-primary" />
+                  <span className="text-sm text-muted-foreground">Regionales Team</span>
+                </div>
+              </div>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="relative hidden lg:block"
+            >
+              <div className="relative aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl">
+                <Image
+                  src="/images/team/team.jpg"
+                  alt="Das TeleNetSystems Team"
+                  fill
+                  className="object-cover"
+                  priority
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-foreground/30 to-transparent" />
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Story Section */}
+      <section className="py-20 bg-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+            >
+              <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-6">
+                Wer wir sind
+              </h2>
+              <div className="space-y-4 text-muted-foreground leading-relaxed">
+                <p>
+                  TeleNetSystems ist aus der Überzeugung entstanden, dass
+                  Telekommunikation auch persönlich sein kann. In einer Branche, die
+                  oft von anonymen Hotlines und komplizierten Tarifen geprägt ist,
+                  setzen wir auf Nähe und Verständlichkeit.
+                </p>
+                <p>
+                  Als regionales Unternehmen kennen wir die Gegebenheiten vor Ort.
+                  Unsere Techniker sind schnell bei Ihnen, und am Telefon sprechen Sie
+                  mit Menschen, die sich auskennen – nicht mit Callcentern am anderen
+                  Ende der Welt.
+                </p>
+                <p>
+                  Wir glauben daran, dass Technik den Alltag erleichtern soll, nicht
+                  komplizierter machen. Deshalb erklären wir unsere Angebote so, dass
+                  Sie sie verstehen – ohne Fachjargon und ohne versteckte Klauseln.
+                </p>
+              </div>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="bg-muted rounded-2xl p-8"
+            >
+              <h3 className="text-lg font-semibold text-foreground mb-6">
+                Unser Weg
+              </h3>
+              <div className="space-y-6">
+                {milestones.map((milestone, index) => (
+                  <div key={index} className="flex gap-4">
+                    <div className="flex-shrink-0">
+                      <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
+                        <span className="text-xs font-bold text-primary">
+                          {milestone.year}
+                        </span>
+                      </div>
+                    </div>
+                    <div>
+                      <h4 className="font-semibold text-foreground mb-1">
+                        {milestone.title}
+                      </h4>
+                      <p className="text-sm text-muted-foreground">
+                        {milestone.description}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Values Section */}
+      <section className="py-20 bg-muted">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="text-center max-w-2xl mx-auto mb-16"
+          >
+            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
+              Wofür wir stehen
+            </h2>
+            <p className="text-lg text-muted-foreground">
+              Unsere Werte sind keine Marketing-Phrasen, sondern gelebte Praxis.
+            </p>
+          </motion.div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
+            {values.map((value, index) => (
+              <motion.div
+                key={value.title}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className="text-center p-6 bg-white rounded-2xl"
+              >
+                <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-5">
+                  <value.icon className="w-7 h-7 text-primary" />
+                </div>
+                <h3 className="text-lg font-semibold text-foreground mb-2">
+                  {value.title}
+                </h3>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  {value.description}
+                </p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Team Placeholder Section */}
+      <section className="py-20 bg-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="text-center max-w-2xl mx-auto mb-16"
+          >
+            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
+              Unser Team
+            </h2>
+            <p className="text-lg text-muted-foreground">
+              Hinter TeleNetSystems stehen echte Menschen aus der Region. Wir freuen
+              uns, Sie kennenzulernen.
+            </p>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="max-w-4xl mx-auto"
+          >
+            <div className="relative aspect-[16/9] rounded-2xl overflow-hidden shadow-xl mb-8">
+              <Image
+                src="/images/team/team.jpg"
+                alt="Das TeleNetSystems Team"
+                fill
+                className="object-cover"
+              />
+            </div>
+            <div className="text-center">
+              <h3 className="text-xl font-semibold text-foreground mb-3">
+                Persönliche Betreuung garantiert
+              </h3>
+              <p className="text-muted-foreground leading-relaxed mb-6 max-w-2xl mx-auto">
+                Bei TeleNetSystems sind Sie keine anonyme Kundennummer. Unser Team kennt
+                Sie und Ihre Anforderungen. Ob telefonisch, per E-Mail oder persönlich
+                vor Ort – wir sind für Sie da.
+              </p>
+              <Link
+                href="/#kontakt"
+                className="inline-flex items-center gap-1 text-primary font-medium hover:underline"
+              >
+                Kontaktieren Sie uns
+                <ChevronRight className="w-4 h-4" />
+              </Link>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Contact Info Section */}
+      <section className="py-20 bg-foreground text-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+            >
+              <h2 className="text-3xl sm:text-4xl font-bold mb-6">
+                Sie haben Fragen?
+              </h2>
+              <p className="text-white/70 text-lg leading-relaxed mb-8">
+                Wir sind gerne für Sie da. Kontaktieren Sie uns telefonisch, per
+                E-Mail oder besuchen Sie uns in Reutte.
+              </p>
+              <Link
+                href="/#kontakt"
+                className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3.5 text-base font-medium text-white hover:bg-primary-dark transition-colors"
+              >
+                Zum Kontaktformular
+                <ChevronRight className="w-5 h-5" />
+              </Link>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="space-y-6"
+            >
+              <div className="flex items-start gap-4">
+                <div className="w-12 h-12 rounded-xl bg-primary flex items-center justify-center flex-shrink-0">
+                  <Phone className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                  <h3 className="font-semibold mb-1">Telefon</h3>
+                  <a
+                    href="tel:+4356722000"
+                    className="text-white/70 hover:text-primary transition-colors"
+                  >
+                    +43 5672 2000
+                  </a>
+                </div>
+              </div>
+
+              <div className="flex items-start gap-4">
+                <div className="w-12 h-12 rounded-xl bg-primary flex items-center justify-center flex-shrink-0">
+                  <Mail className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                  <h3 className="font-semibold mb-1">E-Mail</h3>
+                  <a
+                    href="mailto:info@telenetsystems.at"
+                    className="text-white/70 hover:text-primary transition-colors"
+                  >
+                    info@telenetsystems.at
+                  </a>
+                </div>
+              </div>
+
+              <div className="flex items-start gap-4">
+                <div className="w-12 h-12 rounded-xl bg-primary flex items-center justify-center flex-shrink-0">
+                  <MapPin className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                  <h3 className="font-semibold mb-1">Adresse</h3>
+                  <p className="text-white/70">
+                    Musterstraße 1<br />
+                    6600 Reutte, Tirol
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-start gap-4">
+                <div className="w-12 h-12 rounded-xl bg-primary flex items-center justify-center flex-shrink-0">
+                  <Clock className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                  <h3 className="font-semibold mb-1">Öffnungszeiten</h3>
+                  <p className="text-white/70">
+                    Mo - Fr: 08:00 - 17:00 Uhr<br />
+                    Sa: nach Vereinbarung
+                  </p>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

website/src/components/Footer.tsx

@@ -0,0 +1,139 @@
+import Link from "next/link";
+import Image from "next/image";
+import { Phone, Mail, MapPin } from "lucide-react";
+
+const footerLinks = {
+  services: [
+    { href: "/fernsehen", label: "Fernsehen" },
+    { href: "/internet", label: "Internet" },
+    { href: "/telefonie", label: "Telefonie" },
+    { href: "/leistungen", label: "Alle Leistungen" },
+  ],
+  company: [
+    { href: "/ueber-uns", label: "Über uns" },
+    { href: "#kontakt", label: "Kontakt" },
+  ],
+  legal: [
+    { href: "/impressum", label: "Impressum" },
+    { href: "/datenschutz", label: "Datenschutz" },
+  ],
+};
+
+export default function Footer() {
+  return (
+    <footer className="bg-foreground text-white" role="contentinfo">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-8">
+          {/* Company Info */}
+          <div className="lg:col-span-1">
+            <Link href="/" className="inline-block mb-6">
+              <Image
+                src="/images/logo/logo-white.png"
+                alt="TeleNetSystems Logo"
+                width={160}
+                height={45}
+                className="h-10 w-auto"
+              />
+            </Link>
+            <p className="text-white/70 text-sm leading-relaxed mb-6">
+              Ihr regionaler Partner für TV, Internet und Telefonie in Tirol.
+              Persönlicher Service und zuverlässige Technik seit Jahren.
+            </p>
+            <div className="space-y-3">
+              <a
+                href="tel:+4356722000"
+                className="flex items-center gap-3 text-sm text-white/70 hover:text-primary transition-colors"
+              >
+                <Phone className="w-4 h-4 text-primary" />
+                <span>+43 5672 2000</span>
+              </a>
+              <a
+                href="mailto:info@telenetsystems.at"
+                className="flex items-center gap-3 text-sm text-white/70 hover:text-primary transition-colors"
+              >
+                <Mail className="w-4 h-4 text-primary" />
+                <span>info@telenetsystems.at</span>
+              </a>
+              <div className="flex items-start gap-3 text-sm text-white/70">
+                <MapPin className="w-4 h-4 text-primary mt-0.5" />
+                <span>
+                  Musterstraße 1<br />
+                  6600 Reutte, Tirol
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Services */}
+          <div>
+            <h3 className="text-sm font-semibold uppercase tracking-wider mb-4">
+              Leistungen
+            </h3>
+            <ul className="space-y-3">
+              {footerLinks.services.map((link) => (
+                <li key={link.href}>
+                  <Link
+                    href={link.href}
+                    className="text-sm text-white/70 hover:text-primary transition-colors"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Company */}
+          <div>
+            <h3 className="text-sm font-semibold uppercase tracking-wider mb-4">
+              Unternehmen
+            </h3>
+            <ul className="space-y-3">
+              {footerLinks.company.map((link) => (
+                <li key={link.href}>
+                  <Link
+                    href={link.href}
+                    className="text-sm text-white/70 hover:text-primary transition-colors"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Legal */}
+          <div>
+            <h3 className="text-sm font-semibold uppercase tracking-wider mb-4">
+              Rechtliches
+            </h3>
+            <ul className="space-y-3">
+              {footerLinks.legal.map((link) => (
+                <li key={link.href}>
+                  <Link
+                    href={link.href}
+                    className="text-sm text-white/70 hover:text-primary transition-colors"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="mt-12 pt-8 border-t border-white/10">
+          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+            <p className="text-sm text-white/50">
+              © {new Date().getFullYear()} TeleNetSystems. Alle Rechte vorbehalten.
+            </p>
+            <p className="text-sm text-white/50">
+              Ihr Partner für Telekommunikation in Reutte, Tirol
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

website/src/components/Header.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useState } from "react";
+import { Menu, X, Phone } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+const navLinks = [
+  { href: "/", label: "Startseite" },
+  { href: "/fernsehen", label: "Fernsehen" },
+  { href: "/internet", label: "Internet" },
+  { href: "/telefonie", label: "Telefonie" },
+  { href: "/leistungen", label: "Leistungen" },
+  { href: "/ueber-uns", label: "Über uns" },
+];
+
+export default function Header() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-border">
+      <nav className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" aria-label="Hauptnavigation">
+        <div className="flex h-20 items-center justify-between">
+          {/* Logo */}
+          <Link href="/" className="flex items-center group">
+            <Image
+              src="/images/logo/logo.png"
+              alt="TeleNetSystems Logo"
+              width={180}
+              height={50}
+              className="h-10 w-auto"
+              priority
+            />
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden lg:flex lg:items-center lg:gap-8">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+
+          {/* CTA Button */}
+          <div className="hidden lg:flex lg:items-center lg:gap-4">
+            <a
+              href="tel:+4356722000"
+              className="flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
+            >
+              <Phone className="w-4 h-4" />
+              <span>+43 5672 2000</span>
+            </a>
+            <Link
+              href="#kontakt"
+              className="inline-flex items-center justify-center rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-dark transition-colors"
+            >
+              Kontakt aufnehmen
+            </Link>
+          </div>
+
+          {/* Mobile menu button */}
+          <button
+            type="button"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            className="lg:hidden p-2 text-muted-foreground hover:text-foreground"
+            aria-label={mobileMenuOpen ? "Menü schließen" : "Menü öffnen"}
+            aria-expanded={mobileMenuOpen}
+          >
+            {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+          </button>
+        </div>
+      </nav>
+
+      {/* Mobile Navigation */}
+      <AnimatePresence>
+        {mobileMenuOpen && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            className="lg:hidden border-t border-border bg-white"
+          >
+            <div className="px-4 py-4 space-y-2">
+              {navLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  onClick={() => setMobileMenuOpen(false)}
+                  className="block px-4 py-3 text-base font-medium text-foreground hover:bg-muted rounded-lg transition-colors"
+                >
+                  {link.label}
+                </Link>
+              ))}
+              <div className="pt-4 border-t border-border space-y-3">
+                <a
+                  href="tel:+4356722000"
+                  className="flex items-center gap-2 px-4 py-2 text-sm text-muted-foreground"
+                >
+                  <Phone className="w-4 h-4" />
+                  <span>+43 5672 2000</span>
+                </a>
+                <Link
+                  href="#kontakt"
+                  onClick={() => setMobileMenuOpen(false)}
+                  className="block w-full text-center rounded-lg bg-primary px-5 py-3 text-sm font-medium text-white hover:bg-primary-dark transition-colors"
+                >
+                  Kontakt aufnehmen
+                </Link>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </header>
+  );
+}

website/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}