63 lines
2.4 KiB
TypeScript
63 lines
2.4 KiB
TypeScript
import Link from "next/link"
|
|
import { Instagram, Music } from "lucide-react"
|
|
|
|
export function Footer() {
|
|
return (
|
|
<footer className="bg-muted/50 border-t border-border organic-texture">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div>
|
|
<h3 className="text-lg font-bold text-foreground mb-4">Soul Speaks Soil</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
Exploring the connection between soul and soil through meaningful conversations.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-foreground mb-4">Quick Links</h4>
|
|
<div className="space-y-2">
|
|
<Link href="/about" className="block text-muted-foreground hover:text-primary transition-colors">
|
|
About
|
|
</Link>
|
|
<Link href="/episodes" className="block text-muted-foreground hover:text-primary transition-colors">
|
|
Episodes
|
|
</Link>
|
|
<Link href="/contact" className="block text-muted-foreground hover:text-primary transition-colors">
|
|
Contact
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-foreground mb-4">Connect</h4>
|
|
<div className="flex gap-4">
|
|
<a
|
|
href="https://open.spotify.com/show/soul-speaks-soil"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-muted-foreground hover:text-primary transition-colors"
|
|
aria-label="Listen on Spotify"
|
|
>
|
|
<Music className="h-6 w-6" />
|
|
</a>
|
|
<a
|
|
href="https://instagram.com/soulspeakssoil"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-muted-foreground hover:text-primary transition-colors"
|
|
aria-label="Follow on Instagram"
|
|
>
|
|
<Instagram className="h-6 w-6" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8 pt-8 border-t border-border text-center text-sm text-muted-foreground">
|
|
<p>© {new Date().getFullYear()} Soul Speaks Soil. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|