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

fix mobile view issue

Browse Source
This commit is contained in:
Aravind R
2026-06-15 18:20:48 +05:30
parent 205924e057
commit 0560b86b87
25 changed files with 956 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/layout/Header.tsx
View File

@@ -775,6 +775,9 @@ export default function Header() {
/* Responsive logo adjustment on mobile/tablet */
@media (max-width: 1024px) {
#masthead .elementor-element.elementor-element-466de1b {
top: 18px !important;
}
#masthead .elementor-element.elementor-element-846e53d .hfe-site-logo .hfe-site-logo-container img {
width: 150px !important;
height: auto !important;
@@ -793,7 +796,7 @@ export default function Header() {
to the top once scrolled past 50px, matching desktop behaviour. */
#masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled {
position: fixed !important;
top: 0 !important;
top: 18px !important;
left: 0 !important;
right: 0 !important;
}

13
src/components/layout/LoadingScreen.tsx
View File

@@ -118,11 +118,20 @@ export default function LoadingScreen() {
const originalPushState = window.history.pushState;
const originalReplaceState = window.history.replaceState;
const scheduleHistoryTransition = (targetPath: string) => {
const currentPath = getRoutePath(new URL(window.location.href));
if (targetPath === currentPath) return;
window.setTimeout(() => {
startTransition(targetPath, true);
}, 0);
};
window.history.pushState = function patchedPushState(...args) {
const urlArg = args[2];
if (typeof urlArg === "string" || urlArg instanceof URL) {
const url = new URL(urlArg, window.location.href);
if (url.origin === window.location.origin) startTransition(getRoutePath(url));
if (url.origin === window.location.origin) scheduleHistoryTransition(getRoutePath(url));
}
return originalPushState.apply(this, args);
};
@@ -131,7 +140,7 @@ export default function LoadingScreen() {
const urlArg = args[2];
if (typeof urlArg === "string" || urlArg instanceof URL) {
const url = new URL(urlArg, window.location.href);
if (url.origin === window.location.origin) startTransition(getRoutePath(url));
if (url.origin === window.location.origin) scheduleHistoryTransition(getRoutePath(url));
}
return originalReplaceState.apply(this, args);
};

27
src/components/sections/AboutCTA.tsx
View File

@@ -3,7 +3,31 @@ import Link from "next/link";
export default function AboutCTA() {
return (
<div className="we-container">
<>
<style dangerouslySetInnerHTML={{ __html: `
@media (max-width: 768px) {
.we-container {
margin-top: 40px !important;
margin-bottom: 40px !important;
padding: 0 10px !important;
}
.we-cta {
padding: 48px 20px !important;
border-radius: 22px !important;
}
.we-cta-title {
font-size: clamp(28px, 6vw, 38px) !important;
line-height: 1.25 !important;
margin-bottom: 16px !important;
}
.we-cta-sub {
font-size: 15px !important;
line-height: 1.5 !important;
margin-bottom: 24px !important;
}
}
`}} />
<div className="we-container">
<div className="we-cta reveal">
<div className="we-cta-inner">
<h2 className="we-cta-title">
@@ -26,5 +50,6 @@ export default function AboutCTA() {
</div>
</div>
</div>
</>
);
}

2
src/components/sections/AboutHero.tsx
View File

@@ -9,7 +9,7 @@ export default function AboutHero() {
width: 100% !important;
text-align: center !important;
color: #fff !important;
padding: 40px !important;
padding: 0 15px !important;
z-index: 2;
display: flex !important;
flex-direction: column !important;

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

@@ -26,9 +26,40 @@ export default function BlogGrid() {
}
}
@media (max-width: 768px) {
.elementor-104 .elementor-element.elementor-element-c70681e {
margin-top: var(--space-section) !important;
margin-bottom: 16px !important;
}
.custom-blog-grid {
grid-template-columns: 1fr !important;
gap: 48px !important;
gap: 28px !important;
padding: 24px 20px !important;
}
}
@media (max-width: 767px) {
.elementor-104 .elementor-element.elementor-element-c70681e {
--padding-left: 10px !important;
--padding-right: 10px !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.elementor-104 .elementor-element.elementor-element-3dec5cf {
--padding-left: 0px !important;
--padding-right: 0px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.elementor-104 .elementor-element.elementor-element-aa12479,
.elementor-104 .elementor-element.elementor-element-aa12479 > .elementor-widget-container,
.elementor-104 .archive-listing,
.elementor-104 .custom-blog-grid {
width: 100% !important;
max-width: 100% !important;
}
.elementor-104 .custom-blog-grid {
padding-left: 0 !important;
padding-right: 0 !important;
}
}

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

@@ -147,6 +147,12 @@ const STYLES = `
padding: clamp(24px, 3vw, 32px) clamp(20px, 4vw, 40px) clamp(8px, 1.5vw, 16px);
display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px);
}
@media (max-width: 767px) {
.dm-blog-footer-inner {
padding-left: 16px;
padding-right: 16px;
}
}
/* Prev / Next */
.dm-prevnext {

15
src/components/sections/BlogsHero.tsx
View File

@@ -15,6 +15,19 @@ export default function BlogsHero() {
letter-spacing: -1.5px !important;
margin: 0 !important;
}
.blogs-hero-content {
position: relative !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
max-width: 1000px !important;
margin: 0 auto !important;
padding: 0 15px !important;
box-sizing: border-box !important;
}
`}} />
<div className="custom-standard-hero-container">
<div
@@ -26,7 +39,7 @@ export default function BlogsHero() {
}}
className="custom-standard-hero-card"
>
<div className="e-con-inner" style={{ position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column" }}>
<div className="blogs-hero-content">
{/* Title / Heading for Blogs */}
<div style={{ textAlign: "center", color: "#fff", zIndex: 5 }}>

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

@@ -492,7 +492,11 @@ export default function CompetitiveEdge() {
@media (max-width: 768px) {
.comparison-section {
padding: 80px 0;
padding: 56px 0;
}
.comparison-section .container {
padding: 0 10px;
}
.moat-heading {

45
src/components/sections/ConnectedLogistics.tsx
View File

@@ -86,9 +86,20 @@ export default function ConnectedLogistics() {
padding-right: 0 !important;
}
/* Force ScrollReveal wrapper div to span full width */
.elementor-element-96343ba > div {
width: 100% !important;
height: auto !important;
}
/* Show image at the bottom or top depending on order */
.elementor-element-96343ba {
margin-top: 30px !important;
margin-top: 0px !important;
}
/* Reduce padding bottom of the content section on tablet */
.elementor-element-71c3e1d {
padding-bottom: 24px !important;
}
/* Override desktop fixed widths on mobile/tablet */
@@ -98,27 +109,49 @@ export default function ConnectedLogistics() {
max-width: 100% !important;
}
/* Tablet overrides: ~15% smaller than site.css's 450px with centered layout */
/* Allow widget container to take 100% width on mobile/tablet */
.elementor-element-99768ba {
width: 100% !important;
max-width: 100% !important;
}
/* Tablet overrides */
.elementor-element-99768ba .elementor-widget-container {
padding: 30px !important;
padding: 10px !important;
display: block !important; /* Disable flex centering layout on mobile/tablet */
width: 100% !important;
}
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
width: 100% !important;
max-width: 382px !important;
max-width: 600px !important; /* allow up to 600px on tablet */
border-radius: 25px !important; /* Explicitly keep 25px */
}
}
@media (max-width: 767px) {
/* Mobile overrides: ~15% smaller than site.css's 90% with 10% identical padding on all 4 sides */
/* Mobile overrides: let container take 100% width and image fill it */
.elementor-element-99768ba {
width: 100% !important;
max-width: 100% !important;
}
/* Eliminate extra gap under the content column on mobile */
.elementor-element-71c3e1d {
padding-bottom: 12px !important;
}
.elementor-element-99768ba .elementor-widget-container {
padding: 10% !important;
padding: 0px !important; /* Eliminate padding to maximize image width/height */
display: block !important; /* Disable flex centering layout on mobile/tablet */
width: 100% !important;
}
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
object-fit: cover !important;
border-radius: 25px !important; /* Explicitly keep 25px */
}
}

53
src/components/sections/EVLogisticSection.tsx
View File

@@ -346,10 +346,57 @@ export default function EVLogisticSection() {
}
@media (max-width: 768px) {
@media (max-width: 767px) {
.ev-logistic-section {
--padding-left: 10px !important;
--padding-right: 10px !important;
padding-left: 10px !important;
padding-right: 10px !important;
box-sizing: border-box !important;
}
.ev-logistic-section > .e-con-inner {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.ev-logistic-section .elementor-element-343b363 {
--padding-left: 0px !important;
--padding-right: 0px !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.ev-logistic-body-grid {
width: 100% !important;
max-width: 100% !important;
align-items: stretch !important;
}
.ev-logistic-content-col {
width: 100% !important;
max-width: 100% !important;
align-self: center !important;
}
.ev-feature-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
width: 100% !important;
max-width: 100% !important;
}
.ev-feature-card {
width: 100% !important;
max-width: 100% !important;
}
}
`}} />
@@ -368,7 +415,7 @@ export default function EVLogisticSection() {
<div className="ev-logistic-header">
<div className="elementor-element elementor-element-7afb238 elementor-widget elementor-widget-logico_heading ev-logistic-kicker-widget" 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 ev-logistic-kicker">/ Build Electric Vehicles /</div>
<div className="logico-title ev-logistic-kicker">/ Built for Electric Vehicles /</div>
</div>
</div>
<div className="ev-logistic-title-wrapper">
@@ -382,7 +429,7 @@ export default function EVLogisticSection() {
fontWeight: 800,
}}
>
LOGISTICS BUILT FOR ELECTRIC VEHICLES
Logistics Built for EV Vehicles
</div>
</div>
</div>

113
src/components/sections/EVSection.tsx
View File

@@ -390,6 +390,7 @@ export default function EVSection({
const outerClass =
"elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" +
(useDashboard ? " evnd-workflow-shell" : "") +
(gapTop ? " evnd-gap-top" : "") +
(gapBottom ? " evnd-gap-bottom" : "");
@@ -1057,9 +1058,47 @@ export default function EVSection({
.evnd__dash-kpis { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
.elementor.elementor-61 .elementor-element.elementor-element-bbc6760,
.elementor-element.elementor-element-bbc6760.evnd-workflow-shell {
width: calc(100% - 20px) !important;
margin-left: 10px !important;
margin-right: 10px !important;
padding-left: 0px !important;
padding-right: 0px !important;
box-sizing: border-box !important;
}
.evnd-gap-top { margin-top: 24px !important; }
.evnd-gap-bottom { margin-bottom: 24px !important; }
.evnd__bar { grid-template-columns: repeat(2, 1fr); gap: 24px 0; padding: 24px 0; margin-top: 24px; }
.evnd { padding-inline: 0; }
.evnd__heading {
padding-left: 26px;
padding-right: 26px;
box-sizing: border-box;
margin-bottom: 28px;
display: flow-root;
}
.evnd__inner {
padding-left: 4px;
padding-right: 4px;
box-sizing: border-box;
}
.evnd__dash {
padding-left: 12px !important;
padding-right: 12px !important;
}
.evnd__bar {
grid-template-columns: repeat(2, 1fr);
gap: 24px 0;
width: calc(100% - 8px);
max-width: calc(100% - 8px);
margin: 32px auto 0;
padding: 24px 0;
box-sizing: border-box;
}
.evnd.evnd--cards {
padding-bottom: 20px;
margin-bottom: 0;
}
.evnd__bar-item:nth-child(even)::after { display: none; }
.evnd__bar-item:nth-child(2)::after { display: none; }
.evnd__bar-item { padding: 12px 16px; }
@@ -1080,12 +1119,66 @@ export default function EVSection({
.evnd__grid--cards .evnd__left,
.evnd__grid--cards .evnd__right,
.evnd__grid--cards .evnd__media,
.evnd__grid--cards .evnd__dash { min-width: 0; }
.evnd__grid--cards .evnd__dash {
min-width: 0;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Keep the KPI row a tidy 2x2 on phones. */
.evnd__dash-kpis { grid-template-columns: repeat(2, 1fr); }
/* Workflow feature cards: distribute content like the Women stats
rows so the icon balances the right side instead of everything
clustering at the left edge. */
.evnd-workflow-shell .evnd__dash-feats { gap: 10px; }
.evnd-workflow-shell .evnd__dfeat {
grid-template-columns: minmax(0, 1fr) 36px;
gap: 12px;
padding: 12px 14px;
}
.evnd-workflow-shell .evnd__dfeat-ico {
grid-column: 2;
grid-row: 1;
justify-self: end;
width: 36px;
height: 36px;
}
.evnd-workflow-shell .evnd__dfeat-body {
grid-column: 1;
grid-row: 1;
}
/* ---- Mobile-only overrides for Hero Image & EV Logistics Card ---- */
.elementor-element.elementor-element-7da6646 {
width: calc(100% - 16px) !important;
margin-left: 8px !important;
margin-right: 8px !important;
border-radius: 18px !important;
margin-top: 15px !important;
margin-bottom: -50px !important;
box-sizing: border-box !important;
}
.elementor-element.elementor-element-8b5d6e6 {
padding-left: 8px !important;
padding-right: 8px !important;
margin-left: 0px !important;
margin-right: 0px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.elementor-element.elementor-element-1f766ea {
padding-left: 0px !important;
padding-right: 0px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 480px) {
.evnd { padding: 40px 16px 48px; }
.evnd { padding-inline: 0; }
.evnd__bar { grid-template-columns: repeat(2, 1fr); gap: 18px 0; padding: 22px 0; }
.evnd__bar-item { padding: 10px 12px; gap: 8px; }
.evnd__bar-val { font-size: clamp(26px, 9vw, 34px); }
@@ -1104,13 +1197,13 @@ export default function EVSection({
.evnd-feature__arrow { position: absolute; top: 16px; right: 16px; margin: 0; }
/* ---- Compact dashboard (phones) ---- */
.evnd__dash { padding: 18px; gap: 14px; }
.evnd__dash { padding-top: 18px !important; padding-bottom: 18px !important; gap: 14px; }
.evnd__dash-sys { display: none; }
.evnd__dash-kpis { gap: 10px; }
.evnd__kpi { padding: 12px 14px; gap: 4px; }
.evnd__kpi-val { font-size: clamp(24px, 8vw, 30px); }
.evnd__kpi-label { font-size: 12px; }
.evnd__dfeat { padding: 12px 14px; gap: 12px; grid-template-columns: 34px minmax(0, 1fr); }
.evnd-workflow-shell .evnd__dfeat { padding: 11px 12px; gap: 10px; grid-template-columns: minmax(0, 1fr) 34px; }
.evnd__dfeat-ico { width: 34px; height: 34px; border-radius: 9px; }
.evnd__dfeat-ico svg { width: 17px; height: 17px; }
.evnd__dfeat-title { font-size: 13.5px; }
@@ -1241,11 +1334,13 @@ export default function EVSection({
useDashboard && !mediaSlot ? " evnd__inner--img" : ""
}`}
>
<span className="evnd__eyebrow">{eyebrow}</span>
<h2 className="evnd__title">
{titleLead}
<span className="accent">{titleAccent}</span>
</h2>
<div className="evnd__heading">
<span className="evnd__eyebrow">{eyebrow}</span>
<h2 className="evnd__title">
{titleLead}
<span className="accent">{titleAccent}</span>
</h2>
</div>
{/* MAIN GRID */}
<div

27
src/components/sections/HowItWorksHero.tsx
View File

@@ -47,7 +47,7 @@ export default function HowItWorksHero() {
text-align: center !important;
width: 100% !important;
height: 100% !important;
padding: 0 40px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
@@ -73,6 +73,8 @@ export default function HowItWorksHero() {
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.elementor-element.elementor-element-6c7cbcb .content-slider-item-text {
@@ -86,6 +88,8 @@ export default function HowItWorksHero() {
text-align: center !important;
max-width: 820px !important;
margin: 0 auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Larger, more readable hero subtitle on large/4K screens */
@@ -109,10 +113,13 @@ export default function HowItWorksHero() {
@media (max-width: 1024px) {
.elementor-element.elementor-element-741f56c {
width: calc(100% - 40px) !important;
max-width: none !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
--padding-top: 0px !important;
--padding-block-start: 0px !important;
padding: 0 10px 10px 10px !important;
overflow: hidden !important;
border-radius: 25px !important;
}
@@ -134,15 +141,19 @@ export default function HowItWorksHero() {
.elementor-element.elementor-element-6c7cbcb .slide-content {
width: 100% !important;
min-height: 620px !important;
padding-left: 48px !important;
padding-right: 48px !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
}
@media (max-width: 767px) {
.elementor-element.elementor-element-741f56c {
width: calc(100% - 24px) !important;
width: 100% !important;
max-width: 100% !important;
--padding-top: 0px !important;
--padding-block-start: 0px !important;
padding: 0 10px 10px 10px !important;
border-radius: 22px !important;
}
@@ -162,8 +173,8 @@ export default function HowItWorksHero() {
asymmetric top margin). */
.elementor .elementor-element.elementor-element-6c7cbcb .slide-content {
min-height: 560px !important;
padding-left: 22px !important;
padding-right: 22px !important;
padding-left: 0 !important;
padding-right: 0 !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;

63
src/components/sections/IndustrySolutions.tsx
View File

@@ -5,6 +5,66 @@ import { ScrollReveal } from "@/animations/Reveal";
export default function IndustrySolutions() {
return (
<>
<style dangerouslySetInnerHTML={{ __html: `
@media (max-width: 768px) {
.elementor-element.elementor-element-3b4a7cc {
--padding-left: 10px !important;
--padding-right: 10px !important;
padding-left: 10px !important;
padding-right: 10px !important;
box-sizing: border-box !important;
}
.elementor-element.elementor-element-3b4a7cc > .e-con-inner {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.elementor-element.elementor-element-d602f7f,
.elementor-element.elementor-element-f64bd88,
.elementor-element.elementor-element-5ed2dbb,
.elementor-element.elementor-element-6829276 {
--padding-left: 0px !important;
--padding-right: 0px !important;
--margin-left: 0px !important;
--margin-right: 0px !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.elementor-element.elementor-element-6829276 {
--e-con-grid-template-columns: minmax(0, 1fr) !important;
--grid-justify-content: stretch !important;
--justify-items: stretch !important;
grid-template-columns: minmax(0, 1fr) !important;
justify-content: stretch !important;
justify-items: stretch !important;
min-width: 0 !important;
}
.industry-solutions-grid,
.industry-card-link {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.industry-solutions-grid {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
`}} />
<div className="elementor-element elementor-element-3b4a7cc e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="3b4a7cc" data-element_type="container" data-e-type="container">
<div className="e-con-inner">
<div className="elementor-element elementor-element-d602f7f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="d602f7f" data-element_type="container" data-e-type="container">
@@ -278,6 +338,7 @@ export default function IndustrySolutions() {
</div>
</div>
</div>
</div>
</div>
</>
);
}

2
src/components/sections/IndustryStack.tsx
View File

@@ -306,7 +306,7 @@ const CSS = `
#ind-stack .istk__content { max-width: none; }
}
@media (max-width: 600px) {
#ind-stack .istk { padding: 10px 14px; }
#ind-stack .istk { padding: 10px; }
#ind-stack .istk__card { padding: 22px 20px; border-radius: 24px; }
#ind-stack .istk__media { height: 240px; }
#ind-stack .istk__title { margin-bottom: 16px !important; }

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

@@ -234,7 +234,7 @@ export default function IntelligenceGrid() {
return (
<div
ref={containerRef}
className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent"
className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent intelligence-grid-section"
data-id="bbc6760"
data-element_type="container"
data-e-type="container"
@@ -710,11 +710,19 @@ export default function IntelligenceGrid() {
}
}
@media (max-width: 768px) {
@media (max-width: 767px) {
.intelligence-grid-section {
--padding-left: 0px !important;
--padding-right: 0px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.roadmap-hero-section {
width: calc(100% - 24px); /* tighter 12px gutter so the band reads edge-to-edge on phones */
width: calc(100% - 32px) !important;
max-width: calc(100% - 32px) !important;
padding: 52px 16px 44px;
border-radius: 22px;
border-radius: 22px !important;
}
.vision-main-subtitle { margin-bottom: 40px !important; }

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

@@ -69,7 +69,7 @@ export default function MileTruthHero() {
justify-content: center;
border-radius: 25px 25px 0 0;
margin-top: 20px;
padding: 100px 40px;
padding: 100px 0;
}
.miletruth-hero-container::before {
display: none !important;
@@ -78,7 +78,7 @@ export default function MileTruthHero() {
position: relative;
z-index: 2;
width: 100%;
padding: 0 40px !important;
padding: 0 !important;
box-sizing: border-box;
}
.miletruth-hero .content-slider-item-heading,
@@ -114,7 +114,7 @@ export default function MileTruthHero() {
text-align: center !important;
width: 100% !important;
height: 100% !important;
padding: 0 40px !important;
padding: 0 15px !important;
box-sizing: border-box !important;
}
.miletruth-hero .slide-content,
@@ -258,9 +258,12 @@ export default function MileTruthHero() {
}
}
@media (max-width: 1024px) {
.miletruth-hero .elementor-element-86f3204 {
padding: 0 10px !important;
}
.miletruth-hero-container {
min-height: 600px;
padding: 120px 0;
padding: 80px 0 !important;
}
.miletruth-hero .elementor-element-8e5c81e {
padding: 40px 0 !important;
@@ -288,19 +291,19 @@ export default function MileTruthHero() {
@media (max-width: 580px) {
.miletruth-hero-container {
min-height: 500px;
padding: 100px 0;
padding: 60px 0 !important;
}
.miletruth-hero .elementor-element-86f3204 {
padding: 0 12px;
padding: 0 10px !important;
}
/* Collapse the nested horizontal padding (was 40px + 40px on top of the
12px wrapper) — at 320px that left only ~136px for text and the long
heading words overflowed, causing horizontal scroll + off-center look. */
.miletruth-content {
padding: 0 14px !important;
padding: 0 !important;
}
.miletruth-hero .slide-content {
padding: 0 !important;
padding: 0 15px !important;
}
.miletruth-hero .elementor-element-8e5c81e {
padding: 30px 0 !important;

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

@@ -87,8 +87,35 @@ export default function OurTeam() {
@media (max-width: 800px) {
.team-listing-wrapper.team-grid-listing .team-item-wrapper { width: 50%; }
}
@media (max-width: 767px) {
.elementor-86 .elementor-element-c2c601a > .e-con-inner {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.elementor-86 .elementor-element-c46350e > .elementor-widget-container {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.team-listing-wrapper.team-grid-listing {
margin: 0 0 -28px;
}
.team-listing-wrapper.team-grid-listing .team-item-wrapper {
width: 100%;
padding: 0;
margin-bottom: 28px;
}
}
@media (max-width: 480px) {
.team-listing-wrapper.team-grid-listing .team-item-wrapper { width: 100%; }
.team-listing-wrapper.team-grid-listing {
margin: 0 0 -28px;
}
.team-listing-wrapper.team-grid-listing .team-item-wrapper {
width: 100%;
padding: 0;
margin-bottom: 28px;
}
}
/* Card: photo on top, name/position at the bottom (down to image). */

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

@@ -227,6 +227,12 @@ const STYLES = `
/* 20px mobile padding floor → 40px on desktop; matches the footer container. */
padding: clamp(14px, 2vw, 26px) clamp(20px, 4vw, 40px) 0;
}
@media (max-width: 767px) {
.dm-blog-wrap {
padding-left: 16px;
padding-right: 16px;
}
}
/* ── Article meta bar (directly under the hero) ── */
.dm-meta-bar {

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

@@ -45,7 +45,7 @@ export default function SolutionsHero() {
text-align: center !important;
width: 100% !important;
height: 100% !important;
padding: 0 40px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
@@ -71,6 +71,8 @@ export default function SolutionsHero() {
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.elementor-element.elementor-element-6c7cbcb .content-slider-item-text {
@@ -84,6 +86,8 @@ export default function SolutionsHero() {
text-align: center !important;
max-width: 820px !important;
margin: 0 auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Larger, more readable hero subtitle on large/4K screens */
@@ -107,10 +111,13 @@ export default function SolutionsHero() {
@media (max-width: 1024px) {
.elementor-element.elementor-element-741f56c {
width: calc(100% - 40px) !important;
max-width: none !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
--padding-top: 0px !important;
--padding-block-start: 0px !important;
padding: 0 10px 10px 10px !important;
overflow: hidden !important;
border-radius: 25px !important;
}
@@ -132,15 +139,19 @@ export default function SolutionsHero() {
.elementor-element.elementor-element-6c7cbcb .slide-content {
width: 100% !important;
min-height: 620px !important;
padding-left: 48px !important;
padding-right: 48px !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
}
@media (max-width: 767px) {
.elementor-element.elementor-element-741f56c {
width: calc(100% - 24px) !important;
width: 100% !important;
max-width: 100% !important;
--padding-top: 0px !important;
--padding-block-start: 0px !important;
padding: 0 10px 10px 10px !important;
border-radius: 22px !important;
}
@@ -156,8 +167,8 @@ export default function SolutionsHero() {
.elementor-element.elementor-element-6c7cbcb .slide-content {
min-height: 560px !important;
padding-left: 22px !important;
padding-right: 22px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.elementor-element.elementor-element-6c7cbcb .content-slider-item-heading {
@@ -165,6 +176,8 @@ export default function SolutionsHero() {
font-size: clamp(38px, 11vw, 48px) !important;
line-height: 1.05 !important;
overflow-wrap: break-word !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Pin the slide counter ("01/02") cleanly bottom-RIGHT — matching the

8
src/components/sections/WhyChooseDoormile.tsx
View File

@@ -315,15 +315,15 @@ export default function WhyChooseDoormile() {
}
@media (max-width: 1020px) {
.wcd-section { margin: 0 15px 15px 15px; padding: 40px 0 80px; }
.wcd-inner { padding: 0 30px; }
.wcd-section { margin: 0 10px 10px 10px; padding: 40px 0 80px; }
.wcd-inner { padding: 0; }
.wcd-grid { grid-template-columns: 1fr; gap: 24px; }
.wcd-card-body { padding: 32px; }
.logico-front-end .wcd-section h3.wcd-card-title { font-size: 24px; }
}
@media (max-width: 480px) {
.wcd-section { margin: 0 12px 12px 12px; border-radius: 0 0 20px 20px; padding: 30px 0 64px; }
.wcd-inner { padding: 0 20px; }
.wcd-section { margin: 0 10px 10px 10px; border-radius: 0 0 20px 20px; padding: 30px 0 64px; }
.wcd-inner { padding: 0; }
.wcd-card-body { padding: 24px; }
}
`}} />

146
src/components/sections/WomenSection.tsx
View File

@@ -179,6 +179,41 @@ export default function WomenSection() {
font-weight: 500;
}
/* ---- Floating card sizing: content-driven, not container-driven ----
Matches the EV Logistics card height proportions exactly by trimming
red content padding and white footer min-height. */
.elementor-element.elementor-element-3b61435 {
--padding-top: 46px;
--padding-bottom: 38px;
}
.elementor-element.elementor-element-5aea22e {
--min-height: 38px;
--padding-top: 14px;
--padding-bottom: 14px;
}
@media (max-width: 1020px) {
.elementor-element.elementor-element-3b61435 {
--padding-top: 34px;
--padding-bottom: 28px;
}
.elementor-element.elementor-element-5aea22e {
--min-height: 32px;
--padding-top: 12px;
--padding-bottom: 12px;
}
}
@media (max-width: 660px) {
.elementor-element.elementor-element-3b61435 {
--padding-top: 26px;
--padding-bottom: 22px;
}
.elementor-element.elementor-element-5aea22e {
--min-height: 24px;
--padding-top: 10px;
--padding-bottom: 10px;
}
}
.elementor-element-778840d .logico-title {
white-space: nowrap !important;
}
@@ -192,9 +227,9 @@ export default function WomenSection() {
background-position: 78% center !important;
}
}
@media (max-width: 600px) {
@media (max-width: 767px) {
.elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
background-position: 82% center !important;
background-position: 82% 25% !important;
}
}
@@ -224,7 +259,108 @@ export default function WomenSection() {
margin-right: 0 !important;
}
}
@media (max-width: 600px) {
@media (max-width: 767px) {
#women-entrepreneurship {
width: calc(100% - 20px) !important;
margin-left: 10px !important;
margin-right: 10px !important;
border-radius: 22px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
#women-entrepreneurship .e-con-boxed > .e-con-inner {
padding-top: 32px !important;
padding-bottom: 32px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#women-entrepreneurship .elementor-element-8b5d6e6,
#women-entrepreneurship .elementor-element-b6e14bd,
#women-entrepreneurship .elementor-element-90cc867,
#women-entrepreneurship .elementor-element-36efec7,
#women-entrepreneurship .elementor-element-b2c956f {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#women-entrepreneurship .elementor-element-1f766ea {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#women-entrepreneurship .elementor-element.elementor-element-2ed47f3 {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
gap: 24px !important;
}
#women-entrepreneurship .elementor-element-36efec7 {
margin-top: 0px !important;
padding-top: 0px !important;
gap: 0px !important;
}
#women-entrepreneurship .elementor-element-24c0280 {
margin-bottom: 0px !important;
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
#women-entrepreneurship .elementor-element-778840d {
margin-top: 14px !important;
margin-bottom: 14px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
#women-entrepreneurship .elementor-element-778840d h3.logico-title,
#women-entrepreneurship .elementor-element-778840d > .elementor-widget-container {
margin: 0px !important;
padding: 0px !important;
}
#women-entrepreneurship .elementor-element-7da6646 {
width: calc(100% - 28px) !important;
margin-left: 14px !important;
margin-right: 14px !important;
border-radius: 18px !important;
min-height: 240px !important;
margin-top: 15px !important;
margin-bottom: -50px !important;
box-sizing: border-box !important;
}
#women-entrepreneurship .elementor-element-8b5d6e6 {
padding-left: 14px !important;
padding-right: 14px !important;
margin-left: 0px !important;
margin-right: 0px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
#women-entrepreneurship .elementor-element-bbfb67f img {
width: 100% !important;
}
#women-entrepreneurship .elementor-element-bbfb67f {
margin-top: 0px !important;
margin-bottom: 16px !important;
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
#ws-stories {
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
/* KPI stat cards stack one-per-row on mobile. Inside each card the big
number sits on the left and the label on the right, vertically
centered, so every stat reads as a clean full-width row instead of
@@ -235,7 +371,7 @@ export default function WomenSection() {
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 22px;
padding: 16px 20px;
min-width: 0;
}
#ws-stories .ws__stat-num { font-size: clamp(30px, 9vw, 40px); }
@@ -246,7 +382,7 @@ export default function WomenSection() {
text-align: right;
min-height: 0;
}
#ws-stories .ws__cards { grid-template-columns: 1fr; }
#ws-stories .ws__cards { grid-template-columns: 1fr; gap: 12px; }
}
`}} />

56
src/components/strategy/StrategyCanvas.tsx
View File

@@ -2,7 +2,7 @@
import React, { Suspense, useEffect, useMemo, useRef, useState } from "react";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { RoundedBox, Line, Sparkles, Html, useGLTF, ContactShadows, Environment, Lightformer, Preload } from "@react-three/drei";
import { RoundedBox, Line, Sparkles, Html, useGLTF, useProgress, ContactShadows, Environment, Lightformer, Preload } from "@react-three/drei";
import { EffectComposer, Bloom } from "@react-three/postprocessing";
import { KernelSize } from "postprocessing";
import * as THREE from "three";
@@ -14,6 +14,8 @@ type Props = {
isMobile?: boolean;
active?: boolean;
stage?: number;
ready?: boolean;
onReady?: () => void;
};
const BG = "#eef1f6";
@@ -785,7 +787,50 @@ function Floor() {
);
}
function Scene({ progress, reduced, isMobile, stage, active, perf }: { progress: React.RefObject<number>; reduced: boolean; isMobile: boolean; stage: number; active: boolean; perf: boolean }) {
function SceneReadySignal({ onReady }: { onReady?: () => void }) {
const { active, progress } = useProgress();
const gl = useThree((s) => s.gl);
const scene = useThree((s) => s.scene);
const camera = useThree((s) => s.camera);
const fired = useRef(false);
const compiling = useRef(false);
const compiled = useRef(false);
const meaningfulFrames = useRef(0);
useEffect(() => {
if (fired.current || compiling.current || compiled.current || active || progress < 100) return;
compiling.current = true;
const renderer = gl as THREE.WebGLRenderer & {
compileAsync?: (scene: THREE.Scene, camera: THREE.Camera) => Promise<void>;
};
const compile = renderer.compileAsync
? renderer.compileAsync(scene, camera)
: Promise.resolve(renderer.compile(scene, camera));
compile
.catch(() => undefined)
.finally(() => {
compiled.current = true;
});
}, [active, camera, gl, progress, scene]);
useFrame(() => {
if (fired.current || active || progress < 100 || !compiled.current) return;
const renderInfo = gl.info.render;
const hasMeaningfulScene = renderInfo.calls >= 12 && renderInfo.triangles >= 500;
meaningfulFrames.current = hasMeaningfulScene ? meaningfulFrames.current + 1 : 0;
if (meaningfulFrames.current < 4) return;
fired.current = true;
requestAnimationFrame(() => onReady?.());
});
return null;
}
function Scene({ progress, reduced, isMobile, stage, active, perf, onReady }: { progress: React.RefObject<number>; reduced: boolean; isMobile: boolean; stage: number; active: boolean; perf: boolean; onReady?: () => void }) {
// Districts stay MOUNTED for the whole scroll (GLB cloned once, shaders compiled
// once → no remount hitch, no blank frames). `near` only toggles per-district
// visibility + per-frame work + <Html> mounting, so off-screen districts render
@@ -844,12 +889,13 @@ function Scene({ progress, reduced, isMobile, stage, active, perf }: { progress:
{/* Compile every material/texture upfront (districts are all mounted) so the
first time a district becomes visible there's no shader-compile stall. */}
<Preload all />
<SceneReadySignal onReady={onReady} />
{perf && <PerfHud />}
</>
);
}
export default function StrategyCanvas({ progress, reduced = false, isMobile = false, active = true, stage = 0 }: Props) {
export default function StrategyCanvas({ progress, reduced = false, isMobile = false, active = true, stage = 0, ready = false, onReady }: Props) {
// Opt-in dev metrics overlay: append ?perf to the URL.
const perf = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("perf");
return (
@@ -857,9 +903,9 @@ export default function StrategyCanvas({ progress, reduced = false, isMobile = f
dpr={[1, isMobile ? 1 : 1.25]}
camera={{ position: [0, 4, 8.2], fov: 50, near: 0.1, far: 120 }}
gl={{ antialias: false, powerPreference: "high-performance", alpha: false }}
frameloop={active ? "always" : "never"}
frameloop={active || !ready ? "always" : "never"}
>
<Scene progress={progress} reduced={reduced} isMobile={isMobile} stage={stage} active={active} perf={perf} />
<Scene progress={progress} reduced={reduced} isMobile={isMobile} stage={stage} active={active} perf={perf} onReady={onReady} />
</Canvas>
);
}

53
src/components/strategy/StrategySection.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import React, { useEffect, useRef, useState, useSyncExternalStore } from "react";
import React, { useEffect, useRef, useState } from "react";
import dynamic from "next/dynamic";
import { motion, useMotionValue, useTransform, type MotionValue } from "framer-motion";
import gsap from "gsap";
@@ -83,6 +83,8 @@ export default function StrategySection({ connected = false }: { connected?: boo
const [pinState, setPinState] = useState<"before" | "pinned" | "after">("before");
const [active, setActive] = useState(0);
const [mountScene, setMountScene] = useState(false);
const [sceneReady, setSceneReady] = useState(false);
const [showLoader, setShowLoader] = useState(true);
const [sceneActive, setSceneActive] = useState(false);
const [isMobile, setIsMobile] = useState(false);
const [reduced, setReduced] = useState(false);
@@ -161,8 +163,30 @@ export default function StrategySection({ connected = false }: { connected?: boo
<div className="dm-st-sticky">
<div className="dm-st-card">
{mountScene && (
<div className="dm-st-canvas">
<StrategyCanvas progress={progressRef} reduced={reduced} isMobile={isMobile} active={sceneActive && pinState === "pinned"} stage={active} />
<div className={`dm-st-canvas${sceneReady ? " is-ready" : ""}`} aria-hidden={!sceneReady}>
<StrategyCanvas
progress={progressRef}
reduced={reduced}
isMobile={isMobile}
active={sceneActive && pinState === "pinned"}
stage={active}
ready={sceneReady}
onReady={() => setSceneReady(true)}
/>
</div>
)}
{showLoader && (
<div
className={`dm-st-loader${sceneReady ? " is-hiding" : ""}`}
role="status"
aria-live="polite"
aria-label="Loading MileTruth Strategy Engine"
onTransitionEnd={(e) => {
if (e.propertyName === "opacity" && sceneReady) setShowLoader(false);
}}
>
<span className="dm-st-loader__ring" />
</div>
)}
@@ -170,7 +194,7 @@ export default function StrategySection({ connected = false }: { connected?: boo
can never be seen during the approach ("before"), where the sticky sits
at the top of the tall section near the previous workflow's seam. */}
{pinState !== "before" && (
<div className="dm-st-ui">
<div className={`dm-st-ui${sceneReady ? " is-ready" : ""}`} aria-hidden={!sceneReady}>
{/* Persistent header */}
<motion.div className="dm-st-top" style={{ opacity: headerOpacity }}>
<div className="dm-st-eyebrow"><span className="dm-st-dot" /> MileTruth Strategy Engine</div>
@@ -285,11 +309,28 @@ const styles = `
}
}
.dm-st-canvas { position: absolute; inset: 0; z-index: 1; }
.dm-st-canvas { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden;
transition: opacity 0.42s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.42s; }
.dm-st-canvas.is-ready { opacity: 1; visibility: visible; transition-delay: 0s; }
.dm-st-canvas canvas { display: block; }
.dm-st-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none;
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; color: #0f172a; }
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; color: #0f172a;
opacity: 0; visibility: hidden;
transition: opacity 0.42s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.42s; }
.dm-st-ui.is-ready { opacity: 1; visibility: visible; transition-delay: 0s; }
.dm-st-loader { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center;
background: transparent; opacity: 1; pointer-events: none;
animation: dmStLoaderFadeIn 0.2s ease both;
transition: opacity 0.3s ease; }
.dm-st-loader.is-hiding { opacity: 0; pointer-events: none; }
.dm-st-loader__ring { width: 18px; height: 18px; border-radius: 50%;
border: 2px solid rgba(255,255,255,0.48); border-top-color: #ffffff;
box-shadow: 0 8px 22px rgba(15,23,42,0.14);
animation: dm-hiw-spin 0.8s linear infinite; }
@keyframes dmStLoaderFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dm-hiw-spin { to { transform: rotate(360deg); } }
/* ---- Persistent header: title + 5-stage rail ---- */
.dm-st-top { position: absolute; top: clamp(96px, 13vh, 128px); left: 0; right: 0; z-index: 5;