From ed498396b0075ab8b8b3d6552f0c1d79e60faee5 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 1 Sep 2025 21:28:21 +0000
Subject: [PATCH] Add categories to website footer and adjust layout

Updated footer layout to include a new 'Kategorien' section with links and expanded grid columns from 3 to 4 on medium/large screens across multiple pages (FolxStadlPage, GeschichteLiedPage, GipfelstammtischPage, and home.tsx).

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/2xHHKQn
---
 client/src/pages/FolxStadlPage.tsx        | 11 ++++++++++-
 client/src/pages/GeschichteLiedPage.tsx   | 11 ++++++++++-
 client/src/pages/GipfelstammtischPage.tsx | 11 ++++++++++-
 client/src/pages/home.tsx                 | 11 ++++++++++-
 4 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index 791faac..4a1a296 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -283,7 +283,7 @@ export default function FolxStadlPage() {
       {/* Footer */}
       <footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12">
         <div className="container">
-          <div className="grid grid-cols-2 md:grid-cols-3 gap-6 md:gap-8 text-sm">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 text-sm">
             {/* Company Info */}
             <div className="col-span-1">
               <div className="flex items-center space-x-2 mb-4">
@@ -292,6 +292,15 @@ export default function FolxStadlPage() {
                 </div>
                 <h3 className="text-xl font-bold text-white">go4.video</h3>
               </div>
+              <div>
+                <h4 className="text-white font-semibold mb-3">Kategorien</h4>
+                <ul className="space-y-2">
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Volksmusik</a></li>
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Dokumentationen</a></li>
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Interviews</a></li>
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Shows</a></li>
+                </ul>
+              </div>
             </div>
 
             {/* Navigation */}
diff --git a/client/src/pages/GeschichteLiedPage.tsx b/client/src/pages/GeschichteLiedPage.tsx
index d43bb77..ff13965 100644
--- a/client/src/pages/GeschichteLiedPage.tsx
+++ b/client/src/pages/GeschichteLiedPage.tsx
@@ -284,7 +284,7 @@ export default function GeschichteLiedPage() {
       {/* Footer */}
       <footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12">
         <div className="container">
-          <div className="grid grid-cols-2 md:grid-cols-3 gap-6 md:gap-8 text-sm">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 text-sm">
             {/* Company Info */}
             <div className="col-span-1">
               <div className="flex items-center space-x-2 mb-4">
@@ -293,6 +293,15 @@ export default function GeschichteLiedPage() {
                 </div>
                 <h3 className="text-xl font-bold text-white">go4.video</h3>
               </div>
+              <div>
+                <h4 className="text-white font-semibold mb-3">Kategorien</h4>
+                <ul className="space-y-2">
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Volksmusik</a></li>
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Dokumentationen</a></li>
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Interviews</a></li>
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Shows</a></li>
+                </ul>
+              </div>
             </div>
 
             {/* Navigation */}
diff --git a/client/src/pages/GipfelstammtischPage.tsx b/client/src/pages/GipfelstammtischPage.tsx
index 304ed82..f930ab8 100644
--- a/client/src/pages/GipfelstammtischPage.tsx
+++ b/client/src/pages/GipfelstammtischPage.tsx
@@ -284,7 +284,7 @@ export default function GipfelstammtischPage() {
       {/* Footer */}
       <footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12">
         <div className="container">
-          <div className="grid grid-cols-2 md:grid-cols-3 gap-6 md:gap-8 text-sm">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 text-sm">
             {/* Company Info */}
             <div className="col-span-1">
               <div className="flex items-center space-x-2 mb-4">
@@ -293,6 +293,15 @@ export default function GipfelstammtischPage() {
                 </div>
                 <h3 className="text-xl font-bold text-white">go4.video</h3>
               </div>
+              <div>
+                <h4 className="text-white font-semibold mb-3">Kategorien</h4>
+                <ul className="space-y-2">
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Volksmusik</a></li>
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Dokumentationen</a></li>
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Interviews</a></li>
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Shows</a></li>
+                </ul>
+              </div>
             </div>
 
             {/* Navigation */}
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index deee4da..185a471 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -200,7 +200,7 @@ export default function Home() {
       {/* Footer */}
       <footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12">
         <div className="container">
-          <div className="grid grid-cols-2 md:grid-cols-3 gap-6 md:gap-8 text-sm">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 text-sm">
             {/* Company Info */}
             <div className="col-span-1">
               <div className="flex items-center space-x-2 mb-4">
@@ -209,6 +209,15 @@ export default function Home() {
                 </div>
                 <h3 className="text-xl font-bold text-white">go4.video</h3>
               </div>
+              <div>
+                <h4 className="text-white font-semibold mb-3">Kategorien</h4>
+                <ul className="space-y-2">
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Volksmusik</a></li>
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Dokumentationen</a></li>
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Interviews</a></li>
+                  <li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Shows</a></li>
+                </ul>
+              </div>
             </div>
 
             {/* Navigation */}