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