68 lines
2.8 KiB
TypeScript
68 lines
2.8 KiB
TypeScript
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
|
import styles from "./WingsInfrastructure.module.css";
|
|
|
|
const CARDS = [
|
|
{
|
|
title: "Airport Cargo Hubs",
|
|
desc: "Near-airport clearance hubs instead of standalone warehouses — closer to the tarmac, faster to the aircraft.",
|
|
icon: (
|
|
<svg width="24" height="24" 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" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: "Cross-Docking",
|
|
desc: "Screening, grouping, and consolidation happen in one motion, minimizing dwell time between arrival and departure.",
|
|
icon: (
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M3 7h7l2 3h9M3 7v10h18V10" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: "Asset-Light Network",
|
|
desc: "Leased terminal space that flexes with demand, keeping the network nimble as new routes come online.",
|
|
icon: (
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
|
<rect x="3" y="3" width="7" height="7" rx="1" />
|
|
<rect x="14" y="3" width="7" height="7" rx="1" />
|
|
<rect x="3" y="14" width="7" height="7" rx="1" />
|
|
<rect x="14" y="14" width="7" height="7" rx="1" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: "Scalable Operations",
|
|
desc: "Modular ground infrastructure built to expand city by city without slowing down day-to-day operations.",
|
|
icon: (
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M3 21V9l6-4 6 4v12M9 21V13h6v8" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
export default function WingsInfrastructure() {
|
|
return (
|
|
<section className={styles.section} id="wings-infrastructure">
|
|
<div className={styles.sectionShell}>
|
|
<ScrollReveal delay={0.05} duration={0.7} yOffset={20} className={styles.header}>
|
|
<div className={styles.eyebrow}>/ Infrastructure /</div>
|
|
<h2 className={styles.title}>A network built to move, not to sit idle</h2>
|
|
</ScrollReveal>
|
|
|
|
<StaggerChildren stagger={0.08} duration={0.6} yOffset={20} className={styles.grid}>
|
|
{CARDS.map((c) => (
|
|
<div key={c.title} className={styles.card}>
|
|
<div className={styles.icon} aria-hidden="true">{c.icon}</div>
|
|
<h3 className={styles.cardTitle}>{c.title}</h3>
|
|
<p className={styles.cardDesc}>{c.desc}</p>
|
|
</div>
|
|
))}
|
|
</StaggerChildren>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|