95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useInView } from "@/hooks/use-in-view";
|
|
import { Droplets, FlaskConical, Zap } from "lucide-react";
|
|
|
|
const steps = [
|
|
{
|
|
icon: Droplets,
|
|
number: "01",
|
|
title: "Collect",
|
|
subtitle: "Nature calls. We answer.",
|
|
description:
|
|
"Our premium porta potties are equipped with smart sensors and pre-processing systems that prepare organic waste for bioreaction in real time.",
|
|
},
|
|
{
|
|
icon: FlaskConical,
|
|
number: "02",
|
|
title: "Digest",
|
|
subtitle: "Billions of microbes, one mission.",
|
|
description:
|
|
"Sealed anaerobic digesters break down organic matter into biogas. Our proprietary bioreactor technology accelerates this proven process from weeks to hours.",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
number: "03",
|
|
title: "Power",
|
|
subtitle: "From waste stream to power grid.",
|
|
description:
|
|
"Captured biogas fuels micro-generators producing clean electricity on-site. Stages, food vendors, lighting — powered by what your attendees leave behind.",
|
|
},
|
|
];
|
|
|
|
export function HowItWorksSection() {
|
|
const { ref, isInView } = useInView(0.1);
|
|
|
|
return (
|
|
<section id="how-it-works" className="py-24 px-4" 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"
|
|
}`}
|
|
>
|
|
How <span className="text-neon">It Works</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 porcelain throne to power grid in three steps
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative">
|
|
{/* Connection lines (desktop only) */}
|
|
<div className="hidden md:block absolute top-20 left-[calc(33.33%-1rem)] right-[calc(33.33%-1rem)] h-0.5">
|
|
<div className="w-full h-full bg-gradient-to-r from-neon/50 via-neon to-neon/50 rounded-full" />
|
|
</div>
|
|
|
|
{steps.map((step, index) => (
|
|
<div
|
|
key={step.number}
|
|
className={`relative text-center ${
|
|
isInView ? "animate-fade-in-up" : "opacity-0"
|
|
}`}
|
|
style={{ animationDelay: `${0.2 + index * 0.15}s` }}
|
|
>
|
|
{/* Icon circle */}
|
|
<div className="relative mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-bg-card border-2 border-neon/40 neon-border">
|
|
<step.icon className="h-8 w-8 text-neon" />
|
|
<span className="absolute -top-2 -right-2 flex h-8 w-8 items-center justify-center rounded-full bg-neon text-bg-primary text-xs font-bold">
|
|
{step.number}
|
|
</span>
|
|
</div>
|
|
|
|
<h3 className="text-2xl font-bold text-cream mb-1">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-neon text-sm font-medium mb-3">
|
|
{step.subtitle}
|
|
</p>
|
|
<p className="text-cream-dim leading-relaxed">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|