https://whitelabel-loyalty.com/_next/static/chunks/251.71175927cee612f0.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[251],{30251:function(e,r,t){t.r(r),t.d(r,{default:function(){return u}});var a=t(85893),s=t(94323),n=t(51183),l=t(94184),d=t.n(l),i=t(25675),o=t.n(i),c=t(67294),b=t(53814),x=function(e){var r=e.text;return(0,a.jsx)("div",{className:"mb-6 grow rounded-lg border-2 border-brand px-1 py-3 text-center text-sm font-semibold text-brand md:text-base",children:r})},h=function(e){var r=e.text,t=e.stage,s=void 0===t?0:t;return(0,a.jsxs)("div",{className:"shrink-1 flex grow basis-0 flex-col items-center text-center before:absolute before:z-10 before:h-0 before:w-0 before:translate-y-[-3.7rem] before:border-[10px] before:border-transparent before:border-t-brand before:border-l-brand before:content-['_'] after:absolute after:z-10 after:h-0 after:w-0 after:translate-y-[-3.8rem] after:border-8 after:border-transparent after:border-t-white after:border-l-white after:content-['_']",children:[(0,a.jsx)("div",{style:{background:"url('/progress-arc.svg') -".concat(64*s,"px 0 no-repeat, url('/portrait-80x80.jpg') center / cover")},className:"box-content h-16 w-16 overflow-hidden rounded-full border-8 border-brand"}),(0,a.jsx)("p",{className:"mt-4 text-base font-semibold text-white md:text-lg",children:r})]})},u=function(e){var r=e.data.steps,t=(0,c.useState)(0),l=t[0],i=t[1],u=(0,c.useRef)(null);(0,c.useEffect)((function(){var e=u.current;e&&e.scrollTo({left:l,behavior:"smooth"})}),[l]);var f=function(e){var r=u.current;r&&i("left"===e?0:r.scrollWidth)};return(0,a.jsxs)(b.Z,{fullWidth:!0,className:"relative py-12 md:px-6 xl:px-0",children:[(0,a.jsx)("button",{onClick:function(){return f("left")},className:d()("absolute left-0 top-1/2 z-20 ml-2 translate-y-1/2 bg-white p-2 shadow-md md:hidden",{"opacity-90":l>0,"opacity-50":0==l}),children:(0,a.jsx)(s.Z,{className:"h-5 w-5 text-brand","aria-hidden":"true"})}),(0,a.jsx)("button",{onClick:function(){return f("right")},className:d()("absolute right-0 top-1/2 z-20 mr-2 translate-y-1/2 bg-white p-2 shadow-md md:hidden",{"opacity-90":l<0,"opacity-50":l>0}),children:(0,a.jsx)(n.Z,{className:"h-5 w-5 text-brand","aria-hidden":"true"})}),(0,a.jsxs)("div",{ref:u,className:" mx-auto flex grow overflow-x-auto md:max-w-[1312px]",children:[(0,a.jsxs)("div",{className:"mx-6 min-w-[700px] grow md:mx-0",children:[(0,a.jsx)("div",{className:"flex gap-x-2",children:r.map((function(e){var r=e.bubble;return(0,a.jsx)(x,{text:r})}))}),(0,a.jsxs)("div",{className:"rounded-xl bg-brand px-4 py-8",children:[(0,a.jsx)("div",{className:"after relative ml-8 translate-y-10 border-[1px] border-[#47728D]",children:(0,a.jsx)("div",{className:"absolute bottom-0 right-0 top-0 my-auto h-0 w-0 translate-x-2 border-[6px] border-transparent border-l-white"})}),(0,a.jsx)("div",{className:"relative z-10 flex grow gap-x-5 lg:gap-x-24",children:r.map((function(e,r){var t=e.title;return(0,a.jsx)(h,{text:t,stage:r})}))})]})]}),(0,a.jsx)("div",{className:"hidden flex-col justify-center xl:flex",children:(0,a.jsx)(o(),{width:"250px",height:"200px",src:"/customer.svg",objectFit:"cover",objectPosition:"center"})})]})]})}},53814:function(e,r,t){t.d(r,{Z:function(){return l}});var a=t(85893),s=t(94184),n=t.n(s),l=function(e){var r=e.fullWidth,t=e.children,s=e.variant,l=e.hasPattern,d=e.className,i=e.id;return r?(0,a.jsxs)("div",{id:i,className:n()(d,"relative w-full py-6 lg:py-8",{"border-brand bg-brand text-white":"dark"===s,"border-secondary bg-secondary text-white":"medium"===s,"border-mid-blue bg-mid-blue text-very-dark-blue":"light"===s,"border-gray-300 bg-white text-black":"white"===s,"border-gray-100 bg-gray-100 text-black":"grey"===s,"border-mid-blue bg-mid-blue text-black":"blue"===s,default:!["dark","medium","light","white","grey"].includes(s)}),children:[(0,a.jsx)("div",{className:"container relative z-10 mx-auto max-w-[1312px] py-4",children:t}),l&&(0,a.jsx)("div",{className:"absolute bottom-0 left-0 z-0 hidden md:block",children:(0,a.jsxs)("svg",{width:"404",height:"300",fill:"none",viewBox:"0 0 404 300",children:[(0,a.jsx)("defs",{children:(0,a.jsx)("pattern",{id:"b1e6e422-73f8-40a6-b5d9-c8586e37e0e7",x:"0",y:"0",width:"20",height:"20",patternUnits:"userSpaceOnUse",children:(0,a.jsx)("rect",{x:"0",y:"0",width:"4",height:"4",className:"text-gray-200",fill:"currentColor"})})}),(0,a.jsx)("rect",{width:"404",height:"784",fill:"url(#b1e6e422-73f8-40a6-b5d9-c8586e37e0e7)"})]})})]}):(0,a.jsx)("section",{id:i,className:(d||"")+" container mx-auto max-w-[1312px] py-4",children:t})}}}]);