From 67d064c7939268dbe6ef39f41d65172025179635 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 6 Mar 2026 15:25:47 +0000
Subject: [PATCH] Update footer layout with new categories and legal links

Refactor footer component to use a wider max-width, introduce new CATEGORIES and LEGAL_LINKS arrays, and adjust flexbox properties for responsive layout.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 537a9458-cd04-4055-b860-45752e6eb204
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/ee1CXlO
Replit-Helium-Checkpoint-Created: true
---
 client/src/components/footer.tsx | 145 +++++++++++++++----------------
 1 file changed, 70 insertions(+), 75 deletions(-)

diff --git a/client/src/components/footer.tsx b/client/src/components/footer.tsx
index dd30bf5..3038c58 100644
--- a/client/src/components/footer.tsx
+++ b/client/src/components/footer.tsx
@@ -8,18 +8,33 @@ const SOCIAL_LINKS = [
   { href: "https://www.tiktok.com/@folxtv", icon: SiTiktok, label: "TikTok", testId: "link-social-tiktok" },
 ];
 
+const CATEGORIES = [
+  { href: "/category/News", label: "News", testId: "link-footer-news" },
+  { href: "/videos", label: "Video", testId: "link-footer-video" },
+  { href: "/gallery", label: "Fotogalerie", testId: "link-footer-gallery" },
+  { href: "/horoskop", label: "Horoskop", testId: "link-footer-horoskop" },
+  { href: "/rezepte", label: "Rezepte", testId: "link-footer-rezepte" },
+];
+
+const LEGAL_LINKS = [
+  { href: "/empfang-folx-tv", label: "Empfang", testId: "link-footer-empfang" },
+  { href: "/ueber-uns", label: "Über uns", testId: "link-footer-ueber-uns" },
+  { href: "/kontakt", label: "Kontakt", testId: "link-footer-kontakt" },
+  { href: "/impressum", label: "Impressum", testId: "link-footer-impressum" },
+  { href: "/datenschutz", label: "Datenschutz", testId: "link-footer-datenschutz" },
+];
+
 export default function Footer() {
   return (
     <footer className="border-t border-border bg-[hsl(var(--card))] mt-8 relative z-20 isolation-isolate" data-testid="footer">
-      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div>
-            <h3 className="font-bold text-card-foreground text-lg mb-3">Folx Music Television</h3>
-            <p className="text-muted-foreground text-sm leading-relaxed mb-4">
-              Folx Music Television. Aktuelle Nachrichten, Interviews und
-              Hintergrundberichte aus der Welt der Volksmusik und des Schlagers.
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="py-8 flex flex-col md:flex-row md:items-start md:justify-between gap-8">
+          <div className="flex-shrink-0">
+            <h3 className="font-bold text-card-foreground text-xl mb-2 tracking-tight">FOLX TV</h3>
+            <p className="text-muted-foreground text-sm leading-relaxed max-w-[260px] mb-4">
+              Ihr Sender für Volksmusik und Schlager. Aktuelle Nachrichten, Interviews und Hintergrundberichte.
             </p>
-            <div className="flex gap-3">
+            <div className="flex gap-4">
               {SOCIAL_LINKS.map((s) => (
                 <a
                   key={s.label}
@@ -35,76 +50,56 @@ export default function Footer() {
               ))}
             </div>
           </div>
-          <div>
-            <h4 className="font-semibold text-card-foreground mb-3">Kategorien</h4>
-            <ul className="space-y-2 text-sm">
-              <li>
-                <Link href="/category/News">
-                  <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-news">News</span>
-                </Link>
-              </li>
-              <li>
-                <Link href="/videos">
-                  <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-video">Video</span>
-                </Link>
-              </li>
-              <li>
-                <Link href="/gallery">
-                  <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-gallery">Fotogalerie</span>
-                </Link>
-              </li>
-              <li>
-                <Link href="/horoskop">
-                  <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-horoskop">Horoskop</span>
-                </Link>
-              </li>
-              <li>
-                <Link href="/rezepte">
-                  <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-rezepte">Rezepte</span>
-                </Link>
-              </li>
-            </ul>
-          </div>
-          <div>
-            <h4 className="font-semibold text-card-foreground mb-3">Folgt uns</h4>
-            <ul className="space-y-2 text-sm">
-              {SOCIAL_LINKS.map((s) => (
-                <li key={s.label}>
-                  <a
-                    href={s.href}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-muted-foreground hover:text-primary transition-colors inline-flex items-center gap-2"
-                    data-testid={`link-footer-${s.label.toLowerCase()}`}
-                  >
-                    <s.icon className="w-4 h-4" />
-                    {s.label}
-                  </a>
-                </li>
-              ))}
-            </ul>
+
+          <div className="flex flex-wrap gap-x-16 gap-y-6">
+            <div>
+              <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">Kategorien</h4>
+              <ul className="space-y-1.5 text-sm">
+                {CATEGORIES.map((c) => (
+                  <li key={c.label}>
+                    <Link href={c.href}>
+                      <span className="text-card-foreground/80 cursor-pointer hover:text-primary transition-colors" data-testid={c.testId}>{c.label}</span>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div>
+              <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">Folgt uns</h4>
+              <ul className="space-y-1.5 text-sm">
+                {SOCIAL_LINKS.map((s) => (
+                  <li key={s.label}>
+                    <a
+                      href={s.href}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-card-foreground/80 hover:text-primary transition-colors inline-flex items-center gap-2"
+                      data-testid={`link-footer-${s.label.toLowerCase()}`}
+                    >
+                      <s.icon className="w-3.5 h-3.5" />
+                      {s.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
           </div>
         </div>
-        <div className="border-t border-border mt-6 pt-4 flex flex-col items-center gap-2">
-          <div className="flex flex-wrap justify-center gap-x-4 gap-y-1 text-xs">
-            <Link href="/empfang-folx-tv">
-              <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-empfang">Empfang</span>
-            </Link>
-            <Link href="/ueber-uns">
-              <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-ueber-uns">Über uns</span>
-            </Link>
-            <Link href="/kontakt">
-              <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-kontakt">Kontakt</span>
-            </Link>
-            <Link href="/impressum">
-              <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-impressum">Impressum</span>
-            </Link>
-            <Link href="/datenschutz">
-              <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-datenschutz">Datenschutz</span>
-            </Link>
+
+        <div className="border-t border-border/50 py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+          <div className="flex flex-wrap gap-x-3 gap-y-1 text-xs">
+            {LEGAL_LINKS.map((l, i) => (
+              <span key={l.label} className="flex items-center gap-3">
+                <Link href={l.href}>
+                  <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid={l.testId}>{l.label}</span>
+                </Link>
+                {i < LEGAL_LINKS.length - 1 && <span className="text-border">·</span>}
+              </span>
+            ))}
           </div>
-          <p className="text-xs text-muted-foreground">
-            &copy; {new Date().getFullYear()} Folx Music Television. Alle Rechte vorbehalten.
+          <p className="text-xs text-muted-foreground/60">
+            &copy; {new Date().getFullYear()} Folx Music Television
           </p>
         </div>
       </div>