"use client"; import { useState, useEffect } from 'react'; import { ArrowRight, Wand2, Palette, Rocket } from 'lucide-react'; const steps = [ { icon: <Wand2 className="w-8 h-8" />, title: "Convert & Enhance Your Services", description: "Use our intuitive tools to turn your current offerings into interactive AI agents", color: "from-purple-500/30 to-blue-500/30" }, { icon: <Palette className="w-8 h-8" />, title: "Customize Your Experience", description: "Leverage our drag-and-drop builder and creative suite (forms, video editor, writer, newsletter) to tailor your AI solutions", color: "from-blue-500/30 to-purple-500/30" }, { icon: <Rocket className="w-8 h-8" />, title: "Launch & Monetize", description: "Build your community or list your AI services on our marketplace—boost your revenue by tapping into a growing market of SMBs seeking smart solutions", color: "from-purple-500/30 to-pink-500/30" } ]; export default function HowItWorks() { const [activeStep, setActiveStep] = useState(0); const [isHovering, setIsHovering] = useState(false); useEffect(() => { if (isHovering) return; const timer = setInterval(() => { setActiveStep((prev) => (prev + 1) % steps.length); }, 5000); return () => clearInterval(timer); }, [isHovering]); return ( <div className="w-full py-32"> <div className="container mx-auto px-4"> <div className="text-center mb-24"> <h2 className="text-4xl md:text-6xl text-white mb-8">How It Works</h2> <p className="text-xl text-gray-400">Transform your business with AI in three simple steps</p> </div> <div className="relative max-w-6xl mx-auto"> {/* Connecting line */} <div className="absolute top-24 left-0 w-full h-px"> <div className="relative w-full h-full"> <div className="absolute inset-0 bg-gradient-to-r from-transparent via-purple-500/20 to-transparent" /> <div className="absolute h-full bg-gradient-to-r from-purple-500 to-blue-500 transition-all duration-1000" style={{ width: `${(activeStep + 1) * 33.33}%`, opacity: 0.3 }} /> </div> </div> <div className="relative flex justify-between items-start gap-12"> {steps.map((step, index) => ( <div key={index} className="flex-1" onMouseEnter={() => { setIsHovering(true); setActiveStep(index); }} onMouseLeave={() => setIsHovering(false)} > <div className="relative"> {/* Icon container */} <div className={` relative z-10 w-20 h-20 mx-auto mb-8 rounded-2xl overflow-hidden transition-all duration-500 ease-out ${activeStep === index ? 'scale-110' : 'scale-100'} `} > <div className={` absolute inset-0 bg-gradient-to-br ${step.color} transition-opacity duration-500 ${activeStep === index ? 'opacity-100' : 'opacity-50'} `} /> <div className={` absolute inset-0 flex items-center justify-center transition-transform duration-500 ${activeStep === index ? 'scale-110 text-white' : 'scale-100 text-gray-500'} `}> {step.icon} </div> </div> {/* Content */} <div className={` p-8 rounded-2xl transition-all duration-500 ease-out ${activeStep === index ? 'bg-purple-900/20 translate-y-0 opacity-100' : 'bg-transparent translate-y-4 opacity-60'} `}> <h3 className="text-2xl text-white mb-4">{step.title}</h3> <p className="text-gray-400 leading-relaxed">{step.description}</p> </div> </div> {/* Step indicator */} <div className={` mt-6 flex justify-center items-center gap-2 transition-opacity duration-500 ${activeStep === index ? 'opacity-100' : 'opacity-50'} `}> <span className="text-sm text-purple-400">Step {index + 1}</span> {index < steps.length - 1 && ( <ArrowRight className="w-4 h-4 text-purple-400" /> )} </div> </div> ))} </div> </div> <div className="text-center mt-24"> <button className=" group relative overflow-hidden px-10 py-5 rounded-full text-white text-lg transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20 "> <div className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-80 group-hover:opacity-100 transition-opacity" /> <span className="relative">Explore Features</span> </button> </div> </div> </div> ); }