update doormile wings page
This commit is contained in:
167
src/components/sections/WingsWhyGrid.tsx
Normal file
167
src/components/sections/WingsWhyGrid.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
||||
|
||||
const FEATURES = [
|
||||
{
|
||||
title: "Same-Day Air Logistics",
|
||||
desc: "Max 3-hour door-to-door delivery between India's major regional capitals.",
|
||||
icon: (
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<polyline points="12 6 12 12 16 14" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "AI-Powered Operations",
|
||||
desc: "MileTruth™ AI continuously forecasts demand and optimizes every route and load.",
|
||||
icon: (
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="4" y="4" width="16" height="16" rx="3" />
|
||||
<path d="M9 9h6v6H9z" />
|
||||
<path d="M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Regional Connectivity",
|
||||
desc: "Dedicated air capacity linking major economic hubs, not passenger-belly space.",
|
||||
icon: (
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="6" cy="6" r="2.5" />
|
||||
<circle cx="18" cy="6" r="2.5" />
|
||||
<circle cx="12" cy="18" r="2.5" />
|
||||
<path d="M8.2 7.2 10 16M15.8 7.2 14 16M8.5 6h7" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "EV Last Mile",
|
||||
desc: "Zero-emission electric vehicles complete every first- and final-mile delivery.",
|
||||
icon: (
|
||||
<svg width="26" height="26" 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 WingsWhyGrid() {
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.wwg-section {
|
||||
background: #ffffff;
|
||||
padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
|
||||
}
|
||||
|
||||
.wwg-header {
|
||||
margin: 0 auto 48px auto;
|
||||
max-width: 720px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wwg-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17, 17, 17, 0.45);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wwg-title {
|
||||
font-size: clamp(28px, 3.2vw, 46px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
line-height: 1.15 !important;
|
||||
text-transform: none !important;
|
||||
color: #111111 !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wwg-grid {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.wwg-card {
|
||||
min-width: 0;
|
||||
padding: 30px 24px;
|
||||
border: 1px solid rgba(17, 17, 17, 0.08);
|
||||
border-radius: 18px;
|
||||
background: #fafafa;
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.wwg-card:hover {
|
||||
border-color: rgba(200, 16, 46, 0.35);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.wwg-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 14px;
|
||||
background: rgba(200, 16, 46, 0.06);
|
||||
color: #c8102e;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wwg-card-title {
|
||||
font-size: 17px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.3 !important;
|
||||
text-transform: none !important;
|
||||
color: #111111 !important;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.wwg-card-desc {
|
||||
font-size: 14.5px;
|
||||
line-height: 1.55;
|
||||
color: rgba(17, 17, 17, 0.6);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.wwg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.wwg-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="wwg-section" id="wings-why">
|
||||
<ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wwg-header">
|
||||
<div className="wwg-eyebrow">/ Why Doormile Wings /</div>
|
||||
<h2 className="wwg-title">Built for the speed of the Gen-Z economy</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<StaggerChildren stagger={0.1} duration={0.7} yOffset={30} className="wwg-grid">
|
||||
{FEATURES.map((f) => (
|
||||
<div key={f.title} className="wwg-card">
|
||||
<div className="wwg-icon" aria-hidden="true">{f.icon}</div>
|
||||
<h3 className="wwg-card-title">{f.title}</h3>
|
||||
<p className="wwg-card-desc">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</StaggerChildren>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user