Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests 1 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

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