1321 lines
67 KiB
JavaScript
1321 lines
67 KiB
JavaScript
(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),o=e.i(57688),a=e.i(89970),r=e.i(83495);a.default.registerPlugin(r.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,r]=(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 o=a.default.to(i,{y:"-=10",duration:4.5,ease:"sine.inOut",yoyo:!0,repeat:-1});return a.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"),()=>{o.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.45s cubic-bezier(0.25, 1, 0.5, 1),
|
||
border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1),
|
||
border-radius 0.45s cubic-bezier(0.25, 1, 0.5, 1),
|
||
box-shadow 0.45s 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);
|
||
}
|
||
|
||
/* ---- Active (expanded) item: subtle premium highlight ----
|
||
A soft ~5% red tint, a 16–20px rounded container, a 3px red
|
||
accent on the left (drawn as an inset shadow so the row never
|
||
shifts) and an extremely soft shadow for quiet depth. The grid
|
||
dividers directly above and below the active row are hidden so
|
||
the tinted block reads as one clean, rounded surface — refined
|
||
and integrated, never a floating "card". overflow:hidden clips
|
||
the progress bar to the rounded corners (it does not clip the
|
||
element's own outer shadow). */
|
||
.ev-logistic-accordion-item.active {
|
||
background: rgba(192, 18, 39, 0.045);
|
||
border-top-color: transparent;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
box-shadow:
|
||
inset 3px 0 0 0 #c01227,
|
||
0 4px 14px -12px rgba(17, 17, 17, 0.12);
|
||
}
|
||
.ev-logistic-accordion-item.active + .ev-logistic-accordion-item {
|
||
border-top-color: transparent;
|
||
}
|
||
.ev-logistic-accordion-item.active:last-child {
|
||
border-bottom-color: transparent;
|
||
}
|
||
/* Comfortable internal padding on the active row so the content
|
||
feels more structured and clears the left accent. */
|
||
.ev-logistic-accordion-item.active .ev-logistic-accordion-header {
|
||
padding-left: 28px;
|
||
padding-right: 28px;
|
||
}
|
||
.ev-logistic-accordion-item.active .ev-logistic-accordion-content-inner {
|
||
padding-left: 28px;
|
||
padding-right: 28px;
|
||
}
|
||
|
||
/* 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,
|
||
padding 0.45s cubic-bezier(0.25, 1, 0.5, 1);
|
||
}
|
||
|
||
.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;
|
||
transition: padding 0.45s cubic-bezier(0.25, 1, 0.5, 1);
|
||
}
|
||
|
||
/* 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);
|
||
}
|
||
|
||
/* The active row now carries its own highlight (tint + left accent),
|
||
so the bottom sweeping red bar is redundant and clashes with the
|
||
rounded corners — hide it while the row is expanded. */
|
||
.ev-logistic-accordion-item.active .ev-logistic-accordion-progress-track {
|
||
display: none;
|
||
}
|
||
|
||
/* Responsiveness constraints */
|
||
@media (max-width: 1024px) {
|
||
.ev-logistic-section {
|
||
padding: 60px 24px;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
/* Base rules above use !important (flex-direction:row, the 58/42%
|
||
column widths), so these overrides MUST also use !important or the
|
||
grid never stacks and the image/text stay squished side-by-side. */
|
||
.ev-logistic-body-grid {
|
||
flex-direction: column !important;
|
||
gap: 50px !important;
|
||
}
|
||
|
||
.ev-logistic-image-col {
|
||
flex: 1 1 100% !important;
|
||
max-width: 100% !important;
|
||
min-height: auto !important;
|
||
justify-content: center !important; /* 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% !important;
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* Keep the active row's comfortable padding proportional on phones
|
||
(smaller bump than desktop so it never crowds the narrow column). */
|
||
.ev-logistic-accordion-item.active {
|
||
border-radius: 16px;
|
||
}
|
||
.ev-logistic-accordion-item.active .ev-logistic-accordion-header {
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
}
|
||
.ev-logistic-accordion-item.active .ev-logistic-accordion-content-inner {
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
}
|
||
}
|
||
`}}),(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)(o.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 r(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),o=e.i(89970),a=e.i(83495);o.default.registerPlugin(a.ScrollTrigger),e.s(["default",0,function(){let e=(0,i.useRef)(null),a=(0,i.useRef)(null),r=(0,i.useRef)(null);return(0,i.useEffect)(()=>{let t=e.current,i=a.current,n=r.current;if(!t||!i||!n)return;let s=t.querySelectorAll(".table-row-hover"),l=t.querySelectorAll(".yes-badge, .advanced-badge");o.default.set([n,i],{opacity:0,y:45}),o.default.set(s,{opacity:0,y:20}),o.default.set(l,{opacity:0,scale:.8}),o.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:r,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:a,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;
|
||
}
|
||
}
|
||
|
||
/* On phones the 5-column table can't fit, so transform each row into a
|
||
stacked card: capability as the card title, then one "label: value"
|
||
line per competitor. Column labels are injected via nth-of-type so no
|
||
markup changes are needed (every row has the same column order). */
|
||
@media (max-width: 600px) {
|
||
.table-wrapper {
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
border-radius: 0;
|
||
overflow: visible;
|
||
}
|
||
.comparison-table { min-width: 0; width: 100%; }
|
||
.comparison-table thead { display: none; }
|
||
.comparison-table tbody,
|
||
.comparison-table tr,
|
||
.comparison-table td { display: block; width: auto; }
|
||
|
||
.comparison-table tr {
|
||
background: #ffffff;
|
||
border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 16px;
|
||
padding: 6px 16px 8px;
|
||
margin-bottom: 14px;
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.04);
|
||
}
|
||
|
||
/* Capability = card title (icon + name), no label */
|
||
.comparison-table td.capability-cell {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
gap: 12px;
|
||
font-size: 1.02rem;
|
||
padding: 12px 0 12px;
|
||
border-bottom: 1.5px solid #eef0f4;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
/* Value cells = "Label .... value" rows */
|
||
.comparison-table td:not(.capability-cell) {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #f4f5f7;
|
||
font-size: 0.95rem;
|
||
text-align: right;
|
||
}
|
||
.comparison-table tr td:last-child { border-bottom: none; }
|
||
|
||
.comparison-table td.col-highlight::before { content: "Doormile"; }
|
||
.comparison-table td:nth-of-type(3)::before { content: "Aggregators"; }
|
||
.comparison-table td:nth-of-type(4)::before { content: "Local Couriers"; }
|
||
.comparison-table td:nth-of-type(5)::before { content: "Software Platforms"; }
|
||
.comparison-table td:not(.capability-cell)::before {
|
||
font-weight: 700;
|
||
font-size: 0.72rem;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
color: #8a8f9d;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
/* Neutralise the desktop highlight column styling inside the card */
|
||
.comparison-table td.col-highlight {
|
||
background: transparent !important;
|
||
border-left: none;
|
||
border-right: none;
|
||
animation: none !important;
|
||
color: inherit !important;
|
||
}
|
||
}
|
||
`}})]})}])},2012,e=>{"use strict";var t=e.i(43476),i=e.i(71645),o=e.i(89970),a=e.i(83495);o.default.registerPlugin(a.ScrollTrigger);let r=[{year:2026,pct:25,trackLeft:"12.5%",phase:"Pilot Phase",phaseClass:"yellow",title:"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:"100+ 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:"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:"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:"Expansion",desc:"Scale to 5+ cities. Strengthen regional operations.",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:"5000+ 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:"100+ 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)("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:"50,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:"50+ cities",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,o]=(0,i.useState)(2030),a=(0,i.useRef)(null),n=(0,i.useRef)(null);(0,i.useEffect)(()=>{let e;if(!a.current)return;let t=n.current;if(!t)return;let i=t.getContext("2d");if(!i)return;let o=t.width=t.offsetWidth,r=t.height=t.offsetHeight,s=()=>{t&&(o=t.width=t.offsetWidth,r=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,o,r),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*o,a=l[e].y*r,n=l[e+1].x*o,s=l[e+1].y*r;i.moveTo(t,a),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],a=l[e.to],n=t.x*o,s=t.y*r,c=a.x*o,d=a.y*r,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*o,a=e.y*r;i.beginPath(),i.arc(t,a,8,0,2*Math.PI),i.fillStyle="rgba(220, 38, 38, 0.08)",i.fill(),i.beginPath(),i.arc(t,a,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,a-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:a,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% - 24px); /* tighter 12px gutter so the band reads edge-to-edge on phones */
|
||
padding: 52px 16px 44px;
|
||
border-radius: 22px;
|
||
}
|
||
.vision-main-subtitle { margin-bottom: 40px !important; }
|
||
|
||
/* Progress header → compact, centered summary card */
|
||
.roadmap-track-container {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
gap: 16px;
|
||
padding: 20px 18px;
|
||
margin-bottom: 36px;
|
||
}
|
||
.roadmap-track-label { font-size: 12px; letter-spacing: 1.5px; }
|
||
.timeline-horizontal-wrapper { width: 100%; }
|
||
.roadmap-complete-pct-container { justify-content: center; }
|
||
|
||
/* ── Vertical timeline: the four stacked cards become a connected
|
||
journey (2026 → 2030) with a coloured rail + phase node dots. ── */
|
||
.roadmap-grid-container {
|
||
grid-template-columns: 1fr;
|
||
gap: 18px;
|
||
position: relative;
|
||
padding-left: 32px;
|
||
}
|
||
.roadmap-grid-container::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 6px;
|
||
top: 16px;
|
||
bottom: 16px;
|
||
width: 2px;
|
||
border-radius: 2px;
|
||
background: linear-gradient(180deg, #eab308 0%, #22c55e 34%, #3b82f6 67%, #C8102E 100%);
|
||
opacity: 0.55;
|
||
}
|
||
.roadmap-col-card { padding: 24px 22px; }
|
||
/* node dot sits on the rail, aligned with the year number */
|
||
.roadmap-col-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -32px;
|
||
top: 28px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 50%;
|
||
background: #09090b;
|
||
border: 2px solid #C8102E;
|
||
box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(200, 16, 46, 0.7);
|
||
z-index: 3;
|
||
}
|
||
.roadmap-col-card[data-card="2026"]::before {
|
||
border-color: #eab308;
|
||
box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(234, 179, 8, 0.6);
|
||
}
|
||
.roadmap-col-card[data-card="2027"]::before {
|
||
border-color: #22c55e;
|
||
box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(34, 197, 94, 0.6);
|
||
}
|
||
.roadmap-col-card[data-card="2028"]::before {
|
||
border-color: #3b82f6;
|
||
box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(59, 130, 246, 0.6);
|
||
}
|
||
.roadmap-col-card[data-card="2030"]::before {
|
||
border-color: #ffffff;
|
||
background: #C8102E;
|
||
box-shadow: 0 0 0 4px #09090b, 0 0 16px rgba(200, 16, 46, 0.9);
|
||
}
|
||
/* the 2030 card's sweeping border (::after) would sit over the rail
|
||
gutter — keep it from bleeding past the card's rounded edge */
|
||
.glowing-vision-card::after { inset: -1px; }
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.roadmap-hero-section { padding: 44px 14px 38px; }
|
||
.roadmap-hero-section .intelligence-grid-title { font-size: clamp(28px, 8.4vw, 38px) !important; letter-spacing: -1px !important; }
|
||
.roadmap-grid-container { padding-left: 28px; }
|
||
.roadmap-grid-container::before { left: 5px; }
|
||
.roadmap-col-card { padding: 22px 18px; }
|
||
.roadmap-col-card::before { left: -28px; top: 26px; }
|
||
.year-num { font-size: 23px; }
|
||
.card-heading { font-size: 16px; }
|
||
.card-text { font-size: 13px; }
|
||
}
|
||
`}}),(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:r.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:r.map(i=>{let a=2030===i.year,r=e===i.year;return(0,t.jsxs)("div",{onMouseEnter:()=>o(i.year),onClick:()=>o(i.year),className:`roadmap-col-card ${a?"glowing-vision-card":""} ${r?"active":""}`,"data-card":i.year,children:[a&&(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 ${a?"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 ${a?"translucent-crimson":""}`,children:[e.icon,(0,t.jsx)("span",{children:e.text})]},i))})]},i.year)})})]})]})})}])}]); |