update doormile wings page
This commit is contained in:
160
src/components/sections/WingsInfrastructure.tsx
Normal file
160
src/components/sections/WingsInfrastructure.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
||||
|
||||
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 (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.wia-section {
|
||||
background: #09090b;
|
||||
padding: var(--space-section, 64px) clamp(20px, 5vw, 40px);
|
||||
}
|
||||
|
||||
.wia-header {
|
||||
margin: 0 auto 44px auto;
|
||||
max-width: 720px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wia-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wia-title {
|
||||
font-size: clamp(26px, 3vw, 40px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
line-height: 1.2 !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wia-grid {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.wia-card {
|
||||
min-width: 0;
|
||||
padding: 28px 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
transition: border-color 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.wia-card:hover {
|
||||
border-color: rgba(255, 255, 255, 0.14);
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
}
|
||||
|
||||
.wia-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.wia-card-title {
|
||||
font-size: 15.5px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.3 !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.wia-card-desc {
|
||||
font-size: 13.5px;
|
||||
line-height: 1.55;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.wia-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.wia-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="wia-section" id="wings-infrastructure">
|
||||
<ScrollReveal delay={0.05} duration={0.7} yOffset={20} className="wia-header">
|
||||
<div className="wia-eyebrow">/ Infrastructure /</div>
|
||||
<h2 className="wia-title">A network built to move, not to sit idle</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<StaggerChildren stagger={0.08} duration={0.6} yOffset={20} className="wia-grid">
|
||||
{CARDS.map((c) => (
|
||||
<div key={c.title} className="wia-card">
|
||||
<div className="wia-icon" aria-hidden="true">{c.icon}</div>
|
||||
<h3 className="wia-card-title">{c.title}</h3>
|
||||
<p className="wia-card-desc">{c.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</StaggerChildren>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user