104 lines
3.9 KiB
TypeScript
104 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { useInView } from "@/hooks/use-in-view";
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
|
|
import { Toilet, FlaskConical, Trash2, Cable } from "lucide-react";
|
|
|
|
const services = [
|
|
{
|
|
icon: Toilet,
|
|
title: "Premium Porta Potties",
|
|
description:
|
|
"Not your grandpa's porta john. Our units feature hands-free flush, LED lighting, ventilation, and phone charging ports. They're practically luxury.",
|
|
features: ["Hands-free flush", "LED ambient lighting", "USB charging", "Ventilation fans"],
|
|
},
|
|
{
|
|
icon: FlaskConical,
|
|
title: "Bioreactor Power",
|
|
description:
|
|
"On-site anaerobic digesters convert waste to biogas in hours, not weeks. Our micro-generators produce clean, reliable electricity for your event.",
|
|
features: ["Rapid biogas conversion", "Micro-generator arrays", "Real-time monitoring", "Scalable output"],
|
|
},
|
|
{
|
|
icon: Trash2,
|
|
title: "Waste Management",
|
|
description:
|
|
"Full-service waste handling from setup to teardown. We manage collection, processing, and disposal so you can focus on the festival vibes.",
|
|
features: ["Setup & teardown", "24/7 maintenance", "Eco-friendly processing", "Zero landfill goal"],
|
|
},
|
|
{
|
|
icon: Cable,
|
|
title: "Power Infrastructure",
|
|
description:
|
|
"Complete power distribution for stages, vendors, and facilities. Our grid integrates bio-power with backup systems for uninterrupted festival energy.",
|
|
features: ["Distribution panels", "Load balancing", "Backup integration", "Smart monitoring"],
|
|
},
|
|
];
|
|
|
|
export function ServicesSection() {
|
|
const { ref, isInView } = useInView(0.1);
|
|
|
|
return (
|
|
<section id="services" 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"
|
|
}`}
|
|
>
|
|
Our <span className="text-neon">Services</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" }}
|
|
>
|
|
Everything you need to power your festival sustainably
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{services.map((service, index) => (
|
|
<Card
|
|
key={service.title}
|
|
className={`card-hover ${
|
|
isInView ? "animate-fade-in-up" : "opacity-0"
|
|
}`}
|
|
style={{ animationDelay: `${0.2 + index * 0.1}s` }}
|
|
>
|
|
<CardHeader>
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-neon/10 border border-neon/30">
|
|
<service.icon className="h-6 w-6 text-neon" />
|
|
</div>
|
|
<div>
|
|
<CardTitle>{service.title}</CardTitle>
|
|
</div>
|
|
</div>
|
|
<CardDescription className="mt-2">
|
|
{service.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ul className="grid grid-cols-2 gap-2">
|
|
{service.features.map((feature) => (
|
|
<li
|
|
key={feature}
|
|
className="flex items-center gap-2 text-sm text-cream-dim"
|
|
>
|
|
<span className="h-1.5 w-1.5 rounded-full bg-neon shrink-0" />
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|