update doormilewings card image update
This commit is contained in:
BIN
public/images/card 1.png
Normal file
BIN
public/images/card 1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
public/images/card 2.png
Normal file
BIN
public/images/card 2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
public/images/card 3.png
Normal file
BIN
public/images/card 3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
public/images/card4.png
Normal file
BIN
public/images/card4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
public/images/card5.png
Normal file
BIN
public/images/card5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
public/images/card6.png
Normal file
BIN
public/images/card6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
public/videos/fleet.mp4
Normal file
BIN
public/videos/fleet.mp4
Normal file
Binary file not shown.
@@ -153,16 +153,21 @@ body {
|
||||
#masthead .elementor-element.elementor-element-0b7bf6f > .elementor-widget-container {
|
||||
padding: 0 42px !important;
|
||||
border-radius: 22px !important;
|
||||
height: 58px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
#masthead .elementor-element.elementor-element-0b7bf6f .header-menu-container .main-menu > li > a {
|
||||
padding-top: 15px !important;
|
||||
padding-bottom: 16px !important;
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
padding-left: 14px !important;
|
||||
padding-right: 14px !important;
|
||||
font-size: 15px !important;
|
||||
line-height: 1.2 !important;
|
||||
white-space: nowrap !important;
|
||||
min-height: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu {
|
||||
@@ -966,18 +971,30 @@ body {
|
||||
|
||||
/* ============================================================
|
||||
SHARED PAGE CONTENT CONTAINER
|
||||
Mirrors the site's e-con-boxed > e-con-inner system: 1480px
|
||||
max-width centred with fluid horizontal padding identical to the
|
||||
Industry Solutions / OurTeam override above. Apply this class to
|
||||
any section's inner container div to guarantee that content edges
|
||||
line up with every other page section (Home, About, Solutions…).
|
||||
Matches the Hero/Header/Footer's real rendered OUTER edge, not the
|
||||
Footer's narrower inner text column. The Hero card
|
||||
(.owl-stage-outer, via .wings-hero-page.elementor-element-741f56c)
|
||||
and the Footer's outer band (.elementor-element-b29b8fc) both sit a
|
||||
fixed, uncapped 20px in from the viewport edge at every desktop
|
||||
width (verified 1280px-2400px — no max-width ever kicks in). Apply
|
||||
this class to any Wings-page section's content wrapper to guarantee
|
||||
its cards/timeline/grid hug those same edges instead of sitting
|
||||
narrower and more centered.
|
||||
============================================================ */
|
||||
.dm-section-container {
|
||||
max-width: 1480px;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.dm-section-container {
|
||||
padding-left: var(--dm-mobile-gutter, 10px);
|
||||
padding-right: var(--dm-mobile-gutter, 10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Doormile Wings hero frame: the generic vendor CSS assigns 32px padding to
|
||||
@@ -1197,3 +1214,24 @@ body {
|
||||
margin-top: var(--space-section) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Global Desktop Hero Formatting (Matches live site) */
|
||||
@media (min-width: 1025px) {
|
||||
/* Give every hero wrapper a consistent gap from the top and sides */
|
||||
.elementor-element.elementor-element-741f56c,
|
||||
.custom-standard-hero-container,
|
||||
.miletruth-hero-container {
|
||||
padding: 20px 24px !important;
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
/* Ensure all inner dark hero cards have elegant rounded corners */
|
||||
.elementor-element.elementor-element-741f56c .owl-carousel.owl-theme .content-item,
|
||||
.elementor-element.elementor-element-741f56c .content-item,
|
||||
.custom-standard-hero-card,
|
||||
.miletruth-hero .slide-content,
|
||||
.miletruth-hero .miletruth-hero-container {
|
||||
border-radius: 24px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -797,11 +797,13 @@ export default function Header() {
|
||||
grid-template-columns: 1fr auto 1fr !important;
|
||||
align-items: center !important;
|
||||
column-gap: clamp(16px, 2vw, 32px) !important;
|
||||
/* Equal left/right safe areas pull the logo and Contact
|
||||
button inward off the viewport edges. Because the inset
|
||||
is symmetric, the 1fr side columns shrink equally and the
|
||||
/* Fixed 20px safe area on both sides — matches the Hero
|
||||
card and Footer's outer band exactly (both use a flat
|
||||
20px inset, uncapped, at every desktop width), so the
|
||||
header aligns with the rest of the page instead of
|
||||
drifting wider on large screens. Symmetric, so the
|
||||
centred nav does not shift. */
|
||||
padding-inline: clamp(24px, 3vw, 48px) !important;
|
||||
padding-inline: 20px !important;
|
||||
/* Consistent top/bottom breathing room inside the bar; with
|
||||
align-items:center every section stays vertically centred. */
|
||||
padding-block: clamp(8px, 1vw, 16px) !important;
|
||||
@@ -833,9 +835,13 @@ export default function Header() {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
/* navbar-right: Contact button, aligned to the right edge. */
|
||||
/* navbar-right: Contact button, aligned to the right edge.
|
||||
The vendor kit's own --margin-right:3% (site.css) would add
|
||||
extra drift off the grid's 20px safe area — zero it so the
|
||||
button's true right edge lands flush with that 20px inset. */
|
||||
#masthead .elementor-element.elementor-element-f961133 {
|
||||
justify-self: end !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
62
src/components/sections/TheDoormileWay.module.css
Normal file
62
src/components/sections/TheDoormileWay.module.css
Normal file
@@ -0,0 +1,62 @@
|
||||
/* "The Doormile Way" — eyebrow + hairline divider + a huge display/graphic
|
||||
headline (transparent fill, thin red stroke), composed as a poster-scale
|
||||
typographic element rather than a plain large heading. Font, scale, and
|
||||
line length are deliberately tuned to the reference composition, not
|
||||
derived from a generic fluid-fill formula. */
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.kicker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 18px 0;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(23, 20, 15, 0.6);
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 0 0 40px 0;
|
||||
border: none;
|
||||
background-color: rgba(23, 20, 15, 0.16);
|
||||
}
|
||||
|
||||
.headingWrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* !important beats the sitewide `.elementor-kit-5 h2` rule
|
||||
(public/css/site.css:48-56, specificity 0-1-1 > this single class). */
|
||||
.heading {
|
||||
margin: 0;
|
||||
max-width: 1220px;
|
||||
font-family: var(--font-syne), "Syne", sans-serif !important;
|
||||
font-weight: 800 !important;
|
||||
font-style: normal !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
line-height: 0.86 !important;
|
||||
text-transform: none !important;
|
||||
color: transparent !important;
|
||||
-webkit-text-stroke: 2px #c01227;
|
||||
font-size: clamp(72px, 14vw, 240px) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.heading {
|
||||
-webkit-text-stroke-width: 1.5px;
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import React from "react";
|
||||
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
||||
import styles from "./TheDoormileWay.module.css";
|
||||
|
||||
export default function TheDoormileWay() {
|
||||
return (
|
||||
@@ -10,29 +11,15 @@ export default function TheDoormileWay() {
|
||||
<div className="elementor-element elementor-element-88745f4 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="88745f4" data-element_type="container" data-e-type="container">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-343b363 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="343b363" data-element_type="container" data-e-type="container">
|
||||
<ScrollReveal delay={0.05} duration={0.7} yOffset={20}>
|
||||
<div className="elementor-element elementor-element-7afb238 elementor-widget elementor-widget-logico_heading" data-id="7afb238" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">/ Doormile Approach /</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.header}>
|
||||
<ScrollReveal delay={0.05} duration={0.7} yOffset={20} className={styles.kicker}>
|
||||
<p className={styles.eyebrow}>/ Doormile Approach /</p>
|
||||
<hr className={styles.divider} />
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.15} duration={0.85} yOffset={30}>
|
||||
<div className="elementor-element elementor-element-1cc335a elementor-widget elementor-widget-logico_heading" data-id="1cc335a" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div
|
||||
className="logico-title"
|
||||
style={{
|
||||
WebkitTextStroke: "4px #c01227",
|
||||
color: "#fff",
|
||||
fontWeight: 800,
|
||||
}}
|
||||
>
|
||||
The Doormile Way
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollReveal delay={0.15} duration={0.85} yOffset={30} className={styles.headingWrap}>
|
||||
<h2 className={styles.heading}>The Doormile Way</h2>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-4c3e632 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="4c3e632" data-element_type="container" data-e-type="container">
|
||||
<ScrollReveal delay={0.2} duration={0.8} yOffset={25}>
|
||||
<div className="elementor-element elementor-element-5ba6bbf e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5ba6bbf" data-element_type="container" data-e-type="container">
|
||||
|
||||
@@ -54,7 +54,7 @@ export default function WingsFeatureGrid() {
|
||||
__html: `
|
||||
.wfg-section {
|
||||
background: #ffffff;
|
||||
padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
|
||||
padding: var(--space-section-lg, 80px) 0;
|
||||
}
|
||||
|
||||
.wfg-header {
|
||||
@@ -82,9 +82,12 @@ export default function WingsFeatureGrid() {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wfg-grid {
|
||||
max-width: 1280px;
|
||||
.wfg-inner {
|
||||
max-width: 1380px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wfg-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
@@ -145,6 +148,8 @@ export default function WingsFeatureGrid() {
|
||||
/>
|
||||
|
||||
<section className="wfg-section" id="wings-features">
|
||||
<div className="dm-section-container">
|
||||
<div className="wfg-inner">
|
||||
<ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wfg-header">
|
||||
<div className="wfg-eyebrow">/ Why Businesses Choose Doormile Wings /</div>
|
||||
<h2 className="wfg-title">Built to be depended on</h2>
|
||||
@@ -159,6 +164,8 @@ export default function WingsFeatureGrid() {
|
||||
</div>
|
||||
))}
|
||||
</StaggerChildren>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -6,6 +6,15 @@ export default function WingsFinalCTA() {
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
/* dm-section-container replaces the vendor .we-container class here
|
||||
(which is otherwise reused verbatim on the About page CTA), so this
|
||||
section's edges line up with the Footer's shared container instead
|
||||
of that widget's own 1320px width. It carries no vertical margin,
|
||||
so restore the same top spacing .we-container provided. */
|
||||
.wfcta-container {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.wfcta-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -68,7 +77,7 @@ export default function WingsFinalCTA() {
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<div className="we-container wfcta-container" id="wings-final-cta">
|
||||
<div className="dm-section-container wfcta-container" id="wings-final-cta">
|
||||
<div className="we-cta wfcta-box">
|
||||
<div className="we-cta-inner">
|
||||
<h2 className="we-cta-title wfcta-title">
|
||||
|
||||
@@ -61,29 +61,29 @@ export default function WingsFleetStrategy() {
|
||||
metrics={METRICS}
|
||||
cardsHeading="FLEET SPECIFICATIONS"
|
||||
cardsTheme={{ accent: "#c8102e", accent2: "#ff6a3d", glow: "rgba(200,16,46,0.22)" }}
|
||||
gapTop
|
||||
gapBottom
|
||||
badges={[
|
||||
{ value: "3", label: "Phase 1 Aircraft" },
|
||||
{ value: "25", label: "Phase 2 Vision" },
|
||||
]}
|
||||
mediaSlot={
|
||||
<div
|
||||
<video
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
minHeight: 420,
|
||||
background: "linear-gradient(150deg, #17171b 0%, #0b0b0d 100%)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
objectFit: "cover",
|
||||
display: "block",
|
||||
background: "#17171b"
|
||||
}}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{/* Placeholder — swap for sourced ATR72/Q400 photography or a
|
||||
designed illustration once available. */}
|
||||
<svg width="88" height="88" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.15)" strokeWidth="1.5" 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>
|
||||
</div>
|
||||
<source src="/videos/fleet.mp4" type="video/mp4" />
|
||||
</video>
|
||||
}
|
||||
ariaLabel="Doormile Wings fleet strategy"
|
||||
/>
|
||||
|
||||
@@ -36,23 +36,29 @@ export default function WingsHero() {
|
||||
return;
|
||||
}
|
||||
|
||||
if (heading) {
|
||||
gsap.fromTo(
|
||||
heading,
|
||||
{ y: 55, opacity: 0, scale: 0.95 },
|
||||
{ y: 0, opacity: 1, scale: 1, duration: 1.1, ease: "power4.out" }
|
||||
);
|
||||
}
|
||||
|
||||
if (text) {
|
||||
gsap.fromTo(
|
||||
text,
|
||||
{ y: 30, opacity: 0 },
|
||||
{ y: 0, opacity: 1, duration: 0.95, ease: "power3.out", delay: 0.25 }
|
||||
);
|
||||
}
|
||||
|
||||
if (actions) {
|
||||
gsap.fromTo(
|
||||
actions,
|
||||
{ y: 24, opacity: 0 },
|
||||
{ y: 0, opacity: 1, duration: 0.85, ease: "power3.out", delay: 0.38 }
|
||||
);
|
||||
}
|
||||
}, [activeSlide]);
|
||||
|
||||
const handleDotClick = (index: number) => {
|
||||
@@ -72,14 +78,14 @@ export default function WingsHero() {
|
||||
__html: `
|
||||
.wings-hero-bg.elementor-repeater-item-3264830,
|
||||
.wings-hero-bg.elementor-repeater-item-6867061 {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.16)), url('/images/wings-heroslider3.png') !important;
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.06)), url('/images/wings-heroslider3.png') !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
.wings-hero-bg.elementor-repeater-item-6867061 {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.16)), url('/images/wings-heroslide2.png') !important;
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.06)), url('/images/wings-heroslide2.png') !important;
|
||||
}
|
||||
|
||||
#doormile-wings,
|
||||
@@ -125,7 +131,7 @@ export default function WingsHero() {
|
||||
align-items: center !important;
|
||||
text-align: center !important;
|
||||
width: 100% !important;
|
||||
max-width: 1040px !important;
|
||||
max-width: 1000px !important;
|
||||
margin: 0 auto !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
@@ -157,7 +163,7 @@ export default function WingsHero() {
|
||||
|
||||
.wings-hero-page .text-content {
|
||||
text-align: center !important;
|
||||
max-width: 760px !important;
|
||||
max-width: 680px !important;
|
||||
width: 100% !important;
|
||||
margin: 0 auto !important;
|
||||
padding-left: 15px !important;
|
||||
@@ -222,12 +228,15 @@ export default function WingsHero() {
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.wings-hero-page.elementor-element-741f56c {
|
||||
padding: 20px !important;
|
||||
padding: 20px 24px !important;
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
.wings-hero-page .owl-carousel.owl-theme .content-item {
|
||||
height: 800px !important;
|
||||
min-height: 800px !important;
|
||||
border-radius: 24px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -245,19 +254,19 @@ export default function WingsHero() {
|
||||
}
|
||||
|
||||
.wings-hero-page .owl-stage-outer {
|
||||
height: 620px !important;
|
||||
height: 600px !important;
|
||||
}
|
||||
|
||||
.wings-hero-page .owl-carousel.owl-theme .content-item {
|
||||
width: 100% !important;
|
||||
min-height: 620px !important;
|
||||
height: 620px !important;
|
||||
min-height: 600px !important;
|
||||
height: 600px !important;
|
||||
border-radius: 25px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.wings-hero-page .slide-content {
|
||||
min-height: 620px !important;
|
||||
min-height: 600px !important;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
@@ -284,13 +293,13 @@ export default function WingsHero() {
|
||||
}
|
||||
|
||||
.wings-hero-page .owl-stage-outer {
|
||||
height: 560px !important;
|
||||
height: 520px !important;
|
||||
}
|
||||
|
||||
.wings-hero-page .owl-carousel.owl-theme .content-item,
|
||||
.wings-hero-page .slide-content {
|
||||
min-height: 560px !important;
|
||||
height: 560px !important;
|
||||
min-height: 520px !important;
|
||||
height: 520px !important;
|
||||
border-radius: 22px !important;
|
||||
}
|
||||
|
||||
@@ -303,7 +312,7 @@ export default function WingsHero() {
|
||||
|
||||
.wings-hero-page .content-slider-item-heading {
|
||||
max-width: 100% !important;
|
||||
font-size: clamp(24px, 7.2vw, 32px) !important;
|
||||
font-size: clamp(20px, 7vw, 32px) !important;
|
||||
line-height: 1.12 !important;
|
||||
}
|
||||
|
||||
|
||||
264
src/components/sections/WingsHowItWorks.module.css
Normal file
264
src/components/sections/WingsHowItWorks.module.css
Normal file
@@ -0,0 +1,264 @@
|
||||
/* Premium editorial "How It Works" — bright warm-white surface, huge uppercase
|
||||
display headline, top-right slide counter, and a five-column process row
|
||||
divided by hairlines with oversized outlined numerals pinned to the top and
|
||||
copy pinned to the bottom, echoing a tall, breathing editorial layout. */
|
||||
|
||||
.section {
|
||||
background: linear-gradient(180deg, #fbfaf7 0%, #f5f2ec 100%);
|
||||
padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 8vw, 120px);
|
||||
margin-bottom: 40px;
|
||||
margin-right: 24px;
|
||||
margin-left: 24px;
|
||||
border-radius: 30px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sectionShell {
|
||||
width: 100%;
|
||||
max-width: 1420px;
|
||||
margin: 0 auto;
|
||||
padding: 0 5vw;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.sectionShell {
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Header: eyebrow + giant display headline, counter top-right ---------- */
|
||||
|
||||
.headerRow {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
margin-bottom: clamp(48px, 6vw, 88px);
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: left;
|
||||
max-width: 780px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: lowercase;
|
||||
color: rgba(20, 18, 15, 0.5);
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(32px, 4.6vw, 68px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.01em !important;
|
||||
line-height: 1.02 !important;
|
||||
text-transform: uppercase !important;
|
||||
color: #17140f !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.progress {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.progressCount {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
color: #17140f;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progressTrack {
|
||||
position: relative;
|
||||
width: 110px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: rgba(23, 20, 15, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progressFill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: #c8102e;
|
||||
transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
/* ---------- Process row: hairline-divided columns, numeral up top, copy at the bottom ---------- */
|
||||
|
||||
.flow {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.step {
|
||||
position: relative;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
min-height: clamp(200px, 18vw, 260px);
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
padding: 0 32px;
|
||||
border-left: 1px solid rgba(23, 20, 15, 0.14);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.step:first-child {
|
||||
padding-left: 0;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.step:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.step:focus-visible {
|
||||
outline: 2px solid rgba(200, 16, 46, 0.55);
|
||||
outline-offset: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.stepTop {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stepNum {
|
||||
font-size: clamp(44px, 5.1vw, 92px);
|
||||
font-weight: 800;
|
||||
line-height: 0.85;
|
||||
letter-spacing: -0.02em;
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 1.5px rgba(23, 20, 15, 0.22);
|
||||
transition: -webkit-text-stroke-color 0.4s ease, filter 0.4s ease;
|
||||
}
|
||||
|
||||
.stepActive .stepNum {
|
||||
-webkit-text-stroke-color: #c8102e;
|
||||
filter: drop-shadow(0 0 14px rgba(200, 16, 46, 0.18));
|
||||
}
|
||||
|
||||
.stepTag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(23, 20, 15, 0.4);
|
||||
transition: color 0.4s ease;
|
||||
}
|
||||
|
||||
.stepIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.stepActive .stepTag {
|
||||
color: #c8102e;
|
||||
}
|
||||
|
||||
.stepBottom {
|
||||
align-self: end;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.stepTitle {
|
||||
font-size: 19px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.3 !important;
|
||||
text-transform: none !important;
|
||||
color: #17140f !important;
|
||||
margin: 0 0 10px 0 !important;
|
||||
}
|
||||
|
||||
.stepDesc {
|
||||
font-size: 13.5px;
|
||||
line-height: 1.65;
|
||||
color: rgba(23, 20, 15, 0.55);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.headerRow {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.flow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 40px 28px;
|
||||
}
|
||||
|
||||
.step {
|
||||
flex: none;
|
||||
border-left: none;
|
||||
padding: 0;
|
||||
min-height: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stepBottom {
|
||||
max-width: none;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.step:nth-child(n + 3) {
|
||||
border-top: 1px solid rgba(23, 20, 15, 0.14);
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.flow > .step:last-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.flow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.step {
|
||||
padding: 28px 0;
|
||||
}
|
||||
|
||||
.step:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.step:not(:first-child) {
|
||||
border-top: 1px solid rgba(23, 20, 15, 0.14);
|
||||
}
|
||||
|
||||
.step:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,15 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
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="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<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" />
|
||||
@@ -20,7 +21,7 @@ const STEPS = [
|
||||
label: "Airport Clearance",
|
||||
desc: "Automated screening, grouping, and rapid cross-docking at the hub.",
|
||||
icon: (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<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>
|
||||
@@ -30,7 +31,7 @@ const STEPS = [
|
||||
label: "Air Transit",
|
||||
desc: "Optimized cargo flights bypass surface congestion on our regional fleet.",
|
||||
icon: (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<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>
|
||||
),
|
||||
@@ -39,7 +40,7 @@ const STEPS = [
|
||||
label: "Destination Hub",
|
||||
desc: "Immediate de-consolidation and screening upon arrival.",
|
||||
icon: (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<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>
|
||||
@@ -49,7 +50,7 @@ const STEPS = [
|
||||
label: "EV Last-Mile",
|
||||
desc: "Zero-emission electric vehicles complete the final delivery.",
|
||||
icon: (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<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" />
|
||||
@@ -61,229 +62,40 @@ const STEPS = [
|
||||
|
||||
export default function WingsHowItWorks() {
|
||||
const [active, setActive] = useState(0);
|
||||
const fillPct = ((active + 1) / STEPS.length) * 100;
|
||||
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.whw-section {
|
||||
background: #09090b;
|
||||
padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
|
||||
}
|
||||
|
||||
.whw-header {
|
||||
margin: 0 auto 56px auto;
|
||||
max-width: 720px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.whw-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #c8102e;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.whw-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: #ffffff !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.whw-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.whw-track-wrap {
|
||||
position: relative;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 2px;
|
||||
margin: 0 auto 44px auto;
|
||||
}
|
||||
|
||||
.whw-track-fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: #c8102e;
|
||||
box-shadow: 0 0 10px #c8102e;
|
||||
border-radius: 2px;
|
||||
transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.whw-nodes {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.whw-node {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #18181b;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
|
||||
}
|
||||
|
||||
.whw-node.is-active {
|
||||
background: #c8102e;
|
||||
border-color: #ffffff;
|
||||
box-shadow: 0 0 10px #c8102e;
|
||||
}
|
||||
|
||||
.whw-steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.whw-step {
|
||||
min-width: 0;
|
||||
padding: 22px 18px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
|
||||
}
|
||||
|
||||
.whw-step.is-active {
|
||||
border-color: rgba(200, 16, 46, 0.5);
|
||||
background: rgba(200, 16, 46, 0.06);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.whw-step-num {
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1px;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.whw-step.is-active .whw-step-num {
|
||||
color: #c8102e;
|
||||
}
|
||||
|
||||
.whw-step-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.whw-step.is-active .whw-step-icon {
|
||||
background: rgba(200, 16, 46, 0.15);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.whw-step-label {
|
||||
font-size: 15px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.3 !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
.whw-step-desc {
|
||||
font-size: 12.5px;
|
||||
line-height: 1.5;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.whw-track-wrap { display: none; }
|
||||
|
||||
.whw-steps {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.whw-steps::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.whw-step {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.whw-step::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -27px;
|
||||
top: 24px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #18181b;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.whw-step.is-active::before {
|
||||
background: #c8102e;
|
||||
border-color: #ffffff;
|
||||
box-shadow: 0 0 10px rgba(200, 16, 46, 0.7);
|
||||
}
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="whw-section" id="wings-how-it-works">
|
||||
<ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="whw-header">
|
||||
<div className="whw-eyebrow">/ How It Works /</div>
|
||||
<h2 className="whw-title">Pickup to delivery, one connected flow</h2>
|
||||
<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 />
|
||||
delivery, one
|
||||
<br />
|
||||
connected flow
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1} duration={0.8} yOffset={30} className="whw-inner">
|
||||
<div className="whw-track-wrap" aria-hidden="true">
|
||||
<div className="whw-track-fill" style={{ width: `${fillPct}%` }} />
|
||||
<div className="whw-nodes">
|
||||
{STEPS.map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`whw-node${i <= active ? " is-active" : ""}`}
|
||||
style={{ left: `${((i + 0.5) / STEPS.length) * 100}%` }}
|
||||
<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>
|
||||
|
||||
<div className="whw-steps">
|
||||
<StaggerChildren stagger={0.06} duration={0.6} yOffset={24} className={styles.flow}>
|
||||
{STEPS.map((step, i) => (
|
||||
<div
|
||||
key={step.label}
|
||||
className={`whw-step${i === active ? " is-active" : ""}`}
|
||||
className={`${styles.step} ${i === active ? styles.stepActive : ""}`}
|
||||
onMouseEnter={() => setActive(i)}
|
||||
onClick={() => setActive(i)}
|
||||
role="button"
|
||||
@@ -292,15 +104,21 @@ export default function WingsHowItWorks() {
|
||||
if (e.key === "Enter" || e.key === " ") setActive(i);
|
||||
}}
|
||||
>
|
||||
<div className="whw-step-num">0{i + 1}</div>
|
||||
<div className="whw-step-icon" aria-hidden="true">{step.icon}</div>
|
||||
<h3 className="whw-step-label">{step.label}</h3>
|
||||
<p className="whw-step-desc">{step.desc}</p>
|
||||
<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>
|
||||
</ScrollReveal>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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,6 +187,8 @@ export default function WingsIndustries() {
|
||||
/>
|
||||
|
||||
<section className="wind-section" id="wings-industries">
|
||||
<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’t wait</h2>
|
||||
@@ -185,7 +196,15 @@ export default function WingsIndustries() {
|
||||
|
||||
<ScrollReveal delay={0.1} duration={0.8} yOffset={30} className="wind-grid">
|
||||
{INDUSTRIES.map((ind) => (
|
||||
<div key={ind.title} className="wind-card">
|
||||
<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">
|
||||
@@ -206,6 +225,8 @@ export default function WingsIndustries() {
|
||||
</div>
|
||||
))}
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
|
||||
217
src/components/sections/WingsInfrastructure.module.css
Normal file
217
src/components/sections/WingsInfrastructure.module.css
Normal file
@@ -0,0 +1,217 @@
|
||||
.section {
|
||||
background: #09090b;
|
||||
padding: var(--space-section-lg, 100px) 0;
|
||||
margin-bottom: 30px;
|
||||
margin-right: 24px;
|
||||
margin-left: 24px;
|
||||
border-radius: 30px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Ambient depth: calm, near-static light (stable mood) instead of the more
|
||||
energetic red glow used on How It Works, plus a matching vignette. */
|
||||
.section::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -18%;
|
||||
left: 50%;
|
||||
width: 58%;
|
||||
aspect-ratio: 1;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(200, 16, 46, 0.05) 40%, rgba(0, 0, 0, 0) 68%);
|
||||
transform: translateX(-50%);
|
||||
filter: blur(8px);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
animation: infraGlowDrift 14s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.section::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(120% 90% at 50% 0%, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@keyframes infraGlowDrift {
|
||||
0% {
|
||||
transform: translateX(-52%) translateY(0);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-48%) translateY(10px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.section::before {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Single page-alignment wrapper. Numbers verified against the Footer's real
|
||||
* rendered content container (elementor-element-e183a77) with Playwright at
|
||||
* 320-2560px: that row sits flush at a 20px gutter up to a 1420px cap, then
|
||||
* centers beyond it, dropping to a 10px gutter under ~1024px. max-width:1420
|
||||
* + padding:20px reproduces the same edge as a 20px-gutter + inner
|
||||
* max-width:1380px pair in one box (no nested max-width needed). Kept
|
||||
* byte-identical to WingsHowItWorks.module.css's .sectionShell.
|
||||
*/
|
||||
.sectionShell {
|
||||
width: 100%;
|
||||
max-width: 1420px;
|
||||
margin: 0 auto;
|
||||
padding: 0 5vw;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.sectionShell {
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
margin: 0 auto 56px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.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: #ffffff !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Capability row — editorial columns divided by hairline rules, matching
|
||||
How It Works' language but unnumbered (these aren't sequential steps). */
|
||||
.grid {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
padding: 0 30px;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.09);
|
||||
transition: border-color 0.4s ease;
|
||||
}
|
||||
|
||||
.card:first-child {
|
||||
padding-left: 0;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
margin-bottom: 26px;
|
||||
transition: border-color 0.4s ease, color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
|
||||
}
|
||||
|
||||
.card:hover .icon {
|
||||
border-color: rgba(200, 16, 46, 0.55);
|
||||
color: #ffffff;
|
||||
background: rgba(200, 16, 46, 0.12);
|
||||
box-shadow: 0 0 18px rgba(200, 16, 46, 0.28);
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 17px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.3 !important;
|
||||
text-transform: none !important;
|
||||
color: rgba(255, 255, 255, 0.82) !important;
|
||||
margin: 0 0 10px 0;
|
||||
transition: color 0.4s ease;
|
||||
}
|
||||
|
||||
.card:hover .cardTitle {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.cardDesc {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
margin: 0;
|
||||
transition: color 0.4s ease;
|
||||
}
|
||||
|
||||
.card:hover .cardDesc {
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.section {
|
||||
padding: var(--space-section, 64px) 0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 34px 28px;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-left: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card:nth-child(n + 3) {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.09);
|
||||
padding-top: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 28px 0;
|
||||
}
|
||||
|
||||
.card:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.card:not(:first-child) {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.09);
|
||||
}
|
||||
|
||||
.card:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
||||
import styles from "./WingsInfrastructure.module.css";
|
||||
|
||||
const CARDS = [
|
||||
{
|
||||
@@ -44,117 +45,23 @@ const CARDS = [
|
||||
|
||||
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>
|
||||
<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="wia-grid">
|
||||
<StaggerChildren stagger={0.08} duration={0.6} yOffset={20} className={styles.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 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -160,7 +160,7 @@ export default function WingsMileTruth() {
|
||||
.wmt-section {
|
||||
position: relative;
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 auto;
|
||||
margin: clamp(24px, 4vw, 40px) auto;
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
@@ -195,7 +195,7 @@ export default function WingsMileTruth() {
|
||||
.wmt-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1200px;
|
||||
max-width: 1380px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -357,7 +357,7 @@ export default function WingsMileTruth() {
|
||||
<div className="wmt-glow tl" aria-hidden="true" />
|
||||
<div className="wmt-glow br" aria-hidden="true" />
|
||||
|
||||
<div className="wmt-inner">
|
||||
<div className="wmt-inner dm-section-container">
|
||||
<ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wmt-header">
|
||||
<div className="wmt-eyebrow">/ MileTruth™ AI /</div>
|
||||
<h2 className="wmt-title">The intelligence layer behind every delivery</h2>
|
||||
|
||||
@@ -53,7 +53,7 @@ export default function WingsRoadmap() {
|
||||
.wrm-section {
|
||||
position: relative;
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 auto;
|
||||
margin: clamp(56px, 7vw, 96px) auto clamp(24px, 4vw, 40px);
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
@@ -87,7 +87,7 @@ export default function WingsRoadmap() {
|
||||
}
|
||||
|
||||
.wrm-inner {
|
||||
max-width: 1200px;
|
||||
max-width: 1380px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -244,6 +244,7 @@ export default function WingsRoadmap() {
|
||||
/>
|
||||
|
||||
<section className="wrm-section" id="wings-roadmap">
|
||||
<div className="dm-section-container">
|
||||
<div className="wrm-header">
|
||||
<div className="wrm-eyebrow">/ Future Roadmap /</div>
|
||||
<h2 className="wrm-title">A ten-year path to national scale</h2>
|
||||
@@ -283,6 +284,7 @@ export default function WingsRoadmap() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -43,7 +43,7 @@ export default function WingsSpeedAdvantage() {
|
||||
__html: `
|
||||
.wsa-section {
|
||||
background: #fafafa;
|
||||
padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
|
||||
padding: var(--space-section-lg, 80px) 0;
|
||||
}
|
||||
|
||||
.wsa-header {
|
||||
@@ -71,10 +71,13 @@ export default function WingsSpeedAdvantage() {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wsa-inner {
|
||||
max-width: 1380px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wsa-face-off {
|
||||
position: relative;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
@@ -166,11 +169,13 @@ export default function WingsSpeedAdvantage() {
|
||||
/>
|
||||
|
||||
<section className="wsa-section" ref={sectionRef} id="wings-speed">
|
||||
<div className="dm-section-container">
|
||||
<div className="wsa-header" ref={headerRef}>
|
||||
<div className="wsa-eyebrow">/ The Speed Advantage /</div>
|
||||
<h2 className="wsa-title">Same-day, not some-day</h2>
|
||||
</div>
|
||||
|
||||
<div className="wsa-inner">
|
||||
<div className="wsa-face-off">
|
||||
<div className="wsa-panel wsa-panel-surface" ref={leftRef}>
|
||||
<div className="wsa-panel-label">Surface Logistics</div>
|
||||
@@ -192,6 +197,8 @@ export default function WingsSpeedAdvantage() {
|
||||
<p className="wsa-panel-sub">Same-day delivery between major regional capitals.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -56,7 +56,7 @@ export default function WingsWhyGrid() {
|
||||
__html: `
|
||||
.wwg-section {
|
||||
background: #ffffff;
|
||||
padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
|
||||
padding: var(--space-section-lg, 80px) 0;
|
||||
}
|
||||
|
||||
.wwg-header {
|
||||
@@ -84,9 +84,12 @@ export default function WingsWhyGrid() {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wwg-grid {
|
||||
max-width: 1280px;
|
||||
.wwg-inner {
|
||||
max-width: 1380px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wwg-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
@@ -147,6 +150,8 @@ export default function WingsWhyGrid() {
|
||||
/>
|
||||
|
||||
<section className="wwg-section" id="wings-why">
|
||||
<div className="dm-section-container">
|
||||
<div className="wwg-inner">
|
||||
<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>
|
||||
@@ -161,6 +166,8 @@ export default function WingsWhyGrid() {
|
||||
</div>
|
||||
))}
|
||||
</StaggerChildren>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user