https://www.polestar.cn/37017007247/web3-static/hero-parallax-HeroParallax-4561c9e0936134d2be17.js

1"use strict";(self.webpackChunkpolestar_www=self.webpackChunkpolestar_www||[]).push([[4103],{63315:function(e,t,a){a.d(t,{A:function(){return r},T:function(){return l}});var n={POLESTAR_1:"polestar 1",POLESTAR_2:"polestar 2"};const i=new RegExp(Object.values(n).join("|"),"gi"),l=e=>e.replace(/(\d)(\s+)(\d)/g,"$1 $3");var r=e=>e.replace(i,e=>e.replace(" "," "))},7769:function(e,t,a){var n=a(73226),i=a(57363),l=a(94213),r=a(79474),o=a(73748);t.A=({from:e,to:t,startCount:a,duration:s=n.Dx.xxSlow,delay:c=0,ease:A=o.A.easeInOutSoft,onComplete:d,onUpdate:m,className:u})=>{const E=(0,r.useRef)(null);return(0,r.useEffect)(()=>{a&&(0,l.i)(e,t,{duration:s,delay:c,ease:A,onUpdate(e){null!=E&&E.current&&(E.current.textContent=e.toFixed(t%1>0?1:0).toString()),null==m||m()},onComplete(){null!=E&&E.current&&(E.current.textContent=t.toString()),null==d||d()}})},[e,t,a,s,c,A,m,d]),r.createElement(i.m.span,{ref:E,className:u},e)}},14685:function(e,t,a){a.r(t),a.d(t,{default:function(){return ee}});var n=a(77894),i=a(40628),l=a(8228),r=a(96590),o=a(32752),s=a(78082),c=a(85144),A=a(70334),d=a(94418),m=a(21807),u=a(63871),E=a(77506),p=a(68099),g=a(90268),x=a(55041),T=a(89106),h=a(17124),I=a(73226),b=a(57363),f=a(79474),O=a(63315),_=a(7769),N=a(56035),y=a(95449);var w=(0,n.default)(N.l)`
2  line-height: ${(0,y.p9)(1.625)};
3  padding: 0;
4  margin-left: -1px;
5`,v=a(92184),L=a(45526),S=a(6597),M=a(22183),k=a(65468),D=a(73748),$=function(e){return e[e.EM_DASH=0]="EM_DASH",e[e.TITLE=1]="TITLE",e[e.SUBTITLE=2]="SUBTITLE",e[e.DESCRIPTION=3]="DESCRIPTION",e[e.PRIMARY_BUTTON=7]="PRIMARY_BUTTON",e[e.TEXT_BUTTON=7]="TEXT_BUTTON",e}($||{}),U=function(e){return e.ANIMATE_OUT="ANIMATE_OUT",e.ANIMATE_IN="ANIMATE_IN",e.HIDE_AND_MOVE_LEFT="HIDE_AND_MOVE_LEFT",e}(U||{}),j=function(e){return e[e.ANIMATE_IN=.8]="ANIMATE_IN",e[e.ANIMATE_OUT=I.Dx.normal]="ANIMATE_OUT",e[e.HIDE=I.Dx.none]="HIDE",e}(j||{});const C=I.Dx.xFast,P=I.Dx.slow,H=e=>({delay:P+e*C,duration:j.ANIMATE_IN,ease:D.A.easeInOut});var R={[U.ANIMATE_OUT]:{opacity:i.A.none,transition:{duration:j.ANIMATE_OUT}},[U.ANIMATE_IN]:e=>({opacity:i.A.full,x:`${A.A.none}`,transition:H(e)}),[U.HIDE_AND_MOVE_LEFT]:{opacity:i.A.none,x:`-${A.A.large}`,transition:{duration:j.HIDE}}};const B={mobile:{w:900},tablet:{w:1100},desktop:{w:1400},desktopWide:{w:2e3}},F={p:e=>f.createElement(q,e),a:e=>f.createElement(M.Sd,e)},V=({leadingText:e,highlight:t,trailingText:a,title:n,index:r,isInView:o,isHeroAnimating:s})=>{const{queryMatches:c}=(0,l.A)(),{0:A,1:d}=(0,f.useState)(!1),m=(0,I.sZ)(.08)*r,p=(0,I.sZ)(.16),g={hidden:{opacity:i.A.none,y:"12px"},show:{opacity:i.A.full,y:0,transition:{duration:I.Dx.xxSlow,delay:m,ease:D.A.easeOut}}},x={hidden:{opacity:i.A.none,y:"12px"},show:{opacity:i.A.full,y:0,transition:{duration:I.Dx.xxSlow,delay:p+m,ease:D.A.easeOut}}},T=(0,u.A)(),{0:h,1:O}=(0,f.useState)(T.polestarApp.accentColor),N=(0,f.useCallback)(()=>O(T.text.color),[T.text.color]);return f.createElement(E.A,{level:2,"aria-label":`${n} ${e} ${t} ${a}`},f.createElement(b.m.div,{initial:"hidden",variants:g,animate:s&&o&&"show","aria-hidden":"true"},n),f.createElement(b.m.div,{initial:"hidden",variants:x,animate:s&&o&&"show",onAnimationStart:()=>d(!0),"aria-hidden":"true"},e," ",f.createElement(b.m.span,{animate:{transition:{duration:(0,I.sZ)(1.2),ease:D.A.easeInOutSoft},color:h}},f.createElement(_.A,{startCount:A,from:0,to:t,onComplete:N})),c.mobile&&f.createElement("br",null),!c.mobile&&" ",a))},W=(0,n.default)(p.Ay)`
6  display: flex;
7  padding: 0 ${g.A.mobile.gutter};
8  margin: ${g.A.mobile.gutter} auto;
9  user-select: none;
10  height: max(130vh, 49.625rem);
11
12  ${x.A.tablet} {
13    padding: 0 ${A.A.large};
14    margin: ${A.A.large} auto;
15  }
16
17  ${x.A.desktop} {
18    padding: 0 ${A.A.xLarge};
19    margin: ${A.A.xLarge} auto;
20    height: max(130vh, 62.375rem);
21  }
22
23  ${x.A.desktopWide} {
24    padding: 0 ${A.A.xLarge};
25    margin: ${A.A.xLarge} auto;
26    height: max(110vh, 59.75rem);
27  }
28`,X=n.default.div`
29  width: 100%;
30  height: 100%;
31`,Y=(0,n.default)(d.A)`
32  width: 100%;
33  height: 100%;
34`,Z=(0,n.default)(p.yk)`
35  overflow: hidden;
36`,q=(0,n.default)(T.A)`
37  margin-bottom: ${A.A.large};
38  width: 75%;
39
40  ${x.A.tablet} {
41    max-width: ${(0,A.H)(17.75)};
42  }
43`,z=(0,n.default)(b.m.div)`
44  position: absolute;
45  top: 0;
46  left: 0;
47  width: 100%;
48  height: 100%;
49`,G=(0,n.default)(h.A)`
50  position: relative;
51  height: 100%;
52`,J=b.m.create(E.A),K=(0,n.default)(b.m.create(E.A))`
53  max-width: ${(0,A.H)(20)};
54`,Q=b.m.create(w);var ee=({title:e,description:t,subtitle:a,buttons:n,imageLayer1:u,imageLayer2:E,usps:p,trackingId:g,i

54d:x})=>{const{0:T,1:h}=(0,f.useState)(!1),_=(0,k.Cf)(u.src,B),N=(0,k.Cf)(E.src,B),{0:y,1:w}=(0,f.useState)(!1),{0:j,1:C}=(0,f.useState)(!1),P=y&&j,H=(0,O.T)(t),q=e=>({custom:e,initial:U.ANIMATE_OUT,animate:P&&U.ANIMATE_IN,variants:R}),ee={scale:1.05,originX:"50%",originY:"50%",opacity:i.A.none},te={opacity:i.A.full,scale:1,transition:{duration:(0,I.sZ)(1.6),ease:D.A.easeOut}},{queryMatches:ae}=(0,l.A)(),ne=(0,f.useCallback)(()=>{h(!0)},[]);return f.createElement(f.Fragment,null,f.createElement(W,{media:!0,id:x,"data-track-area":g},f.createElement(Z,null,f.createElement(z,{initial:ee,animate:P&&te},f.createElement(Y,{parallaxProp:"y",parallaxIn:[.5,1],parallaxOut:["0","5%"]},f.createElement(S.A,Object.assign({},_,{onLoaded:()=>{w(!0)},alt:u.alt,showLoadingState:!1,objectPosition:ae.desktopWide?"left center":u.objectPosition||"left bottom",stretch:!0,objectFit:"cover",preload:!0})))),f.createElement(z,{initial:ee,animate:P&&te},f.createElement(S.A,Object.assign({},N,{onLoaded:()=>{C(!0)},alt:E.alt,showLoadingState:!1,objectPosition:ae.desktopWide?"left center":E.objectPosition||"left bottom",stretch:!0,objectFit:"cover",preload:!0}))),f.createElement(G,{mainAxisAlignment:r.VV.spaceBetween},f.createElement(X,null,f.createElement(Y,{parallaxProp:"y",parallaxIn:[.5,1],parallaxOut:["0%","-50%"]},f.createElement(o.A,null,f.createElement(s.A,{span:{mobile:3,tablet:4,desktop:3}},f.createElement(c.A,{spacing:{mobile:(0,A.H)(7),desktop:(0,A.H)(12.5)}}),f.createElement(J,Object.assign({level:1},q($.TITLE)),e),f.createElement(Q,Object.assign({as:"div"},q($.EM_DASH),{initial:U.HIDE_AND_MOVE_LEFT}),"—"),f.createElement(K,Object.assign({level:2},q($.SUBTITLE)),a),f.createElement(c.A,{spacing:A.A.xSmall}),H&&f.createElement(b.m.div,q($.DESCRIPTION),f.createElement(M.Ay,{html:H,elementMap:F})),!(null==n||!n.length)&&n.map(({label:e,...t},a)=>f.createElement(b.m.div,Object.assign({style:{marginTop:0===a?A.A.xLarge:void 0},key:t.id},q(0===a?$.PRIMARY_BUTTON:$.TEXT_BUTTON)),0===a?f.createElement(v.A,Object.assign({},t,{iconPosition:r.Ay.right}),e):f.createElement(f.Fragment,null,f.createElement(c.A,null),f.createElement(L.A,Object.assign({},t,{iconPosition:r.Ay.right}),e)))))))),f.createElement("div",null,f.createElement(d.A,{parallaxProp:"y",parallaxIn:[0,.7,1],parallaxOut:["0","-15%","-70%"]},f.createElement(c.A,{spacing:A.A.xxLarge}),f.createElement(o.A,null,p.map((e,t)=>{const a=0===t;return f.createElement(s.A,{key:e.id,offset:{mobile:0,tablet:0,desktop:1,desktopWide:1},span:{mobile:a?4:0,tablet:4,desktop:5}},f.createElement(V,Object.assign({},e,{index:t,isInView:T,isHeroAnimating:P})))})),f.createElement(c.A,{spacing:{mobile:A.A.xxxxLarge,tablet:A.A.xxxxxLarge,desktop:A.A.xxxxxxLarge,desktopWide:A.A.xxxxxLarge}})))))),f.createElement(m.Ay,{onEnter:ne}))}}}]);
55//# sourceMappingURL=hero-parallax-HeroParallax-4561c9e0936134d2be17.js.map