348 lines
27 KiB
JavaScript
348 lines
27 KiB
JavaScript
(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,5074,e=>{"use strict";var t=e.i(43476),i=e.i(71645);let n=[[[.04,.2],[.1,.12],[.18,.1],[.24,.13],[.29,.12],[.3,.18],[.27,.22],[.26,.28],[.22,.3],[.2,.38],[.17,.44],[.15,.4],[.16,.32],[.12,.3],[.09,.26],[.06,.24]],[[.21,.5],[.27,.48],[.31,.52],[.31,.6],[.29,.66],[.27,.74],[.24,.82],[.22,.8],[.22,.7],[.205,.62],[.2,.55]],[[.45,.16],[.5,.13],[.55,.15],[.57,.19],[.55,.24],[.5,.27],[.47,.25],[.455,.2]],[[.46,.34],[.53,.32],[.58,.36],[.585,.44],[.56,.52],[.53,.6],[.5,.66],[.47,.62],[.46,.52],[.45,.44],[.45,.38]],[[.56,.14],[.64,.1],[.74,.1],[.84,.14],[.9,.2],[.92,.26],[.86,.3],[.8,.3],[.74,.34],[.7,.34],[.66,.3],[.6,.3],[.575,.24],[.565,.18]],[[.81,.66],[.87,.64],[.92,.68],[.92,.74],[.86,.77],[.81,.74],[.8,.7]]],a=[[.115,.3],[.265,.255],[.285,.66],[.475,.185],[.605,.345],[.655,.4],[.745,.5],[.815,.275],[.865,.715]],o=[[0,1],[1,3],[3,4],[4,5],[5,6],[6,7],[7,8],[1,2],[3,7],[0,7]];e.s(["default",0,function({accent:e="#ef4444"}){let r=(0,i.useRef)(null);return(0,i.useEffect)(()=>{let[t,i,s]=function(e){let t=/^#?([0-9a-f]{6})$/i.exec(e.trim());if(!t)return[239,68,68];let i=parseInt(t[1],16);return[i>>16&255,i>>8&255,255&i]}(e),l=e=>`rgba(${t},${i},${s},${e})`,d=`rgb(${t},${i},${s})`,c=r.current,m=c?.parentElement;if(!c||!m)return;let p=c.getContext("2d");if(!p)return;let h=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,g=0,u=0,x=[],b=0,f=0,w=()=>{let e=m.getBoundingClientRect();g=Math.max(1,e.width),u=Math.max(1,e.height);let t=Math.min(window.devicePixelRatio||1,2);c.width=Math.round(g*t),c.height=Math.round(u*t),c.style.width=g+"px",c.style.height=u+"px",p.setTransform(t,0,0,t,0,0),(()=>{x=[];let e=Math.max(11,Math.min(17,g/70));for(let t=e/2;t<g;t+=e)for(let i=e/2;i<u;i+=e){let e=t/g,a=i/u;for(let o of n)if(function(e,t,i){let n=!1;for(let a=0,o=i.length-1;a<i.length;o=a++){let r=i[a][0],s=i[a][1],l=i[o][0],d=i[o][1];s>t!=d>t&&e<(l-r)*(t-s)/(d-s)+r&&(n=!n)}return n}(e,a,o)){x.push({x:t,y:i});break}}})()},y=(e,t)=>({x:(e.x+t.x)/2,y:(e.y+t.y)/2-.28*Math.hypot(t.x-e.x,t.y-e.y)}),v=(e,t,i,n)=>{let a=1-n;return{x:a*a*e.x+2*a*n*t.x+n*n*i.x,y:a*a*e.y+2*a*n*t.y+n*n*i.y}},k=e=>{for(let e of(p.clearRect(0,0,g,u),p.fillStyle="rgba(120,122,130,0.55)",x))p.beginPath(),p.arc(e.x,e.y,1.15,0,2*Math.PI),p.fill();let t=a.map(([e,t])=>({x:e*g,y:t*u}));for(let[e,i]of(p.save(),p.setLineDash([4,7]),p.lineWidth=1,p.strokeStyle=l(.13),o)){let n=y(t[e],t[i]);p.beginPath(),p.moveTo(t[e].x,t[e].y),p.quadraticCurveTo(n.x,n.y,t[i].x,t[i].y),p.stroke()}p.restore(),p.save();for(let i=0;i<o.length;i++){let[n,a]=o[i],r=y(t[n],t[a]),s=((.11*e+.137*i)%1+1)%1,c=v(t[n],r,t[a],s),m=Math.max(0,s-.04),h=v(t[n],r,t[a],m),g=p.createLinearGradient(h.x,h.y,c.x,c.y);g.addColorStop(0,l(0)),g.addColorStop(1,l(.5)),p.strokeStyle=g,p.lineWidth=2,p.beginPath(),p.moveTo(h.x,h.y),p.lineTo(c.x,c.y),p.stroke(),p.shadowColor=d,p.shadowBlur=12,p.fillStyle=d,p.beginPath(),p.arc(c.x,c.y,2.6,0,2*Math.PI),p.fill(),p.shadowBlur=0}for(let i of(p.restore(),t)){for(let t=0;t<2;t++){let n=((e+2.6*t/2)%2.6+2.6)%2.6/2.6,a=3+24*n,o=(1-n)*.45;p.beginPath(),p.strokeStyle=l(o),p.lineWidth=1.5,p.arc(i.x,i.y,a,0,2*Math.PI),p.stroke()}p.fillStyle=d,p.shadowColor=d,p.shadowBlur=8,p.beginPath(),p.arc(i.x,i.y,2.6,0,2*Math.PI),p.fill(),p.shadowBlur=0}},_=e=>{f||(f=e),k((e-f)/1e3),b=requestAnimationFrame(_)};w(),h?k(0):b=requestAnimationFrame(_);let j=new ResizeObserver(()=>{w(),h&&k(0)});return j.observe(m),()=>{cancelAnimationFrame(b),j.disconnect()}},[e]),(0,t.jsx)("canvas",{ref:r,className:"ind__map","aria-hidden":"true"})}])},89937,e=>{"use strict";var t=e.i(43476),i=e.i(71645),n=e.i(74080);let a=[{heading:"Solutions for Every Industry",text:"Discover how Doormile's connected logistics platform serves diverse industries with tailored solutions."},{heading:"One Platform. All Verticals",text:"Doormile adapts to the unique challenges of your vertical—not the other way around."}];e.s(["default",0,function({slides:e=a}={}){(0,n.preload)("/images/home1-slide-1.webp",{as:"image"});let[o,r]=(0,i.useState)(0);(0,i.useEffect)(()=>{let e=setInterval(()=>{r(e=>+(0===e))},7e3);return()=>clearInterval(e)},[]);let s=e=>{r(e)};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:`
|
|
.howits-hero-custom-bg.elementor-repeater-item-3264830,
|
|
.howits-hero-custom-bg.elementor-repeater-item-6867061 {
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-1.webp') !important;
|
|
background-position: center !important;
|
|
background-repeat: no-repeat !important;
|
|
background-size: cover !important;
|
|
}
|
|
|
|
.howits-hero-custom-bg.elementor-repeater-item-6867061 {
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-2.webp') !important;
|
|
background-position: center !important;
|
|
background-repeat: no-repeat !important;
|
|
background-size: cover !important;
|
|
}
|
|
|
|
/* Center alignments for standard content slider elements */
|
|
.elementor-element.elementor-element-6c7cbcb .slide-content {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
padding: 0 !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6c7cbcb .slide-content-inner {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
max-width: 1000px !important;
|
|
margin: 0 auto !important;
|
|
/* Contain the slider theme's inherited 20px padding (content-box) so
|
|
width:100% + padding doesn't overflow the viewport and push the
|
|
heading off-center on mobile. */
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6c7cbcb .content-slider-item-heading,
|
|
.elementor-element.elementor-element-6c7cbcb .content-slider-item-heading .heading-content {
|
|
text-align: center !important;
|
|
display: block !important;
|
|
width: 100% !important;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
padding-left: 15px !important;
|
|
padding-right: 15px !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6c7cbcb .content-slider-item-text {
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
width: 100% !important;
|
|
margin-top: 23px !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6c7cbcb .text-content {
|
|
text-align: center !important;
|
|
max-width: 820px !important;
|
|
margin: 0 auto !important;
|
|
padding-left: 15px !important;
|
|
padding-right: 15px !important;
|
|
}
|
|
|
|
/* Larger, more readable hero subtitle on large/4K screens */
|
|
.elementor-element.elementor-element-6c7cbcb .content-slider-item-text p {
|
|
font-size: clamp(16px, 1.35vw, 23px) !important;
|
|
line-height: 1.65 !important;
|
|
}
|
|
|
|
@media (min-width: 1025px) {
|
|
/* Match Home's hero frame so the floating navbar sits with the same
|
|
breathing space. Home (.elementor-61) frames the hero card at 20px;
|
|
this page falls through to the shared kit's 32px base. */
|
|
.elementor-element.elementor-element-741f56c {
|
|
padding: 20px !important;
|
|
}
|
|
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
|
height: 800px !important;
|
|
min-height: 800px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.elementor-element.elementor-element-741f56c {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
--padding-top: 0px !important;
|
|
--padding-block-start: 0px !important;
|
|
padding: 0 10px 10px 10px !important;
|
|
overflow: hidden !important;
|
|
border-radius: 25px !important;
|
|
}
|
|
|
|
/* The stage-outer carries an inline height:800px; collapse it to the
|
|
slide height so there is no dead empty space below the hero card. */
|
|
.elementor-element.elementor-element-6c7cbcb .owl-stage-outer {
|
|
height: 620px !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
|
width: 100% !important;
|
|
min-height: 620px !important;
|
|
height: 620px !important;
|
|
border-radius: 25px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6c7cbcb .slide-content {
|
|
width: 100% !important;
|
|
min-height: 620px !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.elementor-element.elementor-element-741f56c {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
--padding-top: 0px !important;
|
|
--padding-block-start: 0px !important;
|
|
padding: 0 10px 10px 10px !important;
|
|
border-radius: 22px !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6c7cbcb .owl-stage-outer {
|
|
height: 560px !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
|
min-height: 560px !important;
|
|
height: 560px !important;
|
|
border-radius: 22px !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6c7cbcb .slide-content {
|
|
min-height: 560px !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6c7cbcb .content-slider-item-heading {
|
|
max-width: 100% !important;
|
|
font-size: clamp(38px, 11vw, 48px) !important;
|
|
line-height: 1.05 !important;
|
|
overflow-wrap: break-word !important;
|
|
padding-left: 15px !important;
|
|
padding-right: 15px !important;
|
|
}
|
|
|
|
/* Pin the slide counter ("01/02") cleanly bottom-RIGHT — matching the
|
|
Home and How-It-Works heroes. site.css parks it ~80px in from the
|
|
right (looks left/centred), and the wide dot navigation eats the
|
|
right side, so hide the dots on mobile and right-align the counter. */
|
|
.elementor .elementor-element.elementor-element-6c7cbcb .slider-footer {
|
|
text-align: right !important;
|
|
margin-bottom: 24px !important;
|
|
}
|
|
.elementor .elementor-element.elementor-element-6c7cbcb .slider-footer .slider-pagination {
|
|
justify-content: flex-end !important;
|
|
margin-left: 22px !important;
|
|
margin-right: 22px !important;
|
|
}
|
|
.elementor .elementor-element.elementor-element-6c7cbcb .owl-dots {
|
|
display: none !important;
|
|
}
|
|
/* Hide the prev/next arrows on mobile (they overlap the counter) —
|
|
slides still auto-rotate, matching the home hero. */
|
|
.elementor .elementor-element.elementor-element-6c7cbcb .owl-nav {
|
|
display: none !important;
|
|
}
|
|
}
|
|
`}}),(0,t.jsx)("div",{className:"elementor-element elementor-element-741f56c e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent","data-id":"741f56c","data-element_type":"container","data-e-type":"container",children:(0,t.jsx)("div",{className:"elementor-element elementor-element-6c7cbcb elementor-widget elementor-widget-logico_content_slider","data-id":"6c7cbcb","data-element_type":"widget","data-e-type":"widget","data-widget_type":"logico_content_slider.default",children:(0,t.jsx)("div",{className:"elementor-widget-container",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.jsxs)("div",{className:"content-slider owl-carousel owl-theme nav-view-vertical nav-h-position-right nav-v-position-bottom owl-loaded owl-drag",children:[(0,t.jsx)("div",{className:"owl-stage-outer",style:{position:"relative",overflow:"hidden",height:"800px"},children:(0,t.jsxs)("div",{className:"owl-stage",style:{position:"relative",width:"100%",height:"100%"},children:[(0,t.jsx)("div",{className:`owl-item ${0===o?"active":""}`,style:{position:"relative",width:"100%",opacity:+(0===o),visibility:0===o?"visible":"hidden",transition:"opacity 0.8s ease-in-out, visibility 0.8s ease-in-out",zIndex:0===o?2:1},children:(0,t.jsx)("div",{className:"content-item slider-item elementor-repeater-item-3264830 slide-style-standard howits-hero-custom-bg",children:(0,t.jsx)("div",{className:"slide-content",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.jsx)("span",{className:"heading-content",children:e[0].heading})}),(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:e[0].text})})})]})})})}),(0,t.jsx)("div",{className:`owl-item ${1===o?"active":""}`,style:{position:"absolute",top:0,left:0,width:"100%",opacity:+(1===o),visibility:1===o?"visible":"hidden",transition:"opacity 0.8s ease-in-out, visibility 0.8s ease-in-out",zIndex:1===o?2:1},children:(0,t.jsx)("div",{className:"content-item slider-item elementor-repeater-item-6867061 slide-style-standard howits-hero-custom-bg",children:(0,t.jsx)("div",{className:"slide-content",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.jsx)("span",{className:"heading-content",children:e[1].heading})}),(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:e[1].text})})})]})})})})]})}),(0,t.jsxs)("div",{className:"owl-nav",children:[(0,t.jsx)("button",{type:"button",className:"owl-next",onClick:()=>r(e=>+(0===e)),"aria-label":"Next",style:{cursor:"pointer",border:"none",outline:"none"}}),(0,t.jsx)("button",{type:"button",className:"owl-prev",onClick:()=>r(e=>+(0===e)),"aria-label":"Previous",style:{cursor:"pointer",border:"none",outline:"none"}})]}),(0,t.jsx)("div",{className:"slider-footer slider-footer-position-after slider-footer-width-full slider-footer-view-inside",children:(0,t.jsx)("div",{className:"slider-footer-content",children:(0,t.jsxs)("div",{className:"slider-pagination",style:{display:"flex",justifyContent:"flex-end",alignItems:"center",gap:"10px"},children:[(0,t.jsxs)("div",{className:"slider-progress-wrapper",style:{marginRight:"35px",display:"flex",flexDirection:"column",alignItems:"flex-start"},children:[(0,t.jsxs)("div",{style:{fontSize:"16px",fontWeight:600,color:"#FFFFFF",marginBottom:"4px"},children:[(0,t.jsx)("span",{className:"slider-progress-current",children:0===o?"01":"02"})," / ",(0,t.jsx)("span",{className:"slider-progress-all",style:{opacity:.6},children:"02"})]}),(0,t.jsx)("div",{style:{width:"80px",height:"2px",background:"rgba(255, 255, 255, 0.2)",position:"relative",borderRadius:"1px",overflow:"hidden"},children:(0,t.jsx)("div",{style:{position:"absolute",left:0===o?"0":"50%",width:"50%",height:"100%",background:"#c01227",transition:"left 0.3s ease"}})})]}),(0,t.jsxs)("div",{className:"owl-dots owl-dots-6c7cbcb",style:{display:"none"},children:[(0,t.jsx)("button",{type:"button",role:"button",className:`owl-dot ${0===o?"active":""}`,onClick:()=>s(0),children:(0,t.jsx)("span",{})}),(0,t.jsx)("button",{type:"button",role:"button",className:`owl-dot ${1===o?"active":""}`,onClick:()=>s(1),children:(0,t.jsx)("span",{})})]})]})})})]})})})})})})})]})}])},40086,e=>{"use strict";var t=e.i(43476),i=e.i(71645),n=e.i(5074);let a=[{id:1,title:"FMCG",image:"/images/tab-pic-1-solution.webp",alt:"FMCG logistics",desc:"FMCG logistics demands speed, precision, and continuous fulfillment across high-volume logistics networks. Businesses must balance tight shipment timelines, inventory movement, and operational efficiency without compromising product availability.",ch:["Unpredictable demand spikes create logistics pressure and reduce operational efficiency during peak periods.","Fresh product expiry constraints require faster, precisely timed shipments to maintain product quality.","Multi-stop route complexity increases travel time, operational costs, and logistics coordination challenges.","Inventory stockout risks increase when shipment delays disrupt fast-moving product distribution."],so:["AI demand forecasting adapts logistics plans instantly to real-time order demand.","Expiry-aware routing prioritises perishable goods for on-time freshness.","Smart multi-stop optimisation groups orders to cut cost and travel time.","Real-time inventory sync prevents stockouts and improves fulfilment accuracy."]},{id:2,title:"Pharma",image:"/images/tab-pic-2-solution.webp",alt:"Pharma logistics",desc:"Pharma logistics requires precision, compliance, and real-time monitoring so every shipment arrives safely and on time — from temperature-sensitive medicines to urgent emergency shipments.",ch:["Cold chain integrity demands precise temperature control throughout transit.","Regulatory compliance must be tracked and documented on every shipment.","Critical arrival windows require highly accurate scheduling.","Emergency shipments need instant dispatch and zero-delay execution."],so:["Cold chain monitoring with automatic re-routing keeps shipments in-spec.","Compliance engine with audit trails ensures full chain-of-custody visibility.","Precision scheduling locks in critical arrival windows reliably.","Priority dispatch queue fast-tracks urgent, life-critical shipments."]},{id:3,title:"Enterprise & B2B",image:"/images/tab-pic-3-solution.webp",alt:"Enterprise and B2B logistics",desc:"Enterprise and B2B logistics require coordination and reliability to manage high-value shipments at scale — with appointment scheduling, white-glove standards, and strict SLA commitments.",ch:["Appointment scheduling requires precise timing across many locations.","White-glove logistics standards demand premium handling and accuracy.","Multi-location routing complexity grows with large-scale operations.","Strict SLA commitments pressure teams to stay timely and error-free."],so:["Intelligent appointment engine streamlines and automates arrival slots.","White-glove workflow module enforces premium handling end to end.","Enterprise route planner coordinates efficient multi-location logistics.","SLA monitoring dashboard tracks commitments and flags risk in real time."]},{id:4,title:"Retail",image:"/images/last-mile-approach.webp",alt:"Retail doorstep delivery",desc:"Retail logistics is judged at the doorstep. Shoppers expect to watch the delivery rather than call about it, and every failed attempt costs more than the trip itself — so visibility, first-attempt success, and clean returns decide the experience.",ch:["Customers expect to track the delivery live instead of phoning for updates.","Failed delivery attempts cost more than the delivery itself and erode trust.","Returns must flow back through the same trip to stay economical.","Same-day promises leave no room for slow dispatch or manual coordination."],so:["Live customer tracking links replace status calls with a shareable map.","OTP-verified handover confirms delivery and lifts first-attempt success.","Reverse pickup on the same route brings returns back without an extra trip.","Fast doorstep dispatch keeps same-day commitments consistently on time."]},{id:5,title:"Quick Commerce",image:"/images/home2-pic-3.webp",alt:"Quick commerce dark store delivery",desc:"Quick commerce compresses the entire logistics day into minutes. Promise windows are measured in tens of minutes, dark store stock moves constantly, and rider capacity has to match demand the moment it spikes.",ch:["Sub-hour promise windows collapse if dispatch waits on manual decisions.","Dense micro-zone orders arrive faster than they can be grouped by hand.","Peak-hour demand outpaces available rider capacity within minutes.","Dark store stock counts drift out of date and trigger cancelled orders."],so:["Instant dispatch assigns every order the moment it lands, with no queue.","Micro-zone batching groups nearby orders into one short, efficient run.","Live capacity balancing shifts riders to the zones that are surging.","Real-time dark store stock sync prevents cancellations and substitutions."]}];function o({sec:e}){let[a,r]=(0,i.useState)("ch"),s="ch"===a?e.ch:e.so;return(0,t.jsx)("section",{className:"istk","aria-label":`${e.title} solutions`,children:(0,t.jsxs)("div",{className:"istk__card",children:[(0,t.jsx)(n.default,{}),(0,t.jsxs)("div",{className:"istk__row",children:[(0,t.jsx)("div",{className:"istk__media",children:(0,t.jsx)("img",{className:"istk__img",src:e.image,alt:e.alt,decoding:"async",loading:"lazy"})}),(0,t.jsxs)("div",{className:"istk__content",children:[(0,t.jsx)("h3",{className:"istk__title",children:e.title}),(0,t.jsx)("p",{className:"istk__desc",children:e.desc}),(0,t.jsxs)("div",{className:"istk__tabs",role:"tablist","aria-label":"Challenges or Solutions",children:[(0,t.jsx)("button",{type:"button",role:"tab","aria-selected":"ch"===a,className:`istk__tab ${"ch"===a?"active":""}`,onClick:()=>r("ch"),children:"Challenges"}),(0,t.jsx)("button",{type:"button",role:"tab","aria-selected":"so"===a,className:`istk__tab ${"so"===a?"active":""}`,onClick:()=>r("so"),children:"Solutions"})]}),(0,t.jsx)("ul",{className:"istk__list",children:s.map((e,i)=>(0,t.jsx)("li",{style:{animationDelay:`${80*i}ms`},children:e},e))},a)]})]})]})})}let r=`
|
|
/* No outer frame — the cards float on the page background. */
|
|
#ind-stack { background: transparent; }
|
|
|
|
/* The kit-5 theme forces heading size/color on h3 via !important — re-assert. */
|
|
#ind-stack .istk__title {
|
|
font-family: var(--font-manrope), 'Manrope', system-ui, sans-serif !important;
|
|
font-size: clamp(42px, 4.4vw, 62px) !important;
|
|
font-weight: 600 !important;
|
|
line-height: 1.04 !important;
|
|
letter-spacing: -0.02em !important;
|
|
color: #ffffff !important;
|
|
text-transform: none !important;
|
|
margin: 0 0 22px !important;
|
|
}
|
|
|
|
#ind-stack .istk {
|
|
padding: 14px 20px;
|
|
}
|
|
#ind-stack .istk:first-child { padding-top: 24px; }
|
|
#ind-stack .istk:last-child { padding-bottom: 24px; }
|
|
|
|
#ind-stack .istk__card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #0d0d0d;
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: 40px;
|
|
padding: 44px;
|
|
}
|
|
|
|
/* Procedurally-drawn dotted world map (continent dots + hub pulses + routes).
|
|
Vector canvas, so it never distorts on the card's aspect ratio the way a
|
|
stretched bitmap did. Faint gray dots read as a subtle backdrop on the dark card. */
|
|
#ind-stack .ind__map {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#ind-stack .istk__row {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: clamp(44px, 6vw, 104px);
|
|
}
|
|
|
|
/* ---- Image — inset rounded, portrait, drives the card height ---- */
|
|
#ind-stack .istk__media {
|
|
flex: 0 0 35%;
|
|
align-self: stretch;
|
|
min-height: 560px;
|
|
}
|
|
#ind-stack .istk__img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 26px;
|
|
}
|
|
|
|
/* ---- Content ---- */
|
|
#ind-stack .istk__content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
max-width: 680px;
|
|
}
|
|
#ind-stack .istk__desc {
|
|
font-size: clamp(16px, 1.25vw, 20px);
|
|
font-weight: 400;
|
|
line-height: 1.62;
|
|
color: rgba(255,255,255,0.8);
|
|
margin: 0 0 30px;
|
|
}
|
|
|
|
/* Tabs — pills above a full-width underline rule */
|
|
#ind-stack .istk__tabs {
|
|
display: flex;
|
|
gap: 10px;
|
|
padding-bottom: 16px;
|
|
margin-bottom: 26px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
#ind-stack .istk__tab {
|
|
appearance: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
padding: 13px 30px;
|
|
border-radius: 9px;
|
|
background: #f3dede;
|
|
color: #555;
|
|
transition: background-color 0.25s ease, color 0.25s ease;
|
|
}
|
|
#ind-stack .istk__tab:hover { background: #ecd2d2; }
|
|
#ind-stack .istk__tab.active {
|
|
background: #dc2626;
|
|
color: #fff;
|
|
box-shadow: 0 8px 22px -10px rgba(220,38,38,0.8);
|
|
}
|
|
|
|
/* Bullets — round red dots, full-sentence items */
|
|
#ind-stack .istk__list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#ind-stack .istk__list li {
|
|
position: relative;
|
|
padding-left: 28px;
|
|
margin-bottom: 22px;
|
|
font-size: clamp(15px, 1.15vw, 18px);
|
|
font-weight: 400;
|
|
line-height: 1.55;
|
|
color: rgba(255,255,255,0.85);
|
|
animation: istkSlideIn 0.4s ease both;
|
|
}
|
|
#ind-stack .istk__list li:last-child { margin-bottom: 0; }
|
|
#ind-stack .istk__list li::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 9px;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
background: #dc2626;
|
|
box-shadow: 0 0 8px rgba(220,38,38,0.55);
|
|
}
|
|
|
|
@keyframes istkSlideIn {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ---- Responsive ---- */
|
|
@media (max-width: 1024px) {
|
|
#ind-stack .istk__card { padding: 28px; border-radius: 28px; }
|
|
#ind-stack .istk__row { flex-direction: column; align-items: stretch; gap: 28px; }
|
|
#ind-stack .istk__media { flex: none; min-height: 0; height: 300px; }
|
|
#ind-stack .istk__content { max-width: none; }
|
|
}
|
|
@media (max-width: 600px) {
|
|
#ind-stack .istk { padding: 10px; }
|
|
#ind-stack .istk__card { padding: 22px 20px; border-radius: 24px; }
|
|
#ind-stack .istk__media { height: 240px; }
|
|
#ind-stack .istk__title { margin-bottom: 16px !important; }
|
|
#ind-stack .istk__desc { margin: 0 0 24px; }
|
|
/* Two equal-width pills that always fit the card — no horizontal overflow. */
|
|
#ind-stack .istk__tabs { gap: 8px; margin-bottom: 22px; }
|
|
#ind-stack .istk__tab { flex: 1 1 0; min-width: 0; padding: 12px 8px; text-align: center; font-size: 13px; }
|
|
#ind-stack .istk__list li { margin-bottom: 18px; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#ind-stack .istk__list li { animation: none !important; opacity: 1; transform: none; }
|
|
}
|
|
`;e.s(["default",0,function(){return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:r}}),(0,t.jsx)("div",{id:"ind-stack",children:a.map(e=>(0,t.jsx)(o,{sec:e},e.id))})]})}])}]); |