https://spoki.com/_next/static/chunks/35669.84659589da0c58cd.js?dpl=dpl_DayizpE6iqwTHaVJuS1NLSsS5pJ1

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1847,35669],{1847:(e,t,s)=>{s.r(t),s.d(t,{AnimatePresence:()=>n.N,animate:()=>x.i,default:()=>p,motion:()=>r.m,useAnimation:()=>o.s,useInView:()=>d.W,useMotionValue:()=>c.d,useScroll:()=>h.L,useSpring:()=>u.z,useTransform:()=>m.G});var a=s(95155),i=s(73136),l=s(85786),r=s(62874),o=s(18344),n=s(68329),d=s(74570),c=s(53350),u=s(87952),m=s(68),h=s(23251),x=s(70779);function p(e){let{children:t}=e;return(0,a.jsx)(i.F,{features:l.l,strict:!0,children:t})}},35669:(e,t,s)=>{s.r(t),s.d(t,{default:()=>m});var a=s(95155),i=s(12115),l=s(15239),r=s(59909),o=s(1847);let n={id:"featured",title:"How to create a chatbot in Whatsapp\n[with no coding skills]",description:"Today I'm showing you a very powerful Italian app with which to transform Whatsapp into a powerful sales tool and more.",thumbnail:"https://img.youtube.com/vi/ETZefUcazOA/maxresdefault.jpg",duration:"",videoUrl:"https://youtu.be/ETZefUcazOA?si=7Q9fAV4e7g9atNTK"},d=[{id:"v1",title:"WhatsApp AI Agents: Complete Setup Guide",thumbnail:"https://img.youtube.com/vi/JDxAU-B2Als/maxresdefault.jpg",duration:"8:23",videoUrl:"https://youtu.be/JDxAU-B2Als?si=LdXiVgKMskk1fNPn"},{id:"v2",title:"How to Build Your First Automation Flow",thumbnail:"https://img.youtube.com/vi/p900Cr6dAKA/maxresdefault.jpg",duration:"15:41",videoUrl:"https://www.youtube.com/watch?v=p900Cr6dAKA&t=240s"},{id:"v3",title:"Boost Sales with WhatsApp Marketing",thumbnail:"https://img.youtube.com/vi/LuwVJ99X2mA/maxresdefault.jpg",duration:"10:05",videoUrl:"https://www.youtube.com/watch?v=LuwVJ99X2mA"}];function c(e){let{size:t=56,animated:s=!1}=e;return(0,a.jsxs)("div",{className:"relative flex items-center justify-center",children:[s&&(0,a.jsx)("span",{className:"absolute rounded-full bg-red-500/20 animate-ping",style:{width:1.5*t,height:1.5*t}}),(0,a.jsx)("div",{className:"rounded-full bg-red-600 flex items-center justify-center shadow-[0_4px_24px_rgba(220,38,38,0.4)]",style:{width:t,height:t},children:(0,a.jsx)("svg",{className:"text-white",style:{width:.36*t,height:.36*t,marginLeft:.06*t},viewBox:"0 0 16 16",fill:"currentColor",children:(0,a.jsx)("path",{d:"M4 2l10 6-10 6V2z"})})})]})}function u(e){let{video:t,isCenter:s,isHovered:i}=e;return(0,a.jsx)("div",{className:`relative w-full rounded-[16px] md:rounded-[20px] overflow-hidden ${s?"shadow-[0_20px_60px_-16px_rgba(0,0,0,0.35)]":"shadow-xl"}`,children:(0,a.jsxs)("div",{className:"relative w-full aspect-video",children:[(0,a.jsx)(l.default,{src:t.thumbnail,alt:t.title,fill:!0,className:`object-cover transition-transform duration-700 ${i&&s?"scale-[1.06]":"scale-100"}`,sizes:s?"(max-width: 1024px) 85vw, 58vw":"35vw"}),(0,a.jsx)("div",{className:"absolute inset-0 bg-gradient-to-t from-black/80 via-black/15 to-black/5"}),(0,a.jsx)("div",{className:"absolute inset-0 flex items-center justify-center",children:(0,a.jsx)("div",{className:`transition-transform duration-300 ${i?"scale-110":"scale-100"}`,children:(0,a.jsx)(c,{size:s?60:44,animated:s&&i})})}),t.duration&&(0,a.jsx)("span",{className:"absolute top-3 right-3 bg-black/60 backdrop-blur-sm text-white text-[11px] font-semibold px-2 py-0.5 rounded-md",children:t.duration}),(0,a.jsxs)("div",{className:"absolute bottom-0 left-0 right-0 p-4 md:p-6",children:[(0,a.jsx)("h3",{className:`text-white font-bold leading-tight whitespace-pre-line ${s?"text-base sm:text-lg md:text-2xl":"text-sm md:text-base"}`,children:t.title}),s&&t.description&&(0,a.jsx)("p",{className:"text-white/70 text-sm md:text-[15px] mt-2 line-clamp-2 hidden sm:block",children:t.description})]})]})})}function m(e){let{translations:t}=e,[s,l]=(0,i.useState)(0),[c,m]=(0,i.useState)(null),[h,x]=(0,i.useState)(!1),p=(0,i.useRef)(0),b=[{...n,...t?.featured?.title&&{title:t.featured.title},...t?.featured?.description&&{description:t.featured.description},...t?.featured?.thumbnail&&{thumbnail:t.featured.thumbnail},...t?.featured?.videoUrl&&{videoUrl:t.featured.videoUrl}},...t?.videos?.length?t.videos.map((e,t)=>({id:`v${t}`,title:e.title||d[t]?.title||"",thumbnail:e.thumbnail||d[t]?.thumbnail||"",duration:e.duration||d[t]?.duration||"",videoUrl:e.videoUrl||d[t]?.videoUrl||""})):d],f=b.length,v=(0,i.useCallback)(()=>l(e=>(e+1)%f),[f]),g=(0,i.useCallback)(()=>l(e=>(e-1+f)%f),[f]);return(0,i.useEffect)(()=>

1{if(h)return;let e=setInterval(v,5500);return()=>clearInterval(e)},[h,v]),(0,a.jsxs)("section",{className:"py-20 md:py-28 bg-white overflow-hidden",onMouseEnter:()=>x(!0),onMouseLeave:()=>x(!1),children:[(0,a.jsx)("div",{className:"mx-auto max-w-7xl px-6 lg:px-8",children:(0,a.jsxs)("div",{className:"flex flex-col items-center text-center mb-12 md:mb-16",children:[(0,a.jsx)("p",{className:"text-[11px] font-semibold tracking-[2px] uppercase text-[#16D46C] mb-3",children:t?.label||"VIDEO RESOURCES"}),(0,a.jsx)("h2",{className:"text-3xl sm:text-4xl md:text-[44px] md:leading-[1.2] font-heading font-bold text-[#111827] tracking-[-0.02em] mb-4 max-w-3xl",children:t?.title||"Resources to Help You Succeed"}),(0,a.jsx)("p",{className:"text-[17px] text-[#6b7280] leading-relaxed max-w-2xl mb-8",children:t?.subtitle||"Watch tutorials, strategies, and real use cases to get the most out of Spoki."}),(0,a.jsxs)(r.default,{href:t?.ctaUrl||"https://www.youtube.com/@spoki-app",target:"_blank",rel:"noopener noreferrer",className:"inline-flex items-center gap-2 px-8 py-[14px] rounded-xl bg-white border border-gray-200 text-[#111827] font-semibold text-base hover:bg-gray-50 transition-colors shadow-sm",children:[(0,a.jsx)("svg",{className:"w-5 h-5 text-red-500",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:(0,a.jsx)("path",{d:"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"})}),t?.cta||"Subscribe on YouTube"]})]})}),(0,a.jsxs)("div",{className:"relative mx-auto max-w-7xl px-4",style:{perspective:"1400px"},onTouchStart:e=>{p.current=e.touches[0].clientX},onTouchEnd:e=>{let t=p.current-e.changedTouches[0].clientX;Math.abs(t)>50&&(t>0?v():g())},children:[(0,a.jsx)("div",{className:"relative h-[200px] sm:h-[260px] md:h-[340px] lg:h-[400px] xl:h-[440px]",children:b.map((e,t)=>{let i=t-s;i>f/2&&(i-=f),i<-f/2&&(i+=f);let l=0===i,n=1>=Math.abs(i);return(0,a.jsx)("div",{className:"absolute inset-0 flex items-center justify-center",style:{pointerEvents:n?"auto":"none"},children:(0,a.jsx)(o.motion.div,{className:"w-[82%] sm:w-[72%] md:w-[62%] lg:w-[58%] flex-shrink-0",initial:!1,animate:{x:l?"0%":i>0?"82%":"-82%",scale:l?1:.84,opacity:n?l?1:.45:0,rotateY:l?0:-4*i},transition:{type:"spring",stiffness:220,damping:28},style:{transformStyle:"preserve-3d",zIndex:l?20:10,cursor:l?"default":"pointer"},onClick:()=>{1===i?v():-1===i&&g()},onMouseEnter:()=>m(t),onMouseLeave:()=>m(null),children:l?(0,a.jsx)(r.default,{href:e.videoUrl,target:"_blank",rel:"noopener noreferrer",className:"group block",children:(0,a.jsx)(u,{video:e,isCenter:!0,isHovered:c===t})}):(0,a.jsx)(u,{video:e,isCenter:!1,isHovered:!1})})},e.id)})}),(0,a.jsx)("button",{onClick:g,className:"absolute left-2 sm:left-4 md:left-8 top-1/2 -translate-y-1/2 z-30 w-10 h-10 md:w-12 md:h-12 rounded-full bg-white/90 backdrop-blur-sm shadow-lg flex items-center justify-center hover:bg-white hover:scale-110 active:scale-95 transition-all","aria-label":"Previous video",children:(0,a.jsx)("svg",{className:"w-4 h-4 md:w-5 md:h-5 text-gray-800",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2.5,children:(0,a.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 19l-7-7 7-7"})})}),(0,a.jsx)("button",{onClick:v,className:"absolute right-2 sm:right-4 md:right-8 top-1/2 -translate-y-1/2 z-30 w-10 h-10 md:w-12 md:h-12 rounded-full bg-white/90 backdrop-blur-sm shadow-lg flex items-center justify-center hover:bg-white hover:scale-110 active:scale-95 transition-all","aria-label":"Next video",children:(0,a.jsx)("svg",{className:"w-4 h-4 md:w-5 md:h-5 text-gray-800",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2.5,children:(0,a.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 5l7 7-7 7"})})})]}),(0,a.jsx)("div",{className:"flex justify-center gap-2.5 mt-8",children:b.map((e,t)=>(0,a.jsx)("button",{onClick:()=>l(t),className:`h-2.5 rounded-full transition-all duration-300 ${t===s?"bg-[#25D366] w-8":"bg-gray-300 w-2.5 hover:bg-gray-400"}`,"aria-label":`Go to video ${t+1}`},b[t].id))})]})}}}]);