70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { AlertTriangle, TrendingUp, Bot } from "lucide-react"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { PricingChart } from "@/components/pricing-chart"
|
|
import { pricingStats } from "@/lib/pricing-data"
|
|
|
|
const callouts = [
|
|
{
|
|
icon: AlertTriangle,
|
|
title: "Your emergency is their payday",
|
|
description: `Average ${pricingStats.avgPremium} premium on last-minute domestic flights. Your urgency is a revenue opportunity.`,
|
|
color: "text-destructive",
|
|
},
|
|
{
|
|
icon: TrendingUp,
|
|
title: `${pricingStats.markupRange} markup`,
|
|
description:
|
|
"Same seat. Same plane. Same crew. Different price because you needed it sooner.",
|
|
color: "text-accent dark:text-accent",
|
|
},
|
|
{
|
|
icon: Bot,
|
|
title: "It's not supply and demand. It's an algorithm.",
|
|
description:
|
|
"Airlines use dynamic pricing AI trained on one objective: maximize revenue extraction.",
|
|
color: "text-primary",
|
|
},
|
|
]
|
|
|
|
export function ProblemSection() {
|
|
return (
|
|
<section id="problem" className="py-24 px-6">
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
|
Airlines use algorithms to maximize what you pay.
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
|
{`Here's what that looks like.`}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Pricing chart */}
|
|
<div className="mb-16">
|
|
<PricingChart />
|
|
</div>
|
|
|
|
{/* Callout cards */}
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
{callouts.map((item) => (
|
|
<Card
|
|
key={item.title}
|
|
className="border-border/50 hover:border-border transition-colors"
|
|
>
|
|
<CardContent className="pt-6">
|
|
<item.icon className={`size-8 mb-4 ${item.color}`} />
|
|
<h3 className="font-semibold text-lg mb-2">{item.title}</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
{item.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|