From ef836d9ddf513215272b6db043d1bc4661bd605d Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Wed, 4 Mar 2026 15:23:17 +0000
Subject: [PATCH] Add social media links and icons to the website footer

Integrates social media links (Facebook, Instagram, YouTube, TikTok) into the footer component using react-icons, both as clickable icons and text links.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: f7e766d6-7f9f-47e6-8eb5-63f33a1d5eaa
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/jdAEdU5
Replit-Helium-Checkpoint-Created: true
---
 client/src/components/footer.tsx | 52 ++++++++++++++++++++++++--------
 1 file changed, 39 insertions(+), 13 deletions(-)

diff --git a/client/src/components/footer.tsx b/client/src/components/footer.tsx
index 37e032c..4fda36c 100644
--- a/client/src/components/footer.tsx
+++ b/client/src/components/footer.tsx
@@ -1,4 +1,12 @@
 import { Link } from "wouter";
+import { SiFacebook, SiInstagram, SiYoutube, SiTiktok } from "react-icons/si";
+
+const SOCIAL_LINKS = [
+  { href: "https://www.facebook.com/folxtv/", icon: SiFacebook, label: "Facebook", testId: "link-social-facebook" },
+  { href: "https://www.instagram.com/folxtv/", icon: SiInstagram, label: "Instagram", testId: "link-social-instagram" },
+  { href: "https://www.youtube.com/@folxmtv", icon: SiYoutube, label: "YouTube", testId: "link-social-youtube" },
+  { href: "https://www.tiktok.com/@folxtv", icon: SiTiktok, label: "TikTok", testId: "link-social-tiktok" },
+];
 
 export default function Footer() {
   return (
@@ -7,10 +15,25 @@ export default function Footer() {
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
           <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">
+            <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.
             </p>
+            <div className="flex gap-3">
+              {SOCIAL_LINKS.map((s) => (
+                <a
+                  key={s.label}
+                  href={s.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted-foreground hover:text-primary transition-colors"
+                  aria-label={s.label}
+                  data-testid={s.testId}
+                >
+                  <s.icon className="w-5 h-5" />
+                </a>
+              ))}
+            </div>
           </div>
           <div>
             <h4 className="font-semibold text-card-foreground mb-3">Kategorien</h4>
@@ -43,19 +66,22 @@ export default function Footer() {
             </ul>
           </div>
           <div>
-            <h4 className="font-semibold text-card-foreground mb-3">Links</h4>
+            <h4 className="font-semibold text-card-foreground mb-3">Folgt uns</h4>
             <ul className="space-y-2 text-sm">
-              <li>
-                <a
-                  href="https://folx.tv"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-muted-foreground hover:text-primary transition-colors"
-                  data-testid="link-footer-folxtv"
-                >
-                  folx.tv
-                </a>
-              </li>
+              {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>
         </div>