From 5e655af84da5b6137c2491bb1155a80a46cf0abf Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Wed, 24 Dec 2025 14:35:37 -0800
Subject: [PATCH] refactor: footer with 3-col sub-footer for band links +
 compact main footer

---
 frontend/components/layout/footer.tsx | 125 +++++++++++++-------------
 1 file changed, 61 insertions(+), 64 deletions(-)

diff --git a/frontend/components/layout/footer.tsx b/frontend/components/layout/footer.tsx
index a19afcc..86b7bd3 100644
--- a/frontend/components/layout/footer.tsx
+++ b/frontend/components/layout/footer.tsx
@@ -2,75 +2,72 @@ import Link from "next/link"
 
 export function Footer() {
     return (
-        <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-5 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">
-                            A place to talk Goose
-                        </p>
-                    </div>
+        <footer className="border-t mt-12">
+            {/* Sub-footer: Band & Community Links */}
+            <div className="bg-muted/30 py-8">
+                <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        {/* Listen */}
+                        <div className="text-center md:text-left">
+                            <h4 className="font-semibold text-sm mb-3">Listen</h4>
+                            <ul className="space-y-2 text-sm text-muted-foreground">
+                                <li><a href="https://www.nugs.net/goose-concerts-live-downloads-in-mp3-flac-or-online-music-streaming/" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Nugs.net</a></li>
+                                <li><a href="https://goosetheband.bandcamp.com" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Bandcamp</a></li>
+                                <li><a href="https://open.spotify.com/artist/6qqNVTkY8uBg9cP3Jd7DAH" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Spotify</a></li>
+                                <li><a href="https://relisten.net/goose" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Relisten</a></li>
+                            </ul>
+                        </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="/shows" className="hover:underline hover:text-foreground">Shows</Link></li>
-                            <li><Link href="/venues" className="hover:underline hover:text-foreground">Venues</Link></li>
-                            <li><Link href="/songs" className="hover:underline hover:text-foreground">Songs</Link></li>
-                            <li><Link href="/performances" className="hover:underline hover:text-foreground">Top Performances</Link></li>
-                            <li><Link href="/tours" className="hover:underline hover:text-foreground">Tours</Link></li>
-                            <li><Link href="/videos" className="hover:underline hover:text-foreground">Videos</Link></li>
-                            <li><Link href="/leaderboards" className="hover:underline hover:text-foreground">Leaderboards</Link></li>
-                        </ul>
-                    </div>
+                        {/* Community */}
+                        <div className="text-center md:text-left">
+                            <h4 className="font-semibold text-sm mb-3">Community</h4>
+                            <ul className="space-y-2 text-sm text-muted-foreground">
+                                <li><a href="https://elgoose.net" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">ElGoose.net</a></li>
+                                <li><a href="https://www.reddit.com/r/GooseTheBand" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Reddit</a></li>
+                                <li><a href="https://wysterialane.org" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Wysteria Lane</a></li>
+                                <li><a href="https://wtedradio.com" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">WTED Radio</a></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><a href="https://elgoose.net" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">ElGoose.net</a></li>
-                            <li><a href="https://www.reddit.com/r/GooseTheBand" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Reddit</a></li>
-                            <li><a href="https://wysterialane.org" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Wysteria Lane</a></li>
-                            <li><a href="https://wtedradio.com" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">WTED Radio</a></li>
-                            <li><Link href="/bugs" className="hover:underline hover:text-foreground">Report a Bug</Link></li>
-                        </ul>
-                    </div>
-
-                    {/* Listen */}
-                    <div>
-                        <h4 className="font-semibold text-sm mb-3">Listen</h4>
-                        <ul className="space-y-2 text-sm text-muted-foreground">
-                            <li><a href="https://www.nugs.net/goose-concerts-live-downloads-in-mp3-flac-or-online-music-streaming/" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Nugs.net</a></li>
-                            <li><a href="https://goosetheband.bandcamp.com" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Bandcamp</a></li>
-                            <li><a href="https://open.spotify.com/artist/6qqNVTkY8uBg9cP3Jd7DAH" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Spotify</a></li>
-                            <li><a href="https://relisten.net/goose" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Relisten</a></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>
+                        {/* More Jambands */}
+                        <div className="text-center md:text-left">
+                            <h4 className="font-semibold text-sm mb-3">More Jambands</h4>
+                            <ul className="space-y-2 text-sm text-muted-foreground">
+                                <li><a href="https://phish.net" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Phish.net</a></li>
+                                <li><a href="https://allmusicdata.app" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">All Music Data</a></li>
+                                <li><a href="https://relisten.net" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Relisten</a></li>
+                                <li><a href="https://www.jambands.com" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Jambands.com</a></li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
+            </div>
 
-                {/* 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 care for the community
-                    </p>
+            {/* Main footer: System Links */}
+            <div className="py-6 bg-background">
+                <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                    <div className="flex flex-col md:flex-row items-center justify-between gap-6">
+                        {/* Brand & Copyright */}
+                        <div className="flex items-center gap-4">
+                            <span className="text-lg font-bold">Elmeg</span>
+                            <span className="text-xs text-muted-foreground">
+                                © {new Date().getFullYear()} All rights reserved
+                            </span>
+                        </div>
+
+                        {/* System Links */}
+                        <nav className="flex flex-wrap items-center justify-center gap-4 md:gap-6 text-sm text-muted-foreground">
+                            <Link href="/shows" className="hover:underline hover:text-foreground">Shows</Link>
+                            <Link href="/songs" className="hover:underline hover:text-foreground">Songs</Link>
+                            <Link href="/venues" className="hover:underline hover:text-foreground">Venues</Link>
+                            <Link href="/leaderboards" className="hover:underline hover:text-foreground">Leaderboards</Link>
+                            <span className="text-muted-foreground/50">|</span>
+                            <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>
+                            <Link href="/bugs" className="hover:underline hover:text-foreground">Report Bug</Link>
+                        </nav>
+                    </div>
                 </div>
             </div>
         </footer>