flight-club-lol/components/why-lol-section.tsx

75 lines
2.5 KiB
XML

"use client"
import { useIntersection } from "@/hooks/use-intersection"
import { GlitchText } from "@/components/glitch-text"
export function WhyLolSection() {
const { ref, isVisible } = useIntersection(0.2)
return (
<section
id="why-lol"
ref={ref as React.RefObject<HTMLElement>}
className="relative py-24 px-6 scanlines overflow-hidden"
data-in-view={isVisible}
>
{/* Gradient background shift */}
<div
className="absolute inset-0 transition-opacity duration-1000 -z-10"
style={{
background:
"linear-gradient(180deg, var(--background), oklch(0.15 0.03 160 / 0.3))",
opacity: isVisible ? 1 : 0,
}}
/>
<div className="max-w-3xl mx-auto relative z-20">
<div className="text-center mb-12">
<GlitchText
as="h2"
className="text-3xl md:text-4xl font-bold mb-2"
active={isVisible}
>
The first rule of Flight Club is: tell EVERYONE about Flight Club.
</GlitchText>
</div>
<div className="space-y-6 text-lg leading-relaxed">
<p>
We put {`"lol"`} in the domain because laughing is what you do when
the alternative is crying into your $1,100 same-day ticket to see
your mom in the hospital.
</p>
<p>
The airline industry made{" "}
<strong className="text-destructive">$29 billion</strong> in profit
last year. They employ teams of PhDs to build pricing algorithms
that extract maximum revenue from your urgency, your grief, your
inflexible schedule.
</p>
<p>
We think the correct response to that is a collective structure that
makes their extraction irrelevant. And also: <em>lol.</em>
</p>
<div className="border-l-4 border-primary/50 pl-6 py-2 my-8">
<p className="text-muted-foreground italic">
{`This isn't a startup. There's no VC money. There's no exit
strategy. It's just people pooling resources to protect each other
from systems designed to pick them clean.`}
</p>
</div>
<p className="text-muted-foreground">
The airlines built an asymmetric weapon: they know your price
sensitivity better than you do, and they use it against you in real
time. We{`'`}re building the collective shield.
</p>
</div>
</div>
</section>
)
}