87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import { Plane, Cloud, DollarSign, ChevronDown } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { GlitchText } from "@/components/glitch-text"
|
|
|
|
const floatingItems = [
|
|
{ Icon: Plane, className: "top-[15%] left-[10%]", delay: "0s", duration: "6s" },
|
|
{ Icon: Cloud, className: "top-[25%] right-[15%]", delay: "1s", duration: "8s" },
|
|
{ Icon: DollarSign, className: "top-[60%] left-[20%]", delay: "2s", duration: "7s" },
|
|
{ Icon: Plane, className: "top-[70%] right-[10%]", delay: "0.5s", duration: "9s" },
|
|
{ Icon: Cloud, className: "top-[40%] left-[75%]", delay: "3s", duration: "7.5s" },
|
|
{ Icon: DollarSign, className: "top-[20%] left-[50%]", delay: "1.5s", duration: "6.5s" },
|
|
]
|
|
|
|
export function Hero() {
|
|
const scrollTo = (id: string) => {
|
|
document.getElementById(id)?.scrollIntoView({ behavior: "smooth" })
|
|
}
|
|
|
|
return (
|
|
<section
|
|
id="hero"
|
|
className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-accent/10 via-background to-primary/10"
|
|
>
|
|
{/* Floating background elements */}
|
|
{floatingItems.map((item, i) => (
|
|
<div
|
|
key={i}
|
|
className={`absolute ${item.className} opacity-[0.12] dark:opacity-[0.08] pointer-events-none`}
|
|
style={{
|
|
animation: `float-gentle ${item.duration} ease-in-out infinite`,
|
|
animationDelay: item.delay,
|
|
}}
|
|
>
|
|
<item.Icon className="size-12 md:size-16 text-primary" />
|
|
</div>
|
|
))}
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
|
|
<div className="mb-6">
|
|
<span className="inline-block px-4 py-1.5 rounded-full bg-primary/10 text-primary text-sm font-medium dark:bg-primary/20">
|
|
Coming Soon
|
|
</span>
|
|
</div>
|
|
|
|
<GlitchText
|
|
as="h1"
|
|
className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6 tracking-tight"
|
|
>
|
|
{`We're just a bunch of friends who hate paying $800 for a flight that was $200 yesterday :)`}
|
|
</GlitchText>
|
|
|
|
<p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10">
|
|
So we built a way to stop getting gouged. An ergodically aligned
|
|
collective mechanism to protect each other from extractive pricing
|
|
algorithms.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
size="xl"
|
|
onClick={() => scrollTo("vision")}
|
|
className="rounded-full"
|
|
>
|
|
See How It Works
|
|
</Button>
|
|
<Button
|
|
size="xl"
|
|
variant="outline"
|
|
onClick={() => scrollTo("cta")}
|
|
className="rounded-full"
|
|
>
|
|
Join the Waitlist
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll indicator */}
|
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
|
<ChevronDown className="size-6 text-muted-foreground" />
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|