98 lines
3.5 KiB
TypeScript
98 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Zap, ArrowDown } from "lucide-react";
|
|
|
|
const floatingEmojis = [
|
|
{ emoji: "💩", top: "20%", left: "8%", delay: "0s", duration: "8s" },
|
|
{ emoji: "⚡", top: "30%", right: "10%", delay: "1.5s", duration: "9s" },
|
|
{ emoji: "🌿", top: "65%", left: "6%", delay: "3s", duration: "10s" },
|
|
{ emoji: "🔋", top: "75%", right: "8%", delay: "0.5s", duration: "8.5s" },
|
|
{ emoji: "💩", top: "45%", right: "4%", delay: "4s", duration: "9s" },
|
|
{ emoji: "⚡", top: "12%", left: "80%", delay: "2s", duration: "10s" },
|
|
];
|
|
|
|
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-2xl sm:text-3xl animate-float-slow pointer-events-none select-none opacity-30"
|
|
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-accent/30 bg-accent/10 px-4 py-2 text-sm text-accent">
|
|
<Zap className="h-4 w-4" />
|
|
<span>Your #2 Is Our #1 Priority</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" }}
|
|
>
|
|
It's not about taking a shit — it's about giving one.
|
|
Our bioreactor-equipped porta potties convert organic waste into
|
|
clean, on-site electricity. Real science. Real power. Really good pun.
|
|
</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>
|
|
);
|
|
}
|