1import{r as l,j as t}from"./react-vendor-BEafpyAm.js";import{u as c}from"./index-o6Y4MR8m.js";import{V as d,o as m,as as n,S as x,at as h,a6 as p}from"./icons-vendor-DBipXAa1.js";import"./crypto-vendor-DdVgyv-Y.js";import"./react-query-vendor-BhLAuXR4.js";import"./recharts-vendor-C3BwgIm8.js";import"./supabase-vendor-DUUDoC-1.js";import"./date-fns-core-p4ULazqZ.js";import"./date-fns-locales-Csbs7Iu2.js";const k=()=>{const{t:s}=c(),[a,o]=l.useState(null),i=[{icon:d,title:s("howItWorks.step1.title"),description:s("howItWorks.step1.desc"),step:"01",details:s("howItWorks.step1.details")},{icon:m,title:s("howItWorks.step2.title"),description:s("howItWorks.step2.desc"),step:"02",details:s("howItWorks.step2.details")},{icon:n,title:s("howItWorks.step3.title"),description:s("howItWorks.step3.desc"),step:"03",details:s("howItWorks.step3.details")},{icon:x,title:s("howItWorks.step4.title"),description:s("howItWorks.step4.desc"),step:"04",details:s("howItWorks.step4.details")}];return t.jsx("section",{className:"py-12 sm:py-16 lg:py-20 bg-white",children:t.jsxs("div",{className:"container mx-auto px-4 sm: px-6",children:[t.jsxs("div",{className:"text-center mb-12 sm: mb-16",children:[t.jsx("h2",{className:"text-3xl sm:text-4xl md:text-5xl font-bold mb-4 sm:mb-6 text-[#2c4a6b] px-4 sm:px-0",children:s("howItWorks.title")}),t.jsx("p",{className:"text-lg sm:text-xl text-gray-600 max-w-3xl mx-auto px-4 sm:px-0",children:s("howItWorks.subtitle")})]}),t.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 mb-12 sm:mb-16",children:i.map((r,e)=>t.jsxs("div",{className:"relative group cursor-pointer",onMouseEnter:()=>o(e),onMouseLeave:()=>o(null),children:[e<i.length-1&&t.jsx("div",{className:"hidden lg:flex absolute top-16 left-full w-full h-0.5 bg-gradient-to-r from-[#a8d5ba] to-[#7cc7d8] z-0 items-center justify-center",children:t.jsx(h,{className:"h-4 w-4 text-[#7cc7d8] bg-white rounded-full p-1"})}),t.jsxs("div",{className:`relative bg-white p-6 sm:p-8 rounded-2xl border transition-all duration-300 z-10 ${a===e?"border-[#7cc7d8] shadow-xl scale-105 -translate-y-2":"border-gray-100 hover:border-[#7cc7d8] hover:shadow-xl hover:-translate-y-2"}`,children:[t.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[t.jsxs("div",{className:"text-xs sm:text-sm font-bold text-[#7cc7d8] bg-[#7cc7d8]/10 px-3 py-1 rounded-full",children:["STEP ",r.step]}),a===e&&t.jsx(p,{className:"h-4 w-4 text-[#a8d5ba] animate-scale-in"})]}),t.jsx("div",{className:`w-12 h-12 sm:w-16 sm:h-16 bg-gradient-to-r from-[#a8d5ba] to-[#7cc7d8] rounded-xl flex items-center justify-center mb-4 sm:mb-6 transition-transform duration-300 ${a===e?"scale-110 rotate-3":"group-hover:scale-110"}`,children:t.jsx(r.icon,{className:"h-6 w-6 sm:h-8 sm:w-8 text-white"})}),t.jsx("h3",{className:"text-lg sm:text-xl font-semibold mb-3 sm:mb-4 text-[#2c4a6b]",children:r.title}),t.jsx("p",{className:"text-sm sm:text-base text-gray-600 leading-relaxed mb-4",children:r.description}),t.jsx("div",{className:`overflow-hidden transition-all duration-300 ${a===e?"max-h-20 opacity-100":"max-h-0 opacity-0"}`,children:t.jsx("div",{className:"pt-2 border-t border-gray-100",children:t.jsx("p",{className:"text-xs sm:text-sm text-gray-500 italic",children:r.details})})})]})]},e))}),t.jsxs("div",{className:"p-6 sm:p-8 bg-gradient-to-r from-[#a8d5ba]/10 to-[#7cc7d8]/10 rounded-2xl border border-[#7cc7d8]/20 hover:shadow-lg transition-all duration-300",children:[t.jsx("div",{className:"text-center mb-6",children:t.jsx("h3",{className:"text-xl sm:text-2xl font-semibold mb-4 text-[#2c4a6b]",children:s("howItWorks.principles")})}),t.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 max-w-4xl mx-auto",children:[t.jsxs("div",{className:"group flex items-center justify-center space-x-3 p-4 bg-white/50 rounded-xl hover:bg-white/80 transition-all duration-300 hover:scale-105 cursor-default",children:[t.jsx("div",{className:"w-4 h-4 bg-[#a8d5ba] rounded-full group-hover:scale-125 transition-transform duration-300"}),t.jsx("span",{className:"text-sm sm:text-base text-gray-700 font-medium",children:s("howItWorks.principle1")})]}),t.jsxs("div",{className:"group flex items-center justify-center space-x-3 p-4 bg-white/50 rounded-xl hover:bg-white/80 transition-all duration-300 hover:scale-105 cursor-default",children:[t.jsx("div",{className:"w-4 h-4 bg-[#7cc7d8] rounded-full group-hover:scale-125 transition-transform duration-300"}),t.jsx("span",{className:"text-sm sm:text-base text-gray-700 font-medium",children:s("howItWorks.principle2")})]})]})]})]})})};export{k as HowItWorks};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.