Files
doormilebuild/build/_next/static/chunks/05gvsernou_9a.js

1137 lines
59 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,61867,e=>{"use strict";var t=e.i(43476),i=e.i(71645),a=e.i(57688),r=e.i(89970),o=e.i(83495);r.default.registerPlugin(o.ScrollTrigger);let n=[{index:1,num:"01",title:"Battery-First Planning",desc:"Routes are optimized around battery levels and charging windows, not retrofitted as an afterthought."},{index:2,num:"02",title:"Energy-Aware Routing",desc:"Our algorithms factor in terrain, traffic, and payload weight to maximize range efficiency."},{index:3,num:"03",title:"Smart Charging Integration",desc:"Seamless coordination with charging infrastructure to eliminate range anxiety for drivers."},{index:4,num:"04",title:"Carbon Footprint Tracking",desc:"Real-time emissions monitoring and sustainability reports for every delivery."}];e.s(["default",0,function(){let[e,o]=(0,i.useState)(4),s=(0,i.useRef)(null),l=(0,i.useRef)(null),c=(0,i.useRef)(null);return(0,i.useEffect)(()=>{let e=s.current,t=c.current,i=l.current;if(!e||!t||!i)return;let a=r.default.to(i,{y:"-=10",duration:4.5,ease:"sine.inOut",yoyo:!0,repeat:-1});return r.default.timeline({scrollTrigger:{trigger:e,start:"top 80%",toggleActions:"play none none none"}}).to(e.querySelector(".ev-logistic-kicker"),{opacity:1,y:0,letterSpacing:"3px",duration:.8,ease:"power3.out"}).to(e.querySelectorAll(".ev-char"),{y:"0%",opacity:1,duration:.95,stagger:.02,ease:"power4.out"},"-=0.45").to(e.querySelectorAll(".ev-logistic-accordion-item"),{opacity:1,y:0,duration:.6,stagger:.08,ease:"power3.out"},"-=0.6").fromTo(t,{opacity:0,scale:.95},{opacity:1,scale:1,duration:1,ease:"power4.out"},"-=0.8"),()=>{a.kill()}},[]),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:`
/* Custom CSS Scoped to EV Logistics Section - New Premium Look */
.ev-logistic-section {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 1320px !important;
margin: 10px auto 120px auto !important; /* Centered horizontally with auto margins */
padding: 80px 60px !important; /* Restored original balanced left/right paddings */
box-sizing: border-box !important;
background: #ffffff !important;
font-family: 'Manrope', sans-serif !important;
position: relative !important;
}
.ev-logistic-header {
width: 100% !important;
max-width: 100% !important;
align-self: stretch !important;
border-bottom: 2px solid rgba(17, 17, 17, 0.09) !important;
padding-bottom: 16px !important;
margin-bottom: 48px !important;
display: block !important;
text-align: left !important;
}
.ev-logistic-body-grid {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
gap: 40px !important;
}
/* Balanced Left Column - Image column takes up 58% */
.ev-logistic-image-col {
flex: 1 1 58% !important;
max-width: 58% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
position: relative !important;
min-height: auto !important;
margin: 0 !important;
}
/* Branded glow spotlight halo behind the vehicle */
.ev-logistic-image-glow {
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 80% !important;
height: 70% !important;
transform: translate(-50%, -50%) !important;
background: radial-gradient(circle, rgba(192, 18, 39, 0.05) 0%, rgba(192, 18, 39, 0.01) 55%, transparent 75%) !important;
filter: blur(54px) !important;
z-index: 0 !important;
pointer-events: none !important;
}
/* Image wrapper scaling naturally inside its column container */
.ev-logistic-image-wrapper {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
overflow: visible !important;
position: relative !important;
transform: scale(1.15) !important; /* Scale up image to make it larger and more dominant */
transform-origin: left center !important;
margin-left: -80px !important; /* Offset image to the left to anchor it to the container edge */
}
.ev-logistic-image-wrapper img {
width: 100% !important;
height: auto !important;
object-fit: contain !important;
filter: none !important; /* Blends solid white JPEG edges seamlessly into pure white background */
will-change: transform !important;
}
/* Balanced right column - takes up 42% for crisp textual reading */
.ev-logistic-content-col {
flex: 1 1 42% !important;
max-width: 42% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
margin: 0 !important;
}
.ev-logistic-kicker {
font-size: 14px !important;
font-weight: 400 !important;
line-height: 2.1429em !important;
letter-spacing: 0px !important; /* Expands to 3px on scroll */
text-transform: lowercase !important;
color: #111111 !important;
margin: 0 !important;
opacity: 0;
transform: translateY(-12px);
will-change: transform, opacity, letter-spacing;
text-align: left !important;
display: inline-block !important;
}
.ev-logistic-title-wrapper {
margin-bottom: 48px;
}
/* Expanded clean headings look from the screenshot */
.ev-logistic-title {
font-size: clamp(45px, 6.2vw, 96px);
font-weight: 500;
line-height: 0.95;
text-transform: uppercase;
color: #111111;
margin: 0 10px 0 0; /* Clean margin-right to shift title away from borders */
letter-spacing: -1.8px;
}
/* CSS for robust letter-by-letter animation wrapping */
.ev-word-inline {
display: inline-block;
white-space: nowrap; /* Prevents awkward character line breaks */
}
.ev-char-wrapper {
display: inline-block;
overflow: hidden;
vertical-align: top;
}
.ev-char {
display: inline-block;
transform: translateY(110%);
opacity: 0;
will-change: transform, opacity;
}
.ev-char-space {
display: inline-block;
}
.ev-logistic-accordion {
display: flex;
flex-direction: column;
width: 100%;
}
/* Sleek horizontal grid borders */
.ev-logistic-accordion-item {
width: 100%;
border-top: 1px solid #e5e7eb;
opacity: 0;
transform: translateY(20px);
will-change: transform, opacity;
transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.ev-logistic-accordion-item:last-child {
border-bottom: 1px solid #e5e7eb;
}
/* Soft highlight on row hover */
.ev-logistic-accordion-item:hover {
background: rgba(192, 18, 39, 0.015);
}
/* Spacious row padding for luxurious design - INCREASED font size for headers */
.ev-logistic-accordion-header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 28px 16px;
cursor: pointer;
background: transparent;
border: none;
text-align: left;
outline: none;
font-family: 'Manrope', sans-serif;
font-size: clamp(24px, 2.2vw, 30px); /* Increased to clamp up to 30px! */
font-weight: 700;
color: #111111;
transition: color 0.3s ease;
}
.ev-logistic-accordion-header span:first-child {
transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
display: inline-block;
}
/* Row text horizontal slide nudge */
.ev-logistic-accordion-header:hover {
color: #c01227;
}
.ev-logistic-accordion-header:hover span:first-child {
transform: translateX(10px);
}
.ev-logistic-accordion-item.active .ev-logistic-accordion-header {
color: #111111;
}
.ev-logistic-accordion-arrow-container {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
}
.ev-logistic-accordion-arrow-container svg {
width: 20px;
height: 20px;
stroke-width: 2.5;
}
/* Inactive arrows: point down-right ↘ */
.ev-logistic-accordion-item:not(.active) .ev-logistic-accordion-arrow-container {
transform: rotate(90deg);
color: #111111;
}
/* Active arrows: point up-right ↗ in brand red */
.ev-logistic-accordion-item.active .ev-logistic-accordion-arrow-container {
transform: rotate(0deg);
color: #c01227;
}
/* Hover: rotate smooth to diagonal up-right */
.ev-logistic-accordion-header:hover .ev-logistic-accordion-arrow-container {
transform: rotate(0deg);
color: #c01227;
}
.ev-logistic-accordion-content {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s ease;
}
.ev-logistic-accordion-item.active .ev-logistic-accordion-content {
max-height: 160px;
opacity: 1;
}
/* Balanced text spacing inside descriptions - INCREASED font size for descriptions */
.ev-logistic-accordion-content-inner {
padding: 0 16px 28px 16px;
font-size: clamp(18px, 1.5vw, 20px); /* Increased to clamp up to 20px! */
line-height: 1.6;
color: #555555;
font-weight: 500;
}
/* Underline track & sweeping active red bar */
.ev-logistic-accordion-progress-track {
position: relative;
width: 100%;
height: 1.5px;
background: transparent;
margin-top: -1.5px;
overflow: hidden;
}
.ev-logistic-accordion-progress-bar {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #c01227;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
will-change: transform;
}
.ev-logistic-accordion-item.active .ev-logistic-accordion-progress-bar {
transform: scaleX(1);
}
/* Responsiveness constraints */
@media (max-width: 1024px) {
.ev-logistic-section {
padding: 60px 24px;
margin-bottom: 60px;
}
.ev-logistic-body-grid {
flex-direction: column;
gap: 50px;
}
.ev-logistic-image-col {
flex: 1 1 100%;
max-width: 100%;
min-height: auto;
justify-content: center; /* Center layout on mobile */
}
.ev-logistic-image-wrapper {
max-width: 580px !important;
transform: none !important; /* Reset scale transform on mobile/tablet */
margin-left: 0 !important; /* Reset left margin offset on mobile/tablet */
justify-content: center !important;
}
.ev-logistic-content-col {
flex: 1 1 100%;
max-width: 100%;
}
.ev-logistic-title {
font-size: 38px;
}
}
@media (max-width: 768px) {
.ev-logistic-section {
padding: 40px 16px;
}
.ev-logistic-title {
font-size: 32px;
}
.ev-logistic-accordion-header {
font-size: 19px;
padding: 22px 8px;
}
.ev-logistic-accordion-content-inner {
padding: 0;
font-size: 15.5px;
}
}
`}}),(0,t.jsxs)("div",{ref:s,className:"ev-logistic-section",children:[(0,t.jsx)("div",{className:"ev-logistic-header",children:(0,t.jsx)("div",{className:"ev-logistic-kicker",children:"/ Build Electric Vehicles /"})}),(0,t.jsxs)("div",{className:"ev-logistic-body-grid",children:[(0,t.jsxs)("div",{className:"ev-logistic-image-col",children:[(0,t.jsx)("div",{className:"ev-logistic-image-glow"}),(0,t.jsx)("div",{ref:l,className:"ev-logistic-image-wrapper",children:(0,t.jsx)(a.default,{ref:c,src:"/images/ev.jpeg",alt:"EV Logistics",width:1050,height:854,priority:!0})})]}),(0,t.jsxs)("div",{className:"ev-logistic-content-col",children:[(0,t.jsx)("div",{className:"ev-logistic-title-wrapper",children:(0,t.jsx)("h3",{className:"ev-logistic-title",children:"LOGISTICS BUILT FOR ELECTRIC VEHICLES".split(" ").map((e,i)=>(0,t.jsxs)("span",{className:"ev-word-inline",children:[e.split("").map((e,i)=>(0,t.jsx)("span",{className:"ev-char-wrapper",children:(0,t.jsx)("span",{className:"ev-char",children:e})},i)),(0,t.jsx)("span",{className:"ev-char-space",children:" "})]},i))})}),(0,t.jsx)("div",{className:"ev-logistic-accordion",children:n.map(i=>(0,t.jsxs)("div",{className:`ev-logistic-accordion-item ${e===i.index?"active":""}`,children:[(0,t.jsxs)("button",{className:"ev-logistic-accordion-header",onClick:()=>{var e;return e=i.index,void o(t=>t===e?null:e)},"aria-expanded":e===i.index,children:[(0,t.jsxs)("span",{children:[i.num,". ",i.title]}),(0,t.jsx)("span",{className:"ev-logistic-accordion-arrow-container",children:(0,t.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,t.jsx)("line",{x1:"7",y1:"17",x2:"17",y2:"7"}),(0,t.jsx)("polyline",{points:"7 7 17 7 17 17"})]})})]}),(0,t.jsx)("div",{className:"ev-logistic-accordion-content",children:(0,t.jsx)("div",{className:"ev-logistic-accordion-content-inner",children:(0,t.jsx)("p",{style:{transform:e===i.index?"translateY(0)":"translateY(12px)",opacity:+(e===i.index),transition:"transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease",transitionDelay:"0.08s",margin:0},children:i.desc})})}),(0,t.jsx)("div",{className:"ev-logistic-accordion-progress-track",children:(0,t.jsx)("div",{className:"ev-logistic-accordion-progress-bar"})})]},i.index))})]})]})]})]})}])},47580,e=>{"use strict";var t=e.i(43476),i=e.i(71645),a=e.i(89970),r=e.i(83495);a.default.registerPlugin(r.ScrollTrigger),e.s(["default",0,function(){let e=(0,i.useRef)(null),r=(0,i.useRef)(null),o=(0,i.useRef)(null);return(0,i.useEffect)(()=>{let t=e.current,i=r.current,n=o.current;if(!t||!i||!n)return;let s=t.querySelectorAll(".table-row-hover"),l=t.querySelectorAll(".yes-badge, .advanced-badge");a.default.set([n,i],{opacity:0,y:45}),a.default.set(s,{opacity:0,y:20}),a.default.set(l,{opacity:0,scale:.8}),a.default.timeline({scrollTrigger:{trigger:t,start:"top 78%",toggleActions:"play none none none"}}).to([n,i],{opacity:1,y:0,duration:.95,stagger:.15,ease:"power4.out"}).to(s,{opacity:1,y:0,duration:.75,stagger:.05,ease:"power3.out"},"-=0.6").to(l,{opacity:1,scale:1,duration:.55,stagger:.03,ease:"back.out(1.6)"},"-=0.45")},[]),(0,t.jsxs)("section",{id:"comparison",className:"comparison-section",ref:e,children:[(0,t.jsx)("div",{className:"comparison-bg-glow"}),(0,t.jsx)("div",{className:"comparison-bg-dots"}),(0,t.jsxs)("div",{className:"container",children:[(0,t.jsxs)("div",{className:"comparison-header",ref:o,children:[(0,t.jsx)("div",{className:"advantage-eyebrow-container",children:(0,t.jsx)("span",{className:"advantage-eyebrow",children:"/ DoorMile wins/"})}),(0,t.jsx)("h2",{className:"moat-heading","data-text":"WHERE DOORMILE WINS",children:"WHERE DOORMILE WINS"}),(0,t.jsx)("p",{className:"moat-desc",children:"A side-by-side technical capabilities comparison showing how operational fleet ownership and dynamic AI planning disrupt basic aggregators."})]}),(0,t.jsx)("div",{className:"table-wrapper",ref:r,children:(0,t.jsxs)("table",{className:"comparison-table",children:[(0,t.jsx)("thead",{children:(0,t.jsxs)("tr",{children:[(0,t.jsx)("th",{children:"Capability"}),(0,t.jsx)("th",{className:"col-highlight",children:"Doormile"}),(0,t.jsx)("th",{children:"Aggregators"}),(0,t.jsx)("th",{children:"Local Couriers"}),(0,t.jsx)("th",{children:"Software Platforms"})]})}),(0,t.jsxs)("tbody",{children:[(0,t.jsxs)("tr",{className:"table-row-hover",children:[(0,t.jsxs)("td",{className:"capability-cell",children:[(0,t.jsxs)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,t.jsx)("rect",{x:"1",y:"3",width:"15",height:"13"}),(0,t.jsx)("polygon",{points:"16 8 20 8 23 11 23 16 16 16 16 8"}),(0,t.jsx)("circle",{cx:"5.5",cy:"18.5",r:"2.5"}),(0,t.jsx)("circle",{cx:"18.5",cy:"18.5",r:"2.5"})]}),"Owned fleet control"]}),(0,t.jsx)("td",{className:"col-highlight",children:(0,t.jsx)("span",{className:"yes-badge",children:"✓ Yes"})}),(0,t.jsx)("td",{className:"no-text",children:"No"}),(0,t.jsx)("td",{className:"partial-text",children:"Yes"}),(0,t.jsx)("td",{className:"no-text",children:"No"})]}),(0,t.jsxs)("tr",{className:"table-row-hover",children:[(0,t.jsxs)("td",{className:"capability-cell",children:[(0,t.jsxs)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,t.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,t.jsx)("polyline",{points:"12 6 12 12 16 14"})]}),"Dynamic routing & dispatch"]}),(0,t.jsx)("td",{className:"col-highlight",children:(0,t.jsx)("span",{className:"advanced-badge",children:"✓ Advanced"})}),(0,t.jsx)("td",{className:"partial-text",children:"Basic"}),(0,t.jsx)("td",{className:"no-text",children:"No"}),(0,t.jsx)("td",{className:"partial-text",children:"Advanced"})]}),(0,t.jsxs)("tr",{className:"table-row-hover",children:[(0,t.jsxs)("td",{className:"capability-cell",children:[(0,t.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:(0,t.jsx)("polygon",{points:"13 2 3 14 12 14 11 22 21 10 12 10 13 2"})}),"EV-aware planning"]}),(0,t.jsx)("td",{className:"col-highlight",children:(0,t.jsx)("span",{className:"yes-badge",children:"✓ Yes"})}),(0,t.jsx)("td",{className:"no-text",children:"No"}),(0,t.jsx)("td",{className:"no-text",children:"No"}),(0,t.jsx)("td",{className:"no-text",children:"No"})]}),(0,t.jsxs)("tr",{className:"table-row-hover",children:[(0,t.jsxs)("td",{className:"capability-cell",children:[(0,t.jsxs)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,t.jsx)("path",{d:"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"}),(0,t.jsx)("polyline",{points:"14 2 14 8 20 8"}),(0,t.jsx)("line",{x1:"16",y1:"13",x2:"8",y2:"13"}),(0,t.jsx)("line",{x1:"16",y1:"17",x2:"8",y2:"17"}),(0,t.jsx)("polyline",{points:"10 9 9 9 8 9"})]}),"Documentation & proof trail"]}),(0,t.jsx)("td",{className:"col-highlight",children:(0,t.jsx)("span",{className:"yes-badge",children:"✓ Yes"})}),(0,t.jsx)("td",{className:"partial-text",children:"Partial"}),(0,t.jsx)("td",{className:"no-text",children:"No"}),(0,t.jsx)("td",{className:"partial-text",children:"Yes"})]}),(0,t.jsxs)("tr",{className:"table-row-hover",children:[(0,t.jsxs)("td",{className:"capability-cell",children:[(0,t.jsxs)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,t.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,t.jsx)("polyline",{points:"12 6 12 12 16 14"})]}),"Real-time tracking"]}),(0,t.jsx)("td",{className:"col-highlight",children:(0,t.jsx)("span",{className:"yes-badge",children:"✓ Yes"})}),(0,t.jsx)("td",{className:"partial-text",children:"Yes"}),(0,t.jsx)("td",{className:"no-text",children:"No"}),(0,t.jsx)("td",{className:"partial-text",children:"Yes"})]}),(0,t.jsxs)("tr",{className:"table-row-hover",children:[(0,t.jsxs)("td",{className:"capability-cell",children:[(0,t.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:(0,t.jsx)("path",{d:"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"})}),"Verified handling"]}),(0,t.jsx)("td",{className:"col-highlight",children:(0,t.jsx)("span",{className:"yes-badge",children:"✓ Yes"})}),(0,t.jsx)("td",{className:"partial-text",children:"Partial"}),(0,t.jsx)("td",{className:"no-text",children:"No"}),(0,t.jsx)("td",{className:"no-text",children:"No"})]}),(0,t.jsxs)("tr",{className:"table-row-hover",children:[(0,t.jsxs)("td",{className:"capability-cell",children:[(0,t.jsxs)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,t.jsx)("path",{d:"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"}),(0,t.jsx)("path",{d:"M13.73 21a2 2 0 0 1-3.46 0"})]}),"Hyperlocal learning"]}),(0,t.jsx)("td",{className:"col-highlight",children:(0,t.jsx)("span",{className:"yes-badge",children:"✓ Yes"})}),(0,t.jsx)("td",{className:"no-text",children:"No"}),(0,t.jsx)("td",{className:"no-text",children:"No"}),(0,t.jsx)("td",{className:"no-text",children:"No"})]}),(0,t.jsxs)("tr",{className:"table-row-hover",children:[(0,t.jsxs)("td",{className:"capability-cell",children:[(0,t.jsxs)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,t.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,t.jsx)("line",{x1:"22",y1:"12",x2:"18",y2:"12"}),(0,t.jsx)("line",{x1:"6",y1:"12",x2:"2",y2:"12"}),(0,t.jsx)("line",{x1:"12",y1:"6",x2:"12",y2:"2"}),(0,t.jsx)("line",{x1:"12",y1:"22",x2:"12",y2:"18"})]}),"SLA accountability"]}),(0,t.jsx)("td",{className:"col-highlight",children:(0,t.jsx)("span",{className:"advanced-badge",children:"✓ High"})}),(0,t.jsx)("td",{className:"no-text",children:"Low"}),(0,t.jsx)("td",{className:"partial-text",children:"Medium"}),(0,t.jsx)("td",{className:"no-text",children:"Low"})]})]})]})})]}),(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:`
/* --- HIGH-IMPACT PREMIUM CAPABILITIES SECTION STYLE --- */
.comparison-section {
position: relative;
padding: 120px 0;
background-color: #fafafa;
overflow: hidden;
font-family: "Manrope", sans-serif;
}
/* Spotlight radial background glow */
.comparison-bg-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1000px;
height: 1000px;
background: radial-gradient(circle, rgba(200, 16, 46, 0.035) 0%, transparent 70%);
z-index: 0;
pointer-events: none;
}
/* Subtle logistics dot grid overlay */
.comparison-bg-dots {
position: absolute;
inset: 0;
background-image: radial-gradient(#e2e4e8 1.5px, transparent 1.5px);
background-size: 32px 32px;
opacity: 0.45;
z-index: 0;
pointer-events: none;
}
.comparison-section .container {
position: relative;
z-index: 2;
max-width: 1400px; /* Restored/Expanded for gorgeous wide balance on large screens */
margin: 0 auto;
padding: 0 40px;
}
/* Section Header Layout */
.comparison-header {
text-align: left;
margin-bottom: 60px;
position: relative;
z-index: 2;
width: 100%;
}
.advantage-eyebrow-container {
width: 100%;
border-bottom: 2px solid rgba(0, 0, 0, 0.16);
padding-bottom: 16px;
margin-bottom: 28px;
}
/* DoorMile Advantage Eyebrow */
.advantage-eyebrow {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #060606ff;
display: inline-block;
white-space: nowrap;
}
/* Outlined heading style with clean duplicate layering hack */
.moat-heading {
position: relative;
font-family: var(--font-syne), 'Syne', sans-serif !important;
font-size: clamp(2.4rem, 6.8vw, 6.6rem) !important;
font-weight: 800 !important;
line-height: 1.1 !important;
color: #fafafa !important; /* solid background color to cover inner overlapping outlines */
margin: 0 0 24px 0;
letter-spacing: -0.02em;
text-transform: uppercase;
word-wrap: break-word;
overflow-wrap: break-word;
z-index: 1;
}
.moat-heading::after {
content: attr(data-text) !important;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
color: transparent !important;
-webkit-text-stroke: 2.2px #c8102e;
-webkit-text-fill-color: transparent !important;
pointer-events: none;
display: block !important; /* override any old display: none */
}
.moat-desc {
font-family: 'Manrope', sans-serif;
font-size: 1.05rem;
line-height: 1.65;
color: #585c67;
margin: 16px 0 0 0 !important;
max-width: 820px !important;
text-align: left !important;
}
/* Spacious table styling wrapper (100% width on Desktop) */
.table-wrapper {
width: 100%;
background: #ffffff;
border-radius: 24px;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.015), 0 1px 3px rgba(0, 0, 0, 0.01);
overflow: hidden;
transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.table-wrapper:hover {
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.035), 0 1px 3px rgba(0, 0, 0, 0.01);
}
.comparison-table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
/* Enlarge row paddings and metrics size */
.comparison-table th,
.comparison-table td {
padding: 24px 28px;
border-bottom: 1px solid #f0f0f4;
font-size: 1rem;
color: #2b2b2b;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.comparison-table tr:last-child td {
border-bottom: none;
}
.comparison-table th {
font-family: 'Manrope', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.1em;
color: #8a8f9d;
background: rgba(15, 23, 42, 0.02);
}
/* High weight column header highlights */
th.col-highlight {
background: #c8102e !important;
color: #ffffff !important;
text-align: center;
font-weight: 800;
font-size: 0.9rem;
letter-spacing: 0.1em;
border-left: 2.5px solid #c8102e;
border-right: 2.5px solid #c8102e;
box-shadow: 0 4px 20px rgba(200, 16, 46, 0.1);
}
/* High weight cells gradient & highlights */
td.col-highlight {
text-align: center;
color: #c8102e !important;
font-weight: 700;
background: linear-gradient(180deg, rgba(200, 16, 46, 0.025) 0%, rgba(200, 16, 46, 0.005) 100%) !important;
border-left: 2.5px solid rgba(200, 16, 46, 0.12);
border-right: 2.5px solid rgba(200, 16, 46, 0.12);
position: relative;
will-change: transform, box-shadow, background;
animation: doormile-glow-pulse 4s infinite ease-in-out;
}
/* Row Hover Enhancements: brighten row & trigger DoorMile glow expand */
.table-row-hover {
transition: background-color 0.3s ease;
}
.table-row-hover:hover td {
background-color: rgba(200, 16, 46, 0.01) !important;
}
.table-row-hover:hover td.col-highlight {
background: linear-gradient(180deg, rgba(200, 16, 46, 0.06) 0%, rgba(200, 16, 46, 0.02) 100%) !important;
border-left-color: rgba(200, 16, 46, 0.35);
border-right-color: rgba(200, 16, 46, 0.35);
box-shadow: inset 0 0 16px rgba(200, 16, 46, 0.04);
}
/* Soft Breathing Box Shadow Red Glow Pulse Loop */
@keyframes doormile-glow-pulse {
0% {
box-shadow: inset 0 0 0 0px rgba(200, 16, 46, 0);
}
50% {
box-shadow: inset 0 0 18px 2px rgba(200, 16, 46, 0.05);
}
100% {
box-shadow: inset 0 0 0 0px rgba(200, 16, 46, 0);
}
}
.capability-cell {
display: flex;
align-items: center;
gap: 14px;
font-weight: 700;
color: #111111;
font-size: 1.1rem;
}
.capability-cell svg {
color: #c8102e;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
flex-shrink: 0;
}
.table-row-hover:hover .capability-cell svg {
transform: scale(1.18) rotate(4deg);
}
/* Premium Badge styles */
.yes-badge {
display: inline-flex;
align-items: center;
gap: 6px;
color: #c8102e;
font-weight: 700;
font-size: 0.95rem;
background: rgba(200, 16, 46, 0.05);
padding: 4px 12px;
border-radius: 6px;
border: 1px solid rgba(200, 16, 46, 0.1);
will-change: transform, opacity;
}
.advanced-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(200, 16, 46, 0.075);
border: 1.5px solid #c8102e;
padding: 4px 12px;
border-radius: 8px;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 800;
color: #c8102e;
will-change: transform, opacity;
box-shadow: 0 4px 12px rgba(200, 16, 46, 0.06);
}
.no-text {
color: #8e94a5;
font-weight: 500;
}
.partial-text {
color: #4b5262;
font-weight: 500;
}
/* --- RESPONSIVE WORKFLOWS & BREAKPOINTS --- */
@media (max-width: 1200px) {
.comparison-section .container {
padding: 0 24px;
}
}
@media (max-width: 768px) {
.comparison-section {
padding: 80px 0;
}
.moat-heading {
font-size: 1.8rem;
}
/* Capability Matrix table gains responsive horizontal swipe scrolls */
.table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.comparison-table {
min-width: 720px; /* Forces optimal reading width swipe trail */
}
.comparison-table th,
.comparison-table td {
padding: 16px 18px;
font-size: 0.9rem;
}
.capability-cell {
font-size: 0.98rem;
}
}
`}})]})}])},2012,e=>{"use strict";var t=e.i(43476),i=e.i(71645),a=e.i(89970),r=e.i(83495);a.default.registerPlugin(r.ScrollTrigger);let o=[{year:2026,pct:25,trackLeft:"12.5%",phase:"Pilot Phase",phaseClass:"yellow",title:"Hyderabad Pilot",desc:"Launch operations in Hyderabad with dedicated EV hubs and MileTruth AI v1.0.",icon:(0,t.jsxs)("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,t.jsx)("path",{d:"M4.5 16.5c-1.5 1.5-2.5 3.5-2.5 5.5C4 22 6 21 7.5 19.5"}),(0,t.jsx)("path",{d:"M12 12l9-9-9 9z"}),(0,t.jsx)("path",{d:"M12 12c-2.3 2.3-3.4 5.3-3.5 8.5l12-12c-3.2-.1-6.2-1.2-8.5-3.5z"})]}),stats:[{text:"50-80 orders/day",icon:(0,t.jsxs)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",children:[(0,t.jsx)("rect",{x:"3",y:"4",width:"18",height:"18",rx:"2",ry:"2"}),(0,t.jsx)("line",{x1:"16",y1:"2",x2:"16",y2:"6"}),(0,t.jsx)("line",{x1:"8",y1:"2",x2:"8",y2:"6"}),(0,t.jsx)("line",{x1:"3",y1:"10",x2:"21",y2:"10"})]})},{text:"1 city",icon:(0,t.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",children:(0,t.jsx)("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"})})},{text:"10+ women partners",icon:(0,t.jsxs)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",children:[(0,t.jsx)("path",{d:"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"}),(0,t.jsx)("circle",{cx:"9",cy:"7",r:"4"})]})}]},{year:2027,pct:50,trackLeft:"37.5%",phase:"Multi-City",phaseClass:"green",title:"Multi-City Scale",desc:"Expand to Bengaluru and Chennai, securing key B2B enterprise traction.",icon:(0,t.jsxs)("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",children:[(0,t.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,t.jsx)("line",{x1:"12",y1:"8",x2:"12",y2:"16"}),(0,t.jsx)("line",{x1:"8",y1:"12",x2:"16",y2:"12"})]}),stats:[{text:"300-500 orders/day",icon:(0,t.jsxs)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",children:[(0,t.jsx)("rect",{x:"3",y:"4",width:"18",height:"18",rx:"2",ry:"2"}),(0,t.jsx)("line",{x1:"16",y1:"2",x2:"16",y2:"6"}),(0,t.jsx)("line",{x1:"8",y1:"2",x2:"8",y2:"6"}),(0,t.jsx)("line",{x1:"3",y1:"10",x2:"21",y2:"10"})]})},{text:"3 cities",icon:(0,t.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",children:(0,t.jsx)("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"})})},{text:"50+ EVs",icon:(0,t.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",children:(0,t.jsx)("polygon",{points:"13 2 3 14 12 14 11 22 21 10 12 10 13 2"})})}]},{year:2028,pct:75,trackLeft:"62.5%",phase:"Platform",phaseClass:"blue",title:"Platform Expansion",desc:"Scale to 5+ cities. Launch developer API marketplace and Series A readiness.",icon:(0,t.jsxs)("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",children:[(0,t.jsx)("circle",{cx:"12",cy:"12",r:"3"}),(0,t.jsx)("path",{d:"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"})]}),stats:[{text:"1,200+ orders/day",icon:(0,t.jsxs)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",children:[(0,t.jsx)("rect",{x:"3",y:"4",width:"18",height:"18",rx:"2",ry:"2"}),(0,t.jsx)("line",{x1:"16",y1:"2",x2:"16",y2:"6"}),(0,t.jsx)("line",{x1:"8",y1:"2",x2:"8",y2:"6"}),(0,t.jsx)("line",{x1:"3",y1:"10",x2:"21",y2:"10"})]})},{text:"5+ cities",icon:(0,t.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",children:(0,t.jsx)("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"})})},{text:"API marketplace",icon:(0,t.jsxs)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",children:[(0,t.jsx)("polyline",{points:"16 18 22 12 16 6"}),(0,t.jsx)("polyline",{points:"8 6 2 12 8 18"})]})}]},{year:2030,pct:100,trackLeft:"87.5%",phase:"Vision State",phaseClass:"white-pill",title:"AI Pulse Layer",desc:"Nationwide AI logistics grid reaching 15+ cities, empowering female micro-entrepreneurs.",icon:(0,t.jsxs)("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,t.jsx)("path",{d:"M2 4l3 12h14l3-12-6 7-4-7-4 7-6-7z"}),(0,t.jsx)("path",{d:"M3 20h18",strokeWidth:"3"})]}),stats:[{text:"5,000+ orders/day",icon:(0,t.jsxs)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",children:[(0,t.jsx)("rect",{x:"3",y:"4",width:"18",height:"18",rx:"2",ry:"2"}),(0,t.jsx)("line",{x1:"16",y1:"2",x2:"16",y2:"6"}),(0,t.jsx)("line",{x1:"8",y1:"2",x2:"8",y2:"6"}),(0,t.jsx)("line",{x1:"3",y1:"10",x2:"21",y2:"10"})]})},{text:"Rs 65 Cr+ revenue",icon:(0,t.jsx)("span",{className:"currency-symbol",style:{marginRight:"4px",fontSize:"11px",fontWeight:800},children:"Rs"})},{text:"2,000+ women partners",icon:(0,t.jsxs)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",children:[(0,t.jsx)("path",{d:"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"}),(0,t.jsx)("circle",{cx:"9",cy:"7",r:"4"}),(0,t.jsx)("path",{d:"M23 21v-2a4 4 0 0 0-3-3.87"}),(0,t.jsx)("path",{d:"M16 3.13a4 4 0 0 1 0 7.75"})]})}]}];e.s(["default",0,function(){let[e,a]=(0,i.useState)(2030),r=(0,i.useRef)(null),n=(0,i.useRef)(null);(0,i.useEffect)(()=>{let e;if(!r.current)return;let t=n.current;if(!t)return;let i=t.getContext("2d");if(!i)return;let a=t.width=t.offsetWidth,o=t.height=t.offsetHeight,s=()=>{t&&(a=t.width=t.offsetWidth,o=t.height=t.offsetHeight)};window.addEventListener("resize",s);let l=[{name:"Hyderabad",x:.18,y:.55},{name:"Chennai",x:.42,y:.72},{name:"Bengaluru",x:.64,y:.42},{name:"Mumbai",x:.82,y:.62}],c=[{from:0,to:1,t:0,speed:.005},{from:1,to:2,t:.3,speed:.004},{from:2,to:3,t:.6,speed:.006}],d=()=>{i.clearRect(0,0,a,o),i.lineWidth=1.5,i.setLineDash([6,6]),i.strokeStyle="rgba(220, 38, 38, 0.12)",i.beginPath();for(let e=0;e<l.length-1;e++){let t=l[e].x*a,r=l[e].y*o,n=l[e+1].x*a,s=l[e+1].y*o;i.moveTo(t,r),i.lineTo(n,s)}i.stroke(),i.setLineDash([]),c.forEach(e=>{e.t+=e.speed,e.t>=1&&(e.t=0);let t=l[e.from],r=l[e.to],n=t.x*a,s=t.y*o,c=r.x*a,d=r.y*o,p=n+(c-n)*e.t,g=s+(d-s)*e.t;i.beginPath(),i.arc(p,g,4,0,2*Math.PI),i.fillStyle="#c01227",i.shadowColor="#c01227",i.shadowBlur=10,i.fill(),i.shadowBlur=0}),l.forEach(e=>{let t=e.x*a,r=e.y*o;i.beginPath(),i.arc(t,r,8,0,2*Math.PI),i.fillStyle="rgba(220, 38, 38, 0.08)",i.fill(),i.beginPath(),i.arc(t,r,3,0,2*Math.PI),i.fillStyle="rgba(255, 255, 255, 0.25)",i.fill(),i.fillStyle="rgba(255, 255, 255, 0.12)",i.font="bold 11px 'Manrope', sans-serif",i.textAlign="center",i.fillText(e.name,t,r-14)}),e=requestAnimationFrame(d)};return d(),()=>{window.removeEventListener("resize",s),cancelAnimationFrame(e)}},[]);let s=2026===e?25:2027===e?50:2028===e?75:100,l=2*Math.PI*30;return(0,t.jsx)("div",{ref:r,className:"elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent","data-id":"bbc6760","data-element_type":"container","data-e-type":"container",style:{position:"relative",zIndex:1},children:(0,t.jsxs)("section",{id:"hero",className:"roadmap-hero-section",children:[(0,t.jsx)("canvas",{ref:n,className:"ce-canvas-bg","aria-hidden":"true"}),(0,t.jsx)("div",{className:"roadmap-glow-spot top-left"}),(0,t.jsx)("div",{className:"roadmap-glow-spot bottom-right"}),(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:`
/* Buttery-Smooth Hardware-Accelerated 3D AI Logistics Timeline Styles */
.roadmap-hero-section {
position: relative;
background: #09090b !important;
/* Match the site-wide wide-band gutter EXACTLY. Measured against the
footer band (#b29b8fc) and the sibling "Women" band
(#women-entrepreneurship), both of which sit at a 20px left/right
gutter. The parent (#bbc6760) contributes no padding here (the
vendor padding vars resolve to 0), so the band carries the 20px
gutter itself via calc(100% - 40px) + auto margins:
at a 1910px viewport this renders left:20 right:1890 width:1870,
identical to the footer band. */
width: calc(100% - 40px);
margin-left: auto;
margin-right: auto;
border-radius: 24px;
padding: 100px 40px;
box-sizing: border-box;
font-family: 'Manrope', sans-serif;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: stretch;
}
/* Connection Grid Canvas Overlay */
.ce-canvas-bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.08;
}
/* Spotlights */
.roadmap-glow-spot {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
pointer-events: none;
filter: blur(140px);
z-index: 0;
opacity: 0.05;
}
.roadmap-glow-spot.top-left {
left: -10%;
top: -10%;
background: radial-gradient(circle, #C8102E 0%, transparent 70%);
}
.roadmap-glow-spot.bottom-right {
right: -10%;
bottom: -10%;
background: radial-gradient(circle, #ff0033 0%, transparent 70%);
}
.roadmap-hero-section .container {
/* Fill the wide section so the timeline + cards span most of the
available width (no narrow content cap). */
max-width: 100%;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
box-sizing: border-box;
}
/* Header Styles */
.vision-tag-top {
font-size: 13px;
font-weight: 800;
letter-spacing: 3px;
color: #C8102E;
text-transform: uppercase;
margin-bottom: 16px;
text-align: center;
}
.roadmap-hero-section .intelligence-grid-title {
color: #ffffff !important;
font-size: clamp(34px, 3.8vw, 54px) !important;
font-weight: 900 !important;
line-height: 1.1 !important;
text-align: center;
letter-spacing: -1.8px !important;
margin: 0 0 20px 0 !important;
text-transform: none !important;
}
.roadmap-hero-section .intelligence-grid-title-highlight {
color: #C8102E !important;
}
.vision-main-subtitle {
font-size: clamp(16px, 1.4vw, 20px);
font-weight: 500;
line-height: 1.5;
color: #a1a1aa !important;
text-align: center;
max-width: 720px;
margin: 0 auto 60px auto !important;
}
/* Glowing 3D Timeline Track - Overflow Visible Guarantees No Halo Cutoffs */
.roadmap-track-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
width: 100%;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 20px;
padding: 24px 34px;
box-sizing: border-box;
backdrop-filter: blur(8px);
margin-bottom: 60px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
overflow: visible !important; /* Extremely important to prevent cropping timeline child elements */
}
.roadmap-track-label {
font-size: 13.5px;
font-weight: 800;
letter-spacing: 2px;
color: #71717a;
white-space: nowrap;
}
.timeline-horizontal-wrapper {
flex: 1 1 auto;
height: 6px;
background: rgba(255, 255, 255, 0.05);
border-radius: 3px;
position: relative;
display: flex;
align-items: center;
overflow: visible !important; /* Critical to let pulsing halo overlay expand outside the 6px wrapper */
}
.timeline-horizontal-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #C8102E;
box-shadow: 0 0 12px #C8102E;
border-radius: 3px;
transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
will-change: width;
}
.node-dots-row {
position: absolute;
inset: 0;
pointer-events: none;
overflow: visible !important; /* Dynamic expansion */
}
.node-dot-item {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: #18181b;
border: 2px solid rgba(255, 255, 255, 0.15);
transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
will-change: border-color, background-color, box-shadow;
overflow: visible !important;
}
.node-dot-item.active {
background: #C8102E;
border-color: #ffffff;
box-shadow: 0 0 10px #C8102E;
}
/* Pulsing crown node halo - Smoothly decays opacity to 0 to prevent visual pops/blinks */
.node-pulse-crown {
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1.5px solid #C8102E;
animation: node-breather 2s infinite ease-out;
pointer-events: none;
box-sizing: border-box;
overflow: visible !important;
}
@keyframes node-breather {
0% { transform: scale(0.95); opacity: 0.9; }
80% { opacity: 0.25; }
100% { transform: scale(1.6); opacity: 0; }
}
/* Progress Ring */
.roadmap-complete-pct-container {
display: flex;
align-items: center;
gap: 12px;
white-space: nowrap;
}
.roadmap-complete-pct {
font-size: 14px;
font-weight: 800;
letter-spacing: 1px;
color: #C8102E;
text-transform: uppercase;
}
.progress-ring-circle {
transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1);
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke: #C8102E;
filter: drop-shadow(0 0 4px #C8102E);
}
/* 4-Column Grid container */
.roadmap-grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
width: 100%;
box-sizing: border-box;
}
/* GPU Hardware-Accelerated Breathtakingly Smooth 3D Floating Cards */
.roadmap-col-card {
position: relative;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.06);
backdrop-filter: blur(16px);
border-radius: 20px;
padding: 30px 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
cursor: pointer;
will-change: transform, box-shadow;
}
/* Ultra-Smooth CSS scale and translation lifts on hover */
.roadmap-col-card:hover {
transform: translateY(-8px) scale(1.03);
border-color: rgba(255, 255, 255, 0.15);
background-color: rgba(255, 255, 255, 0.055);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}
/* Active card highlight state */
.roadmap-col-card.active {
border-color: rgba(200, 16, 46, 0.65);
background: rgba(200, 16, 46, 0.04);
box-shadow: 0 20px 40px rgba(200, 16, 46, 0.1);
}
.card-top-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.year-num {
font-size: 26px;
font-weight: 900;
color: #ffffff;
letter-spacing: -0.5px;
}
.card-icon-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.phase-badge-pill {
align-self: flex-start;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 6px;
margin-bottom: 18px;
letter-spacing: 0.5px;
}
.phase-badge-pill.yellow {
background: rgba(234, 179, 8, 0.12);
color: #eab308;
border: 1px solid rgba(234, 179, 8, 0.2);
}
.phase-badge-pill.green {
background: rgba(34, 197, 94, 0.12);
color: #22c55e;
border: 1px solid rgba(34, 197, 94, 0.2);
}
.phase-badge-pill.blue {
background: rgba(59, 130, 246, 0.12);
color: #3b82f6;
border: 1px solid rgba(59, 130, 246, 0.2);
}
.phase-badge-pill.white-pill {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.card-heading {
font-size: 18px;
font-weight: 800;
margin: 0 0 10px 0 !important;
letter-spacing: -0.3px;
}
.card-text {
font-size: 13.5px;
line-height: 1.5;
color: #a1a1aa !important;
margin: 0 0 20px 0 !important;
}
.card-pills-stack {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: auto;
}
.card-stat-pill-mini {
display: flex;
align-items: center;
font-size: 12.5px;
font-weight: 700;
color: #e4e4e7;
padding: 8px 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
will-change: transform;
}
.roadmap-col-card:hover .card-stat-pill-mini {
background: rgba(255, 255, 255, 0.06);
transform: translateY(-2px);
}
/* Special destination: Glowing 2030 AI Pulse Layer card */
.glowing-vision-card {
background: linear-gradient(135deg, rgba(200, 16, 46, 0.95) 0%, rgba(120, 10, 30, 0.98) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
animation: red-breath 4s infinite ease-in-out;
}
/* Hover scale override for 2030 vision card */
.glowing-vision-card:hover {
transform: translateY(-8px) scale(1.03) !important;
box-shadow: 0 20px 50px rgba(200, 16, 46, 0.7) !important;
}
/* Laser sweeping neon borders on 2030 vision card */
.glowing-vision-card::after {
content: "";
position: absolute;
inset: -1.5px;
border-radius: 20px;
background: linear-gradient(90deg, #C8102E, #ff3366, #ff0033, #C8102E);
background-size: 300% 100%;
animation: border-sweep 5s linear infinite;
z-index: -1;
opacity: 0.65;
}
@keyframes border-sweep {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes red-breath {
0%, 100% { box-shadow: 0 10px 40px rgba(200, 16, 46, 0.25), inset 0 0 15px rgba(255,255,255,0.05); }
50% { box-shadow: 0 10px 60px rgba(200, 16, 46, 0.6), inset 0 0 25px rgba(255,255,255,0.1); }
}
.glowing-vision-card .card-stat-pill-mini {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.glowing-vision-card:hover .card-stat-pill-mini {
background: rgba(255, 255, 255, 0.14) !important;
}
.glowing-vision-card .card-text {
color: rgba(255, 255, 255, 0.8) !important;
}
/* Floating sparks/particles inside the 2030 vision card */
.ce-sparkle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.85);
border-radius: 50%;
pointer-events: none;
filter: blur(0.5px);
}
.sparkle-1 { left: 15%; bottom: 8%; animation: float-spark 3s infinite ease-in; }
.sparkle-2 { left: 52%; bottom: 18%; animation: float-spark 4s infinite ease-in; animation-delay: 1.2s; }
.sparkle-3 { left: 82%; bottom: 12%; animation: float-spark 3.5s infinite ease-in; animation-delay: 2s; }
@keyframes float-spark {
0% { transform: translateY(0); opacity: 0; }
50% { opacity: 0.9; }
100% { transform: translateY(-70px); opacity: 0; }
}
/* Responsive Constraints */
@media (max-width: 1024px) {
.roadmap-hero-section {
width: calc(100% - 40px); /* keep the 20px site-standard band gutter */
padding: 80px 24px;
}
.roadmap-grid-container {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.roadmap-track-container {
padding: 20px 24px;
}
}
@media (max-width: 768px) {
.roadmap-hero-section {
width: calc(100% - 40px); /* keep the 20px site-standard band gutter */
padding: 60px 16px;
}
.roadmap-grid-container {
grid-template-columns: 1fr;
gap: 16px;
}
.roadmap-track-container {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.timeline-horizontal-wrapper {
width: 100%;
}
}
`}}),(0,t.jsxs)("div",{className:"container",children:[(0,t.jsx)("div",{className:"vision-tag-top",children:"VISION / 2030"}),(0,t.jsx)("div",{className:"elementor-element elementor-element-54d05ac elementor-widget elementor-widget-logico_heading","data-id":"54d05ac","data-element_type":"widget","data-widget_type":"logico_heading.default",children:(0,t.jsxs)("div",{className:"elementor-widget-container",children:[(0,t.jsxs)("h3",{className:"logico-title intelligence-grid-title",children:["The ",(0,t.jsx)("span",{className:"intelligence-grid-title-highlight",children:"Intelligence Grid"})," Behind Every Urban Mile"]}),(0,t.jsx)("p",{className:"vision-main-subtitle",children:"From Hyderabad EV pilot to nationwide AI logistics intelligence by 2030"})]})}),(0,t.jsxs)("div",{className:"roadmap-track-container",children:[(0,t.jsx)("span",{className:"roadmap-track-label",children:"ROADMAP TO 2030"}),(0,t.jsxs)("div",{className:"timeline-horizontal-wrapper",children:[(0,t.jsx)("div",{className:"timeline-horizontal-line"}),(0,t.jsx)("div",{className:"timeline-horizontal-fill",style:{width:2026===e?"12.5%":2027===e?"37.5%":2028===e?"62.5%":"87.5%"}}),(0,t.jsx)("div",{className:"node-dots-row",children:o.map(i=>(0,t.jsx)("div",{className:`node-dot-item ${e>=i.year?"active":""}`,style:{left:i.trackLeft},children:e===i.year&&(0,t.jsx)("div",{className:"node-pulse-crown"})},i.year))})]}),(0,t.jsxs)("div",{className:"roadmap-complete-pct-container",children:[(0,t.jsxs)("span",{className:"roadmap-complete-pct",children:[s,"% COMPLETE →"]}),(0,t.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 80 80",children:[(0,t.jsx)("circle",{cx:"40",cy:"40",r:"30",fill:"none",stroke:"rgba(255,255,255,0.06)",strokeWidth:"6"}),(0,t.jsx)("circle",{className:"progress-ring-circle",cx:"40",cy:"40",r:"30",fill:"none",strokeWidth:"6",strokeDasharray:l,strokeDashoffset:l*(1-s/100),strokeLinecap:"round"})]})]})]}),(0,t.jsx)("div",{className:"roadmap-grid-container",children:o.map(i=>{let r=2030===i.year,o=e===i.year;return(0,t.jsxs)("div",{onMouseEnter:()=>a(i.year),className:`roadmap-col-card ${r?"glowing-vision-card":""} ${o?"active":""}`,"data-card":i.year,children:[r&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("span",{className:"ce-sparkle sparkle-1"}),(0,t.jsx)("span",{className:"ce-sparkle sparkle-2"}),(0,t.jsx)("span",{className:"ce-sparkle sparkle-3"})]}),(0,t.jsxs)("div",{className:"card-top-row",children:[(0,t.jsx)("span",{className:"year-num",children:i.year}),(0,t.jsx)("div",{className:`card-icon-badge ${r?"translucent-white":""}`,children:i.icon})]}),(0,t.jsx)("span",{className:`phase-badge-pill ${i.phaseClass}`,children:i.phase}),(0,t.jsx)("h5",{className:"card-heading",style:{color:"white"},children:i.title}),(0,t.jsx)("p",{className:"card-text",children:i.desc}),(0,t.jsx)("div",{className:"card-pills-stack",children:i.stats.map((e,i)=>(0,t.jsxs)("div",{className:`card-stat-pill-mini ${r?"translucent-crimson":""}`,children:[e.icon,(0,t.jsx)("span",{children:e.text})]},i))})]},i.year)})})]})]})})}])}]);