From 2f23f1663496d574fe337526d76a047fa1bdafad Mon Sep 17 00:00:00 2001 From: Aravind R Date: Fri, 5 Jun 2026 16:17:46 +0530 Subject: [PATCH] fix intelligence grid --- public/css/site.css | 12 ++++---- .../optimization/OptimizationSection.tsx | 25 +++++++++++----- src/components/sections/BlogGrid.tsx | 6 ---- src/components/sections/ContactsHero.tsx | 7 ----- src/components/sections/IntelligenceGrid.tsx | 19 +++++++----- src/components/sections/Workflow1.tsx | 29 ++++++++++++------- src/components/sections/Workflow2.tsx | 21 ++++++++++---- src/components/sections/Workflow3.tsx | 21 ++++++++++---- 8 files changed, 83 insertions(+), 57 deletions(-) diff --git a/public/css/site.css b/public/css/site.css index aff3b1c..f9edcd8 100644 --- a/public/css/site.css +++ b/public/css/site.css @@ -9004,7 +9004,7 @@ h1:where(.wp-block-heading).has-background, --container-widget-flex-grow: 0; --container-widget-align-self: initial; --flex-wrap-mobile: wrap; - --margin-top: 150px; + --margin-top: 75px; --margin-bottom: 0px; --margin-left: 0px; --margin-right: 0px; @@ -9765,7 +9765,7 @@ h1:where(.wp-block-heading).has-background, } .elementor .elementor-element.elementor-element-30fd9d1 { - --margin-top: 120px; + --margin-top: 60px; --margin-bottom: 0px; --margin-left: 0px; --margin-right: 0px; @@ -9979,7 +9979,7 @@ h1:where(.wp-block-heading).has-background, } .elementor .elementor-element.elementor-element-30fd9d1 { - --margin-top: 90px; + --margin-top: 45px; --margin-bottom: 0px; --margin-left: 0px; --margin-right: 0px; @@ -11734,7 +11734,7 @@ h1:where(.wp-block-heading).has-background, --container-widget-flex-grow: 0; --container-widget-align-self: initial; --flex-wrap-mobile: wrap; - --margin-top: 150px; + --margin-top: 75px; --margin-bottom: 0px; --margin-left: 0px; --margin-right: 0px; @@ -12588,7 +12588,7 @@ body:not(.rtl) .elementor-61 .elementor-element.elementor-element-0efc59e { } .elementor-61 .elementor-element.elementor-element-30fd9d1 { - --margin-top: 120px; + --margin-top: 60px; --margin-bottom: 0px; --margin-left: 0px; --margin-right: 0px; @@ -12824,7 +12824,7 @@ body:not(.rtl) .elementor-61 .elementor-element.elementor-element-0efc59e { } .elementor-61 .elementor-element.elementor-element-30fd9d1 { - --margin-top: 90px; + --margin-top: 45px; --margin-bottom: 0px; --margin-left: 0px; --margin-right: 0px; diff --git a/src/components/optimization/OptimizationSection.tsx b/src/components/optimization/OptimizationSection.tsx index 5d0720f..52e9cb1 100644 --- a/src/components/optimization/OptimizationSection.tsx +++ b/src/components/optimization/OptimizationSection.tsx @@ -451,13 +451,18 @@ const styles = ` /* ===== FLOATING CARD — the only colored surface ===== */ .dm-opt-card { position: absolute !important; - top: 96px !important; + /* 20px top inset to match the Workflow 2 / 3 connected cards (.dm-lb-card / + .dm-st-card), so the gap above Workflow 1 (between the Control Tower stats + bar and this card) is the same small, consistent seam used at every other + workflow transition — not the old oversized 96px band. The header below is + offset on its own to clear the fixed navbar (see .dm-opt-head). */ + top: 20px !important; left: 20px !important; right: 20px !important; bottom: 0 !important; /* flat bottom + flush to container so the Performance card butts directly against it, reading as one continuous container (home-page technique) */ - border-radius: 42px 42px 0 0 !important; + border-radius: 28px 28px 0 0 !important; overflow: hidden !important; // background: linear-gradient(165deg, #06101f 0%, #020617 35%, #040d1c 70%, #030a18 100%) !important; // border: 0px solid ${rgba("#ffffff", 0.08)} !important; @@ -499,20 +504,20 @@ const styles = ` @media (max-width: 1024px) { .dm-opt-card { - top: 96px !important; + top: 20px !important; left: 20px !important; right: 20px !important; bottom: 0 !important; - border-radius: 42px 42px 0 0 !important; + border-radius: 28px 28px 0 0 !important; } } @media (max-width: 767px) { .dm-opt-card { - top: 86px !important; + top: 10px !important; left: 10px !important; right: 10px !important; bottom: 0 !important; - border-radius: 28px 28px 0 0 !important; + border-radius: 20px 20px 0 0 !important; } } @@ -608,7 +613,13 @@ const styles = ` /* ===== HEADER — compact, no dead space ===== */ .dm-opt-head { - position: absolute; top: clamp(18px, 3vh, 36px); left: 50%; + /* Offset below the site's fixed navbar (~104px desktop / ~100px mobile when + .dm-header-scrolled is active). The card now sits at top:20px (was 96px), so + the navbar clearance lives here on the header itself — mirroring how the + Workflow 2 / 3 sections offset their inner header while the card stays at 20px. + This keeps the eyebrow/title clear of the navbar (z-index 10000) without + re-introducing the oversized top gap above Workflow 1. */ + position: absolute; top: clamp(96px, 12vh, 116px); left: 50%; transform: translateX(-50%); width: min(640px, 90vw); text-align: center; } .dm-opt-eyebrow { diff --git a/src/components/sections/BlogGrid.tsx b/src/components/sections/BlogGrid.tsx index 74d872a..8127b89 100644 --- a/src/components/sections/BlogGrid.tsx +++ b/src/components/sections/BlogGrid.tsx @@ -204,12 +204,6 @@ export default function BlogGrid() {

{blog.excerpt}

- - {/* Read More */} - - Read More - - {/* Image at Bottom */} diff --git a/src/components/sections/ContactsHero.tsx b/src/components/sections/ContactsHero.tsx index 3f39b46..c2f4120 100644 --- a/src/components/sections/ContactsHero.tsx +++ b/src/components/sections/ContactsHero.tsx @@ -224,13 +224,6 @@ export default function ContactsHero() { Have questions about our smart delivery network, pricing plans, or partner ecosystem? Let's build the future of logistics together.

-
- -
diff --git a/src/components/sections/IntelligenceGrid.tsx b/src/components/sections/IntelligenceGrid.tsx index b49be7f..2eca7b3 100644 --- a/src/components/sections/IntelligenceGrid.tsx +++ b/src/components/sections/IntelligenceGrid.tsx @@ -253,12 +253,15 @@ export default function IntelligenceGrid() { .roadmap-hero-section { position: relative; background: #09090b !important; - /* Stay WIDE and immersive — span nearly the full viewport, inset only - by the site's standard left/right gutter (40px desktop, 32/24 on - smaller screens) so the dark band never touches the viewport edge. - No narrow max-width: the roadmap timeline + 4 milestone cards keep - the large content area. Auto margins keep the gutters equal. */ - width: calc(100% - 80px); + /* Match the site-wide wide-band gutter EXACTLY. Measured against the + footer band (#b29b8fc) and the sibling "Women" band + (#women-entrepreneurship), both of which sit at a 20px left/right + gutter. The parent (#bbc6760) contributes no padding here (the + vendor padding vars resolve to 0), so the band carries the 20px + gutter itself via calc(100% - 40px) + auto margins: + at a 1910px viewport this renders left:20 right:1890 width:1870, + identical to the footer band. */ + width: calc(100% - 40px); margin-left: auto; margin-right: auto; border-radius: 24px; @@ -693,7 +696,7 @@ export default function IntelligenceGrid() { /* Responsive Constraints */ @media (max-width: 1024px) { .roadmap-hero-section { - width: calc(100% - 64px); /* 32px gutter */ + width: calc(100% - 40px); /* keep the 20px site-standard band gutter */ padding: 80px 24px; } @@ -709,7 +712,7 @@ export default function IntelligenceGrid() { @media (max-width: 768px) { .roadmap-hero-section { - width: calc(100% - 48px); /* 24px gutter */ + width: calc(100% - 40px); /* keep the 20px site-standard band gutter */ padding: 60px 16px; } diff --git a/src/components/sections/Workflow1.tsx b/src/components/sections/Workflow1.tsx index 5221282..e00f8f5 100644 --- a/src/components/sections/Workflow1.tsx +++ b/src/components/sections/Workflow1.tsx @@ -23,13 +23,19 @@ export default function Workflow1() { } ]; - // Auto-advance the carousel every 5s, infinite loop. Keyed on activeSlide so any + // Always begin the storytelling sequence from slide 1 (01/03) on mount — never + // preserve a previous slide index across remounts / route changes back to MileTruth. + useEffect(() => { + setActiveSlide(0); + }, []); + + // Auto-advance the carousel every 4s, infinite loop. Keyed on activeSlide so any // manual selection resets the timer; pauses while the user hovers the card. useEffect(() => { if (paused) return; const id = setTimeout(() => { setActiveSlide((prev) => (prev + 1) % slides.length); - }, 5000); + }, 4000); return () => clearTimeout(id); }, [activeSlide, paused, slides.length]); @@ -72,7 +78,7 @@ export default function Workflow1() { initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -12 }} - transition={{ duration: 0.28, ease: "easeInOut" }} + transition={{ duration: 0.7, ease: "easeInOut" }} className="dm-workflow-text" > {slides[activeSlide].text} @@ -131,7 +137,7 @@ const styles = ` background: linear-gradient(180deg, #030a18 0%, #06101f 100%); border: 1px solid rgba(255, 255, 255, 0.05); border-top: none; - border-radius: 0 0 42px 42px; + border-radius: 0 0 28px 28px; /* No shadow: this card is flush under the optimisation card and merges with it as one continuous container — a shadow here would re-introduce a dark band at the seam. */ box-shadow: none; @@ -177,11 +183,12 @@ const styles = ` text-transform: uppercase; } -.dm-workflow-text-container { min-height: 110px; width: 100%; } +.dm-workflow-text-container { min-height: 150px; width: 100%; } .dm-workflow-text { font-family: var(--font-manrope), system-ui, sans-serif; - font-size: 16px; - line-height: 1.65; + font-size: 21px; + line-height: 1.75; + letter-spacing: 0.01em; color: #A3A3A3; margin: 0 !important; padding: 0 !important; @@ -220,17 +227,16 @@ const styles = ` /* ── Responsive — keep insets/radius aligned to the optimisation card ── */ @media (max-width: 1024px) { .dm-wf1-card { - margin: 0 20px 0; - border-radius: 0 0 42px 42px; padding: 44px 44px; gap: 44px; } .dm-workflow-title { font-size: 32px; } + .dm-workflow-text { font-size: 19px; } } -@media (max-width: 768px) { +@media (max-width: 767px) { .dm-wf1-card { margin: 0 10px 0; - border-radius: 0 0 28px 28px; + border-radius: 0 0 20px 20px; padding: 36px 28px; gap: 36px; flex-direction: column; @@ -238,6 +244,7 @@ const styles = ` .dm-workflow-left { max-width: 280px; } .dm-workflow-right { width: 100%; } .dm-workflow-title { font-size: 28px; } + .dm-workflow-text { font-size: 17px; } .dm-workflow-text-container { min-height: auto; } } `; diff --git a/src/components/sections/Workflow2.tsx b/src/components/sections/Workflow2.tsx index 586ed6a..4606521 100644 --- a/src/components/sections/Workflow2.tsx +++ b/src/components/sections/Workflow2.tsx @@ -23,13 +23,19 @@ export default function Workflow2() { } ]; - // Auto-advance the carousel every 5s, infinite loop. Keyed on activeSlide so any + // Always begin the storytelling sequence from slide 1 (01/03) on mount — never + // preserve a previous slide index across remounts / route changes back to MileTruth. + useEffect(() => { + setActiveSlide(0); + }, []); + + // Auto-advance the carousel every 4s, infinite loop. Keyed on activeSlide so any // manual selection resets the timer; pauses while the user hovers the card. useEffect(() => { if (paused) return; const id = setTimeout(() => { setActiveSlide((prev) => (prev + 1) % slides.length); - }, 5000); + }, 4000); return () => clearTimeout(id); }, [activeSlide, paused, slides.length]); @@ -72,7 +78,7 @@ export default function Workflow2() { initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -12 }} - transition={{ duration: 0.28, ease: "easeInOut" }} + transition={{ duration: 0.7, ease: "easeInOut" }} className="dm-workflow-text" > {slides[activeSlide].text} @@ -179,11 +185,12 @@ const styles = ` text-transform: uppercase; } -.dm-workflow-text-container { min-height: 110px; width: 100%; } +.dm-workflow-text-container { min-height: 150px; width: 100%; } .dm-workflow-text { font-family: var(--font-manrope), system-ui, sans-serif; - font-size: 16px; - line-height: 1.65; + font-size: 21px; + line-height: 1.75; + letter-spacing: 0.01em; color: #A3A3A3; margin: 0 !important; padding: 0 !important; @@ -226,6 +233,7 @@ const styles = ` gap: 44px; } .dm-workflow-title { font-size: 32px; } + .dm-workflow-text { font-size: 19px; } } @media (max-width: 767px) { .dm-wf2-card { @@ -238,6 +246,7 @@ const styles = ` .dm-workflow-left { max-width: 280px; } .dm-workflow-right { width: 100%; } .dm-workflow-title { font-size: 28px; } + .dm-workflow-text { font-size: 17px; } .dm-workflow-text-container { min-height: auto; } } `; diff --git a/src/components/sections/Workflow3.tsx b/src/components/sections/Workflow3.tsx index d0c2db1..8c8d491 100644 --- a/src/components/sections/Workflow3.tsx +++ b/src/components/sections/Workflow3.tsx @@ -23,13 +23,19 @@ export default function Workflow3() { } ]; - // Auto-advance the carousel every 5s, infinite loop. Keyed on activeSlide so any + // Always begin the storytelling sequence from slide 1 (01/03) on mount — never + // preserve a previous slide index across remounts / route changes back to MileTruth. + useEffect(() => { + setActiveSlide(0); + }, []); + + // Auto-advance the carousel every 4s, infinite loop. Keyed on activeSlide so any // manual selection resets the timer; pauses while the user hovers the card. useEffect(() => { if (paused) return; const id = setTimeout(() => { setActiveSlide((prev) => (prev + 1) % slides.length); - }, 5000); + }, 4000); return () => clearTimeout(id); }, [activeSlide, paused, slides.length]); @@ -74,7 +80,7 @@ export default function Workflow3() { initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -12 }} - transition={{ duration: 0.28, ease: "easeInOut" }} + transition={{ duration: 0.7, ease: "easeInOut" }} className="dm-workflow-text" > {slides[activeSlide].text} @@ -177,11 +183,12 @@ const styles = ` text-transform: uppercase; } -.dm-workflow-text-container { min-height: 110px; width: 100%; } +.dm-workflow-text-container { min-height: 150px; width: 100%; } .dm-workflow-text { font-family: var(--font-manrope), system-ui, sans-serif; - font-size: 16px; - line-height: 1.65; + font-size: 21px; + line-height: 1.75; + letter-spacing: 0.01em; color: #A3A3A3; margin: 0 !important; padding: 0 !important; @@ -221,6 +228,7 @@ const styles = ` @media (max-width: 1024px) { .dm-wf3-card { padding: 44px 44px; gap: 44px; } .dm-workflow-title { font-size: 32px; } + .dm-workflow-text { font-size: 19px; } } @media (max-width: 767px) { .dm-wf3-card { @@ -233,6 +241,7 @@ const styles = ` .dm-workflow-left { max-width: 280px; } .dm-workflow-right { width: 100%; } .dm-workflow-title { font-size: 28px; } + .dm-workflow-text { font-size: 17px; } .dm-workflow-text-container { min-height: auto; } } `;