65 lines
2.6 KiB
TypeScript
65 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { ArrowDown, Sparkles } from "lucide-react"
|
|
|
|
export function HeroSection() {
|
|
return (
|
|
<section className="min-h-screen flex items-center justify-center relative overflow-hidden">
|
|
{/* Animated Background */}
|
|
<div className="absolute inset-0 trippy-gradient opacity-20"></div>
|
|
|
|
{/* Floating Elements */}
|
|
<div className="absolute top-20 left-10 text-6xl opacity-30 float-animation">🍄</div>
|
|
<div className="absolute top-40 right-20 text-4xl opacity-40 float-animation" style={{ animationDelay: "2s" }}>
|
|
🌱
|
|
</div>
|
|
<div className="absolute bottom-40 left-20 text-5xl opacity-35 float-animation" style={{ animationDelay: "4s" }}>
|
|
🌿
|
|
</div>
|
|
<div className="absolute bottom-20 right-10 text-3xl opacity-30 float-animation" style={{ animationDelay: "1s" }}>
|
|
✨
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4 text-center relative z-10">
|
|
<div className="max-w-4xl mx-auto">
|
|
<h1 className="text-6xl md:text-8xl font-bold mb-6 text-balance">
|
|
<span className="text-primary">Society</span> is{" "}
|
|
<span className="text-secondary mycelial-growth">Trippin Balls</span>
|
|
</h1>
|
|
|
|
<p className="text-xl md:text-2xl mb-8 text-muted-foreground text-pretty leading-relaxed">
|
|
{"On a system predicated on economic extraction, oppression, and endless growth. "}
|
|
{"Time to explore "}
|
|
<span className="text-primary font-semibold">post-capitalist alternatives</span>
|
|
{" inspired by nature's wisdom."}
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
|
|
<Button
|
|
size="lg"
|
|
className="pulse-glow text-lg px-8 py-4"
|
|
onClick={() => window.open("https://post-appitalism.app", "_blank")}
|
|
>
|
|
<Sparkles className="mr-2 h-5 w-5" />
|
|
Explore Alternatives
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
className="text-lg px-8 py-4 border-primary text-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
|
|
onClick={() => window.open("https://mycofi.earth", "_blank")}
|
|
>
|
|
Learn Mycoeconomics
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="animate-bounce">
|
|
<ArrowDown className="h-8 w-8 mx-auto text-primary" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|