125 lines
4.5 KiB
TypeScript
125 lines
4.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
|
import styles from "./WingsHowItWorks.module.css";
|
|
|
|
const STEPS = [
|
|
{
|
|
label: "Local Pickup",
|
|
desc: "Fast, on-demand first-mile logistics dispatched by electric vehicle.",
|
|
icon: (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M3 13h13l3 4h2v3H3z" />
|
|
<circle cx="7" cy="20" r="1.6" />
|
|
<circle cx="16" cy="20" r="1.6" />
|
|
<path d="M6 13V8a1 1 0 0 1 1-1h5l3 6" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: "Airport Clearance",
|
|
desc: "Automated screening, grouping, and rapid cross-docking at the hub.",
|
|
icon: (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />
|
|
<path d="m9 12 2 2 4-4" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: "Air Transit",
|
|
desc: "Optimized cargo flights bypass surface congestion on our regional fleet.",
|
|
icon: (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M22 12h-6l-4-9-2 1 3 8H5l-2-3-1.5.6L3 14l1.5 4.4L6 18l-2-3h8l3 8 2-1-3-8h6z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: "Destination Hub",
|
|
desc: "Immediate de-consolidation and screening upon arrival.",
|
|
icon: (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
|
<rect x="4" y="10" width="16" height="11" rx="1" />
|
|
<path d="M9 21v-6h6v6M4 10 12 3l8 7" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: "EV Last-Mile",
|
|
desc: "Zero-emission electric vehicles complete the final mile.",
|
|
icon: (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M3 13h13l3 4h2v3H3z" />
|
|
<circle cx="7" cy="20" r="1.6" />
|
|
<circle cx="16" cy="20" r="1.6" />
|
|
<path d="M6 13V8a1 1 0 0 1 1-1h5l3 6" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
export default function WingsHowItWorks() {
|
|
const [active, setActive] = useState(0);
|
|
|
|
return (
|
|
<section className={styles.section} id="wings-how-it-works">
|
|
<div className={styles.sectionShell}>
|
|
<div className={styles.headerRow}>
|
|
<ScrollReveal delay={0.05} duration={0.75} yOffset={25} className={styles.header}>
|
|
<div className={styles.eyebrow}>/ How It Works /</div>
|
|
<h2 className={styles.title}>
|
|
Pickup to
|
|
<br />
|
|
arrival, one
|
|
<br />
|
|
connected flow
|
|
</h2>
|
|
</ScrollReveal>
|
|
|
|
<div className={styles.progress} aria-hidden="true">
|
|
<span className={styles.progressCount}>
|
|
{String(active + 1).padStart(2, "0")} / {String(STEPS.length).padStart(2, "0")}
|
|
</span>
|
|
<span className={styles.progressTrack}>
|
|
<span
|
|
className={styles.progressFill}
|
|
style={{ width: `${((active + 1) / STEPS.length) * 100}%` }}
|
|
/>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<StaggerChildren stagger={0.06} duration={0.6} yOffset={24} className={styles.flow}>
|
|
{STEPS.map((step, i) => (
|
|
<div
|
|
key={step.label}
|
|
className={`${styles.step} ${i === active ? styles.stepActive : ""}`}
|
|
onMouseEnter={() => setActive(i)}
|
|
onClick={() => setActive(i)}
|
|
role="button"
|
|
tabIndex={0}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" || e.key === " ") setActive(i);
|
|
}}
|
|
>
|
|
<div className={styles.stepTop}>
|
|
<span className={styles.stepNum}>{String(i + 1).padStart(2, "0")}</span>
|
|
<span className={styles.stepTag}>
|
|
<span className={styles.stepIcon} aria-hidden="true">{step.icon}</span>
|
|
Step
|
|
</span>
|
|
</div>
|
|
<div className={styles.stepBottom}>
|
|
<h3 className={styles.stepTitle}>{step.label}</h3>
|
|
<p className={styles.stepDesc}>{step.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</StaggerChildren>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|