https://bitnob.com/_astro/products-carousel.Bm5U808k.js

1import{j as e}from"./jsx-runtime.u17CrQMm.js";import{a as b}from"./utils.BnHu5Enf.js";import{r as o}from"./index.B3d2A58Q.js";import{Button as v,ButtonText as j,ButtonIcon as y}from"./index.es.AnVtmMTl.js";import{e as N,c as Z,U as G,O as _,j as X,q as M}from"./icons.es.F2e20jVc.js";import{G as q}from"./global-payments-animation-renderer.CNswL7TL.js";import{l as T,R as C,W as S}from"./routes.DpnhwamN.js";import{g as K,L as J}from"./countries.DV9tBx5s.js";import{c as w,u as W}from"./utils.4RMDh_NY.js";import{U as Q,B as Y}from"./usdt-logo.Cx0ripQl.js";import{U as ee}from"./usdc-logo.DX2k4_fB.js";import{P as te}from"./multi-currency-wallet-carousel-img.B-AVEGY8.js";const le=({locale:n,translations:i})=>{const a=w(i),[r,t]=o.useState(40);o.useEffect(()=>{const d=window.matchMedia("(max-width: 1023px)");t(d.matches?30:40);const f=p=>t(p.matches?30:40);return d.addEventListener("change",f),()=>d.removeEventListener("change",f)},[]);const m=K(a),u=W(n),c=T(S,C,u.language,n);return e.jsxs("div",{className:"max-lg:pt-3xl lg:p-3xl flex h-full flex-col items-center max-lg:min-h-[500px] max-lg:w-[97%] max-lg:justify-between max-lg:pb-4 lg:w-full lg:justify-start lg:gap-y-[90px] lg:pb-[45px] 2xl:gap-y-20!",children:[e.jsxs("div",{className:"mx-auto flex w-full flex-col items-center gap-y-[24px]",children:[e.jsx("h3",{className:"max-w-[513px] text-center font-semibold text-white max-lg:max-w-[269px] max-lg:text-2xl max-lg:leading-7 lg:text-[2rem] lg:leading-[38px]",children:a("landing.products.globalPayments.heading")}),e.jsx("a",{href:c.products.globalPayments,children:e.jsxs(v,{variant:"tertiary",className:"cursor-pointer gap-1!",children:[e.jsx(j,{className:"text-lg font-semibold text-white underline",children:a("common.explorePayments")}),e.jsx(y,{icon:N,className:"h-3 w-3 fill-white text-white"})]})})]}),e.jsxs("div",{className:"lg:gap-y-6xl mx-auto flex w-full flex-col items-center max-lg:gap-y-[27px]",children:[e.jsx(q,{}),e.jsx("div",{className:"w-full max-w-[738px]",children:e.jsx(J,{logos:m,speed:60,direction:"left",logoHeight:r,gap:16,pauseOnHover:!0,grayscale:!1,scaleOnHover:!0,ariaLabel:a("landing.globalPayments.supportedCountries")})})]})]})},se=({name:n,icon:i,amount:a,amountUSD:r,scale:t=1,className:m})=>{const u=[{icon:Z,label:"Add funds"},{icon:G,label:"Send funds"},{icon:_,label:"Swap coins"}];return e.jsxs("div",{className:b("relative flex flex-col justify-between overflow-hidden bg-white/10 backdrop-blur-[97.45px] max-lg:h-[141.5px] max-lg:space-y-2 max-lg:rounded-[17px] max-lg:p-2.5 lg:h-[283px] lg:gap-5 lg:rounded-[32px] lg:p-6",m),style:{width:`calc(var(--card-width) * ${t})`},children:[e.jsx("div",{className:"pointer-events-none absolute inset-0 h-full border-2 border-white/20 transition-colors duration-300 group-hover:border-white/30 max-lg:rounded-[17px] lg:rounded-[32px]"}),e.jsxs("div",{className:"flex w-full items-center justify-between gap-1.5",children:[e.jsxs("div",{className:"relative flex items-center justify-center overflow-hidden rounded-full bg-[#F5FFFC33]/20 max-lg:size-5 lg:size-10",children:[e.jsx("div",{className:"pointer-events-none absolute inset-0 rounded-full border border-white/20 transition-colors duration-300 group-hover:border-white/30"}),e.jsx(i,{className:"text-white max-lg:size-3 lg:size-6"})]}),e.jsx("h2",{className:"text-text-on-solid-bg-default lg:text-bxl font-medium max-lg:text-[8px]",children:n})]}),e.jsxs("div",{className:"text-center text-white lg:space-y-[17px]",children:[e.jsx("h4",{className:"lg:text-h4 font-semibold max-lg:text-lg",children:a}),e.jsx("p",{className:"lg:text-bl font-medium max-lg:text-[7px]",children:r})]}),e.jsx("div",{className:"relative h-fit overflow-hidden text-white max-lg:space-y-[9px] max-lg:rounded-[7px] max-lg:p-[9px] lg:space-y-4 lg:rounded-[8px] lg:px-[11px] lg:pt-4 lg:pb-[11px]",children:e.jsx("div",{className:"grid w-full max-w-md grid-cols-3 max-lg:gap-1 lg:gap-4",children:u.map(c=>{const d=c.icon;return e.jsxs("button",{className:"relative flex items-center justify-center bg-white/20 backdrop-blur-sm transition-all duration-300 hover:bg-white/30 max-lg:h-[24px] max-lg:rounded-[4px] lg:h-12 lg:rounded-[8px]","aria-label":c.label,children:[e.jsx("div",{className:"pointer-events-none absolute inset-0 h-full border border-white/20 transition-colors duration-300 group-hover:border-white/30 max-lg:rounded-[4px] lg:rounded-[8px]"}),e.jsx(d,{className:"text-white max-lg:size-3 lg:size-6"})]},c.label)})})})]})},ae=({className:n})=>{const i=[{id:1,name:"NGN Wallet",icon:X,amount:"₦2,450,000",amountUSD:"~ $201,667.23"},{id:2,name:"USDT Wallet",icon:Q,amount:"5,432.18 USDT",amountUSD:"~ $5,432.18"},{id:3,name:"USDC Wallet",icon:ee,amount:"12,890.50 USDC",amountUSD:"~ $12,890.50"},{id:4,name:"BTC Wallet",icon:Y,amount:"1.805 BTC",amountUSD:"~ $1,542.50"}];return e.jsx("div",{className:b("relative max-lg:h-full max-lg:max-h-[204.5px] max-lg:w-[228px] max-lg:[--card-width:228px] max-lg:[--stack-offset:21px] lg:max-h-[500px] lg:w-[456px] lg:[--card-width:456px] lg:[--stack-offset:42px]",n),children:i.map((a,r)=>

1{const t=.85+r*.05;return e.jsx("div",{className:"absolute left-1/2 -translate-x-1/2",style:{top:`calc(${r} * var(--stack-offset))`,zIndex:r+1},children:e.jsx(se,{name:a.name,icon:a.icon,amount:a.amount,amountUSD:a.amountUSD,scale:t,className:r<3?"max-h-[100px]!":""})},a.id)})})},re=({locale:n,translations:i})=>{const a=w(i),r=W(n),t=T(S,C,r.language,n);return e.jsxs("div",{className:"lg:pl-3xl max-lg:py-3xl flex w-full items-center justify-between max-lg:h-[500px] max-lg:flex-col max-lg:px-6 lg:h-[600px] lg:flex-row lg:py-[45px] lg:pr-20",children:[e.jsxs("div",{className:"flex w-full max-w-[318px] flex-col max-lg:items-center max-lg:gap-y-6 lg:items-start lg:gap-y-[24px]",children:[e.jsx("h3",{className:"font-semibold text-white max-lg:text-center max-lg:text-2xl max-lg:leading-7 lg:text-left lg:text-[2rem] lg:leading-[38px]",children:a("landing.products.multiCurrencyWallet.heading")}),e.jsx("a",{href:t.products.multiCurrencyWallet,children:e.jsxs(v,{variant:"tertiary",className:"cursor-pointer gap-1!",children:[e.jsx(j,{className:"text-lg font-semibold text-white underline",children:a("common.exploreWallets")}),e.jsx(y,{icon:N,className:"h-3 w-3 fill-white text-white"})]})})]}),e.jsx("div",{className:"flex flex-col items-center max-lg:h-full max-lg:w-full max-lg:justify-end lg:my-auto lg:h-full lg:w-fit lg:translate-y-[50px]",children:e.jsx(ae,{})})]})},ne=({locale:n,translations:i})=>{const a=w(i);return e.jsxs("div",{className:"flex items-center justify-between rounded-2xl border border-white/30 bg-white/20 p-4 backdrop-blur-md max-lg:max-w-full lg:w-[281px]",children:[e.jsx("span",{className:"text-sm font-medium text-white",children:a("widget.spendingLimit")}),e.jsx("div",{className:"relative flex h-6 w-11 items-center rounded-full border border-white/30 bg-[#E1E3E7]",children:e.jsx("div",{className:"absolute left-0.5 h-5 w-5 rounded-full bg-white shadow-sm"})})]})},ie=({locale:n,translations:i})=>{const a=w(i);return e.jsx("div",{className:"rounded-2xl border border-white/30 bg-white/20 p-4 backdrop-blur-md max-lg:max-w-full lg:w-[352px]",children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"flex h-10 w-10 items-center justify-center rounded-full bg-[#F5FFFC33] backdrop-blur-sm",children:e.jsx(M,{className:"h-[16px] w-5 text-white"})}),e.jsxs("div",{className:"flex-1",children:[e.jsx("div",{className:"font-medium text-white/80 max-lg:text-[0.625rem] lg:text-sm",children:a("widget.cardTopUp")}),e.jsx("div",{className:"text-sm font-medium text-white",children:"October 14"})]}),e.jsx("div",{className:"font-medium text-white max-lg:text-base lg:text-lg",children:"+$31.85"})]})})},oe=({locale:n,translations:i})=>{const a=w(i),r=W(n),t=T(S,C,r.language,n);return e.jsxs("div",{className:"max-lg:py-3xl lg:pl-3xl relative flex h-full w-full py-[45px] max-lg:min-h-[500px] max-lg:flex-col max-lg:items-center max-lg:justify-between max-lg:px-6 lg:h-[600px]! lg:items-end lg:justify-between lg:pr-20",children:[e.jsxs("div",{className:"flex w-full max-w-[364px] flex-col gap-y-[24px] max-lg:z-10 max-lg:items-center lg:items-start",children:[e.jsx("h3",{className:"font-semibold text-white max-lg:text-center max-lg:text-2xl max-lg:leading-7 lg:text-left lg:text-[2rem] lg:leading-[38px]",children:a("landing.products.virtualCards.heading")}),e.jsx("a",{href:t.products.virtualCards,children:e.jsxs(v,{variant:"tertiary",className:"cursor-pointer gap-1!",children:[e.jsx(j,{className:"text-lg font-semibold text-white underline",children:a("common.exploreCards")}),e.jsx(y,{icon:N,className:"h-3 w-3 fill-white text-white"})]})})]}),e.jsx("div",{className:"max-lg:relative max-lg:flex max-lg:h-auto max-lg:w-full max-lg:items-center max-lg:justify-center lg:absolute lg:top-1/2 lg:left-[55%] lg:h-[437px] lg:w-[437px] lg:-translate-x-1/2 lg:-translate-y-1/2",children:e.jsxs("div",{className:"relative flex items-start max-lg:w-full max-lg:justify-center",children:[e.jsx("div",{className:"absolute z-10 max-[361px]:bottom-2.5! max-lg:-bottom-[15px] max-lg:left-1/2 max-lg:h-[65px] max-lg:w-full max-lg:-translate-x-1/2 lg:-top-[27px] lg:-left-[70px]",style:{transform:"translateZ(0)",WebkitTransform:"translateZ(0)",backfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden"},children:e.jsx(ne,{locale:n,translations:i})}),e.jsx("div",{"aria-hidden":"true",className:"max-lg:h-[280px] max-lg:w-[280px] lg:h-[437px] lg:w-[437px]"}),e.jsx("div",{style:{transform:"translateZ(0)",WebkitTransform:"translateZ(0)",backfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden"},className:"absolute max-[361px]:bottom-20! max-lg:bottom-[55px] max-lg:left-1/2 max-lg:h-20 max-lg:w-full max-lg:-translate-x-1/2 lg:-right-20 lg:-bottom-[40px]",children:e.jsx(ie,{locale:n,translations:i})})]})})]})},ce={src:"/_astro/global-payouts-carousel-img.PGR_iZAx.png"},xe={src:"/_astro/cards-products-carousel-img.BZT-WxvW.jpg"},Ne=({locale:n,translations:i})=>{const a=w(i),r=[{id:1,Content:e.jsx(le,{locale:n,translations:i}),image:ce.src},{id:2,Content:e.jsx(re,{locale:n,translations:i}),image:te.src},{id:3,Content:e.jsx(oe,{locale:n,translations:i}),image:xe.src}],[t,m]=o.useState(0),[u,c]=o.useState(0),[d,f]=o.useState(!1),[p,k]=o.useState(!0),[E,U]=o.useState(0),[R,L]=o.useState(0),h=o.useRef(null),I=o.useRef(null),P=o.useRef([]);o.useEffect(()=>{const s=new IntersectionObserver(([l])=>{f(l.isIntersecting)},{threshold:.3});return h.current&&s.observe(h.current),()=>{h.current&&s.unobserve(h.current)}},[]),o.useEffect(()=>{if(!d)return;const s=setInterval(()=>{c(l=>l>=100?(m(x=>x+1),0):l+1)},100);return()=>clearInterval(s)},[d]),o.useEffect(()=>{if(t===r.length){const s=setTimeout(()=>{k(!1),m(0)},500);return()=>clearTimeout(s)}else if(t===0&&!p){const s=setTimeout(()=>{k(!0)},20);return()=>clearTimeout(s)}},[t,p]),o.useEffect(()=>{u===0&&t!==0&&c(1)},[t]),o.useEffect(()=>{const s=t%r.length,l=P.current[s],x=I.current;if(l&&x){const g=x.offsetWidth,$=l.offsetLeft,F=l.offsetWidth,H=$-g/2+F/2;x.scrollTo({left:H,behavior:"smooth"})}},[t]);const z=[a("productsCarousel.globalPayments"),a("productsCarousel.multiCurrencyWallet"),a("productsCarousel.virtualCards")],B=s=>{m(s),c(0)},D=s=>{m(s),c(0)},V=s=>{U(s.targetTouches[0].clientX),f(!1)},A=s=>{L(s.targetTouches[0].clientX)},O=()=>{if(!E||!R)return;const s=E-R,l=s>50,x=s<-50;l?(m(g=>g+1),c(0)):x&&t>0&&(m(g=>g-1),c(0)),U(0),L(0),setTimeout(()=>{if(h.current){const g=h.current.getBoundingClientRect();g.top<window.innerHeight&&g.bottom>0&&f(!0)}},3e3)};return e.jsxs("div",{ref:h,className:"md:gap-y-3xl mx-auto flex w-full max-w-[1440px] flex-col items-start overflow-hidden max-lg:gap-y-6 md:items-center",children:[e.jsx("div",{ref:I,className:"flex w-full overflow-x-auto max-lg:justify-start max-lg:px-4 max-lg:pb-2 md:justify-center",children:e.jsx("div",{className:"bg-neutral-1-100 flex w-fit justify-center gap-3 rounded-full border border-[hsla(220,11%,89%,1)] p-2 md:flex-wrap",children:z.map((s,l)=>e.jsx("button",{ref:x=>{P.current[l]=x},onClick:()=>D(l),className:b("h-7 cursor-pointer rounded-full px-2 py-1 text-sm font-medium whitespace-nowrap! transition-all duration-300",l===t%r.length?"bg-btn-primary text-white":"bg-neutral-1-100 text-neutral-1-800 hover:bg-border border-none"),children:s},l))})}),e.jsx("div",{className:"relative w-full overflow-hidden max-lg:pl-4",children:e.jsx("div",{className:b("flex",p&&"transition-transform duration-500 ease-in-out"),style:{transform:t===0?"translateX(0px)":window.innerWidth<1280?`translateX(calc(-${t} * (100vw - 56px + 16px)))`:`translateX(calc(-${t} * (100% - 120px) - ${t}

1 * 24px + 60px))`},onTouchStart:V,onTouchMove:A,onTouchEnd:O,children:[...r,r[0]].map((s,l)=>{const x=l===t||t===r.length&&l===0;return e.jsx("div",{className:b("relative shrink-0 rounded-3xl max-lg:h-[500px] lg:h-[600px]",t===0&&l===0?"max-lg:mr-4 max-lg:w-[calc(100vw-56px)] lg:mr-6 lg:w-[calc(100%-60px)]":"max-lg:mr-4 max-lg:w-[calc(100vw-56px)] lg:mr-6 lg:w-[calc(100%-120px)]",{"max-lg:opacity-50":!x&&l!==0,"lg:opacity-50":!x,"transition-opacity duration-500 ease-in-out":p,"lg:pl-12":l===0}),children:e.jsxs("div",{className:"relative h-full w-full overflow-hidden rounded-3xl",children:[e.jsx("img",{src:s.image,alt:`Slide ${s.id}`,className:"absolute inset-0 h-full w-full object-cover",style:{transform:"translateZ(0)",WebkitTransform:"translateZ(0)",backfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden"}}),e.jsx("div",{className:"absolute inset-0 bg-linear-to-b from-black/60 to-black/20"}),e.jsx("div",{className:"relative z-10",children:s.Content})]})},`${s.id}-${l}`)})})}),e.jsx("div",{className:"flex w-full items-center justify-center gap-1 py-2",children:r.map((s,l)=>e.jsx("div",{className:b("bg-neutral-1-300 hover:bg-neutral-1-500 relative h-1 cursor-pointer overflow-hidden rounded-full transition-all duration-300",l===t%r.length?"w-6xl":"w-6"),onClick:()=>B(l),children:e.jsx("div",{className:`h-full rounded-full transition-all ${l===t%r.length?(u>=80,"bg-btn-primary"):l<t%r.length?"w-full":""}`,style:{width:l===t%r.length?`${u}%`:l<t%r.length?"100%":"0%",transition:l===t%r.length?"width 0.1s linear":"width 0.3s ease"}})},l))})]})};export{Ne as ProductsCarousel};