100 lines
3.6 KiB
TypeScript
100 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Zap, ArrowDown } from "lucide-react";
|
|
|
|
const floatingEmojis = [
|
|
{ emoji: "💩", top: "15%", left: "8%", delay: "0s", duration: "6s" },
|
|
{ emoji: "⚡", top: "25%", right: "12%", delay: "1s", duration: "7s" },
|
|
{ emoji: "💩", top: "60%", left: "5%", delay: "2s", duration: "8s" },
|
|
{ emoji: "🔋", top: "70%", right: "8%", delay: "0.5s", duration: "6.5s" },
|
|
{ emoji: "💩", top: "40%", right: "5%", delay: "3s", duration: "7s" },
|
|
{ emoji: "🌿", top: "80%", left: "15%", delay: "1.5s", duration: "9s" },
|
|
{ emoji: "⚡", top: "10%", left: "75%", delay: "2.5s", duration: "6s" },
|
|
{ emoji: "💩", top: "50%", left: "90%", delay: "0.8s", duration: "7.5s" },
|
|
];
|
|
|
|
export function HeroSection() {
|
|
return (
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-16">
|
|
{/* Neon glow orbs */}
|
|
<div className="absolute top-1/4 left-1/4 w-96 h-96 neon-glow-orb animate-pulse-glow" />
|
|
<div
|
|
className="absolute bottom-1/4 right-1/4 w-80 h-80 neon-glow-orb animate-pulse-glow"
|
|
style={{ animationDelay: "1.5s" }}
|
|
/>
|
|
|
|
{/* Floating emojis */}
|
|
{floatingEmojis.map((item, i) => (
|
|
<span
|
|
key={i}
|
|
className="absolute text-3xl sm:text-4xl animate-float-slow pointer-events-none select-none opacity-60"
|
|
style={{
|
|
top: item.top,
|
|
left: item.left,
|
|
right: item.right,
|
|
animationDelay: item.delay,
|
|
animationDuration: item.duration,
|
|
}}
|
|
aria-hidden="true"
|
|
>
|
|
{item.emoji}
|
|
</span>
|
|
))}
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 mx-auto max-w-4xl px-4 text-center">
|
|
<div className="animate-fade-in-up">
|
|
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-neon/30 bg-neon/10 px-4 py-2 text-sm text-neon">
|
|
<Zap className="h-4 w-4" />
|
|
<span>The Future of Festival Sanitation</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h1
|
|
className="animate-fade-in-up text-4xl sm:text-5xl md:text-7xl font-bold leading-tight tracking-tight mb-6"
|
|
style={{ animationDelay: "0.1s" }}
|
|
>
|
|
Turning Festival{" "}
|
|
<span className="gradient-text">Waste</span> Into Festival{" "}
|
|
<span className="neon-text text-neon">Watts</span>
|
|
</h1>
|
|
|
|
<p
|
|
className="animate-fade-in-up mx-auto max-w-2xl text-lg sm:text-xl text-cream-dim mb-10"
|
|
style={{ animationDelay: "0.2s" }}
|
|
>
|
|
Our bioreactor-equipped porta potties don't just handle the business
|
|
— they turn it into clean electricity. Yes, your festival is
|
|
literally powered by poop.
|
|
</p>
|
|
|
|
<div
|
|
className="animate-fade-in-up flex flex-col sm:flex-row items-center justify-center gap-4"
|
|
style={{ animationDelay: "0.3s" }}
|
|
>
|
|
<a href="#contact">
|
|
<Button size="lg">
|
|
<Zap className="h-5 w-5" />
|
|
Power Your Festival
|
|
</Button>
|
|
</a>
|
|
<a href="#how-it-works">
|
|
<Button variant="outline" size="lg">
|
|
See How It Works
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
|
|
<a
|
|
href="#how-it-works"
|
|
className="animate-fade-in-up mt-16 inline-block text-cream-dim hover:text-neon transition-colors"
|
|
style={{ animationDelay: "0.5s" }}
|
|
>
|
|
<ArrowDown className="h-6 w-6 animate-bounce" />
|
|
</a>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|