https://firstfit.com/component---src-pages-how-it-works-js-0e5d9b6e086eedb3fe39.js

1"use strict";(self.webpackChunkgatsby_starter_default=self.webpackChunkgatsby_starter_default||[]).push([[724],{5026:function(e,t,a){a.d(t,{Z:function(){return I}});var n=a(7294),l=a(2359),i=a(9963),r=a(4033),o=a(9925),m=a(4276),s=a(9100),d=o.default.div.withConfig({displayName:"ImageCompareWrapper",componentId:"sc-mgf5hi-0"})(["position:relative;"," overflow:hidden;-webkit-mask-image:-webkit-radial-gradient(white,black);.slick-list &{border-radius:0;}"],(0,m.uZ)("border-radius",16,24)),c=o.default.input.withConfig({displayName:"ImageCompareRange",componentId:"sc-mgf5hi-1"})(["position:absolute;top:0;opacity:0;pointer-events:none;"]),u=o.default.div.withConfig({displayName:"ImageCompareMain",componentId:"sc-mgf5hi-2"})(["position:relative;color:",";",":focus + &{outline:"," auto 0.4rem;outline-style:solid;}"],s.O.lightGrey,c,s.O.darkGrey),g=o.default.div.withConfig({displayName:"ImageCompareLeftText",componentId:"sc-mgf5hi-3"})(["position:absolute;"," "," transform-origin:0% 100%;transform:rotate(-90deg);z-index:1;.slick-track &{display:none;}"],(0,m.uZ)("bottom",20,48),(0,m.uZ)("left",32,66)),f=o.default.div.withConfig({displayName:"ImageCompareRightText",componentId:"sc-mgf5hi-4"})(["position:absolute;"," "," transform-origin:100% 100%;transform:rotate(-90deg) translate(100%,100%);z-index:1;.slick-track &{display:none;}"],(0,m.uZ)("bottom",20,48),(0,m.uZ)("right",32,66)),p=o.default.div.attrs((function(e){var t=e.value;if(!e.singleImage)return{style:{clipPath:"polygon(0% 0%, "+t+"% 0%, "+t+"% 100%, 0% 100%)"}}})).withConfig({displayName:"ImageCompareLeft",componentId:"sc-mgf5hi-5"})([""]),h=o.default.div.attrs((function(e){var t=e.value;return{style:{clipPath:"polygon(100% 0%, "+t+"% 0%, "+t+"% 100%, 100% 100%)"}}})).withConfig({displayName:"ImageCompareRight",componentId:"sc-mgf5hi-6"})(["position:absolute;top:0;left:0;width:100%;height:100%;"]),b=o.default.div.withConfig({displayName:"ImageCompareSlider",componentId:"sc-mgf5hi-7"})(["position:absolute;top:0;right:0;bottom:0;left:0;"]),E=o.default.div.withConfig({displayName:"ImageCompareSliderMain",componentId:"sc-mgf5hi-8"})(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"," "," border-radius:50%;background-color:",";background-image:url(",");background-position:center;background-size:contain;"],(0,m.uZ)("width",46,60),(0,m.uZ)("height",46,60),s.O.blue,"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMSIgZmlsbD0iI0YwRjFGMiIvPjxwYXRoIGQ9Ik00OC4zNTQgMzAuMzU0YS41LjUgMCAwMDAtLjcwOGwtMy4xODItMy4xODFhLjUuNSAwIDEwLS43MDcuNzA3TDQ3LjI5MyAzMGwtMi44MjggMi44MjhhLjUuNSAwIDEwLjcwNy43MDdsMy4xODItMy4xODF6TTQ3IDMwLjVoMXYtMWgtMXYxek0xMS42NDYgMzAuMzU0YS41LjUgMCAwMTAtLjcwOGwzLjE4Mi0zLjE4MWEuNS41IDAgMTEuNzA4LjcwN0wxMi43MDcgMzBsMi44MjkgMi44MjhhLjUuNSAwIDExLS43MDguNzA3bC0zLjE4Mi0zLjE4MXpNMTMgMzAuNWgtMXYtMWgxdjF6IiBmaWxsPSIjRjBGMUYyIi8+PC9zdmc+"),y=a(6175),w=a(4167),Z=function(e){var t=e.leftText,a=e.leftImage,o=e.rightText,m=e.rightImage,s=e.delay,Z=(0,n.useState)(m?50:100),I=Z[0],v=Z[1],x=(0,n.useRef)(),C=(0,n.useRef)();return(0,n.useEffect)((function(){if(m){i.p8.registerPlugin(r._),r._.create(C.current,{type:"x",onDrag:function(){v((this.x+x.current.offsetWidth/2)/x.current.offsetWidth*100)}});var e=function(){r._.get(C.current).applyBounds({minX:-x.current.offsetWidth/2,maxX:x.current.offsetWidth/2})};return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}}),[m]),n.createElement(w.Z,{delay:s},n.createElement(d,null,m&&n.createElement(c,{type:"range",min:"0",max:"100",step:"10",value:I,onChange:function(e){var t=e.target.value,a=(t-50)/100*x.current.offsetWidth;v(t),C.current.style.transform="translate(-50%, -50%) translate3d("+a+"px, 0px, 0px)"}}),n.createElement(u,{ref:x},t&&n.createElement(g,null,n.createElement(y.xe,null,t)),n.createElement(p,{value:I,singleImage:!m},n.createElement(l.G,{image:a.gatsbyImageData,alt:a.description})),o&&n.createElement(f,null,n.createElement(y.xe,null,o)),m&&n.createElement(h,{value:

1I},n.createElement(l.G,{image:m.gatsbyImageData,alt:m.description}))),m&&n.createElement(b,null,n.createElement(E,{ref:C}))))};Z.defaultProps={delay:0};var I=Z},5435:function(e,t,a){a.r(t),a.d(t,{default:function(){return K}});var n=a(7294),l=a(7174),i=a(3683),r=a(9925),o=a(1099),m=r.default.div.withConfig({displayName:"HowHeroMain",componentId:"sc-1ojqy6f-0"})([""]),s=r.default.div.withConfig({displayName:"HowHeroImage",componentId:"sc-1ojqy6f-1"})(["max-width:30rem;margin-left:auto;margin-right:auto;margin-top:6.4rem;","{max-width:none;margin-top:0;}"],o.mq.tabletL),d=a(7668),c=a(9251),u=a(4187),g=a(3518),f=a(2165),p=a(6175),h=a(8771),b=a(2359),E=a(4167),y=function(e){var t=e.title,a=e.text,l=e.image;return n.createElement(h.Z,null,n.createElement(m,null,n.createElement(d.Z,null,n.createElement(g.Z,{size:[116,366]}),n.createElement(c.Z,null,n.createElement(u.Z,{tabletL:6,tabletLStart:2},n.createElement(p.nL,{as:"h2"},n.createElement(f.Z,{heading:!0},t)),n.createElement(g.Z,{size:32}),n.createElement(p.xe,{maxWidth:30},n.createElement(f.Z,{delay:.3},a))),n.createElement(u.Z,{tabletL:5,desk:4,deskL:3,deskLStart:9},n.createElement(s,null,n.createElement(E.Z,{delay:.1},n.createElement(b.G,{image:l.gatsbyImageData,alt:l.description,objectFit:"contain"}))))),n.createElement(g.Z,{size:[74,225]}))))},w=a(6048),Z=a(5836),I=a(7193),v=a(4276),x=a(9508),C=a(9100),k=a(5966),L=r.default.div.withConfig({displayName:"CarouselWrapper",componentId:"sc-1b0q9rm-0"})(["overflow:hidden;background-color:",";"," -webkit-mask-image:-webkit-radial-gradient(white,black);*:not(","){min-height:0;min-width:0;}"],C.O.blue,(0,v.uZ)("border-radius",16,24),k.u),M=r.default.div.withConfig({displayName:"CarouselImages",componentId:"sc-1b0q9rm-1"})(["position:relative;overflow:hidden;background-color:",";:before{content:'';display:block;width:100%;height:0;padding-bottom:","%;}"],C.O.darkGrey,234/327*100),N=r.default.div.withConfig({displayName:"CarouselImage",componentId:"sc-1b0q9rm-2"})(["opacity:1;position:absolute;top:0;right:0;bottom:0;left:0;background-color:",";"],C.O.darkGrey),S=r.default.div.withConfig({displayName:"CarouselImageOverlay",componentId:"sc-1b0q9rm-3"})(["position:absolute;inset:0;"]),A=r.default.div.withConfig({displayName:"CarouselMain",componentId:"sc-1b0q9rm-4"})(["display:flex;flex-direction:column;height:100%;color:",";"],C.O.lightGrey),z=r.default.div.withConfig({displayName:"CarouselSlider",componentId:"sc-1b0q9rm-5"})(["position:relative;margin-top:auto;.slick-track{align-items:flex-end;}.slick-arrow{cursor:pointer;position:absolute;bottom:3.85rem;transform:translate(0,50%);","{transform:translateY(calc(50% - 0.7rem));","}}.slick-prev{left:2.7rem;","{","}}.slick-next{right:2.7rem;","{transform:translate(calc(100% + 1.5rem),calc(50% - 0.7rem));",";}}"],o.mq.tabletL,(0,v.uZ)("bottom",38,78,x.A.tabletL,x.A.contained),o.mq.tabletL,(0,v.uZ)("left",27,64,x.A.tabletL,x.A.contained),o.mq.tabletL,(0,v.uZ)("left",27,64,x.A.tabletL,x.A.contained)),T=r.default.div.withConfig({displayName:"CarouselSlide",componentId:"sc-1b0q9rm-6"})(["padding:2.7rem 2.7rem 0;","{padding-top:0;"," ","}"],o.mq.tabletL,(0,v.uZ)("padding-left",27,64,x.A.tabletL,x.A.contained),(0,v.uZ)("padding-right",27,64,x.A.tabletL,x.A.contained)),j=r.default.div.withConfig({displayName:"CarouselFooter",componentId:"sc-1b0q9rm-7"})(["display:flex;align-items:center;justify-content:center;height:7.7rem;padding-left:2.7rem;padding-right:2.7rem;","{justify-content:flex-end;"," "," ","}"],o.mq.tabletL,(0,v.uZ)("height",76,156,x.A.tabletL,x.A.contained),(0,v.uZ)("padding-left",27,64,x.A.tabletL,x.A.contained),(0,v.uZ)("padding-right",27,64,x.A.tabletL,x.A.contained)),D=a(5934),O=a(7658),G=a(5183),q=function(e){var t=e.id,a=e.slides,l=e.endless,i=(0,n.useState)(0),r=i[0],o=i[1],m=(0,n.useState)(0),s=m[0],d=m[1],f=(0,n.useRef)([]),p={infinite:!!l,beforeChange:function(e,t){o(e),d(t),Z.ZP.set(f.current[t],{opacity:0}),Z.ZP.to(f.current[t],{opacity:1,duration:.6,delay:0,ease:"power1.inOut"})}};return n.createElement(L,{id:t},n.createElement(c.Z,{gutters:!1},n.createElement(u.Z,{tabletL:7,tabletLOrder:2,desk:8},n.createElement(M,null,n.Children.toArray(a.map((function(e,t){return n.createElement(N,{ref:function(e){return f.current[t]=e},style:{zIndex:t===s?2:t===r?1:void 0}},e.vimeoId?n.createElement(n.Fragment,null,n.createElement(G.Z,{id:e.vimeoId,autoplay:!0,muted:!0,loop:!0,autopause:!1,controls:!1,playState:t===s,rounded:!1}),n.createElement(S,null)):n.createElement(b.G,{image:e.image.gatsbyImageData,alt:e.image.description,loading:"eager"}))}))))),n.createElement(u.Z,{tabletL:5,tabletLOrder:1,desk:4},n.createElement(A,null,n.createElement(z,null,n.createElement(I.Z,p,n.Children.toArray(a.map((function(e){return n.createElement(T,null,n.createElement(O.Z,{content:e.carouselTitle,heading2:!0}),n.createElement(g.Z,{size:18}),n.createElement(O.Z,{content:e.text,paragraphSize:"regular"}))})))),n.createElement(j,null,a.length>1&&n.createElement(D.Z,{slides:a,activeIndex:s})))))))},P=a(8730),W=r.default.ul.withConfig({displayName:"ScrollToNavMain",componentId:"sc-13bm01r-0"})(["display:none;list-style:none;height:8rem;overflow:hidden;border-radius:4.1rem;border:0.1rem solid ",";","{display:flex;}"],(0,P.DZ)(.5,C.O.midGrey),o.mq.tabletP),R=r.default.li.withConfig({displayName:"ScrollToNavItem",componentId:"sc-13bm01r-1"})(["flex:1;& + &{border-left:0.1rem solid ",";}"],(0,P.DZ)(.5,C.O.midGrey)),H=r.default.button.withConfig({displayName:"ScrollToNavButton",componentId:"sc-13bm01r-2"})(["width:100%;height:100%;cursor:pointer;text-align:center;border:none;background:transparent;"]),U=a(1027),X=function(e){var t=e.items,a=e.offset;return n.createElement(h.Z,null,n.createElement(d.Z,{allowOverflow:!0},n.createElement(E.Z,null,n.createElement(W,null,n.Children.toArray(t.map((function(e){return n.createElement(R,null,n.createElement(H,{onClick:function(){(0,U.X5)((0,U.xU)(e.title),

11e3,a)}},n.createElement(p.Xp,null,e.title)))})))))))},F=function(e){var t=e.data;return n.createElement(n.Fragment,null,n.createElement(X,{items:t,offset:-180}),n.createElement(g.Z,{size:[32,160]}),n.createElement(h.Z,null,n.createElement(d.Z,{allowOverflow:!0},n.createElement(E.Z,null,n.createElement(q,{id:t[0].title.toLowerCase(),slides:t[0].slides,endless:!1})),n.createElement(g.Z,{size:[50,240]}))),n.createElement(h.Z,null,n.createElement(d.Z,{allowOverflow:!0},n.createElement(E.Z,null,n.createElement(q,{id:(0,U.xU)(t[1].title.toLowerCase()),slides:t[1].slides,endless:!1})),n.createElement(g.Z,{size:[50,240]}))),n.createElement(h.Z,null,n.createElement(d.Z,{allowOverflow:!0},n.createElement(E.Z,null,n.createElement(q,{id:t[2].title.toLowerCase(),slides:t[2].slides,endless:!1})))))},Y=r.default.div.withConfig({displayName:"HowResultsMain",componentId:"sc-8pd0ya-0"})(["*:not(","){min-height:0;min-width:0;}"],k.u),B=r.default.div.withConfig({displayName:"HowResultsSlider",componentId:"sc-8pd0ya-1"})(["position:relative;.slick-list{position:relative;:before,:after{position:absolute;"," z-index:1;color:",";}:before{content:",";"," transform-origin:0% 100%;transform:rotate(-90deg);}:after{content:",";"," transform-origin:100% 100%;transform:rotate(-90deg) translate(100%,100%);}}.slick-arrow{position:absolute;bottom:0.1rem;border-color:",";}.slick-prev{}.slick-next{transform:translateX(calc(100% + 1.5rem));}.slick-list{"," background-color:",";overflow:hidden;}"],(0,v.uZ)("bottom",20,48),C.O.lightGrey,(function(e){return"'"+e.leftText+"'"}),(0,v.uZ)("left",32,66),(function(e){return"'"+e.rightText+"'"}),(0,v.uZ)("right",32,66),(0,P.DZ)(.5,C.O.midGrey),(0,v.uZ)("border-radius",16,24),C.O.dark),_=r.default.div.withConfig({displayName:"HowResultsSliderFooter",componentId:"sc-8pd0ya-2"})(["display:flex;justify-content:flex-end;"," ",""],(0,v.uZ)("padding-top",18,28),(0,v.uZ)("padding-bottom",8,12)),Q=a(5026),J=function(e){var t=e.title,a=e.text,l=e.sliders,i=(0,n.useState)(0),r=i[0],o=i[1],m={className:"slick-slider--dark",draggable:!1,swipe:!1,infinite:!1,beforeChange:function(e,t){o(t)}};return n.createElement(h.Z,null,n.createElement(Y,null,n.createElement(g.Z,{size:[84,240]}),n.createElement(d.Z,null,n.createElement(c.Z,null,n.createElement(u.Z,{tabletP:5,tabletPAlign:"center",tabletL:3,tabletLStart:2},n.createElement(p.XJ,{color:C.O.blue},n.createElement(f.Z,null,t)),n.createElement(g.Z,{size:[18,27]}),n.createElement(O.Z,{content:a})),n.createElement(u.Z,{tabletP:7,tabletL:7,tabletLStart:6},n.createElement(E.Z,null,n.createElement(B,{leftText:l[0].leftText,rightText:l[0].rightText},n.createElement(I.Z,m,n.Children.toArray(l.map((function(e){return n.createElement(Q.Z,{leftText:e.leftText,leftImage:e.leftImage,rightText:e.rightText,rightImage:e.rightImage})})))),n.createElement(_,null,n.createElement(D.Z,{slides:l,activeIndex:r,theme:"dark"}))))))),n.createElement(g.Z,{size:[110,240]})))},V=a(680),K=function(e){var t=e.data,a=t.contentfulHowItWorks,r=a.seoTitle,o=a.seoDescription.seoDescription,m=a.heroTitle,s=a.heroText.heroText,d=a.heroImage,c=a.designTitle,u=a.preparationTitle,g=a.cementationTitle,f=a.designSummary,p=a.designSummaryImage,h=a.preparationSummary,b=a.preparationSummaryImage,E=a.cementationSummary,Z=a.cementationSummaryImage,I=a.designSlides,v=a.preparationSlides,x=a.cementationSlides,C=a.resultsTitle,k=a.resultsText,L=a.resultsCompareSliders,M=a.pageNavigation,N=[{title:c,content:f,image:p},{title:u,content:h,image:b},{title:g,content:E,image:Z}],S=[{title:c,slides:I},{title:u,slides:v},{title:g,slides:x}];return n.createElement(n.Fragment,null,n.createElement(l.Z,{title:r,description:o,pathname:t.site.siteMetadata.routes.howItWorks}),n.createElement(y,{title:m,text:s,image:d}),n.createElement(w.Z,{data:N}),n.createElement(F,{data:S}),n.createElement(J,{title:C,text:k,sliders:L}),n.createElement(V.Z,{title:M.title,linkSlug:M.pageLink.slug,linkText:M.linkText,image:M.image}),n.createElement(i.Z,null))}}}]);
2//# sourceMappingURL=component---src-pages-how-it-works-js-0e5d9b6e086eedb3fe39.js.map