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

fix intelligence grid

Browse Source
This commit is contained in:
Aravind R
2026-06-05 16:17:46 +05:30
parent 7fb97a9ca6
commit 2f23f16634
8 changed files with 83 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/css/site.css
View File

@@ -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;

25
src/components/optimization/OptimizationSection.tsx
View File

@@ -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 {

6
src/components/sections/BlogGrid.tsx
View File

@@ -204,12 +204,6 @@ export default function BlogGrid() {
<p className="custom-blog-excerpt">
{blog.excerpt}
</p>
{/* Read More */}
<span className="custom-blog-readmore">
Read More
<span aria-hidden="true" className="custom-blog-readmore-arrow">→</span>
</span>
</div>
{/* Image at Bottom */}

7
src/components/sections/ContactsHero.tsx
View File

@@ -224,13 +224,6 @@ export default function ContactsHero() {
Have questions about our smart delivery network, pricing plans, or partner ecosystem? Let&apos;s build the future of logistics together.
</p>
<div>
<nav className="contacts-hero-breadcrumbs">
<Link href="/" className="contacts-breadcrumb-link">Home</Link>
<span className="contacts-breadcrumb-del">/</span>
<span className="contacts-breadcrumb-cur">Contacts</span>
</nav>
</div>
</div>
</div>
</div>

19
src/components/sections/IntelligenceGrid.tsx
View File

@@ -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;
}

29
src/components/sections/Workflow1.tsx
View File

@@ -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; }
}
`;

21
src/components/sections/Workflow2.tsx
View File

@@ -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; }
}
`;

21
src/components/sections/Workflow3.tsx
View File

@@ -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; }
}
`;