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,7 +26,8 @@ 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="max-w-xl">
                             <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>
@@ -41,6 +43,17 @@ export default function FernsehenPage() {
                                 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>
+                    </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,7 +88,8 @@ 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="max-w-xl">
                             <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>
@@ -103,6 +105,17 @@ export default function InternetPage() {
                                 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>
+                    </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 */}