Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

update doormilewings card image update

Browse Source
This commit is contained in:
Aravind
2026-07-07 21:43:02 +05:30
parent fc190343eb
commit f7bab1fe70
24 changed files with 902 additions and 541 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/sections/WingsIndustries.tsx
View File

@@ -5,31 +5,37 @@ const INDUSTRIES = [
title: "Quick Commerce",
challenge: "Sub-3-hour delivery windows for dark stores and micro-warehouses.",
solution: "Dedicated same-day air capacity linking metros to fulfillment hubs.",
image: "/images/card 1.png",
},
{
title: "Express B2B Cargo",
challenge: "Time-critical industrial parts and components stuck on slow trunk routes.",
solution: "Rapid airport-to-airport transport between major economic nodes.",
image: "/images/card 2.png",
},
{
title: "Healthcare & Pharma",
challenge: "Temperature-sensitive, compliance-critical shipments with zero margin for error.",
solution: "Active and passive cold-chain packaging with full chain-of-custody tracking.",
image: "/images/card 3.png",
},
{
title: "Cold Chain Logistics",
challenge: "Perishables and fresh goods that can't survive slow surface transit.",
solution: "Precision temperature tracking matched to airline-speed transit.",
image: "/images/card4.png",
},
{
title: "High-Value Cargo",
challenge: "Zero tolerance for loss, tampering, or delay on high-value shipments.",
solution: "Maximum-security handling with real-time electronic custody tracking.",
image: "/images/card5.png",
},
{
title: "E-Commerce Logistics",
challenge: "Next-day and same-day fulfillment expectations across tier-1 and tier-2 cities.",
solution: "Direct sorting-hub-to-airport clearance network for faster regional delivery.",
image: "/images/card6.png",
},
];
@@ -41,7 +47,7 @@ export default function WingsIndustries() {
__html: `
.wind-section {
background: #fafafa;
padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
padding: var(--space-section-lg, 80px) 0 20px 0; /* Reduced bottom padding to minimize gap */
}
.wind-header {
@@ -69,9 +75,12 @@ export default function WingsIndustries() {
margin: 0;
}
.wind-grid {
max-width: 1280px;
.wind-inner {
max-width: 1380px;
margin: 0 auto;
}
.wind-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
@@ -178,34 +187,46 @@ export default function WingsIndustries() {
/>
<section className="wind-section" id="wings-industries">
<ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wind-header">
<div className="wind-eyebrow">/ Industries We Serve /</div>
<h2 className="wind-title">Built for the shipments that can&rsquo;t wait</h2>
</ScrollReveal>
<div className="dm-section-container">
<div className="wind-inner">
<ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wind-header">
<div className="wind-eyebrow">/ Industries We Serve /</div>
<h2 className="wind-title">Built for the shipments that can&rsquo;t wait</h2>
</ScrollReveal>
<ScrollReveal delay={0.1} duration={0.8} yOffset={30} className="wind-grid">
{INDUSTRIES.map((ind) => (
<div key={ind.title} className="wind-card">
<div className="wind-card-wash" aria-hidden="true" />
<ScrollReveal delay={0.1} duration={0.8} yOffset={30} className="wind-grid">
{INDUSTRIES.map((ind) => (
<div
key={ind.title}
className="wind-card"
style={ind.image ? {
backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8)), url('${ind.image}')`,
backgroundSize: 'cover',
backgroundPosition: 'center'
} : undefined}
>
<div className="wind-card-wash" aria-hidden="true" />
<div className="wind-card-default">
<h3 className="wind-card-default-title">{ind.title}</h3>
</div>
<div className="wind-card-default">
<h3 className="wind-card-default-title">{ind.title}</h3>
</div>
<div className="wind-card-hover">
<h3 className="wind-card-hover-title">{ind.title}</h3>
<div>
<p className="wind-card-label">Challenge</p>
<p className="wind-card-text">{ind.challenge}</p>
<div className="wind-card-hover">
<h3 className="wind-card-hover-title">{ind.title}</h3>
<div>
<p className="wind-card-label">Challenge</p>
<p className="wind-card-text">{ind.challenge}</p>
</div>
<div>
<p className="wind-card-label">Doormile Wings</p>
<p className="wind-card-text">{ind.solution}</p>
</div>
</div>
</div>
<div>
<p className="wind-card-label">Doormile Wings</p>
<p className="wind-card-text">{ind.solution}</p>
</div>
</div>
</div>
))}
</ScrollReveal>
))}
</ScrollReveal>
</div>
</div>
</section>
</>
);