68 lines
2.9 KiB
TypeScript
68 lines
2.9 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { ArrowDown } from "lucide-react"
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
|
<div className="absolute inset-0">
|
|
<img
|
|
src="/images/mycelium-soil.jpg"
|
|
alt="Mycelium growing through soil"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/50 to-black/70" />
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4 py-20 relative z-10">
|
|
<div className="max-w-5xl mx-auto text-center space-y-8">
|
|
<h1 className="tracking-tight text-balance">
|
|
<span className="block text-2xl md:text-3xl lg:text-4xl font-medium text-white/70 mb-4">it's time to</span>
|
|
<span
|
|
className="block text-6xl md:text-8xl lg:text-9xl font-bold text-white"
|
|
style={{ textShadow: "0 0 40px rgba(0,0,0,0.8), 0 0 80px rgba(0,0,0,0.6), 0 4px 20px rgba(0,0,0,0.9)" }}
|
|
>
|
|
<span className="text-white/40">(</span>Com<span className="text-white/40">)</span>post
|
|
</span>
|
|
<span
|
|
className="block text-6xl md:text-8xl lg:text-9xl font-bold text-amber-200 mt-2"
|
|
style={{ textShadow: "0 0 40px rgba(0,0,0,0.8), 0 0 80px rgba(0,0,0,0.6), 0 4px 20px rgba(0,0,0,0.9)" }}
|
|
>
|
|
Capitalism
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl md:text-2xl text-white/95 max-w-3xl mx-auto text-balance leading-relaxed">
|
|
What if we treated capitalism like organic matter—breaking down its extractive excesses to nourish
|
|
regenerative systems that work for the many, not the few?
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-8">
|
|
<Button size="lg" className="text-lg px-8 py-6" asChild>
|
|
<a href="https://links.mycofi.earth" target="_blank" rel="noopener noreferrer">
|
|
Explore the Mycelium
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="text-lg px-8 py-6 bg-[oklch(0.75_0.06_60)]/90 hover:bg-[oklch(0.75_0.06_60)] border-[oklch(0.65_0.08_55)]"
|
|
asChild
|
|
>
|
|
<a href="https://discord.com/invite/mFxSXCrfrN" target="_blank" rel="noopener noreferrer">
|
|
Join the Network
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="pt-12 animate-bounce">
|
|
<ArrowDown className="w-8 h-8 mx-auto text-white/70" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Decorative mushroom illustration placeholder */}
|
|
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-background to-transparent z-10" />
|
|
</section>
|
|
)
|
|
}
|