1164 lines
82 KiB
JavaScript
1164 lines
82 KiB
JavaScript
(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,58829,e=>{"use strict";var t=e.i(43476),i=e.i(71645);function a({from:e,to:r,duration:n=2e3,decimals:o=0,suffix:s=""}){let[l,d]=(0,i.useState)(e);return(0,i.useEffect)(()=>{let t=null,i=a=>{t||(t=a);let o=Math.min((a-t)/n,1);d(o*(r-e)+e),o<1&&window.requestAnimationFrame(i)};window.requestAnimationFrame(i)},[e,r,n]),(0,t.jsxs)(t.Fragment,{children:[l.toFixed(o),s]})}e.s(["default",0,function(){let[e,r]=(0,i.useState)(!1);return(0,i.useEffect)(()=>{requestAnimationFrame(()=>r(!0))},[]),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:`
|
||
/* ── Hero wrapper: column layout, zero gap between hero + stats ── */
|
||
.miletruth-hero .elementor-element-86f3204 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
margin: 0;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
/* ── Hero slider card ── */
|
||
.miletruth-hero-container {
|
||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.3) 100%), url('/images/miletruth-bg.png') !important;
|
||
background-size: cover !important;
|
||
background-position: center !important;
|
||
background-repeat: no-repeat !important;
|
||
/* Match the home page hero card (800px) so MileTruth has the same visual
|
||
presence on large desktop, MacBook M1/Pro, and standard laptops. */
|
||
min-height: 800px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
border-radius: 25px 25px 0 0;
|
||
margin-top: 20px;
|
||
padding: 100px 40px;
|
||
}
|
||
.miletruth-hero-container::before {
|
||
display: none !important;
|
||
}
|
||
.miletruth-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 100%;
|
||
padding: 0 40px !important;
|
||
box-sizing: border-box;
|
||
}
|
||
.miletruth-hero .content-slider-item-heading,
|
||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||
color: rgba(255, 255, 255, 0.96) !important;
|
||
font-family: var(--font-manrope), "Manrope", sans-serif !important;
|
||
font-size: clamp(34px, 5.5vw, 72px) !important;
|
||
font-weight: 850 !important;
|
||
line-height: 1.05 !important;
|
||
letter-spacing: -1.5px !important;
|
||
text-transform: uppercase !important;
|
||
text-align: center !important;
|
||
display: block;
|
||
}
|
||
.miletruth-hero .content-slider-item-text {
|
||
margin-top: 22px !important;
|
||
text-align: center !important;
|
||
}
|
||
.miletruth-hero .content-slider-item-text p {
|
||
color: rgba(255, 255, 255, 0.72) !important;
|
||
font-family: var(--font-manrope), "Manrope", sans-serif !important;
|
||
font-size: clamp(16px, 1.8vw, 20px) !important;
|
||
font-weight: 500 !important;
|
||
line-height: 1.6 !important;
|
||
margin: 0 auto !important;
|
||
max-width: 800px;
|
||
}
|
||
.miletruth-hero .slide-content {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
text-align: center !important;
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
padding: 0 40px !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
.miletruth-hero .slide-content-inner {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
text-align: center !important;
|
||
margin-left: auto !important;
|
||
margin-right: auto !important;
|
||
max-width: 1000px !important;
|
||
width: 100% !important;
|
||
}
|
||
.miletruth-hero .content-slider-item-heading,
|
||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||
text-align: center !important;
|
||
display: block !important;
|
||
width: 100% !important;
|
||
margin-left: auto !important;
|
||
margin-right: auto !important;
|
||
}
|
||
.miletruth-hero .content-slider-item-text {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
width: 100% !important;
|
||
margin-top: 23px !important;
|
||
text-align: center !important;
|
||
}
|
||
.miletruth-hero .text-content {
|
||
text-align: center !important;
|
||
max-width: 800px !important;
|
||
margin: 0 auto !important;
|
||
}
|
||
/* The "logico" slider reveal animation leaves these at opacity:0 until
|
||
its JS runs (absent in this rebuild), hiding the heading + subtitle.
|
||
Force them visible. */
|
||
.miletruth-hero .content-slider-item-heading,
|
||
.miletruth-hero .content-slider-item-text,
|
||
.miletruth-hero .logico-content-wrapper-1,
|
||
.miletruth-hero .logico-content-wrapper-2 {
|
||
opacity: 1 !important;
|
||
transform: none !important;
|
||
visibility: visible !important;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════
|
||
Stats bar — dark rounded card overlapping the hero bottom
|
||
══════════════════════════════════════════════════════════════════ */
|
||
.miletruth-hero .elementor-element-8e5c81e {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: center !important;
|
||
width: 100% !important;
|
||
margin: -25px 0 0 0 !important;
|
||
background-color: #1F1F1F !important;
|
||
border-radius: 25px !important;
|
||
padding: 40px 0 !important;
|
||
position: relative !important;
|
||
z-index: 1 !important;
|
||
}
|
||
.miletruth-hero .elementor-element-8e5c81e > .e-con-inner {
|
||
width: 100% !important;
|
||
max-width: 1440px !important;
|
||
height: auto !important;
|
||
margin: 0 auto !important;
|
||
padding: 0 40px !important;
|
||
flex-grow: 0 !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* 4-col grid for counter widgets — rows size to content (not 1fr of the
|
||
container) so the counters aren't parked at the top of a tall row. */
|
||
.miletruth-hero .elementor-element-628123a {
|
||
display: grid !important;
|
||
grid-template-columns: repeat(4, 1fr) !important;
|
||
grid-template-rows: auto !important;
|
||
height: auto !important;
|
||
gap: 40px !important;
|
||
width: 100% !important;
|
||
justify-items: start !important;
|
||
align-items: start !important;
|
||
align-content: start !important;
|
||
}
|
||
|
||
/* Counter: title on top, number below, left-aligned */
|
||
.miletruth-hero .elementor-counter {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
align-items: flex-start !important;
|
||
text-align: left !important;
|
||
}
|
||
|
||
/* Counter title — above the number */
|
||
.miletruth-hero .elementor-counter-title {
|
||
font-family: var(--font-manrope), "Manrope", sans-serif !important;
|
||
font-size: 20px !important;
|
||
font-weight: 600 !important;
|
||
line-height: 1.3em !important;
|
||
color: #FFFFFF !important;
|
||
margin-bottom: 12px !important;
|
||
text-transform: none !important;
|
||
}
|
||
|
||
/* Counter number wrapper — centered */
|
||
.miletruth-hero .elementor-counter-number-wrapper {
|
||
font-family: var(--font-space-grotesk), "Space Grotesk", var(--font-manrope), "Manrope", sans-serif !important;
|
||
font-size: clamp(48px, 6.5vw, 100px) !important;
|
||
font-weight: 700 !important;
|
||
line-height: 1em !important;
|
||
color: #C01227 !important;
|
||
letter-spacing: -0.03em !important;
|
||
display: flex !important;
|
||
align-items: baseline !important;
|
||
justify-content: flex-start !important;
|
||
}
|
||
.miletruth-hero .elementor-counter-number {
|
||
color: #C01227 !important;
|
||
font-size: inherit !important;
|
||
font-weight: inherit !important;
|
||
}
|
||
.miletruth-hero .elementor-counter-number-suffix {
|
||
color: #C01227 !important;
|
||
font-size: inherit !important;
|
||
font-weight: inherit !important;
|
||
letter-spacing: -0.03em !important;
|
||
}
|
||
|
||
/* ── Responsive ── */
|
||
@media (max-width: 1200px) {
|
||
.miletruth-hero .content-slider-item-heading,
|
||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||
font-size: 60px !important;
|
||
}
|
||
}
|
||
@media (max-width: 1024px) {
|
||
.miletruth-hero-container {
|
||
min-height: 600px;
|
||
padding: 120px 0;
|
||
}
|
||
.miletruth-hero .elementor-element-8e5c81e {
|
||
padding: 40px 0 !important;
|
||
}
|
||
.miletruth-hero .elementor-element-628123a {
|
||
grid-template-columns: repeat(2, 1fr) !important;
|
||
gap: 50px 40px !important;
|
||
}
|
||
.miletruth-hero .content-slider-item-heading,
|
||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||
font-size: 50px !important;
|
||
line-height: 1.1 !important;
|
||
}
|
||
}
|
||
@media (max-width: 768px) {
|
||
.miletruth-hero .content-slider-item-heading,
|
||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||
font-size: 40px !important;
|
||
line-height: 1.12 !important;
|
||
}
|
||
.miletruth-hero .content-slider-item-text p {
|
||
font-size: 16px !important;
|
||
}
|
||
}
|
||
@media (max-width: 580px) {
|
||
.miletruth-hero-container {
|
||
min-height: 500px;
|
||
padding: 100px 0;
|
||
}
|
||
.miletruth-hero .elementor-element-86f3204 {
|
||
padding: 0 12px;
|
||
}
|
||
.miletruth-hero .elementor-element-8e5c81e {
|
||
padding: 30px 0 !important;
|
||
border-radius: 20px !important;
|
||
}
|
||
.miletruth-hero .elementor-element-628123a {
|
||
grid-template-columns: 1fr !important;
|
||
gap: 36px !important;
|
||
}
|
||
.miletruth-hero .content-slider-item-heading,
|
||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||
font-size: 32px !important;
|
||
}
|
||
}
|
||
`}}),(0,t.jsx)("div",{className:"elementor-63 miletruth-hero",children:(0,t.jsxs)("div",{className:"elementor-element elementor-element-86f3204 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent","data-id":"86f3204","data-element_type":"container","data-e-type":"container",children:[(0,t.jsx)("div",{className:"miletruth-hero-container",children:(0,t.jsx)("div",{className:"e-con-inner miletruth-content",children:(0,t.jsx)("div",{className:"logico-content-slider-widget",children:(0,t.jsx)("div",{className:"content-slider-wrapper",children:(0,t.jsx)("div",{className:"content-slider-container",children:(0,t.jsx)("div",{className:"content-slider owl-carousel owl-theme",children:(0,t.jsx)("div",{className:"content-item slider-item elementor-repeater-item-6867061 slide-style-standard",children:(0,t.jsx)("div",{className:"slide-content",style:{paddingLeft:0,paddingRight:0},children:(0,t.jsxs)("div",{className:"slide-content-inner",children:[(0,t.jsx)("h1",{className:"content-slider-item-heading logico-content-wrapper-1",children:(0,t.jsxs)("span",{className:"heading-content",children:["The Only AI Built",(0,t.jsx)("br",{}),"Exclusively for Logistics"]})}),(0,t.jsx)("div",{className:"content-slider-item-text logico-content-wrapper-2",children:(0,t.jsx)("div",{className:"text-content",children:(0,t.jsx)("p",{children:"Optimizes every stage of the delivery journey for maximum efficiency."})})})]})})})})})})})})}),(0,t.jsx)("div",{className:"elementor-element elementor-element-8e5c81e e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child","data-id":"8e5c81e","data-element_type":"container","data-e-type":"container","data-settings":'{"background_background":"classic"}',children:(0,t.jsx)("div",{className:"e-con-inner",children:(0,t.jsxs)("div",{className:"elementor-element elementor-element-628123a e-con-full e-grid cut-corner-no sticky-container-off e-con e-child","data-id":"628123a","data-element_type":"container","data-e-type":"container",children:[(0,t.jsx)("div",{className:"elementor-element elementor-element-1da88b5 elementor-widget elementor-widget-counter","data-id":"1da88b5","data-element_type":"widget","data-e-type":"widget","data-widget_type":"counter.default",children:(0,t.jsx)("div",{className:"elementor-widget-container",children:(0,t.jsxs)("div",{className:"elementor-counter",children:[(0,t.jsx)("div",{className:"elementor-counter-title",children:"SLA Compliance"}),(0,t.jsxs)("div",{className:"elementor-counter-number-wrapper",children:[(0,t.jsx)("span",{className:"elementor-counter-number",children:e?(0,t.jsx)(a,{from:1,to:99.9,decimals:1,suffix:""}):"1"}),(0,t.jsx)("span",{className:"elementor-counter-number-suffix",children:" %"})]})]})})}),(0,t.jsx)("div",{className:"elementor-element elementor-element-1da88b5 elementor-widget elementor-widget-counter","data-id":"1da88b5-2","data-element_type":"widget","data-e-type":"widget","data-widget_type":"counter.default",children:(0,t.jsx)("div",{className:"elementor-widget-container",children:(0,t.jsxs)("div",{className:"elementor-counter",children:[(0,t.jsx)("div",{className:"elementor-counter-title",children:"Distance Saved"}),(0,t.jsxs)("div",{className:"elementor-counter-number-wrapper",children:[(0,t.jsx)("span",{className:"elementor-counter-number",children:e?(0,t.jsx)(a,{from:1,to:42,decimals:0,suffix:""}):"1"}),(0,t.jsx)("span",{className:"elementor-counter-number-suffix",children:" %"})]})]})})}),(0,t.jsx)("div",{className:"elementor-element elementor-element-1da88b5 elementor-widget elementor-widget-counter","data-id":"1da88b5-3","data-element_type":"widget","data-e-type":"widget","data-widget_type":"counter.default",children:(0,t.jsx)("div",{className:"elementor-widget-container",children:(0,t.jsxs)("div",{className:"elementor-counter",children:[(0,t.jsx)("div",{className:"elementor-counter-title",children:"Fewer Vehicles"}),(0,t.jsxs)("div",{className:"elementor-counter-number-wrapper",children:[(0,t.jsx)("span",{className:"elementor-counter-number",children:e?(0,t.jsx)(a,{from:1,to:37,decimals:0,suffix:""}):"1"}),(0,t.jsx)("span",{className:"elementor-counter-number-suffix",children:" %"})]})]})})}),(0,t.jsx)("div",{className:"elementor-element elementor-element-a1cf3d4 elementor-widget elementor-widget-counter","data-id":"a1cf3d4","data-element_type":"widget","data-e-type":"widget","data-widget_type":"counter.default",children:(0,t.jsx)("div",{className:"elementor-widget-container",children:(0,t.jsxs)("div",{className:"elementor-counter",children:[(0,t.jsx)("div",{className:"elementor-counter-title",children:"Dispatch Latency"}),(0,t.jsxs)("div",{className:"elementor-counter-number-wrapper",children:[(0,t.jsx)("span",{className:"elementor-counter-number",children:e?(0,t.jsx)(a,{from:1,to:45,decimals:0,suffix:""}):"45"}),(0,t.jsx)("span",{className:"elementor-counter-number-suffix",children:"ms"})]})]})})})]})})})]})})]})}])},76756,e=>{"use strict";var t=e.i(43476),i=e.i(71645),a=e.i(46932),r=e.i(88653),n=e.i(70703),o=e.i(87652),s=e.i(95420),l=e.i(89970),d=e.i(83495),p=e.i(97202);let m=i.default.memo(function({kpi:e,scroll:r,index:n,jitter:o}){let l=(0,s.useTransform)(r,t=>{let i=Math.min(1,Math.max(0,(t-.7)/.27)),a=e.before+(e.after-e.before)*i;i>.95&&(a*=1+o);let r=i>.5?e.prefixAfter??"":e.prefixBefore??"";return"delayed"===e.key&&0===e.after&&i>.95?"0":`${r}${Math.round(a)}${e.suffix??""}`}),d=(0,s.useTransform)(r,t=>t>.835?e.labelAfter:e.labelBefore),m="orders"===e.key?p.COLORS.cyan:p.COLORS.red,c=p.COLORS.green,x=(0,s.useTransform)(r,[.7,.97],[(0,p.rgba)(m,1),(0,p.rgba)(c,1)]),g=(0,s.useTransform)(r,[.7,.97],[(0,p.rgba)(m,.28),(0,p.rgba)(c,.32)]),h=(0,s.useTransform)(g,e=>`0 10px 40px -12px ${e}, inset 0 1px 0 rgba(255,255,255,0.06)`),f=(0,s.useTransform)(r,[.7,.97],[(0,p.rgba)(m,.4),(0,p.rgba)(c,.45)]),b=(0,s.useTransform)(r,[.85,.97],[0,1]),u=(0,s.useTransform)(r,[.7,.97],[.12,1]),w=e.goodWhenLower?p.COLORS.green:"orders"===e.key?p.COLORS.cyan:p.COLORS.green,y=i.default.useMemo(()=>{switch(e.key){case"distance":case"vehicles":return"M 0,3 C 16,3 32,17 64,17";case"orders":return"M 0,17 C 16,6 32,19 64,8";case"delayed":case"cost":return"M 0,1 C 16,1 28,19 64,19";default:return"M 0,10 L 64,10"}},[e.key]);return(0,t.jsxs)(a.motion.div,{className:"dm-opt-metric",style:{boxShadow:h,borderColor:f,animationDelay:`${.06*n}s`},children:[(0,t.jsxs)("div",{className:"dm-opt-metric__top",children:[(0,t.jsx)(a.motion.span,{className:"dm-opt-metric__label",children:d}),(0,t.jsx)(a.motion.span,{className:"dm-opt-metric__arrow",style:{opacity:b,color:p.COLORS.green},children:e.goodWhenLower?"▼":"▲"})]}),(0,t.jsx)(a.motion.div,{className:"dm-opt-metric__value",style:{color:x},children:l}),(0,t.jsx)("div",{className:"dm-opt-metric__sparkline",style:{position:"absolute",bottom:8,right:12,opacity:.32,width:64,height:20,pointerEvents:"none"},children:(0,t.jsxs)("svg",{width:"100%",height:"100%",viewBox:"0 0 64 20",fill:"none",children:[(0,t.jsx)("defs",{children:(0,t.jsxs)("linearGradient",{id:`grad-${e.key}`,x1:"0",y1:"0",x2:"0",y2:"20",gradientUnits:"userSpaceOnUse",children:[(0,t.jsx)("stop",{offset:"0%",stopColor:w,stopOpacity:"0.22"}),(0,t.jsx)("stop",{offset:"100%",stopColor:w,stopOpacity:"0.0"})]})}),(0,t.jsx)("path",{d:y,stroke:w,strokeWidth:"1.2",strokeLinecap:"round",strokeLinejoin:"round"}),(0,t.jsx)("path",{d:`${y} L 64,20 L 0,20 Z`,fill:`url(#grad-${e.key})`})]})}),(0,t.jsx)("div",{className:"dm-opt-metric__bar",children:(0,t.jsx)(a.motion.div,{className:"dm-opt-metric__fill",style:{background:x,scaleX:u}})})]})}),c=i.default.memo(function({scroll:e}){let[a,r]=i.default.useState(()=>p.KPIS.map(()=>0));return i.default.useEffect(()=>{if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;let e=setInterval(()=>{document.hidden||r(p.KPIS.map(()=>(Math.random()-.5)*.008))},1100);return()=>clearInterval(e)},[]),(0,t.jsx)("div",{className:"dm-opt-metrics",role:"group","aria-label":"Optimization results",children:p.KPIS.map((i,r)=>(0,t.jsx)(m,{kpi:i,scroll:e,index:r,jitter:a[r]},i.key))})}),x=(0,n.default)(()=>e.A(49712),{loadableGenerated:{modules:[29539]},ssr:!1}),g=["chaos","scan","dissolve","optimize","reorganize","metrics"],h=[{label:"Analyze",icon:"🔍",activateAt:0},{label:"Optimize",icon:"⚡",activateAt:2},{label:"Assign",icon:"🚛",activateAt:3},{label:"Execute",icon:"📡",activateAt:4},{label:"Monitor",icon:"📊",activateAt:5}],f=i.default.memo(function(){let[e,r]=(0,i.useState)(59),[n,o]=(0,i.useState)(98.7),[s,l]=(0,i.useState)(5),[d,p]=(0,i.useState)(-12),[m,c]=(0,i.useState)(99.4);return(0,i.useEffect)(()=>{let e=e=>()=>{document.hidden||e()},t=setInterval(e(()=>{r(e=>e+ +(Math.random()>.4))}),4500),i=setInterval(e(()=>{o(e=>parseFloat(Math.min(99.1,Math.max(98.4,e+(Math.random()-.5)*.15)).toFixed(2)))}),2800),a=setInterval(e(()=>{l(e=>5===e?Math.random()>.5?4:5:Math.random()>.3?5:4)}),3500),n=setInterval(e(()=>{p(e=>parseFloat(Math.min(-11.5,Math.max(-12.8,e+(Math.random()-.5)*.2)).toFixed(1)))}),3200),s=setInterval(e(()=>{c(e=>parseFloat(Math.min(99.9,Math.max(98.8,e+(Math.random()-.5)*.12)).toFixed(2)))}),2500);return()=>{clearInterval(t),clearInterval(i),clearInterval(a),clearInterval(n),clearInterval(s)}},[]),(0,t.jsxs)(a.motion.div,{className:"dm-opt-insight",initial:{opacity:0,y:12},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.6,delay:.3},children:[(0,t.jsx)("span",{className:"dm-opt-insight__dot"}),(0,t.jsxs)("span",{className:"dm-opt-insight__text",children:["Live Analytics: ",(0,t.jsxs)("strong",{children:[e," Orders"]})]}),(0,t.jsx)("span",{className:"dm-opt-insight__sep"}),(0,t.jsxs)("span",{className:"dm-opt-insight__text",children:["AI Accuracy: ",(0,t.jsxs)("strong",{children:[n,"%"]})]}),(0,t.jsx)("span",{className:"dm-opt-insight__sep"}),(0,t.jsxs)("span",{className:"dm-opt-insight__text",children:["Fleet: ",(0,t.jsxs)("strong",{children:[s,"/5 EV Active"]})]}),(0,t.jsx)("span",{className:"dm-opt-insight__sep"}),(0,t.jsxs)("span",{className:"dm-opt-insight__text",children:["Route Health: ",(0,t.jsxs)("strong",{children:[m,"%"]})]}),(0,t.jsx)("span",{className:"dm-opt-insight__sep"}),(0,t.jsxs)("span",{className:"dm-opt-insight__text",children:["Carbon: ",(0,t.jsxs)("strong",{children:[d,"%"]})]})]})});function b(){let e=(0,i.useRef)(null),n=(0,i.useRef)(0),m=(0,o.useMotionValue)(0),[b,w]=(0,i.useState)("chaos"),[y,v]=(0,i.useState)("before"),[k,_]=(0,i.useState)(!1),[j,O]=(0,i.useState)(!1),[N,C]=(0,i.useState)(!1),[S,L]=(0,i.useState)(!1);(0,i.useEffect)(()=>{let e=window.matchMedia("(max-width: 767px)"),t=window.matchMedia("(prefers-reduced-motion: reduce)"),i=()=>{C(e.matches),L(t.matches)};return i(),e.addEventListener("change",i),t.addEventListener("change",i),()=>{e.removeEventListener("change",i),t.removeEventListener("change",i)}},[]),(0,i.useEffect)(()=>{let t=e.current;if(!t)return;let i=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(_(!0),O(!0),i.disconnect())},{rootMargin:"70% 0px"}),a=new IntersectionObserver(e=>O(e.some(e=>e.isIntersecting)),{rootMargin:"10% 0px"});return i.observe(t),a.observe(t),()=>{i.disconnect(),a.disconnect()}},[]),(0,i.useEffect)(()=>{let t=e.current;if(!t)return;l.default.registerPlugin(d.ScrollTrigger);let i="chaos",a="before",r=d.ScrollTrigger.create({trigger:t,start:"top top",end:"bottom bottom",scrub:.4,invalidateOnRefresh:!0,onUpdate:e=>{let t=e.progress;n.current=t,m.set(t);let r=(0,p.phaseFromProgress)(t);r!==i&&(i=r,w(r));let o=t<=2e-4?"before":t>=.9998?"after":"pinned";o!==a&&(a=o,v(o))}}),o=setTimeout(()=>d.ScrollTrigger.refresh(),120);return()=>{clearTimeout(o),r.kill()}},[m]);let R=(0,s.useTransform)(m,[.3,.55],[1,.32]),z=(0,s.useTransform)(m,[.3,.55],[0,3]),$=(0,s.useTransform)(z,e=>`blur(${e}px)`),T=(0,s.useTransform)(m,[.42,.66],[.36,1]),E=(0,s.useTransform)(m,[0,1],[0,1]),A=(0,s.useTransform)(m,[.2,.42],["8%","92%"]),I=(0,s.useTransform)(m,[.18,.22,.42,.46],[0,1,1,0]),M=(0,s.useTransform)(m,[.45,.6],[.15,.75]),F=g.indexOf(b);return(0,t.jsxs)("section",{ref:e,className:`dm-opt is-${y}`,"aria-label":"AI Logistics Optimization",children:[(0,t.jsx)("div",{className:"dm-opt-sticky",children:(0,t.jsxs)("div",{className:"dm-opt-card",children:[(0,t.jsx)("div",{className:"dm-opt-backdrop","aria-hidden":!0}),k&&(0,t.jsx)("div",{className:"dm-opt-canvas",children:(0,t.jsx)(x,{progress:n,reduced:S,isMobile:N,active:j&&"pinned"===y})}),(0,t.jsx)("div",{className:"dm-opt-vignette","aria-hidden":!0}),(0,t.jsx)(r.AnimatePresence,{mode:"wait",children:"chaos"!==b&&(0,t.jsx)(a.motion.div,{className:"dm-opt-floating-badge",initial:{scale:.85,opacity:0},animate:{scale:1,opacity:1},exit:{scale:.85,opacity:0},transition:{duration:.28,ease:"easeInOut"},style:{position:"absolute",top:"40%",left:"50%",x:"-50%",y:"-50%",zIndex:10,pointerEvents:"none"},children:(0,t.jsxs)("div",{className:"dm-opt-floating-badge__inner",children:[(0,t.jsx)("span",{className:`dm-opt-floating-badge__dot is-${b}`}),(0,t.jsx)("span",{className:"dm-opt-floating-badge__text",children:p.PHASE_LABELS[b]})]})},b)}),(0,t.jsx)(a.motion.div,{className:"dm-opt-divider",style:{opacity:M},"aria-hidden":!0}),(0,t.jsx)(a.motion.div,{className:"dm-opt-scanline",style:{top:A,opacity:I},"aria-hidden":!0}),(0,t.jsxs)("div",{className:"dm-opt-ui",children:[(0,t.jsxs)("header",{className:"dm-opt-head",children:[(0,t.jsxs)(a.motion.div,{className:"dm-opt-eyebrow",initial:{opacity:0,y:16},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.6},children:[(0,t.jsx)("span",{className:"dm-opt-dot"})," Doormile AI Control Tower"]}),(0,t.jsx)(a.motion.h2,{initial:{opacity:0,y:22},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.7,delay:.05},children:"AI Logistics Optimization Engine"}),(0,t.jsx)(a.motion.p,{initial:{opacity:0,y:22},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.7,delay:.12},children:"Watch Doormile's AI engine transform chaotic logistics into precision-optimized delivery networks — reducing distance, fleet size, delays, and cost in real time."}),(0,t.jsx)(a.motion.div,{className:"dm-opt-steps",initial:{opacity:0,y:14},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.7,delay:.18},children:h.map((e,a)=>{let r=F>=e.activateAt,n=F===e.activateAt;return(0,t.jsxs)(i.default.Fragment,{children:[a>0&&(0,t.jsx)("span",{className:`dm-opt-steps__line ${r?"is-active":""}`}),(0,t.jsxs)("span",{className:`dm-opt-steps__pill ${r?"is-active":""} ${n?"is-current":""}`,children:[(0,t.jsx)("span",{className:"dm-opt-steps__icon",children:e.icon}),(0,t.jsx)("span",{className:"dm-opt-steps__text",children:e.label})]})]},e.label)})}),(0,t.jsx)("div",{className:"dm-opt-progress",children:(0,t.jsx)("div",{className:"dm-opt-progress__track",children:(0,t.jsx)(a.motion.div,{className:"dm-opt-progress__fill",style:{scaleX:E}})})})]}),(0,t.jsxs)("div",{className:"dm-opt-compare",children:[(0,t.jsxs)(a.motion.aside,{className:"dm-opt-panel dm-opt-panel--bad",style:{opacity:R,filter:$},children:[(0,t.jsxs)("div",{className:"dm-opt-panel__badge",children:[(0,t.jsx)("span",{className:"dm-opt-pulse dm-opt-pulse--red"})," System: Congested"]}),(0,t.jsx)("h3",{children:"Without Optimization"}),(0,t.jsxs)("ul",{children:[(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--x",children:"✖"})," Chaotic overlapping routes"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--x",children:"✖"})," Duplicate & idle trips"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--x",children:"✖"})," 8 vehicles required"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--x",children:"✖"})," 23 delivery delays"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--x",children:"✖"})," +18% cost overrun"]})]})]}),(0,t.jsxs)(a.motion.aside,{className:"dm-opt-panel dm-opt-panel--good",style:{opacity:T},children:[(0,t.jsxs)("div",{className:"dm-opt-panel__badge dm-opt-panel__badge--good",children:[(0,t.jsx)("span",{className:"dm-opt-pulse dm-opt-pulse--green"})," System: Optimized"]}),(0,t.jsx)("h3",{children:"With Doormile AI"}),(0,t.jsxs)("ul",{children:[(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--ok",children:"✔"})," Optimized route clusters"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--ok",children:"✔"})," Intelligent vehicle assignment"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--ok",children:"✔"})," Multi-trip & EV planning"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--ok",children:"✔"})," Zero delivery delays"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--ok",children:"✔"})," 18% cost saved"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--ok",children:"✔"})," Carbon footprint reduced"]})]})]})]}),(0,t.jsxs)("div",{className:"dm-opt-foot",children:[(0,t.jsx)(c,{scroll:m}),(0,t.jsx)(f,{})]})]})]})}),(0,t.jsx)("style",{children:u})]})}let u=`
|
||
/* ===== OUTER SECTION: Transparent so the card floats ===== */
|
||
.dm-opt {
|
||
position: relative;
|
||
height: 230vh;
|
||
background: transparent;
|
||
margin-bottom: 0;
|
||
}
|
||
.dm-opt-sticky {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
background: transparent;
|
||
/* Promote the pinned layer to its own GPU compositing layer so scroll-driven
|
||
pin/scrub updates never trigger main-thread paints of the rest of the page. */
|
||
will-change: transform;
|
||
transform: translateZ(0);
|
||
backface-visibility: hidden;
|
||
}
|
||
.dm-opt.is-pinned .dm-opt-sticky { position: fixed; top: 0; left: 0; }
|
||
.dm-opt.is-after .dm-opt-sticky { position: absolute; top: auto; bottom: 0; }
|
||
|
||
/* ===== FLOATING CARD — the only colored surface ===== */
|
||
.dm-opt-card {
|
||
position: absolute !important;
|
||
top: 96px !important;
|
||
left: 20px !important;
|
||
right: 20px !important;
|
||
bottom: 0 !important;
|
||
/* flat bottom + flush to container so the Performance card butts directly
|
||
against it, reading as one continuous container (home-page technique) */
|
||
border-radius: 42px 42px 0 0 !important;
|
||
overflow: hidden !important;
|
||
// background: linear-gradient(165deg, #06101f 0%, #020617 35%, #040d1c 70%, #030a18 100%) !important;
|
||
// border: 0px solid ${(0,p.rgba)("#ffffff",.08)} !important;
|
||
border-bottom: none !important;
|
||
// box-shadow:
|
||
// 0 0 0 1px ${(0,p.rgba)(p.COLORS.cyan,.04)},
|
||
// 0 4px 30px -4px rgba(0, 0, 0, 0.7),
|
||
// 0 20px 80px -20px rgba(0, 0, 0, 0.6),
|
||
// 0 0 120px -30px ${(0,p.rgba)(p.COLORS.cyan,.08)},
|
||
// inset 0 1px 0 ${(0,p.rgba)("#ffffff",.06)},
|
||
// inset 0 -1px 0 ${(0,p.rgba)("#ffffff",.02)} !important;
|
||
// box-sizing: border-box !important;
|
||
}
|
||
/* Animated subtle grid pattern */
|
||
.dm-opt-card::before {
|
||
/* Expanded one tile beyond the (clipped) card so we can drift it via a GPU
|
||
transform instead of animating background-position (which repaints each frame). */
|
||
content: ""; position: absolute; inset: -60px; z-index: 0; pointer-events: none;
|
||
opacity: 0.035;
|
||
background-image:
|
||
linear-gradient(${(0,p.rgba)(p.COLORS.cyan,.5)} 1px, transparent 1px),
|
||
linear-gradient(90deg, ${(0,p.rgba)(p.COLORS.cyan,.5)} 1px, transparent 1px);
|
||
background-size: 60px 60px;
|
||
animation: dmOptGridDrift 25s linear infinite;
|
||
will-change: transform;
|
||
}
|
||
@keyframes dmOptGridDrift {
|
||
0% { transform: translate3d(0, 0, 0); }
|
||
100% { transform: translate3d(60px, 60px, 0); }
|
||
}
|
||
/* Radial center glow behind 3D scene */
|
||
.dm-opt-card::after {
|
||
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
|
||
background:
|
||
radial-gradient(ellipse 50% 45% at 50% 48%, ${(0,p.rgba)(p.COLORS.cyan,.08)} 0%, transparent 70%),
|
||
radial-gradient(ellipse 60% 40% at 50% 90%, ${(0,p.rgba)(p.COLORS.green,.05)} 0%, transparent 60%),
|
||
radial-gradient(ellipse 80% 50% at 50% 10%, ${(0,p.rgba)(p.COLORS.cyan,.04)} 0%, transparent 50%);
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.dm-opt-card {
|
||
top: 96px !important;
|
||
left: 20px !important;
|
||
right: 20px !important;
|
||
bottom: 0 !important;
|
||
border-radius: 42px 42px 0 0 !important;
|
||
}
|
||
}
|
||
@media (max-width: 767px) {
|
||
.dm-opt-card {
|
||
top: 86px !important;
|
||
left: 10px !important;
|
||
right: 10px !important;
|
||
bottom: 0 !important;
|
||
border-radius: 28px 28px 0 0 !important;
|
||
}
|
||
}
|
||
|
||
/* ===== INNER LAYERS ===== */
|
||
.dm-opt-backdrop {
|
||
position: absolute;
|
||
inset: 0; z-index: 0;
|
||
background:
|
||
radial-gradient(100% 70% at 50% 6%, ${(0,p.rgba)(p.COLORS.cyan,.06)} 0%, transparent 55%),
|
||
radial-gradient(80% 60% at 50% 100%, ${(0,p.rgba)(p.COLORS.green,.05)} 0%, transparent 55%);
|
||
}
|
||
.dm-opt-canvas { position: absolute; inset: 0; z-index: 1; }
|
||
.dm-opt-canvas canvas { display: block; }
|
||
.dm-opt-vignette {
|
||
position: absolute; inset: 0; z-index: 2; pointer-events: none;
|
||
background:
|
||
radial-gradient(110% 90% at 50% 50%, transparent 48%, ${(0,p.rgba)("#020617",.88)} 100%),
|
||
linear-gradient(180deg, ${(0,p.rgba)("#020617",.6)} 0%, transparent 20%, transparent 65%, ${(0,p.rgba)("#020617",.92)} 100%);
|
||
}
|
||
.dm-opt-divider {
|
||
position: absolute; left: 50%; top: 14%; bottom: 28%;
|
||
width: 1px; z-index: 3; pointer-events: none; transform: translateX(-0.5px);
|
||
background: linear-gradient(180deg, transparent, ${(0,p.rgba)(p.COLORS.cyan,.6)}, transparent);
|
||
box-shadow: 0 0 16px ${(0,p.rgba)(p.COLORS.cyan,.4)};
|
||
}
|
||
.dm-opt-scanline {
|
||
position: absolute; left: 6%; right: 6%; height: 2px; z-index: 3; pointer-events: none;
|
||
background: linear-gradient(90deg, transparent, ${p.COLORS.cyan}, transparent);
|
||
box-shadow: 0 0 22px ${(0,p.rgba)(p.COLORS.cyan,.8)};
|
||
}
|
||
|
||
/* ===== FLOATING AI STATUS BADGE ===== */
|
||
.dm-opt-floating-badge {
|
||
pointer-events: none;
|
||
}
|
||
.dm-opt-floating-badge__inner {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 8px 18px;
|
||
border-radius: 999px;
|
||
background: ${(0,p.rgba)(p.COLORS.ink,.85)};
|
||
border: 1.5px solid ${(0,p.rgba)(p.COLORS.cyan,.3)};
|
||
box-shadow:
|
||
0 10px 30px -5px rgba(0, 0, 0, 0.65),
|
||
0 0 24px -2px ${(0,p.rgba)(p.COLORS.cyan,.18)},
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||
backdrop-filter: blur(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
transition: border-color 0.4s ease, box-shadow 0.4s ease;
|
||
}
|
||
.dm-opt-floating-badge__dot {
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
background: ${p.COLORS.cyan};
|
||
box-shadow: 0 0 10px ${p.COLORS.cyan};
|
||
animation: dmOptPulse 1.4s ease-in-out infinite;
|
||
transition: background 0.4s ease, box-shadow 0.4s ease;
|
||
}
|
||
.dm-opt-floating-badge__dot.is-scan {
|
||
background: ${p.COLORS.cyan};
|
||
box-shadow: 0 0 10px ${p.COLORS.cyan};
|
||
}
|
||
.dm-opt-floating-badge__dot.is-dissolve,
|
||
.dm-opt-floating-badge__dot.is-optimize {
|
||
background: ${p.COLORS.amber};
|
||
box-shadow: 0 0 10px ${p.COLORS.amber};
|
||
}
|
||
.dm-opt-floating-badge__dot.is-reorganize {
|
||
background: #C084FC;
|
||
box-shadow: 0 0 10px #C084FC;
|
||
}
|
||
.dm-opt-floating-badge__dot.is-metrics {
|
||
background: ${p.COLORS.green};
|
||
box-shadow: 0 0 10px ${p.COLORS.green};
|
||
}
|
||
.dm-opt-floating-badge__text {
|
||
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: #F8FAFC;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* ===== UI OVERLAY ===== */
|
||
.dm-opt-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
|
||
.dm-opt-ui h2, .dm-opt-ui h3, .dm-opt-metric__value, .dm-opt-eyebrow, .dm-opt-phase {
|
||
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
|
||
}
|
||
|
||
/* ===== HEADER — compact, no dead space ===== */
|
||
.dm-opt-head {
|
||
position: absolute; top: clamp(18px, 3vh, 36px); left: 50%;
|
||
transform: translateX(-50%); width: min(640px, 90vw); text-align: center;
|
||
}
|
||
.dm-opt-eyebrow {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
|
||
color: ${p.COLORS.cyan}; padding: 5px 14px; border-radius: 999px;
|
||
background: ${(0,p.rgba)(p.COLORS.cyan,.06)}; border: 1px solid ${(0,p.rgba)(p.COLORS.cyan,.25)};
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.dm-opt-dot { width: 6px; height: 6px; border-radius: 50%; background: ${p.COLORS.cyan}; box-shadow: 0 0 10px ${p.COLORS.cyan}; }
|
||
.dm-opt .dm-opt-head h2 {
|
||
margin: 8px 0 4px !important; padding: 0 !important; color: #F8FAFC !important;
|
||
font-weight: 700 !important; text-transform: none !important;
|
||
font-size: clamp(22px, 2.4vw, 36px) !important; line-height: 1.1 !important;
|
||
letter-spacing: -0.015em !important;
|
||
}
|
||
.dm-opt .dm-opt-head p {
|
||
margin: 0 auto !important; padding: 0 !important; color: ${p.COLORS.textDim} !important;
|
||
max-width: 440px; font-size: clamp(11px, 1vw, 13px) !important; line-height: 1.45 !important;
|
||
}
|
||
|
||
/* ===== WORKFLOW STEPS ===== */
|
||
.dm-opt-steps {
|
||
display: flex; align-items: center; justify-content: center; gap: 0;
|
||
margin-top: 12px; flex-wrap: wrap;
|
||
}
|
||
.dm-opt-steps__pill {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
padding: 4px 10px; border-radius: 999px; font-weight: 600;
|
||
letter-spacing: 0.04em; text-transform: uppercase;
|
||
color: ${p.COLORS.slate};
|
||
background: ${(0,p.rgba)(p.COLORS.ink,.5)};
|
||
border: 1px solid ${(0,p.rgba)(p.COLORS.slate,.2)};
|
||
backdrop-filter: blur(6px);
|
||
transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
|
||
}
|
||
.dm-opt-steps__pill.is-active {
|
||
color: #E2E8F0;
|
||
background: ${(0,p.rgba)(p.COLORS.cyan,.1)};
|
||
border-color: ${(0,p.rgba)(p.COLORS.cyan,.35)};
|
||
box-shadow: 0 0 18px -6px ${(0,p.rgba)(p.COLORS.cyan,.5)};
|
||
}
|
||
.dm-opt-steps__pill.is-current {
|
||
color: ${p.COLORS.cyan};
|
||
border-color: ${(0,p.rgba)(p.COLORS.cyan,.6)};
|
||
box-shadow: 0 0 24px -4px ${(0,p.rgba)(p.COLORS.cyan,.6)};
|
||
}
|
||
.dm-opt-steps__icon { font-size: 11px; }
|
||
.dm-opt-steps__text { font-size: 9.5px; }
|
||
.dm-opt-steps__line {
|
||
display: block; width: 16px; height: 1px; margin: 0 2px;
|
||
background: ${(0,p.rgba)(p.COLORS.slate,.3)};
|
||
transition: background 0.45s ease;
|
||
}
|
||
.dm-opt-steps__line.is-active {
|
||
background: linear-gradient(90deg, ${p.COLORS.cyan}, ${p.COLORS.green});
|
||
box-shadow: 0 0 6px ${(0,p.rgba)(p.COLORS.cyan,.5)};
|
||
}
|
||
|
||
/* ===== PROGRESS BAR ===== */
|
||
.dm-opt-progress { margin-top: 10px; }
|
||
.dm-opt-progress__track {
|
||
height: 2px; border-radius: 999px; overflow: hidden;
|
||
background: ${(0,p.rgba)(p.COLORS.cyan,.1)}; max-width: 420px; margin: 0 auto;
|
||
}
|
||
.dm-opt-progress__fill {
|
||
height: 100%; width: 100%; transform-origin: left center; border-radius: 999px;
|
||
background: linear-gradient(90deg, ${p.COLORS.cyan}, ${p.COLORS.green});
|
||
box-shadow: 0 0 12px ${(0,p.rgba)(p.COLORS.cyan,.6)};
|
||
}
|
||
.dm-opt-status {
|
||
display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
|
||
padding: 4px 11px; border-radius: 999px;
|
||
background: ${(0,p.rgba)(p.COLORS.ink,.55)}; border: 1px solid ${(0,p.rgba)(p.COLORS.cyan,.18)};
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.dm-opt-status__dot {
|
||
width: 5px; height: 5px; border-radius: 50%; background: ${p.COLORS.cyan};
|
||
box-shadow: 0 0 8px ${p.COLORS.cyan}; animation: dmOptPulse 1.4s ease-in-out infinite;
|
||
}
|
||
.dm-opt-status__label {
|
||
font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #E2E8F0; font-weight: 600;
|
||
}
|
||
.dm-opt-status__step { font-size: 9.5px; color: ${p.COLORS.cyan}; font-weight: 600; }
|
||
|
||
/* ===== COMPARE PANELS — tighter, stronger ===== */
|
||
.dm-opt-compare {
|
||
position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
gap: 12px; padding: 0 clamp(12px, 2.5vw, 36px);
|
||
}
|
||
.dm-opt-panel {
|
||
pointer-events: auto; width: clamp(230px, 26vw, 340px);
|
||
padding: 18px 20px; border-radius: 20px;
|
||
background: ${(0,p.rgba)(p.COLORS.ink,.92)};
|
||
border: 1px solid ${(0,p.rgba)(p.COLORS.slate,.22)};
|
||
/* backdrop blur removed — panel opacity is scroll-driven, so the blur was
|
||
recomputed every scroll frame; a near-opaque fill reads the same and is free. */
|
||
}
|
||
.dm-opt-panel--bad {
|
||
border-color: ${(0,p.rgba)(p.COLORS.red,.45)};
|
||
box-shadow:
|
||
0 0 30px -8px ${(0,p.rgba)(p.COLORS.red,.35)},
|
||
0 20px 50px -20px ${(0,p.rgba)(p.COLORS.red,.25)},
|
||
inset 0 1px 0 ${(0,p.rgba)(p.COLORS.red,.08)};
|
||
}
|
||
.dm-opt-panel--good {
|
||
border-color: ${(0,p.rgba)(p.COLORS.green,.45)};
|
||
box-shadow:
|
||
0 0 30px -8px ${(0,p.rgba)(p.COLORS.green,.35)},
|
||
0 20px 50px -20px ${(0,p.rgba)(p.COLORS.green,.25)},
|
||
inset 0 1px 0 ${(0,p.rgba)(p.COLORS.green,.08)};
|
||
}
|
||
.dm-opt .dm-opt-panel h3 {
|
||
margin: 10px 0 12px !important; padding: 0 !important; color: #F1F5F9 !important;
|
||
font-size: clamp(15px, 1.4vw, 19px) !important; font-weight: 600 !important;
|
||
line-height: 1.15 !important; text-transform: none !important; letter-spacing: -0.01em !important;
|
||
}
|
||
.dm-opt .dm-opt-panel ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 7px; }
|
||
.dm-opt .dm-opt-panel li {
|
||
position: relative; padding-left: 0 !important; margin: 0 !important;
|
||
color: ${p.COLORS.textDim} !important; font-size: 12.5px !important; line-height: 1.35 !important;
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.dm-opt .dm-opt-panel li::marker { content: "" !important; }
|
||
/* Remove old dot pseudo — now using ✖/✔ markers */
|
||
.dm-opt .dm-opt-panel li::before { content: none !important; display: none !important; }
|
||
|
||
/* ✖/✔ markers */
|
||
.dm-opt-marker {
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0;
|
||
font-size: 10px; font-weight: 700; line-height: 1;
|
||
}
|
||
.dm-opt-marker--x {
|
||
background: ${(0,p.rgba)(p.COLORS.red,.15)};
|
||
color: ${p.COLORS.red};
|
||
border: 1px solid ${(0,p.rgba)(p.COLORS.red,.35)};
|
||
box-shadow: 0 0 8px ${(0,p.rgba)(p.COLORS.red,.3)};
|
||
}
|
||
.dm-opt-marker--ok {
|
||
background: ${(0,p.rgba)(p.COLORS.green,.15)};
|
||
color: ${p.COLORS.green};
|
||
border: 1px solid ${(0,p.rgba)(p.COLORS.green,.35)};
|
||
box-shadow: 0 0 8px ${(0,p.rgba)(p.COLORS.green,.3)};
|
||
}
|
||
|
||
.dm-opt-panel__badge {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
|
||
color: ${p.COLORS.red}; padding: 5px 10px; border-radius: 999px;
|
||
background: ${(0,p.rgba)(p.COLORS.red,.1)}; border: 1px solid ${(0,p.rgba)(p.COLORS.red,.35)};
|
||
}
|
||
.dm-opt-panel__badge--good { color: ${p.COLORS.green}; background: ${(0,p.rgba)(p.COLORS.green,.1)}; border-color: ${(0,p.rgba)(p.COLORS.green,.35)}; }
|
||
.dm-opt-pulse { width: 6px; height: 6px; border-radius: 50%; animation: dmOptPulse 1.4s ease-in-out infinite; }
|
||
.dm-opt-pulse--red { background: ${p.COLORS.red}; box-shadow: 0 0 10px ${p.COLORS.red}; }
|
||
.dm-opt-pulse--green { background: ${p.COLORS.green}; box-shadow: 0 0 10px ${p.COLORS.green}; }
|
||
@keyframes dmOptPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }
|
||
|
||
/* ===== METRICS ===== */
|
||
.dm-opt-foot {
|
||
position: absolute; left: 0; right: 0; bottom: clamp(12px, 2.5vh, 28px);
|
||
padding: 0 clamp(12px, 3vw, 36px);
|
||
}
|
||
.dm-opt-metrics {
|
||
pointer-events: auto; display: grid; grid-template-columns: repeat(5, 1fr);
|
||
gap: 10px; max-width: 1100px; margin: 0 auto;
|
||
}
|
||
.dm-opt-metric {
|
||
position: relative; padding: 14px 14px 12px; border-radius: 16px;
|
||
background: ${(0,p.rgba)(p.COLORS.ink,.92)};
|
||
border: 1px solid ${(0,p.rgba)(p.COLORS.slate,.25)};
|
||
/* backdrop blur removed — 5 metric cards animate on scroll; per-frame blur recompute was a hotspot. */
|
||
overflow: hidden;
|
||
opacity: 0; transform: translateY(22px);
|
||
animation: dmOptCardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||
box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 ${(0,p.rgba)("#ffffff",.04)};
|
||
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease !important;
|
||
cursor: pointer;
|
||
}
|
||
.dm-opt-metric:hover {
|
||
transform: translateY(-5px) scale(1.028) !important;
|
||
background: ${(0,p.rgba)(p.COLORS.ink,.9)} !important;
|
||
border-color: ${(0,p.rgba)(p.COLORS.cyan,.52)} !important;
|
||
box-shadow:
|
||
0 18px 48px -8px ${(0,p.rgba)(p.COLORS.cyan,.25)},
|
||
0 4px 12px -2px ${(0,p.rgba)(p.COLORS.cyan,.12)},
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
|
||
}
|
||
.dm-opt-metric:hover .dm-opt-metric__sparkline {
|
||
opacity: 0.72 !important;
|
||
}
|
||
.dm-opt-metric__sparkline {
|
||
transition: opacity 0.4s ease;
|
||
}
|
||
@keyframes dmOptCardIn { to { opacity: 1; transform: translateY(0); } }
|
||
.dm-opt-metric__top { display: flex; align-items: center; justify-content: space-between; }
|
||
.dm-opt-metric__label {
|
||
font-size: 10px; letter-spacing: 0.04em; color: ${p.COLORS.textDim}; text-transform: uppercase;
|
||
}
|
||
.dm-opt-metric__arrow { font-size: 11px; }
|
||
.dm-opt-metric__value { margin-top: 6px; font-size: clamp(20px, 2.8vw, 32px); font-weight: 700; line-height: 1; }
|
||
.dm-opt-metric__bar { margin-top: 10px; height: 3px; border-radius: 999px; background: ${(0,p.rgba)(p.COLORS.slate,.2)}; overflow: hidden; }
|
||
.dm-opt-metric__fill { height: 100%; border-radius: 999px; transform-origin: left center; }
|
||
|
||
/* ===== BOTTOM INSIGHT BAR ===== */
|
||
.dm-opt-insight {
|
||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||
max-width: 760px; margin: 10px auto 0;
|
||
padding: 7px 18px; border-radius: 999px;
|
||
background: ${(0,p.rgba)(p.COLORS.ink,.6)};
|
||
border: 1px solid ${(0,p.rgba)(p.COLORS.cyan,.12)};
|
||
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
|
||
pointer-events: auto;
|
||
}
|
||
.dm-opt-insight__dot {
|
||
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
|
||
background: ${p.COLORS.green};
|
||
box-shadow: 0 0 12px ${p.COLORS.green};
|
||
animation: dmOptPulse 2s ease-in-out infinite;
|
||
}
|
||
.dm-opt-insight__text {
|
||
font-size: 10.5px; color: ${p.COLORS.textDim}; line-height: 1.3;
|
||
letter-spacing: 0.03em; font-weight: 500;
|
||
}
|
||
.dm-opt-insight__text strong {
|
||
color: #E2E8F0; font-weight: 700;
|
||
}
|
||
.dm-opt-insight__sep {
|
||
width: 1px; height: 12px; flex-shrink: 0;
|
||
background: ${(0,p.rgba)(p.COLORS.slate,.35)};
|
||
}
|
||
|
||
/* ===== RESPONSIVE ===== */
|
||
@media (max-width: 1024px) {
|
||
.dm-opt-panel { width: clamp(190px, 30vw, 280px); padding: 14px 16px; }
|
||
.dm-opt-panel li { font-size: 11.5px; }
|
||
.dm-opt-marker { width: 16px; height: 16px; font-size: 9px; }
|
||
}
|
||
@media (max-width: 767px) {
|
||
.dm-opt { height: 200vh; }
|
||
.dm-opt-card {
|
||
top: 8px !important; left: 8px !important; right: 8px !important; bottom: 8px !important;
|
||
border-radius: 24px !important;
|
||
}
|
||
.dm-opt-compare {
|
||
top: auto; bottom: 148px; transform: none;
|
||
flex-direction: row; align-items: stretch; gap: 6px; padding: 0 10px;
|
||
}
|
||
.dm-opt-panel { width: 50%; padding: 10px 11px; border-radius: 14px; }
|
||
.dm-opt-panel ul { gap: 4px; }
|
||
.dm-opt-panel li { font-size: 10px; }
|
||
.dm-opt-panel li::before { display: none !important; }
|
||
.dm-opt-marker { width: 14px; height: 14px; font-size: 8px; border-radius: 4px; }
|
||
.dm-opt-panel h3 { margin: 6px 0 5px; font-size: 14px; }
|
||
.dm-opt-panel__badge { font-size: 8px; padding: 3px 7px; }
|
||
.dm-opt-metrics { grid-template-columns: repeat(5, 1fr); gap: 4px; }
|
||
.dm-opt-metric { padding: 7px 5px; border-radius: 10px; }
|
||
.dm-opt-metric__label { font-size: 7.5px; letter-spacing: 0; }
|
||
.dm-opt-metric__value { font-size: 14px; }
|
||
.dm-opt-metric__bar { margin-top: 6px; }
|
||
.dm-opt-head h2 { font-size: 22px; margin: 6px 0 4px; }
|
||
.dm-opt-head p { font-size: 10.5px; }
|
||
.dm-opt-phases { display: none; }
|
||
.dm-opt-steps { gap: 0; }
|
||
.dm-opt-steps__pill { padding: 3px 6px; }
|
||
.dm-opt-steps__icon { font-size: 9px; }
|
||
.dm-opt-steps__text { font-size: 7.5px; }
|
||
.dm-opt-steps__line { width: 6px; }
|
||
.dm-opt-insight { padding: 5px 10px; gap: 5px; }
|
||
.dm-opt-insight__text { font-size: 8.5px; }
|
||
.dm-opt-insight__sep { height: 10px; }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.dm-opt-pulse { animation: none; }
|
||
.dm-opt-metric { animation: none; opacity: 1; transform: none; }
|
||
.dm-opt-insight__dot { animation: none; }
|
||
.dm-opt-card::before { animation: none; }
|
||
}
|
||
`,w=`
|
||
/* ============================================================
|
||
Workflow 1 = ONE container:
|
||
├─ Impact of Optimisation (full interactive OptimizationSection)
|
||
└─ Performance (content card, flush + colour-matched)
|
||
The Performance card is pulled up to butt against the optimisation
|
||
card's flat bottom and shares its dark-navy surface, so the two
|
||
read as a single continuous container with no gap / no break.
|
||
============================================================ */
|
||
.dm-wf1 {
|
||
position: relative;
|
||
margin: 0 auto 0;
|
||
}
|
||
|
||
/* Cancel the global "section { padding: 6rem 0 }" (custom-frontend.min.css): both
|
||
this wrapper and the nested .dm-opt are sections, so that 96px top+bottom stacked
|
||
into large empty bands above / between the workflows. These are full-bleed pinned
|
||
experiences whose cards butt together via their own insets — no section padding. */
|
||
.dm-wf1, .dm-wf1 .dm-opt { padding-top: 0; padding-bottom: 0; }
|
||
|
||
/* Performance card — aligned to the optimisation card (20px side insets),
|
||
navy-matched, flat top, rounded bottom, pulled up to close the seam. */
|
||
.dm-wf1-card {
|
||
position: relative;
|
||
z-index: 2;
|
||
margin: 0 20px 0;
|
||
background: linear-gradient(180deg, #030a18 0%, #06101f 100%);
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
border-top: none;
|
||
border-radius: 0 0 42px 42px;
|
||
/* No shadow: this card is flush under the optimisation card and merges with it as one
|
||
continuous container — a shadow here would re-introduce a dark band at the seam. */
|
||
box-shadow: none;
|
||
padding: 36px 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 40px;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.dm-workflow-left {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
max-width: 440px;
|
||
}
|
||
.dm-workflow-svg {
|
||
width: 100%;
|
||
height: auto;
|
||
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
|
||
}
|
||
|
||
.dm-workflow-right {
|
||
flex: 1.2;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 20px;
|
||
}
|
||
.dm-workflow-quote { margin-bottom: 5px; }
|
||
|
||
.dm-workflow-title {
|
||
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
|
||
font-size: 38px;
|
||
font-weight: 700;
|
||
color: #F8FAFC !important;
|
||
letter-spacing: -0.015em;
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.dm-workflow-text-container { min-height: 110px; width: 100%; }
|
||
.dm-workflow-text {
|
||
font-family: var(--font-manrope), system-ui, sans-serif;
|
||
font-size: 16px;
|
||
line-height: 1.65;
|
||
color: #A3A3A3;
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.dm-workflow-nav {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 10px;
|
||
align-self: flex-end;
|
||
margin-top: 10px;
|
||
}
|
||
.dm-workflow-counter {
|
||
font-family: var(--font-space-grotesk), sans-serif;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: #737373;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.dm-workflow-bars { display: flex; gap: 8px; }
|
||
.dm-workflow-bar {
|
||
width: 40px;
|
||
height: 3px;
|
||
border: none;
|
||
padding: 0;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
border-radius: 999px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.dm-workflow-bar.is-active { background: #C01227; }
|
||
.dm-workflow-bar:hover { background: rgba(255, 255, 255, 0.35); }
|
||
.dm-workflow-bar.is-active:hover { background: #C01227; }
|
||
|
||
/* ── Responsive — keep insets/radius aligned to the optimisation card ── */
|
||
@media (max-width: 1024px) {
|
||
.dm-wf1-card {
|
||
margin: 0 20px 0;
|
||
border-radius: 0 0 42px 42px;
|
||
padding: 44px 44px;
|
||
gap: 44px;
|
||
}
|
||
.dm-workflow-title { font-size: 32px; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.dm-wf1-card {
|
||
margin: 0 10px 0;
|
||
border-radius: 0 0 28px 28px;
|
||
padding: 36px 28px;
|
||
gap: 36px;
|
||
flex-direction: column;
|
||
}
|
||
.dm-workflow-left { max-width: 280px; }
|
||
.dm-workflow-right { width: 100%; }
|
||
.dm-workflow-title { font-size: 28px; }
|
||
.dm-workflow-text-container { min-height: auto; }
|
||
}
|
||
`;e.s(["default",0,function(){let[e,n]=(0,i.useState)(0),[o,s]=(0,i.useState)(!1),l=[{title:"PERFORMANCE",text:"Our AI-powered routing system reduces unnecessary travel by selecting the most efficient delivery paths across the city. This helps lower fuel and battery consumption while improving delivery speed and operational efficiency. Businesses can complete more deliveries in less time with significantly reduced logistics costs."},{title:"PERFORMANCE",text:"The optimization engine intelligently groups and balances deliveries, allowing the same order volume to be fulfilled with fewer vehicles. This improves fleet utilization, reduces maintenance and staffing costs, and increases overall delivery efficiency. Even with fewer vehicles, the platform maintains smooth and reliable operations."},{title:"PERFORMANCE",text:"Real-time route optimization ensures predictable and on-time deliveries across all delivery zones. By reducing delays and improving route planning, businesses can maintain high customer satisfaction and strong SLA performance. The system delivers lower operational costs while consistently maintaining 100% order fulfillment."}];return(0,i.useEffect)(()=>{if(o)return;let e=setTimeout(()=>{n(e=>(e+1)%l.length)},5e3);return()=>clearTimeout(e)},[e,o,l.length]),(0,t.jsxs)("section",{className:"dm-wf1","aria-label":"Workflow 1 — Impact of Optimisation & Performance",children:[(0,t.jsx)(b,{}),(0,t.jsxs)("div",{className:"dm-wf1-card",onMouseEnter:()=>s(!0),onMouseLeave:()=>s(!1),children:[(0,t.jsx)("div",{className:"dm-workflow-left",children:(0,t.jsxs)("svg",{viewBox:"0 0 320 280",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"dm-workflow-svg",children:[(0,t.jsx)("path",{d:"M 30,20 C 22,20 16,26 16,34 L 78,85 C 81,88 81,92 78,95 L 16,146 C 16,154 22,160 30,160 L 130,160 C 138,160 145,154 148,146 L 204,95 C 207,92 207,88 204,85 L 148,34 C 145,26 138,20 130,20 Z",stroke:"white",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",opacity:"0.25"}),(0,t.jsx)("path",{d:"M 110,100 C 102,100 96,106 96,114 L 158,165 C 161,168 161,172 158,175 L 96,226 C 96,234 102,240 110,240 L 210,240 C 218,240 225,234 228,226 L 284,175 C 287,172 287,168 284,165 L 228,114 C 225,106 218,100 210,100 Z",stroke:"white",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",opacity:"0.85"})]})}),(0,t.jsxs)("div",{className:"dm-workflow-right",children:[(0,t.jsxs)("svg",{width:"32",height:"24",viewBox:"0 0 32 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"dm-workflow-quote",children:[(0,t.jsx)("rect",{x:"2",y:"2",width:"9",height:"20",rx:"1.5",transform:"skewX(-12)",fill:"#C01227"}),(0,t.jsx)("rect",{x:"16",y:"2",width:"9",height:"20",rx:"1.5",transform:"skewX(-12)",fill:"#C01227"})]}),(0,t.jsx)("h3",{className:"dm-workflow-title",children:l[e].title}),(0,t.jsx)("div",{className:"dm-workflow-text-container",children:(0,t.jsx)(r.AnimatePresence,{mode:"wait",children:(0,t.jsx)(a.motion.p,{initial:{opacity:0,y:12},animate:{opacity:1,y:0},exit:{opacity:0,y:-12},transition:{duration:.28,ease:"easeInOut"},className:"dm-workflow-text",children:l[e].text},e)})}),(0,t.jsxs)("div",{className:"dm-workflow-nav",children:[(0,t.jsxs)("span",{className:"dm-workflow-counter",children:["0",e+1,"/03"]}),(0,t.jsx)("div",{className:"dm-workflow-bars",children:l.map((i,a)=>(0,t.jsx)("button",{type:"button","aria-label":`Go to slide ${a+1}`,className:`dm-workflow-bar ${a===e?"is-active":""}`,onClick:()=>n(a)},a))})]})]})]}),(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:w}})]})}],76756)},38730,e=>{"use strict";var t=e.i(43476),i=e.i(71645),a=e.i(46932),r=e.i(88653),n=e.i(70703),o=e.i(87652),s=e.i(95420),l=e.i(89970),d=e.i(83495),p=e.i(92695);let m=(0,n.default)(()=>e.A(40999),{loadableGenerated:{modules:[39184]},ssr:!1});function c({mv:e}){let a=(0,i.useRef)(null);return(0,i.useEffect)(()=>{let t=e=>{a.current&&(a.current.textContent=String(Math.round(e)))};return t(e.get()),e.on("change",t)},[e]),(0,t.jsx)("span",{ref:a,children:Math.round(e.get())})}function x({active:e}){return(0,t.jsx)("div",{className:"dm-lb-rail","aria-hidden":!0,children:p.ENGINE_STEPS.map((a,r)=>(0,t.jsxs)(i.default.Fragment,{children:[r>0&&(0,t.jsx)("span",{className:`dm-lb-rail__line is-${r<=e?"on":"off"}`}),(0,t.jsxs)("div",{className:`dm-lb-rail__step is-${r<e?"done":r===e?"current":"todo"}`,children:[(0,t.jsx)("span",{className:"dm-lb-rail__num",children:r<e?"✓":a.n}),(0,t.jsx)("span",{className:"dm-lb-rail__title",children:a.title})]})]},a.n))})}function g({step:e,index:i,opacity:r,y:n,num:o,kicker:s,title:l,children:d}){return e!==i?null:(0,t.jsxs)(a.motion.div,{className:"dm-lb-card-story",style:{opacity:r,y:n},children:[(0,t.jsxs)("div",{className:"dm-lb-card-story__head",children:[(0,t.jsx)("span",{className:"dm-lb-pillar__num",children:o}),(0,t.jsx)("span",{className:"dm-lb-pillar__kicker",children:s})]}),(0,t.jsx)("h3",{className:"dm-lb-pillar__title",children:l}),d]})}function h({connected:e=!1}={}){let r=(0,i.useRef)(null),n=(0,i.useRef)(0),b=(0,o.useMotionValue)(0),[u,w]=(0,i.useState)("before"),[y,v]=(0,i.useState)(-1),[k,_]=(0,i.useState)(!1),[j,O]=(0,i.useState)(!1),[N,C]=(0,i.useState)(!1),[S,L]=(0,i.useState)(!1);(0,i.useEffect)(()=>{let e=window.matchMedia("(max-width: 767px)"),t=window.matchMedia("(prefers-reduced-motion: reduce)"),i=()=>{C(e.matches),L(t.matches)};return i(),e.addEventListener("change",i),t.addEventListener("change",i),()=>{e.removeEventListener("change",i),t.removeEventListener("change",i)}},[]),(0,i.useEffect)(()=>{let e=r.current;if(!e)return;let t=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(_(!0),O(!0),t.disconnect())},{rootMargin:"70% 0px"}),i=new IntersectionObserver(e=>O(e.some(e=>e.isIntersecting)),{rootMargin:"10% 0px"});return t.observe(e),i.observe(e),()=>{t.disconnect(),i.disconnect()}},[]),(0,i.useEffect)(()=>{let e=r.current;if(!e)return;l.default.registerPlugin(d.ScrollTrigger);let t="before",i=-1,a=d.ScrollTrigger.create({trigger:e,start:"top top",end:"bottom bottom",scrub:.4,invalidateOnRefresh:!0,onUpdate:e=>{let a=e.progress;n.current=a,b.set(a);let r=a<=2e-4?"before":a>=.9998?"after":"pinned";r!==t&&(t=r,w(r));let o=function(e){let t=-1;for(let i=0;i<p.ENGINE_STEPS.length;i++)e>=p.ENGINE_STEPS[i].at&&(t=i);return t}(a);o!==i&&(i=o,v(o))}}),o=setTimeout(()=>d.ScrollTrigger.refresh(),120);return()=>{clearTimeout(o),a.kill()}},[b]);let R=(0,s.useTransform)(b,[0,.04,.1],[1,1,0]),z=(0,s.useTransform)(b,[.04,.1,p.P.finale-.04,p.P.finale+.02],[0,1,1,0]),$=(0,s.useTransform)(b,[.135,.165,.255,.275],[0,1,1,0]),T=(0,s.useTransform)(b,[.135,.175],[26,0]),E=(0,s.useTransform)(b,[.29,.32,.415,.435],[0,1,1,0]),A=(0,s.useTransform)(b,[.29,.33],[26,0]),I=(0,s.useTransform)(b,[.45,.48,.575,.595],[0,1,1,0]),M=(0,s.useTransform)(b,[.45,.49],[26,0]),F=(0,s.useTransform)(b,[.61,.64,.715,.735],[0,1,1,0]),P=(0,s.useTransform)(b,[.61,.65],[26,0]),B=(0,s.useTransform)(b,[.75,.78,.855,.875],[0,1,1,0]),W=(0,s.useTransform)(b,[.75,.79],[26,0]),G=(0,s.useTransform)(b,[p.P.finale-.02,p.P.finale+.04],[0,1]),D=(0,s.useTransform)(b,[p.P.finale-.02,p.P.finale+.06],[40,0]),V=(0,s.useTransform)(b,[p.P.finale+.04,p.P.finale+.1],[0,1]),H=(0,s.useTransform)(b,[p.P.finale,.97],[0,59]),U=(0,s.useTransform)(b,[p.P.finale,.97],[0,18]);return(0,t.jsxs)("section",{ref:r,className:`dm-lb is-${u}${e?" is-connected":""}`,"aria-label":"Logistics Brain — one intelligent system",children:[(0,t.jsx)("div",{className:"dm-lb-sticky",children:(0,t.jsxs)("div",{className:"dm-lb-card",children:[k&&(0,t.jsx)("div",{className:"dm-lb-canvas",children:(0,t.jsx)(m,{progress:n,reduced:S,isMobile:N,active:j&&"pinned"===u})}),"before"!==u&&(0,t.jsxs)("div",{className:"dm-lb-ui",children:[(0,t.jsxs)(a.motion.div,{className:"dm-lb-top",style:{opacity:z},children:[(0,t.jsxs)("div",{className:"dm-lb-eyebrow",children:[(0,t.jsx)("span",{className:"dm-lb-dot"})," MileTruth Routing Engine"]}),(0,t.jsx)(x,{active:y})]}),(0,t.jsxs)(a.motion.div,{className:"dm-lb-scrollhint",style:{opacity:R},children:[(0,t.jsx)("span",{children:"Scroll to see how every delivery is planned"}),(0,t.jsx)("span",{className:"dm-lb-arrow",children:"↓"})]}),(0,t.jsxs)(g,{step:y,index:0,opacity:$,y:T,num:"01",kicker:"Generate Routes",title:"We create many delivery plans at once",children:[(0,t.jsx)("div",{className:"dm-lb-chips",children:p.STRATEGIES.map(e=>(0,t.jsx)("span",{className:"dm-lb-chip",children:e},e))}),(0,t.jsx)("p",{className:"dm-lb-pillar__foot",children:"6 different ways to deliver all 59 orders — generated in milliseconds."})]}),(0,t.jsxs)(g,{step:y,index:1,opacity:E,y:A,num:"02",kicker:"Check Constraints",title:"Every plan must respect real-world limits",children:[(0,t.jsx)("ul",{className:"dm-lb-constraints",children:p.CONSTRAINT_LIST.map(e=>(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-lb-constraints__icon",children:e.icon}),(0,t.jsx)("span",{className:"dm-lb-constraints__label",children:e.label}),(0,t.jsx)("span",{className:"dm-lb-constraints__note",children:e.note})]},e.label))}),(0,t.jsxs)("p",{className:"dm-lb-pillar__stat",children:[(0,t.jsx)("strong",{children:"59/59"})," delivered ",(0,t.jsx)("em",{children:"vs 34/59 when battery limits are ignored"})]})]}),(0,t.jsx)(g,{step:y,index:2,opacity:I,y:M,num:"03",kicker:"Score & Compare",title:"Each plan is scored by total delivery cost",children:(0,t.jsx)("ul",{className:"dm-lb-board",children:p.STRATEGY_SCORES.map(e=>(0,t.jsxs)("li",{className:e.win?"is-win":"",children:[(0,t.jsxs)("span",{className:"dm-lb-board__name",children:[e.name,e.win&&(0,t.jsx)("span",{className:"dm-lb-board__tag",children:"WINNER"})]}),(0,t.jsx)("span",{className:"dm-lb-board__track",children:(0,t.jsx)("span",{className:"dm-lb-board__fill",style:{width:`${e.score}%`}})}),(0,t.jsx)("span",{className:"dm-lb-board__score",children:e.score})]},e.name))})}),(0,t.jsxs)(g,{step:y,index:3,opacity:F,y:P,num:"04",kicker:"Guarantee On-Time",title:"Any plan even 1 minute late is rejected",children:[(0,t.jsxs)("div",{className:"dm-lb-sla",children:[(0,t.jsx)("span",{className:"dm-lb-sla__badge",children:"⏱️ On-time only"}),(0,t.jsx)("span",{className:"dm-lb-sla__x",children:"✕ Late plan → dropped"})]}),(0,t.jsx)("p",{className:"dm-lb-pillar__foot",children:"We only keep plans that hit every promised delivery window."})]}),(0,t.jsxs)(g,{step:y,index:4,opacity:B,y:W,num:"05",kicker:"Pick & Dispatch",title:"The winning plan is sent to the fleet",children:[(0,t.jsx)("div",{className:"dm-lb-winner",children:"✓ Multi-Trip selected — lowest cost, zero delays"}),(0,t.jsxs)("div",{className:"dm-lb-chips",children:[(0,t.jsx)("span",{className:"dm-lb-chip",children:"EV Bikes"}),(0,t.jsx)("span",{className:"dm-lb-chip",children:"Autos"}),(0,t.jsx)("span",{className:"dm-lb-chip",children:"Cargo Trucks"})]})]}),(0,t.jsxs)(a.motion.div,{className:"dm-lb-finale",style:{opacity:G},children:[(0,t.jsxs)(a.motion.div,{className:"dm-lb-kpis",style:{y:D},children:[(0,t.jsxs)("div",{className:"dm-lb-kpi",children:[(0,t.jsxs)("span",{className:"dm-lb-kpi__num",children:[(0,t.jsx)(c,{mv:H}),"/59"]}),(0,t.jsx)("span",{className:"dm-lb-kpi__label",children:"Orders Delivered"})]}),(0,t.jsxs)("div",{className:"dm-lb-kpi dm-lb-kpi--green",children:[(0,t.jsx)("span",{className:"dm-lb-kpi__num",children:"0"}),(0,t.jsx)("span",{className:"dm-lb-kpi__label",children:"SLA Misses"})]}),(0,t.jsxs)("div",{className:"dm-lb-kpi",children:[(0,t.jsxs)("span",{className:"dm-lb-kpi__num",children:[(0,t.jsx)(c,{mv:U}),"%"]}),(0,t.jsx)("span",{className:"dm-lb-kpi__label",children:"Cost Saved"})]})]}),(0,t.jsxs)(a.motion.div,{className:"dm-lb-logo",style:{opacity:V},children:[(0,t.jsx)("span",{className:"dm-lb-logo__mark"}),"MileTruth"]})]})]})]})}),(0,t.jsx)("style",{children:f})]})}let f=`
|
||
/* Scroll length tuned for pacing: ~77vh per engine step (was 107vh) so the 6
|
||
beats complete in noticeably less scrolling — closer to Workflow 1's cadence
|
||
and with far less perceived empty space between workflows. Beat windows are
|
||
progress-based (0…1), so they stay correctly aligned at any height. */
|
||
.dm-lb { position: relative; height: 460vh; background: transparent; }
|
||
.dm-lb-sticky { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden;
|
||
will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
|
||
.dm-lb.is-pinned .dm-lb-sticky { position: fixed; top: 0; left: 0; }
|
||
.dm-lb.is-after .dm-lb-sticky { position: absolute; top: auto; bottom: 0; }
|
||
|
||
.dm-lb-card {
|
||
position: absolute !important; inset: 20px !important;
|
||
border-radius: 28px !important; overflow: hidden !important;
|
||
background: radial-gradient(120% 100% at 50% 0%, #12090c 0%, #0a070a 55%, #060507 100%) !important;
|
||
border: 1px solid rgba(192,18,39,0.16) !important;
|
||
box-shadow: 0 30px 90px -30px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.04) !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
@media (max-width: 767px) { .dm-lb-card { inset: 10px !important; border-radius: 20px !important; } }
|
||
|
||
/* Connected mode (inside Workflow 2): flatten the card's bottom edge and flush it to
|
||
the section's bottom so the Innovation card below butts directly against it, reading
|
||
as one continuous container — mirrors the Optimisation → Performance seam in Workflow 1. */
|
||
.dm-lb.is-connected .dm-lb-card {
|
||
top: 20px !important; left: 20px !important; right: 20px !important; bottom: 0 !important;
|
||
border-radius: 28px 28px 0 0 !important; border-bottom: none !important;
|
||
/* Flush against the Innovation card below — drop the heavy downward shadow so it
|
||
doesn't cast a dark band onto that card's top edge (the two read as one container). */
|
||
box-shadow: none !important;
|
||
}
|
||
@media (max-width: 767px) {
|
||
.dm-lb.is-connected .dm-lb-card {
|
||
top: 10px !important; left: 10px !important; right: 10px !important; bottom: 0 !important;
|
||
border-radius: 20px 20px 0 0 !important;
|
||
}
|
||
}
|
||
|
||
.dm-lb-canvas { position: absolute; inset: 0; z-index: 1; }
|
||
.dm-lb-canvas canvas { display: block; }
|
||
|
||
.dm-lb-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none;
|
||
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; color: #eaf2ff; }
|
||
|
||
/* ---- Persistent header: title + 6-step engine rail ----
|
||
Offset the bar below the site's fixed navbar (~104px desktop / ~100px mobile once
|
||
.dm-header-scrolled is active). The section pins full-viewport, so without this the
|
||
eyebrow badge would sit under the navbar (z-index 10000) and get clipped. */
|
||
.dm-lb-top { position: absolute; top: clamp(96px, 13vh, 128px); left: 0; right: 0; z-index: 5;
|
||
display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 16px; overflow: visible; }
|
||
.dm-lb-eyebrow {
|
||
display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.35; letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase;
|
||
color: #ffffff; padding: 9px 20px; border-radius: 999px; background: rgba(192,18,39,0.16);
|
||
border: 1px solid rgba(226,53,66,0.45); backdrop-filter: blur(8px); white-space: nowrap; overflow: visible; }
|
||
.dm-lb-dot { width: 6px; height: 6px; border-radius: 50%; background: #E2354A; box-shadow: 0 0 10px #E2354A; }
|
||
|
||
.dm-lb-rail { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; max-width: min(1160px, 96vw); }
|
||
.dm-lb-rail__step { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; flex-shrink: 0;
|
||
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
|
||
backdrop-filter: blur(6px); transition: all 0.45s cubic-bezier(0.22,1,0.36,1); }
|
||
.dm-lb-rail__num { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
|
||
font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.12); }
|
||
.dm-lb-rail__title { font-size: clamp(12.5px, 1.05vw, 14px); font-weight: 700; letter-spacing: 0.04em; color: rgba(255,255,255,0.95); white-space: nowrap; }
|
||
.dm-lb-rail__step.is-current { background: rgba(192,18,39,0.18); border-color: rgba(226,53,66,0.55); box-shadow: 0 0 22px -6px rgba(226,53,66,0.7); }
|
||
.dm-lb-rail__step.is-current .dm-lb-rail__num { background: linear-gradient(135deg,#E2354A,#C01227); color: #fff; }
|
||
.dm-lb-rail__step.is-current .dm-lb-rail__title { color: #fff; }
|
||
.dm-lb-rail__step.is-done .dm-lb-rail__num { background: #22C55E; color: #04130a; }
|
||
.dm-lb-rail__step.is-done .dm-lb-rail__title { color: rgba(255,255,255,0.92); }
|
||
.dm-lb-rail__line { width: 14px; height: 1px; background: rgba(255,255,255,0.12); margin: 0 3px; transition: background 0.45s ease; }
|
||
.dm-lb-rail__line.is-on { background: linear-gradient(90deg,#22C55E,#E2354A); }
|
||
|
||
.dm-lb-scrollhint { position: absolute; bottom: clamp(26px, 6vh, 60px); left: 50%; transform: translateX(-50%);
|
||
display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.12em;
|
||
color: rgba(240,228,230,0.72); text-transform: uppercase; text-align: center; }
|
||
.dm-lb-arrow { font-size: 18px; animation: dmLbBob 1.8s ease-in-out infinite; }
|
||
@keyframes dmLbBob { 0%,100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(6px); opacity: 1; } }
|
||
|
||
/* ---- Lower-left workflow card (glass panel, cross-fades per step) ---- */
|
||
.dm-lb-card-story { position: absolute; left: clamp(18px, 4vw, 56px); bottom: clamp(26px, 7vh, 64px);
|
||
width: min(440px, 84vw); pointer-events: auto; will-change: opacity, transform;
|
||
padding: 18px 20px; border-radius: 18px;
|
||
background: rgba(14,8,10,0.9); border: 1px solid rgba(226,53,66,0.22);
|
||
/* backdrop blur removed — this card cross-fades/translates on scroll, so the blur
|
||
was recomputed every frame; a near-opaque fill keeps the look at no per-frame cost. */
|
||
box-shadow: 0 24px 64px -30px rgba(0,0,0,0.92); }
|
||
.dm-lb-card-story__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||
.dm-lb-pillar__num { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: #ffffff;
|
||
background: linear-gradient(135deg, #E2354A, #C01227); border-radius: 7px; padding: 3px 8px; }
|
||
.dm-lb-pillar__kicker { font-size: clamp(11px, 1.1vw, 13px); font-weight: 700; letter-spacing: 0.18em;
|
||
text-transform: uppercase; color: #F2667A; }
|
||
.dm-lb .dm-lb-pillar__title { margin: 0 0 12px !important; padding: 0 !important; color: #fbf5f6 !important;
|
||
font-weight: 700 !important; text-transform: none !important; letter-spacing: -0.015em !important;
|
||
font-size: clamp(17px, 1.9vw, 24px) !important; line-height: 1.18 !important;
|
||
text-shadow: 0 0 30px rgba(192,18,39,0.3) !important; }
|
||
.dm-lb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
|
||
.dm-lb-chip { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: #f1dadd;
|
||
padding: 4px 11px; border-radius: 999px; background: rgba(192,18,39,0.12);
|
||
border: 1px solid rgba(226,53,66,0.30); white-space: nowrap; }
|
||
.dm-lb-pillar__foot { margin: 0; font-size: clamp(12px, 1.1vw, 13.5px); line-height: 1.45; color: rgba(236,224,226,0.72); }
|
||
.dm-lb-pillar__stat { margin: 6px 0 0; font-size: clamp(12.5px, 1.2vw, 15px); color: rgba(236,224,226,0.78); }
|
||
.dm-lb-pillar__stat strong { color: #4ade80; font-weight: 800; font-size: 1.25em; text-shadow: 0 0 20px rgba(34,197,94,0.5); }
|
||
.dm-lb-pillar__stat em { font-style: normal; color: rgba(230,218,220,0.55); }
|
||
|
||
/* Constraints checklist (step 02) */
|
||
.dm-lb-constraints { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 7px; }
|
||
.dm-lb-constraints li { display: flex; align-items: center; gap: 9px; }
|
||
.dm-lb-constraints__icon { font-size: 14px; width: 20px; text-align: center; }
|
||
.dm-lb-constraints__label { font-size: 13px; font-weight: 700; color: #fbeff0; min-width: 84px; }
|
||
.dm-lb-constraints__note { font-size: 12px; color: rgba(232,222,224,0.6); }
|
||
|
||
/* Scored leaderboard (step 03) */
|
||
.dm-lb-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
|
||
.dm-lb-board li { display: grid; grid-template-columns: 104px 1fr 26px; align-items: center; gap: 9px; }
|
||
.dm-lb-board__name { font-size: 11.5px; font-weight: 600; color: rgba(234,226,228,0.68); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
|
||
.dm-lb-board li.is-win .dm-lb-board__name { color: #fff; font-weight: 800; }
|
||
.dm-lb-board__tag { font-size: 8px; font-weight: 800; letter-spacing: 0.08em; color: #fff;
|
||
background: linear-gradient(135deg,#E2354A,#C01227); padding: 2px 5px; border-radius: 5px; }
|
||
.dm-lb-board__track { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
|
||
.dm-lb-board__fill { display: block; height: 100%; border-radius: 999px; background: rgba(150,150,165,0.5); }
|
||
.dm-lb-board li.is-win .dm-lb-board__fill { background: linear-gradient(90deg,#E2354A,#C01227); box-shadow: 0 0 12px rgba(226,53,66,0.6); }
|
||
.dm-lb-board__score { font-size: 12px; font-weight: 700; color: rgba(234,226,228,0.68); text-align: right; }
|
||
.dm-lb-board li.is-win .dm-lb-board__score { color: #fff; }
|
||
|
||
/* SLA badges (step 04) */
|
||
.dm-lb-sla { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
|
||
.dm-lb-sla__badge { font-size: 12px; font-weight: 700; color: #86efac; background: rgba(34,197,94,0.1);
|
||
border: 1px solid rgba(34,197,94,0.32); padding: 6px 12px; border-radius: 999px; }
|
||
.dm-lb-sla__x { font-size: 12px; font-weight: 700; color: #fca5a5; background: rgba(239,68,68,0.1);
|
||
border: 1px solid rgba(239,68,68,0.32); padding: 6px 12px; border-radius: 999px; }
|
||
|
||
/* Winner banner (step 05) */
|
||
.dm-lb-winner { font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 10px; padding: 9px 13px; border-radius: 12px;
|
||
background: linear-gradient(135deg, rgba(192,18,39,0.24), rgba(34,197,94,0.16)); border: 1px solid rgba(226,53,66,0.4); }
|
||
|
||
/* ---- Finale: KPI cards ---- */
|
||
.dm-lb-finale { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; }
|
||
.dm-lb-kpis { display: flex; gap: clamp(14px, 2.4vw, 28px); margin-bottom: clamp(28px, 6vh, 56px); flex-wrap: wrap; justify-content: center; }
|
||
.dm-lb-kpi { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: clamp(150px, 18vw, 210px);
|
||
padding: 22px 26px; border-radius: 18px; background: rgba(16,9,11,0.9); border: 1px solid rgba(226,53,66,0.28);
|
||
box-shadow: 0 24px 60px -28px rgba(0,0,0,0.9); }
|
||
.dm-lb-kpi--green { border-color: rgba(34,197,94,0.4); }
|
||
.dm-lb-kpi__num { font-size: clamp(38px, 5.5vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -0.03em;
|
||
color: #fff; text-shadow: 0 0 32px rgba(226,53,66,0.55), 0 0 12px rgba(192,18,39,0.5); }
|
||
.dm-lb-kpi--green .dm-lb-kpi__num { color: #4ade80; text-shadow: 0 0 32px rgba(34,197,94,0.6); }
|
||
.dm-lb-kpi__label { font-size: clamp(10px, 1.1vw, 13px); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232,222,224,0.62); }
|
||
|
||
.dm-lb-logo { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(22px, 3vw, 40px); font-weight: 800;
|
||
letter-spacing: -0.01em; color: #fff; margin-bottom: 18px; text-shadow: 0 0 30px rgba(192,18,39,0.55); }
|
||
.dm-lb-logo__mark { width: clamp(20px, 2.4vw, 30px); height: clamp(20px, 2.4vw, 30px); border-radius: 8px;
|
||
background: conic-gradient(from 140deg, #E2354A, #C01227, #8A0E1F, #C8102E, #E2354A);
|
||
box-shadow: 0 0 28px rgba(192,18,39,0.75); }
|
||
|
||
/* Hide the step titles on narrower screens so the rail stays a single tidy row of numbers. */
|
||
@media (max-width: 1000px) {
|
||
.dm-lb-rail__title { display: none; }
|
||
.dm-lb-rail__step { padding: 5px 7px; }
|
||
.dm-lb-rail__line { width: 9px; }
|
||
}
|
||
@media (max-width: 767px) {
|
||
.dm-lb { height: 400vh; }
|
||
.dm-lb-kpis { gap: 12px; }
|
||
.dm-lb-kpi { min-width: 96px; padding: 14px 14px; }
|
||
.dm-lb-card-story { left: 0; right: 0; margin: 0 auto; width: calc(100% - 28px); bottom: clamp(20px, 5vh, 44px); padding: 14px 16px; }
|
||
.dm-lb-board li { grid-template-columns: 88px 1fr 24px; }
|
||
.dm-lb-constraints__note { display: none; }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.dm-lb-arrow { animation: none !important; }
|
||
}
|
||
`,b=`
|
||
/* ============================================================
|
||
Workflow 2 = ONE container:
|
||
├─ How Our Logistics Brain Works (full LogisticsBrainSection)
|
||
└─ Innovation (content card, flush + colour-matched)
|
||
The Innovation card is pulled up to butt against the logistics-brain
|
||
card's flat bottom and shares its dark red/black surface, so the two
|
||
read as a single continuous container with no gap / no break — the
|
||
same connected storytelling structure used in Workflow 1
|
||
(Impact of Optimisation → Performance).
|
||
============================================================ */
|
||
.dm-wf2 {
|
||
position: relative;
|
||
margin: 0 auto 0;
|
||
}
|
||
|
||
/* Cancel the global "section { padding: 6rem 0 }" (custom-frontend.min.css): both
|
||
this wrapper and the nested .dm-lb are sections, so that 96px top+bottom stacked
|
||
into large empty bands above / between the workflows. These are full-bleed pinned
|
||
experiences whose cards butt together via their own insets — no section padding. */
|
||
.dm-wf2, .dm-wf2 .dm-lb { padding-top: 0; padding-bottom: 0; }
|
||
|
||
/* Innovation card — aligned to the logistics-brain card (20px side insets),
|
||
red/black-matched, flat top, rounded bottom, pulled up to close the seam. */
|
||
.dm-wf2-card {
|
||
position: relative;
|
||
z-index: 2;
|
||
margin: 0 20px 0;
|
||
background: radial-gradient(120% 100% at 50% 0%, #12090c 0%, #0a070a 55%, #060507 100%);
|
||
border: 1px solid rgba(192, 18, 39, 0.16);
|
||
border-top: none;
|
||
border-radius: 0 0 28px 28px;
|
||
/* No shadow: this card is flush under the logistics-brain card and merges with it as one
|
||
continuous container — a shadow here would re-introduce a dark band at the seam. */
|
||
box-shadow: none;
|
||
padding: 36px 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 40px;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.dm-workflow-left {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
max-width: 440px;
|
||
}
|
||
.dm-workflow-svg {
|
||
width: 100%;
|
||
height: auto;
|
||
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
|
||
}
|
||
|
||
.dm-workflow-right {
|
||
flex: 1.2;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 20px;
|
||
}
|
||
.dm-workflow-quote { margin-bottom: 5px; }
|
||
|
||
.dm-workflow-title {
|
||
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
|
||
font-size: 38px;
|
||
font-weight: 700;
|
||
color: #F8FAFC !important;
|
||
letter-spacing: -0.015em;
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.dm-workflow-text-container { min-height: 110px; width: 100%; }
|
||
.dm-workflow-text {
|
||
font-family: var(--font-manrope), system-ui, sans-serif;
|
||
font-size: 16px;
|
||
line-height: 1.65;
|
||
color: #A3A3A3;
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.dm-workflow-nav {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 10px;
|
||
align-self: flex-end;
|
||
margin-top: 10px;
|
||
}
|
||
.dm-workflow-counter {
|
||
font-family: var(--font-space-grotesk), sans-serif;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: #737373;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.dm-workflow-bars { display: flex; gap: 8px; }
|
||
.dm-workflow-bar {
|
||
width: 40px;
|
||
height: 3px;
|
||
border: none;
|
||
padding: 0;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
border-radius: 999px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.dm-workflow-bar.is-active { background: #C01227; }
|
||
.dm-workflow-bar:hover { background: rgba(255, 255, 255, 0.35); }
|
||
.dm-workflow-bar.is-active:hover { background: #C01227; }
|
||
|
||
/* ── Responsive — keep insets/radius aligned to the logistics-brain card ── */
|
||
@media (max-width: 1024px) {
|
||
.dm-wf2-card {
|
||
padding: 44px 44px;
|
||
gap: 44px;
|
||
}
|
||
.dm-workflow-title { font-size: 32px; }
|
||
}
|
||
@media (max-width: 767px) {
|
||
.dm-wf2-card {
|
||
margin: 0 10px 0;
|
||
border-radius: 0 0 20px 20px;
|
||
padding: 36px 28px;
|
||
gap: 36px;
|
||
flex-direction: column;
|
||
}
|
||
.dm-workflow-left { max-width: 280px; }
|
||
.dm-workflow-right { width: 100%; }
|
||
.dm-workflow-title { font-size: 28px; }
|
||
.dm-workflow-text-container { min-height: auto; }
|
||
}
|
||
`;e.s(["default",0,function(){let[e,n]=(0,i.useState)(0),[o,s]=(0,i.useState)(!1),l=[{title:"INNOVATION",text:"Our Parallel Universe Engine simultaneously evaluates multiple routing strategies to identify the most efficient delivery plan for every dispatch window. By simulating different route combinations in real time, the system ensures faster, smarter, and more cost-effective logistics decisions. This enables businesses to maintain high operational accuracy while adapting dynamically to changing delivery conditions."},{title:"INNOVATION",text:"The platform solves the EV routing challenge through intelligent battery-aware simulations and advanced optimization logic powered by Google OR-Tools. It balances delivery efficiency, charging constraints, and SLA priorities to maximize fleet performance without compromising reliability. This creates a scalable and future-ready logistics system designed for both traditional and EV fleets."},{title:"INNOVATION",text:"With sub-45ms inference latency and real-time ETA validation, the engine delivers instant routing decisions with exceptional precision. Multiple strategy universes are benchmarked in parallel to consistently select the best-performing route configuration. The result is highly reliable, SLA-first delivery operations with improved customer experience and operational consistency."}];return(0,i.useEffect)(()=>{if(o)return;let e=setTimeout(()=>{n(e=>(e+1)%l.length)},5e3);return()=>clearTimeout(e)},[e,o,l.length]),(0,t.jsxs)("section",{className:"dm-wf2","aria-label":"Workflow 2 — How Our Logistics Brain Works & Innovation",children:[(0,t.jsx)(h,{connected:!0}),(0,t.jsxs)("div",{className:"dm-wf2-card",onMouseEnter:()=>s(!0),onMouseLeave:()=>s(!1),children:[(0,t.jsx)("div",{className:"dm-workflow-left",children:(0,t.jsxs)("svg",{viewBox:"0 0 320 280",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"dm-workflow-svg",children:[(0,t.jsx)("path",{d:"M 30,20 C 22,20 16,26 16,34 L 78,85 C 81,88 81,92 78,95 L 16,146 C 16,154 22,160 30,160 L 130,160 C 138,160 145,154 148,146 L 204,95 C 207,92 207,88 204,85 L 148,34 C 145,26 138,20 130,20 Z",stroke:"white",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",opacity:"0.25"}),(0,t.jsx)("path",{d:"M 110,100 C 102,100 96,106 96,114 L 158,165 C 161,168 161,172 158,175 L 96,226 C 96,234 102,240 110,240 L 210,240 C 218,240 225,234 228,226 L 284,175 C 287,172 287,168 284,165 L 228,114 C 225,106 218,100 210,100 Z",stroke:"white",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",opacity:"0.85"})]})}),(0,t.jsxs)("div",{className:"dm-workflow-right",children:[(0,t.jsxs)("svg",{width:"32",height:"24",viewBox:"0 0 32 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"dm-workflow-quote",children:[(0,t.jsx)("rect",{x:"2",y:"2",width:"9",height:"20",rx:"1.5",transform:"skewX(-12)",fill:"#C01227"}),(0,t.jsx)("rect",{x:"16",y:"2",width:"9",height:"20",rx:"1.5",transform:"skewX(-12)",fill:"#C01227"})]}),(0,t.jsx)("h3",{className:"dm-workflow-title",children:l[e].title}),(0,t.jsx)("div",{className:"dm-workflow-text-container",children:(0,t.jsx)(r.AnimatePresence,{mode:"wait",children:(0,t.jsx)(a.motion.p,{initial:{opacity:0,y:12},animate:{opacity:1,y:0},exit:{opacity:0,y:-12},transition:{duration:.28,ease:"easeInOut"},className:"dm-workflow-text",children:l[e].text},e)})}),(0,t.jsxs)("div",{className:"dm-workflow-nav",children:[(0,t.jsxs)("span",{className:"dm-workflow-counter",children:["0",e+1,"/03"]}),(0,t.jsx)("div",{className:"dm-workflow-bars",children:l.map((i,a)=>(0,t.jsx)("button",{type:"button","aria-label":`Go to slide ${a+1}`,className:`dm-workflow-bar ${a===e?"is-active":""}`,onClick:()=>n(a)},a))})]})]})]}),(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:b}})]})}],38730)},33016,e=>{"use strict";var t=e.i(43476),i=e.i(71645);let a=(0,e.i(70703).default)(()=>e.A(15756),{loadableGenerated:{modules:[55819]},ssr:!1,loading:()=>null});e.s(["default",0,function(){let e=(0,i.useRef)(null),[r,n]=(0,i.useState)(!1);return((0,i.useEffect)(()=>{let t=e.current;if(!t)return;let i=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(n(!0),i.disconnect())},{rootMargin:"150% 0px"});return i.observe(t),()=>i.disconnect()},[]),r)?(0,t.jsx)("div",{ref:e,style:{display:"contents"},children:(0,t.jsx)(a,{})}):(0,t.jsx)("div",{ref:e,"aria-hidden":!0,style:{minHeight:"100vh"}})}])}]); |