From 033c9f9bd09d55318d1926915b48ceb7815c30bd Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Tue, 23 Dec 2025 16:00:08 -0800
Subject: [PATCH] feat: Enhanced footer with multi-column layout and bug
 tracker link

---
 frontend/components/layout/footer.tsx | 60 ++++++++++++++++++++++-----
 1 file changed, 50 insertions(+), 10 deletions(-)

diff --git a/frontend/components/layout/footer.tsx b/frontend/components/layout/footer.tsx
index cb569e7..86c3e78 100644
--- a/frontend/components/layout/footer.tsx
+++ b/frontend/components/layout/footer.tsx
@@ -2,17 +2,57 @@ import Link from "next/link"
 
 export function Footer() {
     return (
-        <footer className="border-t py-6 md:py-8 mt-12 bg-muted/30">
-            <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
-                <div className="flex flex-col gap-1 items-center md:items-start text-center md:text-left">
-                    <span className="font-bold">Elmeg</span>
-                    <span className="text-sm text-muted-foreground">The community archive.</span>
-                    <p className="text-xs text-muted-foreground mt-2">© {new Date().getFullYear()} Elmeg. All rights reserved.</p>
+        <footer className="border-t py-8 md:py-10 mt-12 bg-muted/30">
+            <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
+                    {/* Brand */}
+                    <div className="col-span-2 md:col-span-1">
+                        <span className="text-xl font-bold">Elmeg</span>
+                        <p className="text-sm text-muted-foreground mt-2">
+                            The community archive for fans, by fans.
+                        </p>
+                    </div>
+
+                    {/* Explore */}
+                    <div>
+                        <h4 className="font-semibold text-sm mb-3">Explore</h4>
+                        <ul className="space-y-2 text-sm text-muted-foreground">
+                            <li><Link href="/archive" className="hover:underline hover:text-foreground">Shows</Link></li>
+                            <li><Link href="/songs" className="hover:underline hover:text-foreground">Songs</Link></li>
+                            <li><Link href="/venues" className="hover:underline hover:text-foreground">Venues</Link></li>
+                            <li><Link href="/videos" className="hover:underline hover:text-foreground">Videos</Link></li>
+                        </ul>
+                    </div>
+
+                    {/* Community */}
+                    <div>
+                        <h4 className="font-semibold text-sm mb-3">Community</h4>
+                        <ul className="space-y-2 text-sm text-muted-foreground">
+                            <li><Link href="/leaderboards" className="hover:underline hover:text-foreground">Leaderboards</Link></li>
+                            <li><Link href="/groups" className="hover:underline hover:text-foreground">Groups</Link></li>
+                            <li><Link href="/bugs" className="hover:underline hover:text-foreground">Report a Bug</Link></li>
+                        </ul>
+                    </div>
+
+                    {/* Legal */}
+                    <div>
+                        <h4 className="font-semibold text-sm mb-3">Legal</h4>
+                        <ul className="space-y-2 text-sm text-muted-foreground">
+                            <li><Link href="/about" className="hover:underline hover:text-foreground">About</Link></li>
+                            <li><Link href="/terms" className="hover:underline hover:text-foreground">Terms of Service</Link></li>
+                            <li><Link href="/privacy" className="hover:underline hover:text-foreground">Privacy Policy</Link></li>
+                        </ul>
+                    </div>
                 </div>
-                <div className="flex gap-6 text-sm text-muted-foreground">
-                    <Link href="/about" className="hover:underline hover:text-foreground">About</Link>
-                    <Link href="/terms" className="hover:underline hover:text-foreground">Terms</Link>
-                    <Link href="/privacy" className="hover:underline hover:text-foreground">Privacy</Link>
+
+                {/* Bottom bar */}
+                <div className="border-t pt-6 flex flex-col md:flex-row items-center justify-between gap-4">
+                    <p className="text-xs text-muted-foreground">
+                        © {new Date().getFullYear()} Elmeg. All rights reserved.
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                        Made with ♥ for the community
+                    </p>
                 </div>
             </div>
         </footer>