"use client"; import { useState } from 'react'; import { MousePointer, Command, Coins, HeartHandshake } from 'lucide-react'; const benefits = [ { icon: <MousePointer className="w-6 h-6" />, title: "User-Friendly", description: "Intuitive, drag-and-drop design means you can focus on what matters—your expertise.", gradient: "from-purple-500/10 via-purple-500/5 to-transparent" }, { icon: <Command className="w-6 h-6" />, title: "All-in-One Solution", description: "No need for multiple tools; manage everything from one centralized platform.", gradient: "from-blue-500/10 via-blue-500/5 to-transparent" }, { icon: <Coins className="w-6 h-6" />, title: "Scalable Revenue Streams", description: "Monetize your services through community building and our AI marketplace.", gradient: "from-indigo-500/10 via-indigo-500/5 to-transparent" }, { icon: <HeartHandshake className="w-6 h-6" />, title: "Dedicated Support", description: "Our expert team is here to help you succeed every step of the way.", gradient: "from-violet-500/10 via-violet-500/5 to-transparent" } ]; export default function WhyChooseUs() { const [hoveredIndex, setHoveredIndex] = useState<number | null>(null); 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">Why Choose Us</h2> <p className="text-xl text-gray-400">Everything you need to succeed with AI</p> </div> <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto"> {benefits.map((benefit, index) => ( <div key={index} className="relative group" onMouseEnter={() => setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)} > {/* Animated background */} <div className={` absolute inset-0 opacity-0 group-hover:opacity-100 bg-gradient-to-r ${benefit.gradient} transition-all duration-500 rounded-3xl `} /> {/* Content container */} <div className="relative p-8"> <div className="flex items-start gap-6"> {/* Icon container */} <div className={` w-12 h-12 rounded-xl flex items-center justify-center bg-gradient-to-br from-purple-500/20 to-blue-500/20 transition-all duration-500 text-white ${hoveredIndex === index ? 'scale-110 rotate-3' : 'scale-100 rotate-0'} `}> {benefit.icon} </div> {/* Text content */} <div className="flex-1"> <h3 className={` text-2xl text-white mb-3 transition-transform duration-500 ${hoveredIndex === index ? 'translate-x-2' : 'translate-x-0'} `}> {benefit.title} </h3> <p className={` text-gray-400 leading-relaxed transition-all duration-500 ${hoveredIndex === index ? 'opacity-100' : 'opacity-80'} `}> {benefit.description} </p> </div> </div> {/* Decorative elements */} <div className={` absolute bottom-0 right-0 w-24 h-24 bg-gradient-to-br from-purple-500/5 to-blue-500/5 rounded-full blur-2xl transition-opacity duration-500 ${hoveredIndex === index ? 'opacity-100' : 'opacity-0'} `} /> </div> </div> ))} </div> {/* Bottom decoration */} <div className="relative mt-16 flex justify-center"> <div className="w-32 h-1 bg-gradient-to-r from-transparent via-purple-500/30 to-transparent" /> </div> </div> </div> ); }