feat: Enhanced footer with multi-column layout and bug tracker link
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
This commit is contained in:
parent
08587f21f9
commit
033c9f9bd0
1 changed files with 50 additions and 10 deletions
|
|
@ -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>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue