feat: Add new image assets and update components to use them, replacing the footer text logo with an image.

app/fernsehen/page.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 import Link from "next/link";
+import Image from "next/image";
 import { Section } from "@/components/layout/Section";
 import { Container } from "@/components/layout/Container";
 import { Tv, Check, Phone, ArrowRight } from "lucide-react";
@@ -25,21 +26,33 @@ export default function FernsehenPage() {
             {/* Hero Section */}
             <Section variant="hero" className="bg-[var(--color-muted)]">
                 <Container>
-                    <div className="max-w-3xl">
+                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
-                        <div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
+                        <div className="max-w-xl">
-                            <Tv size={32} className="text-[var(--color-background)]" />
+                            <div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
+                                <Tv size={32} className="text-[var(--color-background)]" />
+                            </div>
+                            <h1 className="mb-[var(--spacing-lg)]">
+                                Fernsehen in
+                                <span className="text-[var(--color-primary)]"> bester Qualität</span>
+                            </h1>
+                            <p className="lead mb-[var(--spacing-2xl)]">
+                                Genießen Sie über 200 TV-Programme inkl. 40 HDTV-Sendern –
+                                direkt über das Kabelnetz von TeleNetSystems.
+                            </p>
+                            <Link href="/kontakt" className="btn btn-primary btn-lg">
+                                Jetzt beraten lassen
+                            </Link>
+                        </div>
+                        <div className="relative">
+                            <Image
+                                src="/images/hero/tv-header-44c1e07b.jpg"
+                                alt="Familie schaut gemütlich fern"
+                                width={800}
+                                height={600}
+                                className="rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]"
+                                priority
+                            />
                         </div>
-                        <h1 className="mb-[var(--spacing-lg)]">
-                            Fernsehen in
-                            <span className="text-[var(--color-primary)]"> bester Qualität</span>
-                        </h1>
-                        <p className="lead mb-[var(--spacing-2xl)]">
-                            Genießen Sie über 200 TV-Programme inkl. 40 HDTV-Sendern –
-                            direkt über das Kabelnetz von TeleNetSystems.
-                        </p>
-                        <Link href="/kontakt" className="btn btn-primary btn-lg">
-                            Jetzt beraten lassen
-                        </Link>
                     </div>
                 </Container>
             </Section>

app/internet/page.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 import Link from "next/link";
+import Image from "next/image";
 import { Section } from "@/components/layout/Section";
 import { Container } from "@/components/layout/Container";
 import { Wifi, Check, Phone, ArrowRight } from "lucide-react";
@@ -87,21 +88,33 @@ export default function InternetPage() {
             {/* Hero Section */}
             <Section variant="hero" className="bg-[var(--color-muted)]">
                 <Container>
-                    <div className="max-w-3xl">
+                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
-                        <div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
+                        <div className="max-w-xl">
-                            <Wifi size={32} className="text-[var(--color-background)]" />
+                            <div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
+                                <Wifi size={32} className="text-[var(--color-background)]" />
+                            </div>
+                            <h1 className="mb-[var(--spacing-lg)]">
+                                Highspeed-Internet
+                                <span className="text-[var(--color-primary)]"> für Tirol</span>
+                            </h1>
+                            <p className="lead mb-[var(--spacing-2xl)]">
+                                Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
+                                Flexible Tarife ohne Servicepauschale – für Privat- und Geschäftskunden.
+                            </p>
+                            <Link href="/kontakt" className="btn btn-primary btn-lg">
+                                Jetzt beraten lassen
+                            </Link>
+                        </div>
+                        <div className="relative">
+                            <Image
+                                src="/images/hero/internet-header-431619ac.jpg"
+                                alt="Highspeed Internet Verbindung"
+                                width={800}
+                                height={600}
+                                className="rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]"
+                                priority
+                            />
                         </div>
-                        <h1 className="mb-[var(--spacing-lg)]">
-                            Highspeed-Internet
-                            <span className="text-[var(--color-primary)]"> für Tirol</span>
-                        </h1>
-                        <p className="lead mb-[var(--spacing-2xl)]">
-                            Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
-                            Flexible Tarife ohne Servicepauschale – für Privat- und Geschäftskunden.
-                        </p>
-                        <Link href="/kontakt" className="btn btn-primary btn-lg">
-                            Jetzt beraten lassen
-                        </Link>
                     </div>
                 </Container>
             </Section>

app/page.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 import Link from "next/link";
+import Image from "next/image";
 import { Section } from "@/components/layout/Section";
 import { Container } from "@/components/layout/Container";
 import {

components/layout/Footer.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import Image from "next/image";
 import { Phone, Mail, MapPin } from "lucide-react";
 
 const footerLinks = {
@@ -28,9 +29,15 @@ export function Footer() {
                     <div className="stack-md">
                         <Link
                             href="/"
-                            className="text-xl font-semibold text-[var(--color-background)] hover:no-underline"
+                            className="hover:no-underline"
                         >
-                            <span className="text-[var(--color-primary)]">Tele</span>NetSystems
+                            <Image
+                                src="/images/logo/logo-weiss-ffa4cbf6.png"
+                                alt="TeleNetSystems Logo"
+                                width={160}
+                                height={36}
+                                className="h-8 w-auto"
+                            />
                         </Link>
                         <p className="text-sm opacity-80">
                             Ihr regionaler Telekom- und IT-Partner in Tirol.

components/layout/Header.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import { Menu, X, Phone } from "lucide-react";
 
 const navigation = [
@@ -22,9 +23,16 @@ export function Header() {
                     {/* Logo */}
                     <Link
                         href="/"
-                        className="text-xl font-semibold text-[var(--color-foreground)] hover:no-underline"
+                        className="hover:no-underline"
                     >
-                        <span className="text-[var(--color-primary)]">Tele</span>NetSystems
+                        <Image
+                            src="/images/logo/logo-systems-9fd0db14.png"
+                            alt="TeleNetSystems Logo"
+                            width={180}
+                            height={40}
+                            priority
+                            className="h-8 md:h-10 w-auto"
+                        />
                     </Link>
 
                     {/* Desktop Navigation */}