https://www.spyne.ai/spyne-website/_next/static/chunks/1439.10948521f13a6ba7.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1439],{11439:(e,t,l)=>{l.r(t),l.d(t,{default:()=>r});var a=l(95155),s=l(16922),i=l(15239),d=l(12115),n=l(98514);let r=function(e){var t,l,r,m,o,x,c,u,h,f,p,v,g,b,w,j,N,y,k,_,O,S,C,A,I,$,E,P;let{setCurrentRoute:R,selectedCar:W,language:z}=e,[J,q]=(0,d.useState)(0),G=(0,d.useRef)(null),D=(0,d.useRef)(null),[F,M]=(0,s.Wx)({threshold:.5}),T=null===n.j||void 0===n.j||null==(t=n.j.imgExperience)?void 0:t.find(e=>(null==e?void 0:e.id)===W);return(0,d.useEffect)(()=>(M?(R(5),G.current=setInterval(()=>{q(e=>(e+1)%4)},2e3)):clearInterval(G.current),()=>clearInterval(G.current)),[M]),(0,a.jsx)("section",{ref:F,className:"mx-auto flex h-[100dvh] w-11/12 items-end",children:(0,a.jsxs)("div",{className:"flex w-full flex-col max-md:h-[93dvh] md:h-[87vh] md:gap-6",children:[(0,a.jsx)("h2",{className:"font-plusJakarta whitespace-nowrap text-center text-2xl font-bold leading-[64px] text-blue-35 md:text-[42px]",children:null==z?void 0:z.txtHead}),(0,a.jsxs)("div",{className:"flex h-full w-full gap-4 max-md:flex-col md:h-4/5",children:[(0,a.jsxs)("div",{className:"relative flex-1 items-center overflow-hidden rounded-3xl bg-blue-35 max-md:flex max-md:flex-row md:w-5/6",children:[(0,a.jsxs)("div",{className:"absolute m-9 h-[70dvh] bg-transparent transition-opacity max-md:m-3 md:h-[92%] ".concat(0===J?"opacity-100":"opacity-0"),children:[(0,a.jsx)("img",{src:null===n.f||void 0===n.f||null==(r=n.f.experience360)||null==(l=r.lefttext1)?void 0:l.logo,className:"mt-1 max-md:h-6",alt:null==z||null==(m=z.lefttext1)?void 0:m.heading}),(0,a.jsxs)("div",{className:"flex h-[92%] justify-between max-md:flex-wrap md:items-center",children:[(0,a.jsxs)("div",{className:"max-md:py-3 md:w-[40%]",children:[(0,a.jsx)("div",{className:"text-white/60 text-lg font-medium tracking-widest max-md:text-xs",children:null==z||null==(o=z.lefttext1)?void 0:o.subheading}),(0,a.jsx)("div",{className:"font-plusJakarta pb-3 text-5xl font-bold text-white max-md:text-2xl",children:null==z||null==(x=z.lefttext1)?void 0:x.heading}),(0,a.jsx)("div",{className:"text-white/60 text-sm font-normal max-md:text-xs",children:null==z||null==(c=z.lefttext1)?void 0:c.para})]}),(0,a.jsxs)("div",{className:"md:w-[60%]",children:[(0,a.jsx)(i.default,{src:T.mobilesec1,width:800,height:720,className:"rounded-3xl md:hidden",alt:"Hypersmooth"}),(0,a.jsxs)("div",{className:"flex w-full flex-col gap-2 max-md:hidden md:relative md:flex-row md:justify-center md:gap-5",children:[(0,a.jsxs)("div",{className:"relative md:w-6/12",children:[(0,a.jsx)(i.default,{src:T.imgSec11,width:1200,height:920,className:"rounded-3xl",alt:"left image"}),(0,a.jsx)("div",{className:"absolute bottom-2 left-1/3 font-bold text-white",children:null==z?void 0:z.fold1})]}),(0,a.jsxs)("div",{className:"relative md:w-6/12",children:[(0,a.jsx)(i.default,{src:T.imgSec12,width:1200,height:920,className:"rounded-3xl",alt:"right image"}),(0,a.jsx)("div",{className:"absolute bottom-2 left-1/4 font-bold text-white",children:null===n.f||void 0===n.f||null==(u=n.f.experience360)?void 0:u.fold2})]})]})]})]})]}),(0,a.jsxs)("div",{className:"absolute m-9 h-[70dvh] bg-transparent transition-opacity max-md:m-3 md:h-[92%] ".concat(1===J?"opacity-100":"opacity-0"),children:[(0,a.jsx)("img",{src:null===n.f||void 0===n.f||null==(f=n.f.experience360)||null==(h=f.lefttext2)?void 0:h.logo,className:"mt-1 max-md:h-6",alt:null==z||null==(p=z.lefttext2)?void 0:p.heading}),(0,a.jsxs)("div",{className:"flex h-[92%] justify-between max-md:flex-wrap md:items-center",children:[(0,a.jsxs)("div",{className:"max-md:py-3 md:w-[40%]",children:[(0,a.jsx)("div",{className:"text-white/60 text-lg font-medium tracking-widest max-md:text-xs",children:null==z||null==(v=z.lefttext2)?void 0:v.subheading}),(0,a.jsx)("div",{className:"font-plusJakarta pb-3 text-5xl font-bold text-white max-md:text-2xl",children:null==z||null==(g=z.lefttext2)?void 0:g.heading}),(0,a.jsx)("div",{className:"text-white/60 text-sm font-normal max-md:text-xs",children:null==z||null==(b=z.lefttext2)?void 0:b.para})]}),(0,a.jsx)("div",{className:"md:w-[60%]",children:(0,a.jsxs)("div",{className:"flex flex-row justify-center",children:[(0,a.jsx)(i.default,{src:T.imgSec21,width:1200,height:920,className:"w-full rounded-3xl max-md:hidden",alt:"ai hotspot"}),(0,a.jsx)(i.default,{src:T.mobilesec2,width:640,height:1300,className:"rounded-3xl md:hidden",alt:"ai hotspot"})]})})]})]}),(0,a.jsxs)("div",{className:"absolute m-9 h-[70dvh] bg-transparent transition-opacity max-md:m-3 md:h-[92%] ".concat(2===J?"opacity-100":"opacity-0"),children:[(0,a.jsx)("img",{src:null===n.f||void 0===n.f||null==(j=n.f.experience360)||null==(w=j.lefttext3)?void 0:w.logo,className:"mt-1 max-md:h-6",alt:null==z||null==(N=z.lefttext3)?void 0:N.heading}),(0,a.jsxs)("div",{className:"flex h-[92%] justify-between max-md:flex-wrap md:items-center",children:[(0,a.jsxs)("div",{className:"max-md:py-3 md:w-[40%]",children:[(0,a.jsx)("div",{className:"text-white/60 text-lg font-medium tracking-widest max-md:text-xs",children:null==z||null==(y=z.lefttext3)?void 0:y.subheading}),(0,a.jsx)("div",{className:"font-plusJakarta pb-3 text-5xl font-bold text-white max-md:text-2xl",children:null==z||null==(k=z.lefttext3)?void 0:k.heading}),(0,a.jsx)("div",{className:"text-white/60 text-sm font-normal max-md:text-xs",children:null==z||null==(_=z.lefttext3)?void 0:_.para})]}),(0,a.jsx)("div",{className:"md:w-[60%]",children:(0,a.jsxs)("div",{className:"flex flex-row justify-center",children:[(0,a.jsx)(i.default,{src:T.imgSec31,width:800,height:720,className:"rounded-3xl max-md:hidden",alt:"automatic catalog"}),(0,a.jsx)(i.default,{src:T.mobilesec3,width:640,height:1300,className:"rounded-3xl md:hidden",alt:"automatic catalog"})]})})]})]}),(0,a.jsxs)("div",{className:"absolute m-9 h-[70dvh] bg-transparent transition-opacity max-md:m-3 md:h-[92%] ".concat(3===J?"opacity-100":"opacity-0"),children:[(0,a.jsx)("img",{src:null===n.f||void 0===n.f||null==(S=n.f.experience360)||null==(O=S.lefttext4)?void 0:O.logo,className:"mt-1 h-7 max-md:h-6",alt:null==z||null==(C=z.lefttext4)?void 0:C.heading}),(0,a.jsxs)("div",{className:"flex h-[92%] justify-between max-md:flex-wrap md:items-center",children:[(0,a.jsxs)("div",{className:"max-md:py-3 md:w-[40%]",children:[(0,a.jsx)("div",{className:"text-white/60 text-lg font-medium tracking-widest max-md:text-xs",children:null==z||null==(A=z.lefttext4)?void 0:A.subheading}),(0,a.jsx)("div",{className:"font-plusJakarta pb-3 text-5xl font-bold text-white max-md:text-2xl",children:null==z||null==(I=z.lefttext4)?void 0:I.heading}),(0,a.jsx)("div",{className:"text-white/60 text-sm font-normal max-md:text-xs",children:null==z||null==($=z.lefttext4)?void 0:$.para})]}),(0,a.jsx)("div",{className:"md:w-[60%]",children:(0,a.jsxs)("div",{className:"flex flex-row justify-center",children:[(0,a.jsx)(i.default,{src:T.imgSec41,width:800,height:720,className:"rounded-3xl max-md:hidden",alt:"integration"}),(0,a.jsx)(i.default,{src:T.mobilesec4,width:640,height:1300,className:"rounded-3xl md:hidden",alt:"integration"})]})})]})]})]}),(0,a.jsx)("div",{className:"flex flex-row justify-between overflow-scroll bg-white max-md:mb-3 md:w-1/6 md:flex-col",children:null===n.f||void 0===n.f||null==(P=n.f.experience360)||null==(E=P.changebtn)?void 0:E.map((e,t)=>{var l;let s=(null==z||null==(l=z.changebtn)?void 0:l["button".concat(t+1)])||(null==e?void 0:e.text);return(0,a.jsx)("button",{onClick:()=>{q(t),clearInterval(G.current),D.current&&clearTimeout(D.current)},className:"m-1 flex items-center rounded-lg border-2 p-1 text-lg max-md:h-12 max-md:text-sm max-md:font-semibold md:m-2 md:h-1/5 md:rounded-2xl md:p-2 md:pl-6 md:text-left ".concat(J===t?"rounded-2xl border-blue-35 bg-violet-200 font-bold text-blue-35 max-md:w-56":"font-medium text-black max-md:w-12"),children:(0,a.jsxs)("div",{className:"font-plusJakarta max-md:flex max-md:overflow-hidden max-md:whitespace-nowrap",children:[(0,a.jsx)("img",{className:"max-md:ml-1 max-md:mr-3 max-md:h-5",src:e.icon,alt:s}),s]})},t)})})]})]})})}},16922:(e,t,l)=>{l.d(t,{CS:()=>g,Wx:()=>a.Wx,zh:()=>a.zh});var a=l(82468),s=l(47650),i=l(13126),d=l(97236);let n=/^--/,r={},m={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},o=["Webkit","Ms","Moz","O"];m=Object.keys(m).reduce((e,t)=>

1(o.forEach(l=>e[((e,t)=>e+t.charAt(0).toUpperCase()+t.substring(1))(l,t)]=e[t]),e),m);let x=/^(matrix3d|matrix|translate3d|translate[XYZ]?|scale3d|scale[XYZ]?|rotate3d|rotate[XYZ]?|skew[XY]?)$/,c=/^(translate)/,u=/^(rotate|skew)/,h=(e,t)=>i.is.num(e)&&0!==e?e+t:e,f=(e,t)=>i.is.arr(e)?e.every(e=>f(e,t)):i.is.num(e)?e===t:parseFloat(e)===t;var p=class extends d.$s{constructor({x:e,y:t,z:l,...a}){let s=[],d=[];(e||t||l)&&(s.push([e||0,t||0,l||0]),d.push(e=>[`translate3d(${e.map(e=>h(e,"px")).join(",")})`,f(e,0)])),(0,i.FI)(a,(e,t)=>{if("transform"===t)s.push([e||""]),d.push(e=>[e,""===e]);else if(x.test(t)){if(delete a[t],i.is.und(e))return;let l=c.test(t)?"px":u.test(t)?"deg":"";s.push((0,i.$r)(e)),d.push("rotate3d"===t?([e,t,a,s])=>[`rotate3d(${e},${t},${a},${h(s,l)})`,f(s,0)]:e=>[`${t}(${e.map(e=>h(e,l)).join(",")})`,f(e,+!!t.startsWith("scale"))])}}),s.length&&(a.transform=new v(s,d)),super(a)}},v=class extends i.aq{constructor(e,t){super(),this.inputs=e,this.transforms=t,this._value=null}get(){return this._value||(this._value=this._get())}_get(){let e="",t=!0;return(0,i.__)(this.inputs,(l,a)=>{let s=(0,i.oq)(l[0]),[d,n]=this.transforms[a](i.is.arr(s)?s:l.map(i.oq));e+=" "+d,t=t&&n}),t?"none":e}observerAdded(e){1==e&&(0,i.__)(this.inputs,e=>(0,i.__)(e,e=>(0,i.at)(e)&&(0,i.Ec)(e,this)))}observerRemoved(e){0==e&&(0,i.__)(this.inputs,e=>(0,i.__)(e,e=>(0,i.at)(e)&&(0,i.DV)(e,this)))}eventObserved(e){"change"==e.type&&(this._value=null),(0,i.MI)(this,e)}};a.RV.assign({batchedUpdates:s.unstable_batchedUpdates,createStringInterpolator:i.Rs,colors:i.Tj});let g=(0,d.De)(["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"],{applyAnimatedValues:function(e,t){if(!e.nodeType||!e.setAttribute||!e.removeAttribute)return!1;let l="filter"===e.nodeName||e.parentNode&&"filter"===e.parentNode.nodeName,{className:a,style:s,children:i,scrollTop:d,scrollLeft:o,viewBox:x,...c}=t,u=Object.values(c),h=Object.keys(c).map(t=>l||e.hasAttribute(t)?t:r[t]||(r[t]=t.replace(/([A-Z])/g,e=>"-"+e.toLowerCase())));for(let l in t.hasOwnProperty("children")&&(e.textContent=i),s)if(s.hasOwnProperty(l)){var f;let t=null==(f=s[l])||"boolean"==typeof f||""===f?"":"number"!=typeof f||0===f||n.test(l)||m.hasOwnProperty(l)&&m[l]?(""+f).trim():f+"px";n.test(l)?e.style.setProperty(l,t):e.style[l]=t}h.forEach((t,l)=>{let a=u[l];void 0!==a?e.setAttribute(t,a):e.removeAttribute(t)}),t.hasOwnProperty("className")&&(void 0!==a?e.className=a:e.removeAttribute("class")),void 0!==d&&(e.scrollTop=d),void 0!==o&&(e.scrollLeft=o),t.hasOwnProperty("viewBox")&&(void 0!==x?e.setAttribute("viewBox",x):e.removeAttribute("viewBox"))},createAnimatedStyle:e=>new p(e),getComponentProps:({scrollTop:e,scrollLeft:t,...l})=>l}).animated}}]);