+ );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index ab4aa19..366502e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -10,6 +10,76 @@ html {
scroll-behavior: smooth;
}
+/* ============================================================
+ GLOBAL SPACING SYSTEM
+ A single shared vertical-rhythm scale so every section uses
+ consistent top/bottom spacing instead of ad-hoc values.
+ Fluid (clamp) so it scales down gracefully on small screens.
+ --space-section → standard section (≈80px)
+ --space-section-lg → large/feature section (≈100px)
+ --space-hero-gap → gap from hero to the first section below
+ Apply via .dm-section / .dm-section-lg, or reference the vars
+ directly in component styles.
+ ============================================================ */
+:root {
+ --space-section: clamp(40px, 5vw, 64px);
+ --space-section-lg: clamp(52px, 6vw, 80px);
+ --space-hero-gap: clamp(36px, 4.5vw, 64px);
+}
+
+.dm-section {
+ padding-top: var(--space-section) !important;
+ padding-bottom: var(--space-section) !important;
+}
+
+.dm-section-lg {
+ padding-top: var(--space-section-lg) !important;
+ padding-bottom: var(--space-section-lg) !important;
+}
+
+/* ------------------------------------------------------------
+ Hero → first-section gap fixes
+ The "Doormile Way" container (.elementor-element-88745f4) carries a
+ 150px top margin from the shared Elementor kit (intended as mid-page
+ spacing on Home, where it sits deep in the stack). On the About page
+ it is the FIRST section under the hero, so that 150px reads as an
+ oversized empty gap. Scope the reduction to the About page only
+ (.elementor-86) so Home's mid-page rhythm is untouched.
+ ------------------------------------------------------------ */
+.elementor-86 .elementor-element.elementor-element-88745f4 {
+ margin-top: var(--space-hero-gap) !important;
+}
+
+/* ------------------------------------------------------------
+ HOME PAGE — unified section rhythm
+ The shared Elementor kit stamps several stacked sections with a
+ 150px top margin. On Home that makes "The Problem", the marquee,
+ "Connected Logistics" and "The Doormile Way" float far below the
+ section above them, while Stats and the EV card sit tight — an
+ uneven, broken rhythm. Normalize EVERY post-hero section to one
+ consistent gap so the page reads Hero ↓ Section ↓ Section evenly.
+
+ Scoped to `.elementor.elementor-61` — the Home page root uniquely
+ carries BOTH classes, so this never leaks onto other pages that
+ reuse these components (e.g. The Doormile Way on About-us, whose
+ root is `.elementor.elementor-86`).
+
+ Hero (741f56c) and the Stats band (9b26234) directly beneath it are
+ intentionally left tight and untouched.
+ ------------------------------------------------------------ */
+/* Sections, in render order: 30fd9d1 The Problem · b62c0b3 Marquee ·
+ 89a0ca1 Connected Logistics · 88745f4 The Doormile Way · bbc6760 EV ·
+ 3b4a7cc Industry Solutions. */
+.elementor.elementor-61 .elementor-element.elementor-element-30fd9d1,
+.elementor.elementor-61 .elementor-element.elementor-element-b62c0b3,
+.elementor.elementor-61 .elementor-element.elementor-element-89a0ca1,
+.elementor.elementor-61 .elementor-element.elementor-element-88745f4,
+.elementor.elementor-61 .elementor-element.elementor-element-bbc6760,
+.elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc {
+ margin-top: var(--space-section) !important;
+ margin-bottom: 0 !important;
+}
+
/* Lenis global smooth scroll (src/animations/SmoothScroll.tsx). These classes are
only present on routes/devices where Lenis is active; on touch devices and with
prefers-reduced-motion Lenis is off and native scroll-behavior:smooth (above) applies. */
@@ -87,12 +157,15 @@ body {
#masthead .elementor-element.elementor-element-0b7bf6f .header-menu-container .main-menu > li > a {
padding-top: 15px !important;
padding-bottom: 16px !important;
+ padding-left: 14px !important;
+ padding-right: 14px !important;
font-size: 15px !important;
line-height: 1.2 !important;
+ white-space: nowrap !important;
}
#masthead .header-menu-container .main-menu {
- gap: 18px !important;
+ gap: 8px !important;
}
#masthead .elementor-element.elementor-element-cabdb09 a.header-button {
@@ -450,8 +523,8 @@ body {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
- width: 90%;
- margin: 30px auto;
+ width: 100%;
+ margin: 30px 0 0;
}
@media (max-width: 1024px) {
@@ -579,12 +652,17 @@ body {
transform: translateY(10px);
}
+/* Default card title — single typography token shared by every card (FMCG,
+ Pharmaceutical, Enterprise & B2B). FMCG is the reference: small, clean,
+ bottom-left, consistent weight. Kept compact so longer labels read at the
+ same size/weight as FMCG instead of looking heavier. */
.industry-card-default-title {
color: #ffffff !important;
- font-size: 28px !important;
+ font-size: 22px !important;
font-weight: 700 !important;
+ line-height: 1.2 !important;
margin: 0 !important;
- letter-spacing: -0.5px !important;
+ letter-spacing: -0.3px !important;
text-transform: none !important;
font-family: var(--font-manrope), 'Manrope', system-ui, -apple-system, sans-serif !important;
}
@@ -730,9 +808,27 @@ body {
letter-spacing: -0.5px !important;
}
-.elementor-element-3b4a7cc > .e-con-inner {
+/* Industry Solutions: match the Meet Crew (OurTeam) container EXACTLY. The
+ e-con-boxed inner otherwise spans edge-to-edge because the vendor
+ "display: var(--display)" resolves to the invalid `inline` fallback, so its
+ max-width is ignored. The previous rule here only set padding (never
+ max-width / margin / display), which is why the divider line stretched almost
+ full-viewport and the heading hugged the left edge. Force flex and pin the
+ inner to the shared 1480px inset so the label divider, heading and card grid
+ all share the same left/right edges as the rest of the page. */
+.elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc {
+ display: flex;
+}
+.elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc > .e-con-inner {
+ display: flex;
+ flex-direction: column;
+ max-width: 1480px;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
padding-left: clamp(20px, 4vw, 50px) !important;
padding-right: clamp(20px, 4vw, 50px) !important;
+ box-sizing: border-box;
}
/* Custom premium animations keyframes */
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e1eb02e..6ca44fb 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -45,7 +45,7 @@ const inter = Inter({
});
export const metadata: Metadata = {
- title: "Doormile — Last-Mile Logistics Intelligence",
+ title: "Doormile — Delivering Trust. Beyond Boundaries",
description: "Doormile powers last-mile logistics with MileTruth™ AI, providing connected miles, SLA protection, and carrier management.",
icons: {
icon: "/images/cropped-image-2.png",
@@ -71,19 +71,13 @@ export default function RootLayout({
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
/>
- {/* Load WordPress & Elementor compiled styles from public folder */}
-
-
-
-
-
-
-
-
-
-
-
-
+ {/*
+ Consolidated site styles. Generated by `npm run build:css`
+ (scripts/build-css.sh): the legacy WordPress/Elementor vendor CSS is
+ concatenated in cascade order and purged of unused selectors via
+ purgecss.config.cjs. ~2.86 MB of vendor CSS -> ~560 KB, one request.
+ */}
+
{/*
Production DOM (index.php + header.php):
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 060276d..7ff57ef 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,7 +10,7 @@ import EVSection from "@/components/sections/EVSection";
import IndustrySolutions from "@/components/sections/IndustrySolutions";
export const metadata: Metadata = {
- title: "Doormile — Last-Mile Logistics Intelligence",
+ title: "Doormile — Delivering Trust. Beyond Boundaries",
description:
"Doormile helps logistics companies track every mile with MileTruth™ AI. Real-time SLA protection and connected miles visibility.",
};
diff --git a/src/app/privacy-policy/page.tsx b/src/app/privacy-policy/page.tsx
new file mode 100644
index 0000000..ea5eac8
--- /dev/null
+++ b/src/app/privacy-policy/page.tsx
@@ -0,0 +1,146 @@
+import React from "react";
+import type { Metadata } from "next";
+import LegalDocument, { ContactLink, type LegalSection } from "@/components/sections/LegalDocument";
+
+export const metadata: Metadata = {
+ title: "Privacy Policy – Doormile",
+ description:
+ "How Doormile collects, uses, stores, and protects your information when you visit our website, interact with our services, or communicate with us.",
+};
+
+const sections: LegalSection[] = [
+ {
+ heading: "Information We Collect",
+ blocks: [
+ { type: "p", text: "We may collect the following information:" },
+ {
+ type: "ul",
+ items: [
+ "Full name",
+ "Email address",
+ "Phone number",
+ "Company name",
+ "Job title",
+ "Information submitted through contact forms",
+ "Service inquiry details",
+ "Website usage data and analytics",
+ "Browser, device, and IP information",
+ ],
+ },
+ ],
+ },
+ {
+ heading: "How We Use Your Information",
+ blocks: [
+ { type: "p", text: "We use your information to:" },
+ {
+ type: "ul",
+ items: [
+ "Respond to inquiries and support requests",
+ "Provide information about our services",
+ "Improve website performance and user experience",
+ "Analyze usage trends and platform effectiveness",
+ "Maintain security and prevent unauthorized access",
+ "Communicate service updates and business information",
+ "Comply with legal and regulatory requirements",
+ ],
+ },
+ ],
+ },
+ {
+ heading: "Information Sharing",
+ blocks: [
+ {
+ type: "p",
+ text: "Doormile does not sell, rent, or trade personal information. Information may be shared with trusted service providers that assist with website hosting, analytics, communications, and operational support, subject to appropriate confidentiality and security obligations.",
+ },
+ ],
+ },
+ {
+ heading: "Data Security",
+ blocks: [
+ {
+ type: "p",
+ text: "We implement industry-standard administrative, technical, and organizational safeguards designed to protect personal information from unauthorized access, disclosure, alteration, or destruction.",
+ },
+ ],
+ },
+ {
+ heading: "Data Retention",
+ blocks: [
+ {
+ type: "p",
+ text: "We retain information only for as long as necessary to fulfill the purposes described in this policy, comply with legal obligations, resolve disputes, and enforce agreements.",
+ },
+ ],
+ },
+ {
+ heading: "Cookies and Tracking Technologies",
+ blocks: [
+ {
+ type: "p",
+ text: "We use cookies and similar technologies to improve website functionality, measure performance, understand user behavior, and enhance user experience.",
+ },
+ ],
+ },
+ {
+ heading: "Your Rights",
+ blocks: [
+ { type: "p", text: "Depending on applicable laws, you may have the right to:" },
+ {
+ type: "ul",
+ items: [
+ "Access your personal information",
+ "Request correction of inaccurate data",
+ "Request deletion of personal information",
+ "Restrict or object to certain processing activities",
+ "Withdraw consent where applicable",
+ ],
+ },
+ ],
+ },
+ {
+ heading: "Third-Party Links",
+ blocks: [
+ {
+ type: "p",
+ text: "Our website may contain links to third-party websites. We are not responsible for the privacy practices or content of external websites.",
+ },
+ ],
+ },
+ {
+ heading: "Policy Updates",
+ blocks: [
+ {
+ type: "p",
+ text: "We may update this Privacy Policy periodically. Any changes will be posted on this page with a revised effective date.",
+ },
+ ],
+ },
+ {
+ heading: "Contact Us",
+ blocks: [
+ {
+ type: "p",
+ text: <>For privacy-related questions or requests, please contact us through our .,
+ },
+ ],
+ },
+];
+
+export default function PrivacyPolicyPage() {
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/terms-of-service/page.tsx b/src/app/terms-of-service/page.tsx
new file mode 100644
index 0000000..e652c95
--- /dev/null
+++ b/src/app/terms-of-service/page.tsx
@@ -0,0 +1,140 @@
+import React from "react";
+import type { Metadata } from "next";
+import LegalDocument, { ContactLink, type LegalSection } from "@/components/sections/LegalDocument";
+
+export const metadata: Metadata = {
+ title: "Terms of Service – Doormile",
+ description:
+ "The Terms of Service governing your access to and use of the Doormile website and related services.",
+};
+
+const sections: LegalSection[] = [
+ {
+ heading: "Acceptance of Terms",
+ blocks: [
+ {
+ type: "p",
+ text: "By accessing this website, you acknowledge that you have read, understood, and agreed to these Terms of Service and all applicable laws and regulations.",
+ },
+ ],
+ },
+ {
+ heading: "Permitted Use",
+ blocks: [
+ {
+ type: "p",
+ text: "You agree to use the website and services only for lawful purposes and in accordance with these terms.",
+ },
+ { type: "p", text: "You agree not to:" },
+ {
+ type: "ul",
+ items: [
+ "Violate applicable laws or regulations",
+ "Attempt unauthorized access to systems or networks",
+ "Interfere with website functionality or security",
+ "Distribute malicious software or harmful code",
+ "Misrepresent your identity or organization",
+ "Use website content without authorization",
+ ],
+ },
+ ],
+ },
+ {
+ heading: "Intellectual Property Rights",
+ blocks: [
+ {
+ type: "p",
+ text: "All content, technology, software, graphics, trademarks, logos, text, designs, and other materials available on this website are the property of Doormile or its licensors and are protected by applicable intellectual property laws.",
+ },
+ ],
+ },
+ {
+ heading: "User Submissions",
+ blocks: [
+ {
+ type: "p",
+ text: "Any information submitted through forms, inquiries, or communications must be accurate and lawful. Users are responsible for the content they submit.",
+ },
+ ],
+ },
+ {
+ heading: "Service Availability",
+ blocks: [
+ {
+ type: "p",
+ text: "While we strive to maintain uninterrupted access, we do not guarantee that the website or services will always be available, secure, or error-free.",
+ },
+ ],
+ },
+ {
+ heading: "Disclaimer of Warranties",
+ blocks: [
+ {
+ type: "p",
+ text: 'The website and services are provided on an "as is" and "as available" basis without warranties of any kind, whether express or implied.',
+ },
+ ],
+ },
+ {
+ heading: "Limitation of Liability",
+ blocks: [
+ {
+ type: "p",
+ text: "To the maximum extent permitted by law, Doormile shall not be liable for any indirect, incidental, special, consequential, or punitive damages arising from or related to the use of the website or services.",
+ },
+ ],
+ },
+ {
+ heading: "Indemnification",
+ blocks: [
+ {
+ type: "p",
+ text: "Users agree to indemnify and hold harmless Doormile, its employees, partners, and affiliates from claims arising from misuse of the website or violation of these terms.",
+ },
+ ],
+ },
+ {
+ heading: "Modifications",
+ blocks: [
+ {
+ type: "p",
+ text: "We reserve the right to update or modify these Terms of Service at any time. Continued use of the website following updates constitutes acceptance of the revised terms.",
+ },
+ ],
+ },
+ {
+ heading: "Governing Law",
+ blocks: [
+ {
+ type: "p",
+ text: "These Terms shall be governed by and interpreted in accordance with applicable laws and regulations in the jurisdictions where Doormile conducts business.",
+ },
+ ],
+ },
+ {
+ heading: "Contact Us",
+ blocks: [
+ {
+ type: "p",
+ text: <>Questions regarding these Terms of Service may be submitted through our .,
+ },
+ ],
+ },
+];
+
+export default function TermsOfServicePage() {
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/layout/BodyOverlay.tsx b/src/components/layout/BodyOverlay.tsx
index ce1827d..1886b25 100644
--- a/src/components/layout/BodyOverlay.tsx
+++ b/src/components/layout/BodyOverlay.tsx
@@ -5,7 +5,7 @@ import { useHeaderUI } from "./HeaderUIProvider";
/**
* Production: `` is a direct child of body
* (rendered by both index.php line 6 and header.php line 5 — production has two; we render one).
- * CSS (in vendor-theme-core.css and elementor-frontend-inline-css.css) styles it as fixed-position fullscreen overlay.
+ * CSS (consolidated into /public/css/site.css) styles it as fixed-position fullscreen overlay.
*/
export default function BodyOverlay() {
const { isMenuOpen, isSidebarOpen, closeAll } = useHeaderUI();
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 012c97d..58c8384 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -527,6 +527,16 @@ export default function Header() {
opacity: 1 !important;
}
+ #masthead .header-menu-container .main-menu > li.active > a {
+ color: #ffffff !important;
+ }
+
+ #masthead .header-menu-container .main-menu > li > a:focus,
+ #masthead .header-menu-container .main-menu > li > a:focus-visible {
+ outline: none !important;
+ box-shadow: none !important;
+ }
+
/* Responsive logo adjustment on mobile/tablet */
@media (max-width: 1024px) {
#masthead .elementor-element.elementor-element-846e53d .hfe-site-logo .hfe-site-logo-container img {
diff --git a/src/components/logisticsbrain/LogisticsBrainSection.tsx b/src/components/logisticsbrain/LogisticsBrainSection.tsx
index fe2f129..c9f9f0d 100644
--- a/src/components/logisticsbrain/LogisticsBrainSection.tsx
+++ b/src/components/logisticsbrain/LogisticsBrainSection.tsx
@@ -5,7 +5,7 @@ import dynamic from "next/dynamic";
import { motion, useMotionValue, useTransform, type MotionValue } from "framer-motion";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
-import { P, STRATEGIES, ENGINE_STEPS, CONSTRAINT_LIST, STRATEGY_SCORES } from "./theme";
+import { P, STRATEGIES, WINNER_INDEX, ENGINE_STEPS, CONSTRAINT_LIST, STRATEGY_SCORES } from "./theme";
const LogisticsBrainCanvas = dynamic(() => import("./LogisticsBrainCanvas"), { ssr: false });
@@ -53,12 +53,21 @@ function StepRail({ active }: { active: number }) {
);
}
-/** One cross-fading workflow card pinned to the lower-left. */
+/**
+ * One workflow card that travels through the story. The outer anchor pins it to
+ * its stage position (Left / Center / Right / Center-Hero); the inner motion card
+ * slides + scales into that anchor in lockstep with scroll, so as the camera moves
+ * through the stages the card visibly moves with the narrative instead of sitting
+ * fixed in one corner.
+ */
function StoryCard({
step,
index,
+ pos,
opacity,
y,
+ x,
+ scale,
num,
kicker,
title,
@@ -66,8 +75,11 @@ function StoryCard({
}: {
step: number;
index: number;
+ pos: "left" | "center" | "right" | "hero";
opacity: MotionValue;
y: MotionValue;
+ x: MotionValue;
+ scale: MotionValue;
num: string;
kicker: string;
title: string;
@@ -76,14 +88,16 @@ function StoryCard({
// Don't mount this beat's card until its step is active.
if (step !== index) return null;
return (
-
-
- {num}
- {kicker}
-
-
{title}
- {children}
-
+
+
+
+ {num}
+ {kicker}
+
+
{title}
+ {children}
+
+
);
}
@@ -182,6 +196,22 @@ export default function LogisticsBrainSection({ connected = false }: { connected
const p5o = useTransform(scroll, [0.75, 0.78, 0.855, 0.875], [0, 1, 1, 0]);
const p5y = useTransform(scroll, [0.75, 0.79], [26, 0]);
+ // Horizontal slide + scale per beat — same windows as the opacity above, so the
+ // card glides between its stage anchors (Left → Center → Right → Left → Center-Hero)
+ // in lockstep with the camera. Each card enters from the direction of the previous
+ // stage and drifts toward the next as it leaves, reading as one continuous travel.
+ const p1x = useTransform(scroll, [0.135, 0.165, 0.255, 0.275], [-52, 0, 0, 52]);
+ const p1s = useTransform(scroll, [0.135, 0.165, 0.255, 0.275], [0.965, 1, 1, 0.965]);
+ const p2x = useTransform(scroll, [0.29, 0.32, 0.415, 0.435], [-52, 0, 0, 52]);
+ const p2s = useTransform(scroll, [0.29, 0.32, 0.415, 0.435], [0.965, 1, 1, 0.965]);
+ const p3x = useTransform(scroll, [0.45, 0.48, 0.575, 0.595], [-52, 0, 0, -52]);
+ const p3s = useTransform(scroll, [0.45, 0.48, 0.575, 0.595], [0.965, 1, 1, 0.965]);
+ const p4x = useTransform(scroll, [0.61, 0.64, 0.715, 0.735], [52, 0, 0, 52]);
+ const p4s = useTransform(scroll, [0.61, 0.64, 0.715, 0.735], [0.965, 1, 1, 0.965]);
+ // Hero (final selection): scales up a touch and holds center as it settles.
+ const p5x = useTransform(scroll, [0.75, 0.78, 0.855, 0.875], [-52, 0, 0, 0]);
+ const p5s = useTransform(scroll, [0.75, 0.78, 0.855, 0.875], [0.97, 1.05, 1.05, 1.0]);
+
const finaleOpacity = useTransform(scroll, [P.finale - 0.02, P.finale + 0.04], [0, 1]);
const finaleY = useTransform(scroll, [P.finale - 0.02, P.finale + 0.06], [40, 0]);
const taglineOpacity = useTransform(scroll, [P.finale + 0.04, P.finale + 0.1], [0, 1]);
@@ -217,18 +247,18 @@ export default function LogisticsBrainSection({ connected = false }: { connected
↓
- {/* STEP 01 — Generate Routes */}
-
+ {/* STEP 01 — Generate Routes (card anchored LEFT) */}
+