141 lines
4.6 KiB
TypeScript
141 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { useInView } from "@/hooks/use-in-view";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
|
|
import { Check, Star } from "lucide-react";
|
|
|
|
const packages = [
|
|
{
|
|
name: "The Outhouse",
|
|
subtitle: "For intimate gatherings",
|
|
price: "From $5K",
|
|
capacity: "Up to 1,000 attendees",
|
|
featured: false,
|
|
features: [
|
|
"10-20 premium porta potties",
|
|
"Basic bioreactor unit",
|
|
"Up to 50 kWh generation",
|
|
"Standard maintenance",
|
|
"Setup & teardown included",
|
|
"Basic power distribution",
|
|
],
|
|
},
|
|
{
|
|
name: "The Throne Room",
|
|
subtitle: "Most popular for mid-size festivals",
|
|
price: "From $25K",
|
|
capacity: "Up to 10,000 attendees",
|
|
featured: true,
|
|
features: [
|
|
"50-100 premium porta potties",
|
|
"Multi-reactor array",
|
|
"Up to 500 kWh generation",
|
|
"24/7 dedicated maintenance",
|
|
"Full power infrastructure",
|
|
"Real-time monitoring dashboard",
|
|
"VIP luxury units available",
|
|
"Carbon offset certificate",
|
|
],
|
|
},
|
|
{
|
|
name: "The Royal Flush",
|
|
subtitle: "For major festivals & events",
|
|
price: "Custom",
|
|
capacity: "10,000+ attendees",
|
|
featured: false,
|
|
features: [
|
|
"100+ premium porta potties",
|
|
"Industrial bioreactor farm",
|
|
"Megawatt-scale generation",
|
|
"Dedicated on-site team",
|
|
"Full grid integration",
|
|
"Real-time public dashboard",
|
|
"VIP & ADA luxury suites",
|
|
"PR & sustainability report",
|
|
],
|
|
},
|
|
];
|
|
|
|
export function PackagesSection() {
|
|
const { ref, isInView } = useInView(0.1);
|
|
|
|
return (
|
|
<section id="packages" className="py-24 px-4 bg-brown-dark/30" ref={ref}>
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="text-center mb-16">
|
|
<h2
|
|
className={`text-3xl sm:text-4xl md:text-5xl font-bold mb-4 ${
|
|
isInView ? "animate-fade-in-up" : "opacity-0"
|
|
}`}
|
|
>
|
|
Pick Your <span className="text-neon">Package</span>
|
|
</h2>
|
|
<p
|
|
className={`text-cream-dim text-lg max-w-2xl mx-auto ${
|
|
isInView ? "animate-fade-in-up" : "opacity-0"
|
|
}`}
|
|
style={{ animationDelay: "0.1s" }}
|
|
>
|
|
From cozy campouts to massive music festivals, we've got you covered
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-stretch">
|
|
{packages.map((pkg, index) => (
|
|
<Card
|
|
key={pkg.name}
|
|
className={`relative flex flex-col card-hover ${
|
|
pkg.featured
|
|
? "border-neon/50 neon-border md:scale-105"
|
|
: ""
|
|
} ${isInView ? "animate-fade-in-up" : "opacity-0"}`}
|
|
style={{ animationDelay: `${0.2 + index * 0.1}s` }}
|
|
>
|
|
{pkg.featured && (
|
|
<div className="absolute -top-3 left-1/2 -translate-x-1/2 flex items-center gap-1 rounded-full bg-neon px-4 py-1 text-xs font-bold text-bg-primary">
|
|
<Star className="h-3 w-3" />
|
|
Most Popular
|
|
</div>
|
|
)}
|
|
<CardHeader className="text-center">
|
|
<CardTitle className="text-2xl">{pkg.name}</CardTitle>
|
|
<CardDescription>{pkg.subtitle}</CardDescription>
|
|
<div className="mt-4">
|
|
<span className="text-4xl font-bold text-neon">
|
|
{pkg.price}
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-cream-dim mt-1">{pkg.capacity}</p>
|
|
</CardHeader>
|
|
<CardContent className="flex-1">
|
|
<ul className="space-y-3">
|
|
{pkg.features.map((feature) => (
|
|
<li
|
|
key={feature}
|
|
className="flex items-start gap-2 text-sm text-cream-dim"
|
|
>
|
|
<Check className="h-4 w-4 text-neon shrink-0 mt-0.5" />
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
<CardFooter className="mt-auto">
|
|
<a href="#contact" className="w-full">
|
|
<Button
|
|
variant={pkg.featured ? "default" : "outline"}
|
|
className="w-full"
|
|
>
|
|
Get Started
|
|
</Button>
|
|
</a>
|
|
</CardFooter>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|