feat: set mossy statue as homepage header image

Enhance visual appeal with artistic mossy statue as hero section.

#VERCEL_SKIP

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
This commit is contained in:
v0 2025-11-02 19:39:36 +00:00
parent fcbfd55b8c
commit 42cdb95500
1 changed files with 24 additions and 12 deletions

View File

@ -10,29 +10,41 @@ export default function HomePage() {
<div className="min-h-screen flex flex-col">
<Navigation />
{/* Hero Section with mycelial pattern overlay */}
<section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8 mycelial-pattern">
<div className="container mx-auto">
<section className="relative pt-24 pb-16 px-4 sm:px-6 lg:px-8">
<div className="absolute inset-0 z-0">
<img
src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_112213_925-XnDB5Tj5KFyS6c2Wr6RZVmZfqeQ1FG.jpg"
alt="Stone sculpture with moss crown - embodying the soul speaks soil philosophy"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-b from-background/80 via-background/70 to-background"></div>
</div>
<div className="container mx-auto relative z-10">
<div className="max-w-4xl mx-auto text-center">
<div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
<div className="inline-flex items-center gap-2 bg-primary/90 text-primary-foreground px-4 py-2 rounded-full text-sm font-medium mb-6 shadow-lg">
<Sprout className="h-4 w-4" />
<span>Where Soul Meets Soil</span>
</div>
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-display font-bold text-foreground mb-6 text-balance tracking-tight">
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-display font-bold text-foreground mb-6 text-balance tracking-tight drop-shadow-lg">
Soul Speaks Soil
</h1>
<p className="text-xl text-muted-foreground mb-8 leading-relaxed text-pretty">
<p className="text-xl text-foreground/90 mb-8 leading-relaxed text-pretty drop-shadow-md">
Join host Sammy Davies for deep conversations exploring the profound connection between our inner world
and the earth beneath our feet.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button asChild size="lg" className="text-lg">
<Button asChild size="lg" className="text-lg shadow-lg">
<a href="https://open.spotify.com/show/soul-speaks-soil" target="_blank" rel="noopener noreferrer">
<Music className="mr-2 h-5 w-5" />
Listen on Spotify
</a>
</Button>
<Button asChild variant="outline" size="lg" className="text-lg bg-transparent">
<Button
asChild
variant="outline"
size="lg"
className="text-lg bg-background/80 backdrop-blur-sm shadow-lg"
>
<Link href="/episodes">Browse Episodes</Link>
</Button>
</div>
@ -74,15 +86,15 @@ export default function HomePage() {
<div className="grid md:grid-cols-2 gap-6">
<div className="aspect-square rounded-xl overflow-hidden bg-primary/5 shadow-lg">
<img
src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_112213_925-XnDB5Tj5KFyS6c2Wr6RZVmZfqeQ1FG.jpg"
alt="Stone sculpture with moss crown - embodying the soul speaks soil philosophy"
src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_112207_223-IXghjBiGqE5Eu3b7U3lVXN1spTvTgn.jpg"
alt="Vibrant green moss growing on decaying wood - the cycle of life and soil"
className="w-full h-full object-cover"
/>
</div>
<div className="aspect-square rounded-xl overflow-hidden bg-primary/5 shadow-lg">
<img
src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_112207_223-IXghjBiGqE5Eu3b7U3lVXN1spTvTgn.jpg"
alt="Vibrant green moss growing on decaying wood - the cycle of life and soil"
src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_112203_809-qlO7ndE3aT5sOPWioTlv9j69EyUiRF.jpg"
alt="Sammy Davies in her garden with composting systems and natural elements"
className="w-full h-full object-cover"
/>
</div>