https://bepay.money/_next/static/chunks/9258.1dba9571b52f0ecb.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9258],{86678:(e,t,a)=>{a.d(t,{A:()=>r});var i=a(95155),n=a(12115),s=a(55028);a(21978);let l=(0,s.default)(()=>Promise.all([a.e(8354),a.e(9641),a.e(1834),a.e(5907),a.e(8178)]).then(a.bind(a,35907)),{loadableGenerated:{webpack:()=>[35907]},ssr:!1});function r(e){let{variant:t="default",size:a="default",children:s,className:r="",triggerSource:o="",buttonLocation:c=""}=e,[d,p]=(0,n.useState)(!1);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("div",{onClick:()=>p(!0),className:"".concat(r),children:s}),(0,i.jsx)(l,{isOpen:d,triggerSource:o,buttonLocation:c,onClose:()=>p(!1),onSubmit:()=>p(!1)})]})}},99258:(e,t,a)=>{a.r(t),a.d(t,{default:()=>x});var i=a(95155),n=a(12115),s=a(66766),l=a(58918),r=a(60760);a(86678);var o=a(78874),c=a(55343),d=a(3190);let p=[{number:"1",title:"Create your Wallet",description:(0,i.jsxs)(i.Fragment,{children:["Create your wallet within in"," ",(0,i.jsx)("span",{className:"text-black font-semibold",children:"one tap"}),". Your wallet is ready to receive and send! Complete your KYC to get your virtual crypto debit card and Swiss IBAN. (Takes 5 min or less)"]}),mockup:"/images/crypto/mocup1.png",lineImage:{src:"/images/crypto/line.png",width:5,height:3},additionalImage:{src:"/first_card_button.png",width:350,height:30,offsetX:17,offsetY:6},headingOffsetMobile:-6},{number:"2",title:"Fund your wallet",description:"Add crypto or fiat to your self-custody wallet. Your keys, your crypto!",mockup:"/images/crypto/mocup3.png",lineImage:{src:"/images/crypto/line.png",width:7,height:3},additionalImage:{src:"/receive.png",width:290,height:50,offsetX:15,offsetY:10},headingOffsetMobile:-1},{number:"3",title:"Start Earning & Spending",description:"Use your virtual crypto debit card, earn yield, and access all platform features. Start earning and spending immediately!",mockup:"/images/crypto/mocup2.png",hasCTA:!0,lineImage:{src:"/images/crypto/line.png",width:3,height:5},additionalImage:{src:"/third_card_bepay_card.png",width:260,height:100,offsetX:10,offsetY:0},headingOffsetMobile:-2}];function x(){let[e,t]=(0,n.useState)(0),[a,x]=(0,n.useState)(!1),[m,y]=(0,n.useState)(!1),u=(0,n.useRef)(null),h=(0,n.useRef)(0),[g,f]=(0,n.useState)(!1),{handleDownloadClick:v,isOSPopupOpen:b,setIsOSPopupOpen:j,isQRPopupOpen:w,setIsQRPopupOpen:N,selectedOS:k,setSelectedOS:I}=(0,c.d)();(0,n.useEffect)(()=>{let e=new IntersectionObserver(t=>{let[a]=t;a.isIntersecting&&!g&&(o.c.sendEvent("Crypto Scroll section viewed"),f(!0),e.unobserve(a.target))},{threshold:.1});return u.current&&e.observe(u.current),()=>e.disconnect()},[g]);let P=()=>{o.c.sendEvent("'Get Started' button clicked")};(0,n.useEffect)(()=>{let e=()=>{y(window.innerWidth<1024)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),(0,n.useEffect)(()=>{let a=()=>{if(!u.current)return;let a=u.current,i=a.getBoundingClientRect(),n=a.offsetHeight,s=window.innerHeight;x(i.top<.8*s&&i.bottom>.2*s);let l=-i.top,r=n-s;if(l<=0)return void t(0);if(l>=r)return void t(2);let o=l/r,c=0;o>.25&&o<=.65?c=1:o>.65&&(c=2),h.current=e,t(c)};return window.addEventListener("scroll",a,{passive:!0}),a(),()=>window.removeEventListener("scroll",a)},[e]);let C=(e,t)=>{let a=e-t;switch(a<-1?a+=3:a>1&&(a-=3),a){case 0:return{x:0,scale:1,opacity:1,zIndex:10,rotateY:0};case -1:return{x:-150,scale:.8,opacity:1,zIndex:5,rotateY:-10};case 1:return{x:150,scale:.8,opacity:1,zIndex:5,rotateY:10};default:return{x:0,scale:.8,opacity:0,zIndex:1,rotateY:0}}};if(m){let t=e>h.current;return(0,i.jsx)("div",{ref:u,className:"relative",style:{height:"300vh"},children:(0,i.jsx)("div",{className:"sticky top-0 h-screen flex items-start justify-center pt-8 bg-gray-50 overflow-hidden",children:(0,i.jsxs)("div",{className:"w-full max-w-sm mx-auto px-4",children:[(0,i.jsxs)(l.P.div,{className:"flex flex-col items-start text-left mb-8",initial:{opacity:0,y:50},animate:a?{opacity:1,y:0}:{opacity:0,y:50},transition:{duration:.8,ease:[.25,.1,.25,1],delay:.2},children:[(0,i.jsxs)(l.P.h2,{className:"text-3xl font-medium text-gray-400 mb-2",initial:{opacity:0,y:30},animate:a?{opacity:1,y:0}:{opacity:0,y:30},transition:{duration:.8,ease:[.25,.1,.25,1],delay:.3},children:["Get ",(0,i.jsx)("span",{className:"text-black font-medium",children:"started"})]}),(0,i.jsx)(l.P.p,{className:"text-base text-[#6A6A6A] mt-1",initial:{opacity:0,y:20},animate:a?{opacity:1,y:0}:{opacity:0,y:20},transition:{duration:.8,ease:[.25,.1,.25,1],delay:.4},children:"Start your journey with bepay money in 3 simple steps!"}),(0,i.jsx)(l.P.div,{className:"mt-6",initial:{opacity:0,y:20},animate:a?{opacity:1,y:0}:{opacity:0,y:20},transition:{duration:.8,ease:[.25,.1,.25,1],delay:.5},children:(0,i.jsxs)("button",{onClick:()=>{P(),v()},className:"bg-black cursor-pointer whitespace-nowrap text-white px-6 h-[56px] rounded-full flex items-center justify-center gap-2 text-xs font-medium hover:bg-gray-800 transition-colors",children:[(0,i.jsx)(s.default,{src:"/vector.svg",alt:"Get Started Icon",width:20,height:20,className:"w-5 h-5"}),(0,i.jsx)("span",{children:"Get Started"})]})})]}),(0,i.jsxs)(l.P.div,{className:"relative flex flex-col justify-center min-h-[400px]",initial:{opacity:0,y:100},animate:a?{opacity:1,y:0}:{opacity:0,y:100},transition:{duration:1,ease:[.25,.1,.25,1],delay:.5},children:[(0,i.jsx)("div",{className:"absolute inset-0 flex items-center justify-center pointer-events-none overflow-hidden rounded-2xl",children:(0,i.jsx)(r.N,{mode:"wait",children:p.map((t,a)=>a===e&&(0,i.jsx)(l.P.div,{className:"absolute font-bold leading-none select-none",initial:{opacity:0,scale:.8,y:50}

1,animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.8,y:50},transition:{duration:.4,ease:[.25,.1,.25,1]},style:{fontSize:"clamp(500px, 40vw, 400px)",background:"linear-gradient(180deg, #ECECEC 0%, rgba(236, 236, 236, 0.02) 112.87%)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"},children:t.number},"bg-".concat(a)))})}),(0,i.jsx)("div",{className:"relative z-10",children:(0,i.jsx)(r.N,{mode:"wait",children:p.map((a,n)=>n===e&&(0,i.jsxs)(l.P.div,{className:"text-center pt-8",initial:{opacity:0,y:0},animate:{opacity:1,y:0},exit:{opacity:0,y:0},transition:{duration:.4,ease:[.25,.1,.25,1],delay:.05},children:[(0,i.jsx)(l.P.h3,{className:"text-xl font-bold text-black mb-4",style:{transform:"translateY(".concat(a.headingOffsetMobile||0,"px)")},initial:{opacity:0,y:50},animate:{opacity:1,y:0},transition:{duration:.5,delay:.1},children:a.title}),(0,i.jsx)(l.P.p,{className:"text-sm font-medium text-[#6A6A6A] leading-relaxed mb-6",initial:{opacity:0,y:50},animate:{opacity:1,y:0},transition:{duration:.5,delay:.15},children:a.description}),a.lineImage&&(0,i.jsx)(l.P.div,{initial:{opacity:0,y:50},animate:{opacity:1,y:0},transition:{duration:.4,delay:.2},className:"mb-6 flex justify-center",children:(0,i.jsx)(s.default,{src:a.lineImage.src,alt:"Line separator",width:a.lineImage.width,height:a.lineImage.height,className:"object-contain"})}),a.additionalImage&&(0,i.jsx)(r.N,{children:n===e&&(0,i.jsx)(l.P.div,{initial:t?{opacity:0,x:300}:{opacity:0,x:-300},animate:{opacity:1,x:0},exit:t?{opacity:0,x:-300}:{opacity:0,x:300},transition:{duration:.4,ease:[.25,.1,.25,1],delay:.1},className:"relative flex justify-center",children:(0,i.jsx)("div",{className:"absolute",style:{transform:"translate(".concat(a.additionalImage.offsetX||0,"px, ").concat(a.additionalImage.offsetY||0,"px)")},children:(0,i.jsx)(s.default,{src:a.additionalImage.src,alt:"".concat(a.title," additional icon"),width:a.additionalImage.width,height:a.additionalImage.height,className:"object-contain"})})},"additional-image-".concat(n))})]},"content-".concat(n)))})})]})]})})})}return(0,i.jsxs)("div",{ref:u,className:"relative",style:{height:"300vh"},children:[(0,i.jsx)("div",{className:"sticky top-0 h-[140vh] lg:h-[120vh] flex items-start justify-start bg-gray-50 overflow-hidden",children:(0,i.jsxs)("div",{className:"w-full max-w-7xl mt-10 mx-auto px-4 sm:px-6 lg:px-8",children:[(0,i.jsxs)(l.P.div,{className:"text-left md:text-center mb-8",initial:{opacity:0,y:50},animate:a?{opacity:1,y:0}:{opacity:0,y:50},transition:{duration:.8,ease:[.25,.1,.25,1],delay:.2},children:[(0,i.jsxs)(l.P.h2,{className:"text-3xl sm:text-4xl lg:tracking-tighter lg:text-7xl font-[400] text-gray-400 mb-4",initial:{opacity:0,y:30},animate:a?{opacity:1,y:0}:{opacity:0,y:30},transition:{duration:.8,ease:[.25,.1,.25,1],delay:.3},children:["Get ",(0,i.jsx)("span",{className:"text-black font-normal",children:"started"})]}),(0,i.jsx)(l.P.p,{className:"text-sm sm:text-base text-[#000000] max-w-4xl mx-auto",initial:{opacity:0,y:20},animate:a?{opacity:1,y:0}:{opacity:0,y:20},transition:{duration:.8,ease:[.25,.1,.25,1],delay:.4},children:"Start your journey with bepay money in 3 simple steps!"})]}),(0,i.jsxs)("div",{className:"grid lg:grid-cols-2 gap-8 lg:gap-16 items-center",children:[(0,i.jsx)(l.P.div,{className:"relative -mt-60 md:-mt-10 h-[450px] sm:h-[550px] md:h-[650px] lg:h-[600px] w-full order-2 lg:order-1",initial:{opacity:0,x:-100},animate:a?{opacity:1,x:0}:{opacity:0,x:-100},transition:{duration:1,ease:[.25,.1,.25,1],delay:.6},children:(0,i.jsx)("div",{className:"relative w-full h-full flex items-center justify-center",children:p.map((t,n)=>{let r=C(n,e);return(0,i.jsx)(l.P.div,{className:"absolute",initial:a?r:{...r,opacity:0,scale:.5},animate:r,transition:{duration:a?.8:1.2,ease:[.25,.1,.25,1],type:"spring",stiffness:80,damping:20,delay:a?0:.8+.1*n},style:{zIndex:r.zIndex,perspective:"1000px"},children:(0,i.jsx)(l.P.div,{className:"relative w-[300px] sm:w-[340px] md:w-[380px] lg:w-[420px] h-[380px] sm:h-[420px] md:h-[460px] lg:h-[500px] flex items-center justify-center",style:{transformStyle:"preserve-3d"},children:(0,i.jsx)("div",{className:"relative w-full h-full",children:(0,i.jsx)(s.default,{src:t.mockup||"/placeholder.svg",alt:"".concat(t.title," mockup"),fill:!0,className:"object-contain drop-shadow-2xl",priority:0===n,loading:0===n?"eager":"lazy",sizes:"(max-width: 640px) 300px, (max-width: 768px) 340px, (max-width: 1024px) 380px, 420px"})})})},n)})})}),(0,i.jsxs)(l.P.div,{className:"relative order-1 lg:order-2 min-h-[400px] flex items-center justify-center",initial:{opacity:0,x:100},animate:a?{opacity:1,x:0}:{opacity:0,x:100},transition:{duration:1,ease:[.25,.1,.25,1],delay:.5},children:[(0,i.jsx)("div",{className:"absolute inset-0 flex items-center justify-center pointer-events-none",children:(0,i.jsx)(r.N,{mode:"wait",children:p.map((t,n)=>n===e&&(0,i.jsx)(l.P.div,{className:"absolute top-20 md:-top-34 font-bold leading-none select-none",initial:{opacity:0,scale:a?.8:.5,y:a?50:100}

1,animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.8,y:-50},transition:{duration:a?.6:1,ease:[.25,.1,.25,1],delay:+!a},style:{fontSize:"clamp(200px, 40vw, 800px)",background:"linear-gradient(180deg, #ECECEC 0%, rgba(236, 236, 236, 0.02) 112.87%)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"},children:t.number},"bg-".concat(n)))})}),(0,i.jsx)("div",{className:"relative z-10 max-w-lg",children:(0,i.jsx)(r.N,{mode:"wait",children:p.map((t,n)=>n===e&&(0,i.jsxs)(l.P.div,{initial:{opacity:0,y:a?30:50},animate:{opacity:1,y:0},exit:{opacity:0,y:-30},transition:{duration:a?.6:.8,ease:[.25,.1,.25,1],delay:a?.1:1.2},children:[(0,i.jsx)(l.P.h3,{className:"text-2xl sm:text-3xl lg:text-[48px] font-[500] text-[#6A6A6A] mb-4 lg:mb-6",initial:{opacity:0,x:a?-20:-40},animate:{opacity:1,x:0},transition:{duration:a?.7:.8,delay:a?.2:1.3},children:t.title}),(0,i.jsxs)("div",{className:"flex items-start gap-4 mb-6",children:[(0,i.jsx)("span",{className:"text-black text-4xl font-bold font-sans"}),(0,i.jsx)(l.P.p,{className:"text-base sm:text-lg font-medium lg:text-[20px] text-[#6A6A6A] leading-relaxed pt-1",initial:{opacity:0,x:a?-20:-40},animate:{opacity:1,x:0},transition:{duration:a?.7:.8,delay:a?.3:1.4},children:t.description})]}),t.hasCTA&&(0,i.jsx)(l.P.div,{initial:{opacity:0,y:a?20:40},animate:{opacity:1,y:0},transition:{duration:a?.6:.8,delay:a?.4:1.5},children:(0,i.jsxs)("button",{onClick:()=>{P(),v()},className:" group relative inline-flex items-center justify-center cursor-pointer text-white bg-black font-semibold  transition-all duration-300 hover:bg-black/90 hover:scale-105 hover:shadow-lg active:scale-95 rounded-[100px]  w-[170px] h-[56px]  px-6 py-4 gap-[10px] text-sm ",children:[(0,i.jsx)("span",{children:"Get started"}),(0,i.jsx)("svg",{className:"w-6 h-6 transition-transform duration-300 group-hover:translate-x-1",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,i.jsx)("path",{d:"M7 17L17 7M17 7H7M17 7V17",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]})})]},"content-".concat(n)))})})]})]})]})}),(0,i.jsx)(d.p,{isOSPopupOpen:b,setIsOSPopupOpen:j,isQRPopupOpen:w,setIsQRPopupOpen:N,selectedOS:k,setSelectedOS:I})]})}}}]);