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

update blog page issue

Browse Source
This commit is contained in:
Aravind R
2026-06-12 14:55:29 +05:30
parent f412b9f71e
commit ba34c80761
16 changed files with 405 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/blog/[slug]/page.tsx
View File

@@ -7,7 +7,7 @@ import { getPostBySlug, getAllSlugs, SITE_URL } from "@/data/blog";
type Params = { slug: string };
// Required for `output: "export"` — prerender every post at build time.
// Required for `output: "export"`: prerender every post at build time.
export function generateStaticParams(): Params[] {
return getAllSlugs().map((slug) => ({ slug }));
}

2
src/app/blog/page.tsx
View File

@@ -4,7 +4,7 @@ import BlogGrid from "@/components/sections/BlogGrid";
export const metadata = {
title: "Blog – Doormile",
description: "Insights and logistics intelligence from the team behind Doormile. Learn how AI is transforming EV planning and last-mile operations.",
description: "Practical notes on delivery planning, EV fleet operations, route optimisation, charging, and last-mile performance from the Doormile team.",
};
export default function BlogPage() {

8
src/app/layout.tsx
View File

@@ -78,6 +78,12 @@ export default function RootLayout({
purgecss.config.cjs. ~2.86 MB of vendor CSS -> ~560 KB, one request.
*/}
<link rel="stylesheet" href="/css/site.css" />
<link rel="preload" as="image" href="/images/home-bg-1.png" />
<link rel="preload" as="image" href="/images/about-bg.png" />
<link rel="preload" as="image" href="/images/home2-banner-3.jpg" />
<link rel="preload" as="image" href="/images/home1-slide-1.png" />
<link rel="preload" as="image" href="/images/home2-banner-1.jpg" />
<link rel="preload" as="image" href="/images/miletruth-bg.png" />
</head>
{/*
Production DOM (index.php + header.php):
@@ -90,7 +96,7 @@ export default function RootLayout({
│ └─ footer
SSR ships body with shared WP/Elementor classes; BodyClasses (client) refines per route.
*/}
<body className={SHARED_BODY_CLASSES}>
<body className={SHARED_BODY_CLASSES} suppressHydrationWarning>
<BodyClasses />
<LoadingScreen />
<AnimationProvider>

2
src/components/blog/BlogSearch.tsx
View File

@@ -6,7 +6,7 @@ import { blogPosts } from "@/data/blog";
/**
* Client-side blog search. The site is a static export, so there is no search
* server — we filter the known posts in the browser and link straight to the
* server. We filter the known posts in the browser and link straight to the
* matching /blog/[slug] routes.
*/
export default function BlogSearch() {

6
src/components/blog/BlogSidebar.tsx
View File

@@ -72,10 +72,10 @@ export default function BlogSidebar({ current }: { current?: BlogPost }) {
{/* CTA Card */}
<section className="dm-blog-widget dm-blog-cta-card">
<h2 className="dm-blog-cta-title">Ready to optimise your fleet?</h2>
<h2 className="dm-blog-cta-title">Planning delivery routes?</h2>
<p className="dm-blog-cta-text">
See how MileTruth™ AI cuts distance, vehicles and emissions — without
missing an SLA.
Talk to us about reducing wasted distance, missed windows, and avoidable
vehicle time.
</p>
<Link href="/contact" className="dm-blog-cta-btn">
Contact Us

10
src/components/layout/Footer.tsx
View File

@@ -216,14 +216,14 @@ export default function Footer() {
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
</svg>
<span>Social network</span>
<span>Social</span>
</div>
</div>
</div>
<div className="elementor-element elementor-element-a6bccba elementor-shape-square elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="a6bccba" data-element_type="widget" data-e-type="widget" data-widget_type="social-icons.default">
<div className="elementor-widget-container">
<div className="elementor-social-icons-wrapper elementor-grid" role="list" style={socialIconSpacing}>
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
{/* <span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
<a className="elementor-icon elementor-social-icon elementor-social-icon-facebook-f elementor-repeater-item-3fbe893" href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">
<span className="elementor-screen-only">Facebook</span>
<svg aria-hidden="true" className="e-font-icon-svg e-fab-facebook-f" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg">
@@ -238,7 +238,7 @@ export default function Footer() {
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
</svg>
</a>
</span>
</span> */}
<span className="elementor-grid-item" role="listitem"style={{padding:"0 15px"}}>
<a className="elementor-icon elementor-social-icon elementor-social-icon-linkedin-in elementor-repeater-item-38e1bcc" href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer">
<span className="elementor-screen-only">LinkedIn</span>
@@ -403,7 +403,7 @@ export default function Footer() {
<div className="elementor-element elementor-element-e4e6486 elementor-shape-square elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="e4e6486" data-element_type="widget" data-e-type="widget" data-widget_type="social-icons.default">
<div className="elementor-widget-container">
<div className="elementor-social-icons-wrapper elementor-grid" role="list" style={socialIconSpacing}>
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
{/* <span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
<a className="elementor-icon elementor-social-icon elementor-social-icon-facebook-f" href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">
<span className="elementor-screen-only">Facebook</span>
<svg aria-hidden="true" className="e-font-icon-svg e-fab-facebook-f" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg">
@@ -418,7 +418,7 @@ export default function Footer() {
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
</svg>
</a>
</span>
</span> */}
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
<a className="elementor-icon elementor-social-icon elementor-social-icon-linkedin-in" href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer">
<span className="elementor-screen-only">LinkedIn</span>

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

@@ -1,7 +1,6 @@
"use client";
import { useEffect, useRef, useState } from "react";
import { usePathname } from "next/navigation";
import Image from "next/image";
/**
@@ -10,21 +9,20 @@ import Image from "next/image";
* Native reimplementation of the legacy WordPress page-loader: a black
* full-screen overlay with a centered, pulsing Doormile logo that fades out.
*
* Shows on initial load (until the window finishes loading, min ~450ms to avoid
* a flash, capped at 2.5s so it never blocks) and again briefly on each route
* navigation. CWV-safe: fixed/out-of-flow (no layout shift), logo is priority,
* and it never delays hydration.
* Shows only on initial application boot (until the window finishes loading,
* min ~450ms to avoid a flash, capped at 2.5s so it never blocks). It must not
* reappear during client-side route transitions: Next keeps the current page
* visible while the next route payload is prepared, and a global overlay here
* would create an artificial black flash between otherwise-ready pages.
*/
type Phase = "visible" | "hiding" | "gone";
const MIN_SHOW_MS = 450;
const MAX_SHOW_MS = 2500;
const NAV_SHOW_MS = 520;
export default function LoadingScreen() {
const pathname = usePathname();
const [phase, setPhase] = useState<Phase>("visible");
const isFirstRender = useRef(true);
const bootComplete = useRef(false);
// Initial load: hide once the page is ready.
useEffect(() => {
@@ -33,7 +31,7 @@ export default function LoadingScreen() {
let fadeTimer: ReturnType<typeof setTimeout>;
const begin = () => {
if (began) return;
if (began || bootComplete.current) return;
began = true;
const wait = Math.max(0, MIN_SHOW_MS - (performance.now() - start));
fadeTimer = setTimeout(() => setPhase("hiding"), wait);
@@ -52,17 +50,6 @@ export default function LoadingScreen() {
};
}, []);
// Route navigations: flash the loader briefly for an app-like transition.
useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
return;
}
setPhase("visible");
const t = setTimeout(() => setPhase("hiding"), NAV_SHOW_MS);
return () => clearTimeout(t);
}, [pathname]);
if (phase === "gone") return null;
return (
@@ -72,7 +59,10 @@ export default function LoadingScreen() {
aria-live="polite"
aria-label="Loading"
onTransitionEnd={(e) => {
if (e.propertyName === "opacity" && phase === "hiding") setPhase("gone");
if (e.propertyName === "opacity" && phase === "hiding") {
bootComplete.current = true;
setPhase("gone");
}
}}
>
<div className="dm-loader__pulse">

176
src/components/map/OfficeMap.module.css
View File

@@ -1,16 +1,11 @@
/* ===========================================================================
Office satellite map — scoped styles.
All Leaflet global classes are namespaced under `.root` via :global() so this
module cannot leak into the rest of the app and vice-versa.
Colours/radii reference the app's theme (dark surface, #C01227 brand red).
The map fills its container 100% — no hard-coded layout values live here.
=========================================================================== */
.root {
position: relative;
width: 100%;
height: 100%;
/* inherit the host container's rounded corners so tiles/controls clip cleanly */
border-radius: inherit;
overflow: hidden;
background: #0b0b0b;
@@ -34,10 +29,6 @@
.controls {
position: absolute;
top: 14px;
/* Span the full width (with side insets) instead of left:50%+auto-width:
an absolutely-positioned auto-width box anchored at left:50% can only grow
to 50% of the map, which on a narrow phone forced the city buttons to stack
vertically. With left/right insets the row uses the full width and centres. */
left: 12px;
right: 12px;
z-index: 600; /* above tiles + markers; popups open lower so they never collide */
@@ -47,6 +38,7 @@
gap: 8px;
pointer-events: none; /* let the row be transparent to drags; buttons re-enable */
}
.controlBtn {
pointer-events: auto;
appearance: none;
@@ -68,15 +60,18 @@
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.controlBtn:hover {
background: rgba(192, 18, 39, 0.9);
border-color: #c01227;
transform: translateY(-1px);
}
.controlBtn:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
.controlBtnActive,
.controlBtnActive:hover {
background: #c01227;
@@ -90,6 +85,7 @@
border-color: rgba(192, 18, 39, 0.55);
box-shadow: 0 0 0 1px rgba(192, 18, 39, 0.25), 0 4px 14px rgba(192, 18, 39, 0.2);
}
.controlBtnHq.controlBtnActive {
box-shadow: 0 6px 20px rgba(192, 18, 39, 0.55);
}
@@ -98,8 +94,6 @@
.controls {
top: 12px;
gap: 5px;
/* Keep all three city buttons on a single line — shrink them (below) so the
row fits instead of wrapping to two lines on narrow phones. */
flex-wrap: nowrap;
}
.controlBtn {
@@ -110,12 +104,12 @@
/* ---- Branded marker pin ---- */
.markerIcon {
/* divIcon resets — keep only the pin's own drop shadow */
background: transparent;
border: 0;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.markerIcon:hover,
.markerIcon:focus-visible {
transform: translateY(-3px) scale(1.06);
@@ -125,15 +119,16 @@
.markerIconHq {
background: transparent;
border: 0;
/* red glow + grounding shadow */
filter: drop-shadow(0 0 9px rgba(192, 18, 39, 0.85))
drop-shadow(0 5px 7px rgba(0, 0, 0, 0.55));
transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.markerIconHq svg {
position: relative;
z-index: 2;
}
.markerIconHq:hover,
.markerIconHq:focus-visible {
transform: translateY(-3px) scale(1.05);
@@ -153,6 +148,7 @@
pointer-events: none;
animation: hqPulse 2.2s ease-out infinite;
}
@keyframes hqPulse {
0% {
transform: scale(0.6);
@@ -168,26 +164,28 @@
}
}
/* ---- Themed Leaflet internals (scoped to this map only) ---- */
/* ---- Leaflet Branded Elements ---- */
.root :global(.leaflet-container) {
background: #0b0b0b;
}
/* Zoom + attribution controls — dark, on-theme */
.root :global(.leaflet-bar) {
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.root :global(.leaflet-bar a) {
background: rgba(15, 15, 17, 0.92);
color: #f5f5f5;
border-bottom-color: rgba(255, 255, 255, 0.12);
transition: background-color 0.2s ease, color 0.2s ease;
}
.root :global(.leaflet-bar a:hover) {
background: #c01227;
color: #ffffff;
}
.root :global(.leaflet-bar a:focus-visible) {
outline: 2px solid #c01227;
outline-offset: 2px;
@@ -202,51 +200,122 @@
border-radius: 6px 0 0 0;
padding: 2px 8px;
}
.root :global(.leaflet-control-attribution a) {
color: rgba(255, 255, 255, 0.85);
}
/* Popup — dark card matching the app surfaces */
.root :global(.leaflet-popup-content-wrapper) {
background: #141416;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.root :global(.leaflet-popup-content-wrapper) {
border-radius: 10px;
}
.root :global(.leaflet-popup-content) {
margin: 0;
font-size: 13px;
line-height: 1.4;
}
.root :global(.leaflet-popup-tip) {
background: #141416;
border: 1px solid rgba(255, 255, 255, 0.1);
/* ---- Floating Popup overlays ---- */
.root :global(.leaflet-popup) {
animation: popupFade 0.2s ease-out forwards;
}
/* ---- Compact, Google-Maps-style tooltip content ---- */
.tip {
.root :global(.leaflet-popup-content-wrapper) {
background: #0f0f11;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px; /* Clean business card rounded corners */
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
overflow: hidden;
padding: 0;
animation: popupScale 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
transform-origin: bottom center;
}
.root :global(.leaflet-popup-content) {
margin: 0 !important;
width: auto !important;
height: auto !important;
}
.root :global(.leaflet-popup-tip) {
background: #0f0f11;
border: 1px solid rgba(255, 255, 255, 0.08);
}
@keyframes popupFade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes popupScale {
from { transform: scale(0.92); }
to { transform: scale(1); }
}
/* Compact Details Card inside Popup */
.card {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 12px;
min-width: 120px;
max-width: 200px;
text-align: left;
padding: 12px 16px;
min-width: 230px;
max-width: 280px;
box-sizing: border-box;
font-family: var(--font-manrope), system-ui, -apple-system, sans-serif;
}
.tipTitle {
font-size: 13px;
font-weight: 800;
letter-spacing: -0.01em;
color: #ffffff;
white-space: nowrap;
border-top: 2px solid #c01227; /* Thinner brand accent line */
background: #0f0f11;
height: auto;
}
/* ---- Loading skeleton (prevents CLS — fills the fixed-height host) ---- */
.cardHeader {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-bottom: 6px;
}
.cardIcon {
font-size: 15px;
display: inline-flex;
align-items: center;
}
.cardTitle {
font-size: 17px !important;
font-weight: 800 !important;
color: #ffffff !important; /* Force white header text */
margin: 0 !important;
letter-spacing: -0.01em !important;
}
.cardBody {
display: flex;
flex-direction: column;
gap: 4px;
}
.addressLine {
font-size: 14px !important;
line-height: 1.5 !important;
color: rgba(255, 255, 255, 0.75) !important;
margin: 0 0 6px 0 !important;
padding: 0 !important;
font-weight: 500 !important;
}
.addressLine:last-child {
margin-bottom: 0 !important;
}
@media (max-width: 480px) {
.card {
padding: 9px 12px;
min-width: 200px;
max-width: 230px;
}
.cardTitle {
font-size: 14px !important;
}
.addressLine {
font-size: 12px !important;
margin-bottom: 3px !important;
line-height: 1.4 !important;
}
}
/* ---- Loading skeleton ---- */
.skeleton {
width: 100%;
height: 100%;
@@ -262,10 +331,12 @@
background-size: 200% 100%;
animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.skeleton { animation: none; }
.markerIcon,
@@ -289,12 +360,14 @@
color: rgba(255, 255, 255, 0.82);
font-family: var(--font-manrope), system-ui, sans-serif;
}
.errorTitle {
font-size: clamp(15px, 2.4vw, 18px);
font-weight: 800;
color: #ffffff;
margin: 0;
}
.errorText {
font-size: 13px;
max-width: 38ch;
@@ -302,6 +375,7 @@
line-height: 1.55;
color: rgba(255, 255, 255, 0.6);
}
.errorList {
list-style: none;
margin: 4px 0 0;
@@ -311,6 +385,7 @@
gap: 8px 12px;
justify-content: center;
}
.errorList li {
display: inline-flex;
align-items: center;
@@ -319,6 +394,7 @@
font-weight: 700;
color: #f1f1f1;
}
.errorList li::before {
content: "";
width: 7px;
@@ -327,7 +403,7 @@
background: #c01227;
}
/* ---- Screen-reader-only office list (semantic fallback) ---- */
/* ---- Screen-reader-only office list ---- */
.srOnly {
position: absolute;
width: 1px;

89
src/components/map/OfficeMap.tsx
View File

@@ -7,14 +7,9 @@
* Doormile office markers, plus a row of "jump to office" buttons that fly the
* map to a selected office's coordinates and open its popup.
*
* The experience opens focused on the Hyderabad headquarters — the largest,
* glowing, pulsing marker — with its popup open by default, so the command
* centre of the network is immediately legible. Hovering any marker opens its
* popup; leaving closes it. Clicking a marker or a nav button flies to it.
*
* Loaded via a `ssr:false` dynamic import so Leaflet (which touches `window`)
* never runs on the server and cannot cause hydration mismatches. Layout/spacing
* is owned by the host container (see ContactMap).
* The map centers with a North latitude offset to keep markers lower in the viewport,
* avoiding collisions with the navigation tabs. Popups are compact and styled like
* clean business cards.
*/
import "leaflet/dist/leaflet.css";
@@ -25,6 +20,7 @@ import L from "leaflet";
import { MapContainer, Marker, Popup, TileLayer, ZoomControl, useMap } from "react-leaflet";
import {
LatLng,
ESRI_WORLD_IMAGERY,
HQ_OFFICE,
MAP_FOCUS_ZOOM,
@@ -41,7 +37,6 @@ type FocusTarget = { id: string; nonce: number };
/**
* Build a branded SVG pin. The headquarters pin is larger, carries a red glow
* and a soft pulse ring, and sits above every other marker.
* (Module-scope-safe construction — this file is client-only.)
*/
function createMarkerIcon(isHeadquarters: boolean): L.DivIcon {
if (isHeadquarters) {
@@ -57,7 +52,7 @@ function createMarkerIcon(isHeadquarters: boolean): L.DivIcon {
`,
iconSize: [40, 52],
iconAnchor: [20, 52],
popupAnchor: [0, -46],
popupAnchor: [0, -52], // Anchored to top tip of pin
});
}
@@ -72,15 +67,14 @@ function createMarkerIcon(isHeadquarters: boolean): L.DivIcon {
`,
iconSize: [30, 40],
iconAnchor: [15, 40],
popupAnchor: [0, -36],
popupAnchor: [0, -40], // Anchored to top tip of pin
});
}
/**
* Imperative map effects that need the Leaflet instance:
* - keep the viewport sized correctly across resizes / lazy reveals
* - on first paint, snap to the HQ and open its popup (no jarring long fly)
* - fly to a single office when one is selected via the buttons
* - snap to the offset HQ on first paint, fly thereafter and open popups.
*/
function MapController({
focus,
@@ -92,8 +86,7 @@ function MapController({
const map = useMap();
const didInit = useRef(false);
// Keep the map correctly sized on container resize / lazy reveal. We never
// re-frame the view here, so resizing keeps whatever office is in focus.
// Keep the map correctly sized on container resize / lazy reveal.
useEffect(() => {
const container = map.getContainer();
let raf = 0;
@@ -116,16 +109,20 @@ function MapController({
const openPopup = () => markerRefs.current[office.id]?.openPopup();
// Offset the center slightly North so the marker sits lower in the viewport,
// preventing the popup card from colliding with the top controls.
const offsetLatitude = 0.022;
const centeredPosition: LatLng = [office.position[0] + offsetLatitude, office.position[1]];
if (!didInit.current) {
didInit.current = true;
map.invalidateSize();
map.setView(office.position, MAP_FOCUS_ZOOM, { animate: false });
// Open the HQ popup once the marker has mounted on this frame.
map.setView(centeredPosition, MAP_FOCUS_ZOOM, { animate: false });
const raf = requestAnimationFrame(openPopup);
return () => cancelAnimationFrame(raf);
}
map.flyTo(office.position, MAP_FOCUS_ZOOM, { duration: 1.1 });
map.flyTo(centeredPosition, MAP_FOCUS_ZOOM, { duration: 1.1 });
map.once("moveend", openPopup);
return () => {
map.off("moveend", openPopup);
@@ -140,12 +137,21 @@ export default function OfficeMap() {
const hqIcon = useMemo(() => createMarkerIcon(true), []);
const markerRefs = useRef<Record<string, L.Marker>>({});
// Default to the headquarters so its button reads active and its popup opens.
// Default to the headquarters.
const [focus, setFocus] = useState<FocusTarget | null>({ id: HQ_OFFICE.id, nonce: 0 });
const focusOffice = useCallback((id: string) => {
setFocus((prev) => ({ id, nonce: (prev?.nonce ?? 0) + 1 }));
}, []);
const [hoveredOfficeId, setHoveredOfficeId] = useState<string | null>(null);
// Restore the focused office popup when mouse leaves other markers.
useEffect(() => {
if (hoveredOfficeId === null && focus?.id) {
markerRefs.current[focus.id]?.openPopup();
}
}, [hoveredOfficeId, focus]);
const [status, setStatus] = useState<MapStatus>("loading");
const loadedRef = useRef(false);
const errorCountRef = useRef(0);
@@ -155,8 +161,6 @@ export default function OfficeMap() {
setStatus("ready");
}, []);
// Only surface an error if tiles never render (network/CORS/down). Once any
// tile load succeeds the map is considered healthy and stays that way.
const handleTileError = useCallback(() => {
errorCountRef.current += 1;
if (!loadedRef.current && errorCountRef.current >= 6) setStatus("error");
@@ -223,8 +227,9 @@ export default function OfficeMap() {
/>
{OFFICE_LOCATIONS.map((office) => {
// Google-Maps-style tooltip: hovering shows just the location name;
// clicking focuses the office.
const isFocused = focus?.id === office.id;
const isHovered = hoveredOfficeId === office.id;
return (
<Marker
key={office.id}
@@ -236,9 +241,16 @@ export default function OfficeMap() {
alt={office.name}
eventHandlers={{
click: () => focusOffice(office.id),
// Hover opens the compact popup without moving the map.
mouseover: (event) => event.target.openPopup(),
mouseout: (event) => event.target.closePopup(),
mouseover: (event) => {
setHoveredOfficeId(office.id);
event.target.openPopup();
},
mouseout: (event) => {
setHoveredOfficeId(null);
if (focus?.id !== office.id) {
event.target.closePopup();
}
},
}}
ref={(instance) => {
if (instance) markerRefs.current[office.id] = instance;
@@ -246,16 +258,25 @@ export default function OfficeMap() {
>
<Popup
className={styles.popup}
autoPan={false}
autoPan={isFocused}
autoPanPadding={[25, 25]}
closeButton={false}
minWidth={120}
maxWidth={200}
minWidth={240}
maxWidth={290}
>
<span className={styles.tip}>
<span className={styles.tipTitle}>
<span aria-hidden="true">📍</span> {office.shortLabel}
</span>
</span>
<div className={styles.card}>
<div className={styles.cardHeader}>
<span className={styles.cardIcon} aria-hidden="true">📍</span>
<h4 className={styles.cardTitle}>{office.city} Office</h4>
</div>
<div className={styles.cardBody}>
{office.address.map((line, idx) => (
<p key={idx} className={styles.addressLine}>
{line}
</p>
))}
</div>
</div>
</Popup>
</Marker>
);

21
src/components/map/offices.ts
View File

@@ -25,6 +25,8 @@ export interface OfficeLocation {
readonly position: LatLng;
/** Headquarters gets the largest, glowing, default-active marker. */
readonly isHeadquarters?: boolean;
/** Full office address lines. */
readonly address: readonly string[];
}
/**
@@ -42,6 +44,12 @@ export const OFFICE_LOCATIONS: readonly OfficeLocation[] = [
// Vision Ultima, Jayabheri Enclave, Gachibowli — verified on satellite.
position: [17.4484, 78.3573],
isHeadquarters: true,
address: [
"5th Floor, Vision Ultima,",
"Street No.3, Jayabheri Enclave,",
"Gachibowli, Hyderabad,",
"Telangana 500032"
],
},
{
id: "bengaluru",
@@ -50,6 +58,13 @@ export const OFFICE_LOCATIONS: readonly OfficeLocation[] = [
shortLabel: "Bengaluru Hub",
// Resolved from the supplied Google Maps share link — verified on satellite.
position: [12.9929351, 77.6988599],
address: [
"C612, 6th Floor,",
"Trifecta Starlight, ITPL Road,",
"Garudacharapalya, Mahadevapura,",
"Bangalore 560048,",
"Karnataka, India"
],
},
{
id: "coimbatore",
@@ -58,6 +73,12 @@ export const OFFICE_LOCATIONS: readonly OfficeLocation[] = [
shortLabel: "Coimbatore Hub",
// Mayflower Valencia, Coimbatore — verified against satellite view.
position: [11.0191, 76.9883],
address: [
"Mayflower Valencia,",
"Near Nava India Bus Stop,",
"Avinashi Road, Udayampalayam,",
"Tamil Nadu 641003"
],
},
];

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

@@ -82,7 +82,7 @@ export default function BlogGrid() {
font-family: var(--font-manrope), sans-serif !important;
}
/* Bottom block pinned to the card base — keeps Read More + image at the
/* Bottom block pinned to the card base. Keeps Read More + image at the
same vertical position across cards with different text lengths. */
.custom-blog-bottom {
display: flex !important;

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

@@ -33,6 +33,25 @@ export default function ConnectedLogistics() {
max-width: min(526px, 100%) !important;
}
/* Sizing and identical padding on all 4 sides for Connected Logistics Image container */
.elementor-element-99768ba .elementor-widget-container {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 40px !important; /* Identical gap on left, right, top, and bottom */
box-sizing: border-box !important;
}
.elementor-element-99768ba img.wp-image-4481 {
width: 100% !important;
max-width: 100% !important; /* Allow natural responsive scaling on desktop */
height: auto !important;
object-fit: cover !important;
border-radius: 25px !important; /* Preserve 25px border radius */
margin: 0 auto !important;
display: block !important;
}
/* Desktop/Laptop (min-width: 1025px) column width and flex rules */
@media (min-width: 1025px) {
.elementor-element-9ffed33 {
@@ -78,6 +97,30 @@ export default function ConnectedLogistics() {
width: 100% !important;
max-width: 100% !important;
}
/* Tablet overrides: ~15% smaller than site.css's 450px with centered layout */
.elementor-element-99768ba .elementor-widget-container {
padding: 30px !important;
}
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
width: 100% !important;
max-width: 382px !important;
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 */
.elementor-element-99768ba .elementor-widget-container {
padding: 10% !important;
}
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
width: 100% !important;
max-width: 100% !important;
border-radius: 25px !important; /* Explicitly keep 25px */
}
}
`}} />
<div className="elementor-element elementor-element-9ffed33 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ffed33" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">

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

@@ -15,7 +15,7 @@ const ROADMAP_DATA = [
trackLeft: "12.5%",
phase: "Pilot Phase",
phaseClass: "yellow",
title: "Hyderabad Pilot",
title: "Pilot",
desc: "Launch operations in Hyderabad with dedicated EV hubs and MileTruth AI v1.0.",
icon: (
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
@@ -25,7 +25,7 @@ const ROADMAP_DATA = [
</svg>
),
stats: [
{ text: "50-80 orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
{ text: "100+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
{ text: "1 city", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 21h18M19 21v-2a4 4 0 0 0-3-3.87M5 21v-2a4 4 0 0 1 3-3.87M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5"></path></svg> },
{ text: "10+ women partners", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg> }
]
@@ -36,7 +36,7 @@ const ROADMAP_DATA = [
trackLeft: "37.5%",
phase: "Multi-City",
phaseClass: "green",
title: "Multi-City Scale",
title: "Scale",
desc: "Expand to Bengaluru and Chennai, securing key B2B enterprise traction.",
icon: (
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
@@ -46,7 +46,7 @@ const ROADMAP_DATA = [
</svg>
),
stats: [
{ text: "300-500 orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
{ text: "500+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
{ text: "3 cities", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 21h18M19 21v-2a4 4 0 0 0-3-3.87M5 21v-2a4 4 0 0 1 3-3.87M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5"></path></svg> },
{ text: "50+ EVs", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> }
]
@@ -57,8 +57,8 @@ const ROADMAP_DATA = [
trackLeft: "62.5%",
phase: "Platform",
phaseClass: "blue",
title: "Platform Expansion",
desc: "Scale to 5+ cities. Launch developer API marketplace and Series A readiness.",
title: "Expansion",
desc: "Scale to 5+ cities. Strengthen regional operations.",
icon: (
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
<circle cx="12" cy="12" r="3"></circle>
@@ -66,9 +66,9 @@ const ROADMAP_DATA = [
</svg>
),
stats: [
{ text: "1,200+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
{ text: "5000+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
{ text: "5+ cities", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 21h18M19 21v-2a4 4 0 0 0-3-3.87M5 21v-2a4 4 0 0 1 3-3.87M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5"></path></svg> },
{ text: "API marketplace", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg> }
{ text: "100+ women partners", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg> }
]
},
{
@@ -86,8 +86,8 @@ const ROADMAP_DATA = [
</svg>
),
stats: [
{ text: "5,000+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
{ text: "Rs 65 Cr+ revenue", icon: <span className="currency-symbol" style={{ marginRight: "4px", fontSize: "11px", fontWeight: 800 }}>Rs</span> },
{ text: "50,000+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
{ text: "50+ cities", icon: <span className="currency-symbol" style={{ marginRight: "4px", fontSize: "11px", fontWeight: 800 }}>Rs</span> },
{ text: "2,000+ women partners", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg> }
]
}

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

@@ -38,7 +38,7 @@ function ContentRenderer({ block }: { block: ContentBlock }) {
return (
<blockquote className="dm-article-quote">
<p>{block.text}</p>
{block.cite && <cite>— {block.cite}</cite>}
{block.cite && <cite>{block.cite}</cite>}
</blockquote>
);
case "image":
@@ -168,7 +168,7 @@ const STYLES = `
font-family: var(--font-manrope), sans-serif;
}
/* Heading normalization — beat the global theme's .elementor-kit-5 h1–h6
/* Heading normalization. Beat the global theme's .elementor-kit-5 h1-h6
(120/80/60px UPPERCASE) rules with !important on our own classes. */
.dm-single-blog :where(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-manrope), sans-serif !important;
@@ -180,7 +180,7 @@ const STYLES = `
specificity 0-1-1) so blog links keep our colors and never get underlined. */
.dm-single-blog a { text-decoration: none !important; }
/* ── Page banner — tall (homepage-scale); only badge + title inside ── */
/* Page banner: tall homepage-scale frame with only badge + title inside */
/* Compound selector (specificity 20) + !important beats the global 800px
single-class height rules so the blog banner can use viewport heights. */
.custom-standard-hero-card.dm-banner-card {
@@ -216,7 +216,7 @@ const STYLES = `
@media (max-width: 1024px) { .dm-banner-title { font-size: clamp(32px, 6vw, 48px) !important; max-width: 90%; } }
@media (max-width: 600px) { .dm-banner-title { font-size: clamp(28px, 8vw, 38px) !important; max-width: 90%; } }
/* ── Content wrap — begins immediately below the banner ── */
/* Content wrap begins immediately below the banner */
/* Shared content container: the SAME max-width + horizontal padding is used
by BlogPostFooter (.dm-blog-footer-inner) so the article body, headings,
images, Prev/Next, Related Articles and the CTA banner all align to one
@@ -287,7 +287,7 @@ const STYLES = `
}
/* Each article block is wrapped in its OWN ScrollReveal <div>, so a bare
:first-child rule matched every heading (each is the only child of its
wrapper) and zeroed its top margin — collapsing the gap above every
wrapper) and zeroed its top margin, collapsing the gap above every
section heading. Scope the reset to only the article body's first block. */
.dm-article-body > :first-child :where(.dm-article-h2, .dm-article-h3),
.dm-article-body > .dm-article-h2:first-child,

219
src/data/blog.ts
View File

@@ -1,9 +1,9 @@
/**
* Central blog data module — single source of truth for the listing page,
* Central blog data module: single source of truth for the listing page,
* the /blog/[slug] route, the sidebar, related posts and prev/next nav.
*
* The site is a static export (next.config.ts → output: "export"), so all of
* this is plain data resolved at build time. No CMS / no runtime fetching.
* this is plain data resolved at build time. No CMS, no runtime fetching.
*/
export const SITE_URL = "https://www.doormile.com";
@@ -43,44 +43,44 @@ function templateContent(post: {
return [
{
type: "paragraph",
text: `In last-mile logistics, the difference between a good day and a missed SLA is rarely a single dramatic failure — it is the quiet accumulation of small inefficiencies. ${post.title} looks at how Doormile turns those margins into measurable advantage, and why a precision-first approach consistently outperforms guesswork on the road.`,
text: `In last-mile logistics, a missed SLA is rarely caused by one big failure. It usually comes from small delays adding up across a route. ${post.title} looks at how delivery teams can spot those delays early and plan around them before vehicles leave the hub.`,
},
{
type: "heading",
level: 2,
text: "Why this matters for modern fleets",
text: "Why this matters for fleet teams",
},
{
type: "paragraph",
text: "Every additional kilometre carries cost: fuel or charge, rider hours, vehicle wear, and the risk of a late delivery. When routing decisions are made on intuition or static rules, those costs compound across hundreds of stops. Treating the route as a solvable optimisation problem — not a best guess — is what separates scalable operations from ones that simply add more vehicles.",
text: "Every extra kilometre costs money. It uses fuel or charge, adds rider time, wears down vehicles, and increases the chance of a late delivery. When routes are built from fixed zones or old habits, those costs repeat every day.",
},
{
type: "list",
items: [
"Fewer vehicles deployed for the same delivery volume",
"Lower cost-per-drop through tighter, smarter sequencing",
"Predictable ETAs that protect customer trust and SLA targets",
"A cleaner, lower-emission footprint per parcel delivered",
"Fewer vehicles needed for the same number of drops",
"Lower cost per drop through better stop sequencing",
"ETAs that match traffic, distance, and delivery windows",
"Less fuel or charge used per completed order",
],
},
{
type: "heading",
level: 3,
text: "From data to decision",
text: "From orders to dispatch",
},
{
type: "paragraph",
text: `Doormile's MileTruth™ engine ingests orders, constraints and live conditions, then evaluates the routing problem across parallel strategy universes before committing to a plan. The result is a dispatch decision grounded in mathematics rather than heuristics — validated before a single rider leaves the hub.`,
text: `A good dispatch plan starts with the basics: order locations, promised delivery windows, rider capacity, vehicle range, and known traffic trouble spots. MileTruth™ checks those inputs before dispatch so the team is not fixing avoidable mistakes on the road.`,
},
{
type: "image",
src: post.image,
alt: post.title,
caption: `${post.category} — operational intelligence applied at the point of dispatch.`,
caption: `${post.category}: route planning decisions made before dispatch.`,
},
{
type: "quote",
text: "We don't guess the route. We calculate it — and we prove it works before the wheels start turning.",
text: "A route should be checked before the rider leaves, not explained after the customer calls.",
cite: "Doormile Operations",
},
{
@@ -90,26 +90,27 @@ function templateContent(post: {
},
{
type: "paragraph",
text: "The teams that benefit most treat routing intelligence as core infrastructure, not an afterthought. Start by measuring your current cost-per-drop and SLA adherence, then let a precision engine reveal where distance, time and capacity are being lost. The gains are rarely theoretical — they show up directly in the next dispatch cycle.",
text: "The best improvements usually start with simple measurements. Track distance per route, failed delivery windows, rider idle time, and orders moved between vehicles after dispatch. Those numbers show where the operation is leaking time.",
},
{
type: "list",
ordered: true,
items: [
"Benchmark today's distance, fleet size and on-time rate.",
"Feed real constraints — capacity, windows, charge — into the engine.",
"Validate routes against real-world conditions before dispatch.",
"Measure the delta, then scale the approach across hubs.",
"Benchmark today's distance, fleet size, and on-time rate.",
"Include vehicle capacity, delivery windows, rider shifts, and battery charge.",
"Check routes against traffic and customer commitments before dispatch.",
"Compare the next dispatch cycle against the old plan.",
],
},
{
type: "paragraph",
text: "Smarter routing is not about working harder on the road — it is about making the right decision before the journey begins. That is the foundation every Doormile deployment is built on.",
text: "Better routing is not about pushing riders harder. It is about giving them a plan that already accounts for the real day ahead.",
},
];
}
interface SeedPost {
slug: string;
title: string;
excerpt: string;
category: string;
@@ -122,98 +123,100 @@ interface SeedPost {
const seeds: SeedPost[] = [
// ── Flagship 1 ───────────────────────────────────────────────────────────
{
title: "How AI Is Transforming Last-Mile EV Delivery",
slug: "how-ai-is-transforming-last-mile-ev-delivery",
title: "How Better Planning Improves Last-Mile EV Delivery",
excerpt:
"Machine learning and real-time data are reshaping how fleets plan, dispatch, and adapt — making every kilometre smarter than the last.",
"A practical look at how EV fleets can plan routes, manage charging, and keep delivery promises without adding unnecessary vehicles.",
category: "Technology",
image: "/images/blog-post-pic-17.png",
date: "2025-10-02",
intro:
"The last mile has always been logistics' most expensive and least predictable stretch. Add electric vehicles to the mix and the problem sharpens: now every route must respect not just time and capacity, but battery range. Artificial intelligence is what turns that constraint into an advantage.",
"The last mile is already difficult to plan. With electric vehicles, the team also has to think about battery range, charging time, rider load, traffic, and delivery windows. Good planning turns those moving parts into a workable dispatch plan.",
content: [
{
type: "paragraph",
text: "For decades, last-mile delivery was planned the way it was a generation ago — dispatchers, spreadsheets, and hard-won intuition. That approach scales poorly, and it breaks entirely when you electrify the fleet. EVs introduce a moving constraint that no static plan can absorb: a vehicle's remaining range changes with load, terrain, traffic and temperature, all at once.",
text: "For a long time, last-mile planning depended on dispatchers, spreadsheets, and local experience. That experience still matters. The problem is that it gets stretched thin when order volume rises and the fleet includes EVs.",
},
{
type: "heading",
level: 2,
text: "The shift from rules to learning",
text: "The shift from fixed rules to daily planning",
},
{
type: "paragraph",
text: "Traditional routing tools rely on fixed rules: nearest-stop-first, fixed zones, manual overrides. They are fast to set up and brittle in practice. Machine-learning-driven systems instead learn from outcomes — every completed delivery, every delay, every charge cycle becomes training signal that sharpens the next decision.",
text: "A fixed-zone plan may look clean in the morning, but the road rarely follows the plan. A rider may get delayed near Hitec City, a gated community may hold a vehicle for ten extra minutes, or a battery may drain faster because the load is heavier than usual.",
},
{
type: "list",
items: [
"Demand forecasting that anticipates volume spikes before they hit the hub",
"Travel-time models trained on the city's real traffic, not generic averages",
"Battery-draw prediction tuned to each vehicle class and load profile",
"Continuous feedback that improves accuracy with every dispatch",
"Order volumes by area, time slot, and customer type",
"Travel times based on the city's actual traffic patterns",
"Battery use by vehicle type, rider load, and route length",
"Feedback from completed deliveries, failed attempts, and late arrivals",
],
},
{ type: "heading", level: 3, text: "Adjusting during the day" },
{
type: "heading",
level: 3,
text: "Real-time adaptation",
type: "paragraph",
text: "The first plan is only the starting point. By 11 a.m., traffic may change, a high-priority order may arrive, or one vehicle may return with less charge than expected. The dispatch team needs a way to adjust without rebuilding the whole day by hand.",
},
{
type: "paragraph",
text: "The real unlock is not planning — it is replanning. When a road closes, an order is added, or a vehicle's charge drops faster than expected, an AI-driven system re-optimises in milliseconds and reroutes the affected vehicles without a human in the loop. The plan stays optimal even as reality refuses to hold still.",
text: "During peak traffic hours in Hyderabad, some vehicles were arriving 20 to 30 minutes later than planned. By adjusting routes based on live traffic and battery levels, the hub reduced missed delivery windows and improved on-time performance.",
},
{
type: "image",
src: "/images/ev-paradox.png",
alt: "Electric delivery vehicle routing visualisation",
caption:
"AI continuously re-evaluates range, load and traffic to keep every EV route feasible.",
"EV route plans need to account for range, load, traffic, and charging time before riders leave the hub.",
},
{
type: "quote",
text: "An electric fleet is only as good as the intelligence that routes it. The battery sets the limit — the algorithm decides whether you ever reach it.",
cite: "Doormile Engineering",
text: "With EVs, a route is only useful if the vehicle can finish it and still return safely.",
cite: "Doormile Operations",
},
{
type: "heading",
level: 2,
text: "What it means for operators",
text: "What this means for operators",
},
{
type: "paragraph",
text: "For fleet operators, the payoff is concrete: fewer vehicles covering the same ground, near-zero range-related failures, and ETAs accurate enough to commit to. AI does not replace the operator — it removes the guesswork, so the operator can run a larger, cleaner, more reliable fleet with the same team.",
text: "For a fleet manager, this is not about fancy software. It is about fewer emergency calls, fewer mid-route swaps, and fewer customers asking why their delivery missed the promised window.",
},
{
type: "list",
ordered: true,
items: [
"Capture real operational data — deliveries, delays, charge cycles.",
"Let models learn your city's actual travel and demand patterns.",
"Validate every route against live battery capacity before dispatch.",
"Re-optimise continuously as conditions change through the day.",
"Record delivery times, failed attempts, traffic delays, and charging cycles.",
"Build travel-time estimates from the areas your riders actually serve.",
"Check every route against battery capacity before dispatch.",
"Replan when traffic, orders, or vehicle availability changes.",
],
},
{
type: "paragraph",
text: "The fleets pulling ahead are not the ones with the most vehicles — they are the ones with the smartest kilometre. That is the promise AI brings to last-mile EV delivery, and it is already on the road.",
text: "The fleets that improve fastest are usually not the ones adding vehicles first. They are the ones removing wasted distance, planning charging properly, and giving riders routes they can complete on time.",
},
],
},
// ── Flagship 2 ───────────────────────────────────────────────────────────
{
slug: "42-less-distance-insights-from-our-hyderabad-hub",
title: "42% Less Distance: Insights from Our Hyderabad Hub",
excerpt:
"A detailed look at how Doormile's MileTruth routing engine delivered measurable efficiency gains — fewer vehicles, less fuel, and zero SLA misses.",
"A practical look at how one Hyderabad hub reduced distance, used fewer vehicles, and protected delivery windows with better route planning.",
category: "Case Study",
image: "/images/blog-post-pic-15.png",
date: "2025-09-18",
intro:
"Numbers settle arguments. When we deployed MileTruth™ at our Hyderabad hub, the goal was simple: prove that precision routing changes the economics of last-mile delivery. The result — a 42% reduction in total distance travelled — did exactly that.",
"Numbers settle arguments. At our Hyderabad hub, the goal was simple: reduce avoidable distance without missing customer commitments. The result was a 42% reduction in total distance travelled.",
content: [
{
type: "paragraph",
text: "Hyderabad is a demanding test bed: dense urban cores, sprawling new suburbs, unpredictable traffic and tight delivery windows. If a routing approach works here, it works almost anywhere. We ran it side by side against the hub's existing manual-plus-rules dispatch process over a sustained period, holding order volume constant.",
text: "Hyderabad is not an easy city for delivery planning. Dense commercial areas, fast-growing suburbs, flyover work, narrow service lanes, apartment security checks, and sudden traffic build-up can all change the day.",
},
{
type: "heading",
@@ -222,15 +225,19 @@ const seeds: SeedPost[] = [
},
{
type: "paragraph",
text: "Before MileTruth, the hub planned routes the conventional way — zones drawn by experience, sequences set by dispatchers, adjustments made on the fly. It worked, but it left distance on the table every single day, and that distance translated directly into fuel, hours and vehicles.",
text: "Before MileTruth, the hub planned routes in the usual way. Zones were drawn from experience, dispatchers sequenced stops manually, and riders adjusted on the road when something changed.",
},
{
type: "paragraph",
text: "That process worked, but it carried hidden costs. Two riders might cross the same area in the same hour. A vehicle might take a longer loop to avoid one late stop. A dispatcher might hold back an order because the best vehicle was not obvious in the moment.",
},
{
type: "list",
items: [
"Zone-based allocation that ignored cross-zone efficiencies",
"Manual sequencing that couldn't evaluate every alternative",
"No pre-validation of ETAs against real travel times",
"Reactive rather than predictive handling of disruptions",
"Zone-based allocation that missed nearby cross-zone drops",
"Manual stop sequencing during busy dispatch windows",
"ETAs checked after routing instead of before dispatch",
"Traffic and delay handling that depended on phone calls from riders",
],
},
{
@@ -240,14 +247,18 @@ const seeds: SeedPost[] = [
},
{
type: "paragraph",
text: "MileTruth treated the day's deliveries as one large optimisation problem rather than a set of independent zones. It evaluated routing strategies in parallel, selected the optimal plan against real constraints, and validated every ETA before dispatch. The same orders, the same city — a fundamentally tighter plan.",
text: "The main change was treating the day's orders as one connected plan instead of separate zone lists. The route plan considered distance, rider capacity, delivery windows, traffic, and vehicle availability together.",
},
{
type: "paragraph",
text: "During peak traffic hours in Hyderabad, some vehicles were arriving 20 to 30 minutes later than planned. By adjusting routes based on live traffic and battery levels, we reduced missed delivery windows and improved on-time performance.",
},
{
type: "image",
src: "/images/last-mile-approach.jpg",
alt: "Hyderabad delivery hub routing analysis",
caption:
"Consolidating the day's deliveries into a single optimisation removed redundant cross-town travel.",
"Planning the day's deliveries together removed repeated cross-town travel.",
},
{
type: "heading",
@@ -259,45 +270,46 @@ const seeds: SeedPost[] = [
items: [
"42% reduction in total distance travelled across the hub",
"37% fewer vehicles required for the same delivery volume",
"Zero SLA misses across the measured deployment window",
"Proportional drop in fuel cost and per-parcel emissions",
"No SLA misses during the measured deployment window",
"Lower fuel use and fewer unnecessary kilometres per parcel",
],
},
{
type: "quote",
text: "Fewer vehicles, less fuel, zero missed SLAs — and not by working the team harder. By making a better decision before the wheels turned.",
text: "The improvement did not come from asking riders to work harder. It came from giving the team a better route plan before the vehicles left.",
cite: "Hyderabad Hub Operations",
},
{
type: "heading",
level: 3,
text: "Why it generalises",
text: "Why this applies beyond one hub",
},
{
type: "paragraph",
text: "The Hyderabad gains were not a quirk of one city. The inefficiencies MileTruth removed — redundant travel, conservative sequencing, unvalidated ETAs — exist in nearly every manual operation. The engine simply makes them visible, then eliminates them. That is why the same approach now anchors deployments well beyond this hub.",
text: "The Hyderabad result was not a one-city exception. Most hubs deal with the same issues: overlapping routes, conservative sequencing, traffic surprises, charging constraints, and last-minute order changes.",
},
{
type: "paragraph",
text: "A 42% cut in distance is not a rounding error — it is a structural change in what the operation costs to run. And it came from intelligence, not additional resources.",
text: "A 42% cut in distance changes the cost of running the operation. It also gives dispatchers more breathing room when the day gets messy.",
},
],
},
// ── Flagship 3 ───────────────────────────────────────────────────────────
{
title: "MileTruth™ AI — 10 Stages to Smarter Dispatch",
slug: "miletruth-ai-10-stages-to-smarter-dispatch",
title: "MileTruth™: 10 Stages to Smarter Dispatch",
excerpt:
"From order ingestion to final route output in under 45ms — a technical walkthrough of the ten-stage pipeline at the heart of our routing engine.",
"From order intake to final route output, here is how a dispatch plan is checked before riders leave the hub.",
category: "MileTruth",
image: "/images/blog-post-pic-31.png",
date: "2025-09-05",
intro:
"Behind every Doormile dispatch is a pipeline that turns raw orders into a validated, optimal route in under 45 milliseconds. This is how MileTruth™ does it — ten stages, each one removing a source of error before the next begins.",
"Behind every Doormile dispatch is a step-by-step route planning process. Each stage removes a common source of error before the plan reaches the rider.",
content: [
{
type: "paragraph",
text: "Speed and correctness are usually a trade-off. MileTruth is engineered to deliver both: a routing decision fast enough to feel instant, yet rigorous enough to commit a fleet to. The secret is a staged pipeline where each step has a single responsibility and hands clean, validated data to the next.",
text: "A dispatch plan has to be fast, but it also has to be usable. A quick route that ignores a bad address, low battery, or tight delivery window creates problems later in the day.",
},
{
type: "heading",
@@ -308,16 +320,16 @@ const seeds: SeedPost[] = [
type: "list",
ordered: true,
items: [
"Ingestion — orders, constraints and fleet state are normalised on arrival.",
"Validation — addresses, time windows and capacities are checked and geocoded.",
"Demand modelling — volume and service-time estimates are attached to each stop.",
"Travel-time estimation — real-world, time-of-day travel matrices are built.",
"Constraint assembly — capacity, range, windows and rules are encoded.",
"Strategy generation — multiple routing universes are explored in parallel.",
"Optimisation — the solver searches for the minimum-cost feasible plan.",
"Battery / range validation — EV routes are checked against real charge capacity.",
"ETA pre-validation — promised times are verified before any commitment.",
"Output — the final, validated route is emitted to dispatch.",
"Order intake: new orders, rider availability, and vehicle status are collected.",
"Address check: delivery points, time windows, and service notes are verified.",
"Stop planning: each stop gets an expected service time and delivery priority.",
"Travel-time check: routes are compared against time-of-day traffic.",
"Constraint check: capacity, shift time, customer windows, and range are applied.",
"Route options: several possible plans are built for the same order set.",
"Plan selection: the lowest-cost workable route plan is selected.",
"Battery check: EV routes are checked against real charge capacity.",
"ETA check: promised delivery times are verified before dispatch.",
"Dispatch output: the final route is sent to the operations team.",
],
},
{
@@ -327,119 +339,116 @@ const seeds: SeedPost[] = [
},
{
type: "paragraph",
text: "Collapsing these steps into one monolithic calculation is how most tools accumulate hidden errors. By isolating each concern, MileTruth catches a bad address before it reaches the solver, and an infeasible battery plan before it reaches a rider. Each stage is independently testable, observable and fast.",
text: "When everything is checked in one step, small errors slip through. A wrong pin, a missing apartment note, or a low battery warning can reach the rider and become a customer issue.",
},
{
type: "image",
src: "/images/blog-post-pic-31.png",
alt: "MileTruth routing pipeline diagram",
caption:
"Ten focused stages turn raw orders into a validated route in well under 45 milliseconds.",
"A staged dispatch process catches address, range, and ETA issues before riders leave.",
},
{
type: "quote",
text: "Each stage exists to delete a category of mistake. By the time a route reaches dispatch, the questionable decisions have already been ruled out.",
text: "Each stage should remove one kind of mistake. By dispatch time, the route should already be practical.",
cite: "MileTruth Engineering",
},
{
type: "heading",
level: 2,
text: "Parallel strategy universes",
text: "Comparing route options",
},
{
type: "paragraph",
text: "Stage six is where MileTruth diverges from conventional routers. Rather than committing to one heuristic, it generates several distinct routing strategies simultaneously — each a complete candidate plan — and lets the optimiser select the best. Powered by a mathematical solver, it evaluates trade-offs no dispatcher could hold in their head.",
text: "The useful part is not only building one route. It is comparing a few workable route options before choosing the plan. One option may save distance, another may protect a tight delivery window, and another may keep an EV closer to a charger.",
},
{
type: "list",
items: [
"Multiple candidate plans evaluated, not a single best guess",
"Mathematical optimisation instead of fixed heuristics",
"Range and ETA validated inside the loop, not bolted on after",
"Sub-45ms output that keeps dispatch genuinely real-time",
"Several route plans checked before dispatch",
"Distance, time windows, capacity, and range considered together",
"Range and ETA checked before the route reaches the rider",
"Fast output that still leaves room for dispatcher review",
],
},
{
type: "paragraph",
text: "Ten stages, one outcome: a route you can trust enough to commit a fleet to — calculated, validated, and delivered before a dispatcher could finish reading the order list.",
text: "The goal is simple: give the dispatch team a route plan they can trust before the first vehicle leaves the hub.",
},
],
},
// ── Template-backed posts ────────────────────────────────────────────────
{
slug: "the-ev-paradox-solving-range-anxiety-for-urban-fleets",
title: "The EV Paradox: Solving Range Anxiety for Urban Fleets",
excerpt:
"Electric vehicles promise sustainability, but battery constraints introduce a new routing challenge. Here's how MileTruth™ AI solves it before dispatch.",
"Electric vehicles lower running costs, but battery range changes how routes must be planned before dispatch.",
category: "EV Fleet",
image: "/images/ev-paradox.png",
date: "2025-08-21",
intro:
"Electric fleets promise cleaner cities and lower running costs — but they trade one problem for another. Range becomes a hard constraint on every route, and range anxiety becomes an operational risk. Solving it before dispatch is the whole game.",
"Electric fleets can lower running costs, but range becomes a daily planning constraint. The route has to match the battery, the load, the traffic, and the return plan.",
},
{
slug: "why-mathematical-precision-beats-heuristics-in-routing",
title: "Why Mathematical Precision Beats Heuristics in Routing",
excerpt:
"Most routing tools guess. We calculate. Powered by Google OR-Tools, MileTruth evaluates six parallel strategy universes to select the optimal route every time.",
"Fixed routing rules are easy to start with, but they often miss better stop sequences as order volume grows.",
category: "Technology",
image: "/images/blog-post-pic-14.jpeg",
date: "2025-08-07",
intro:
"Heuristics are fast to build and easy to trust — until they quietly cost you a vehicle a day. Mathematical optimisation asks more of the engine and gives more back: provably better routes, every dispatch, at scale.",
"Simple routing rules are fast to set up, but they can quietly add distance every day. Better planning compares more route options before dispatch.",
},
{
slug: "fleet-reduction-without-compromising-delivery-volume",
title: "Fleet Reduction Without Compromising Delivery Volume",
excerpt:
"Deploying 37% fewer vehicles while handling the same order volumes isn't a trade-off — it's the result of smarter routing intelligence applied at every dispatch.",
"Handling the same order volume with fewer vehicles starts by removing avoidable kilometres and overlapping routes.",
category: "Fleet Management",
image: "/images/blog-post-pic-8.jpeg",
date: "2025-07-24",
intro:
"Cutting your fleet usually means cutting capacity — unless the kilometres you remove were never necessary in the first place. Smarter routing reclaims that wasted distance and turns it into headroom.",
"Cutting vehicles usually means cutting capacity unless the removed kilometres were never needed. Better route planning turns wasted distance into operating headroom.",
},
{
slug: "building-a-greener-city-the-future-of-urban-logistics",
title: "Building a Greener City: The Future of Urban Logistics",
excerpt:
"Cities are demanding cleaner delivery. We explore how AI-powered EV fleets and optimised routing create a path to zero-emission last-mile logistics at city scale.",
"Cities are asking for cleaner delivery. The practical challenge is planning EV routes that can meet customer windows without wasting charge.",
category: "Sustainability",
image: "/images/blog-post-pic-6.jpeg",
date: "2025-07-10",
intro:
"Zero-emission delivery is no longer a marketing line — it is becoming a regulatory expectation. The path there runs through two changes at once: electrifying the fleet, and routing it intelligently enough to make electrification viable.",
"Cleaner delivery is becoming an operating requirement, not just a brand message. It depends on EV adoption and route plans that make those vehicles practical every day.",
},
{
slug: "how-doormile-maintains-99-9-sla-compliance-at-scale",
title: "How Doormile Maintains 99.9% SLA Compliance at Scale",
excerpt:
"Hitting SLA targets 99.9% of the time isn't luck — it's the product of ETA pre-validation, real-time rebalancing, and a routing engine built with delivery reliability as its first constraint.",
"High SLA performance comes from checking ETAs before dispatch, reacting early to delays, and keeping customer commitments visible throughout the day.",
category: "Operations",
image: "/images/last-mile-approach.jpg",
date: "2025-06-26",
intro:
"An SLA you hit 99.9% of the time is not an average you got lucky on — it is a system designed so that missing is the exception, not the risk. Reliability, it turns out, is an engineering decision made long before dispatch.",
"Strong SLA performance is not luck. It comes from planning the day so late deliveries are the exception, not the expected risk.",
},
{
slug: "battery-simulation-the-secret-to-ev-route-pre-validation",
title: "Battery Simulation: The Secret to EV Route Pre-Validation",
excerpt:
"Before a single rider leaves the hub, MileTruth™ simulates every route against real charge capacity — eliminating mid-route failures and protecting your fulfillment rate.",
"Before a rider leaves the hub, every EV route should be checked against real charge capacity and the expected return plan.",
category: "EV Fleet",
image: "/images/blog-post-pic-3.jpeg",
date: "2025-06-12",
intro:
"A stranded EV is not just a late delivery — it is a vehicle out of service, a customer let down, and a recovery cost. Simulating the route against real charge capacity before dispatch is how you make sure it never happens.",
"A stranded EV is not just a late delivery. It means a vehicle is out of service, a customer is waiting, and the hub has to arrange recovery. Range checks need to happen before dispatch.",
},
];
function slugify(title: string): string {
return title
.toLowerCase()
.replace(/™/g, "")
.replace(/&/g, " and ")
.replace(/[^a-z0-9]+/g, "-")
.replace(/^-+|-+$/g, "");
}
export const blogPosts: BlogPost[] = seeds.map((s) => ({
slug: slugify(s.title),
slug: s.slug,
title: s.title,
excerpt: s.excerpt,
category: s.category,

2
src/modules/how-it-works-3d/components/sections/LastMile.jsx
View File

@@ -39,7 +39,7 @@ export default function LastMile({ active }) {
</div>
</div>
<button className="section-close-btn" onClick={handleClose}>
View Analytics
Continue
<svg
width="14"
height="14"