"use client"; import { useState } from 'react'; import { ShoppingCart, HeartPulse, Wallet, GraduationCap, Home, Briefcase, ArrowRight, Bot } from 'lucide-react'; const agents = [ { title: "ShopSmart Assistant", category: "Retail & E-commerce", description: "Engages customers, answers FAQs, provides personalized product recommendations, and streamlines the purchase process.", icon: <ShoppingCart className="w-6 h-6" />, gradient: "from-pink-500/20 to-purple-500/20" }, { title: "HealthMate Advisor", category: "Healthcare", description: "Offers immediate healthcare information, assists in appointment scheduling, and guides patients through available services.", icon: <HeartPulse className="w-6 h-6" />, gradient: "from-blue-500/20 to-cyan-500/20" }, { title: "FinGuide Bot", category: "Finance & Banking", description: "Provides personalized financial advice, handles customer queries, assists with account management, and schedules consultations.", icon: <Wallet className="w-6 h-6" />, gradient: "from-green-500/20 to-emerald-500/20" }, { title: "LearnHub Tutor", category: "Education", description: "Facilitates course enrollment, answers academic queries, recommends learning resources, and tracks student progress.", icon: <GraduationCap className="w-6 h-6" />, gradient: "from-orange-500/20 to-yellow-500/20" }, { title: "HomeFinder Agent", category: "Real Estate", description: "Showcases property listings, schedules viewings, offers virtual tours, and provides real-time support for potential buyers.", icon: <Home className="w-6 h-6" />, gradient: "from-purple-500/20 to-indigo-500/20" }, { title: "ProConnect Advisor", category: "Professional Services", description: "Streamlines client interactions, manages consultation scheduling, and delivers tailored content to boost engagement.", icon: <Briefcase className="w-6 h-6" />, gradient: "from-teal-500/20 to-blue-500/20" } ]; export default function SampleAgents() { const [activeAgent, setActiveAgent] = 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">See Our AI Agents in Action</h2> <p className="text-xl text-gray-400 max-w-3xl mx-auto"> Our platform makes it easy to create AI agents that engage customers, streamline operations, and drive revenue. Check out some sample agents built with our tools: </p> </div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto"> {agents.map((agent, index) => ( <div key={index} className="group relative" onMouseEnter={() => setActiveAgent(index)} onMouseLeave={() => setActiveAgent(null)} > {/* Card Background */} <div className={` absolute inset-0 rounded-2xl bg-gradient-to-br ${agent.gradient} opacity-0 group-hover:opacity-100 transition-all duration-500 `} /> {/* Card Content */} <div className="relative p-8 rounded-2xl border border-purple-500/10"> {/* Category Tag */} <div className="flex items-center gap-2 mb-6"> <Bot className="w-4 h-4 text-purple-400" /> <span className="text-sm text-purple-400">{agent.category}</span> </div> {/* Icon */} <div className={` w-12 h-12 rounded-xl flex items-center justify-center bg-gradient-to-br ${agent.gradient} mb-6 transition-transform duration-500 text-white ${activeAgent === index ? 'scale-110 rotate-3' : ''} `}> {agent.icon} </div> {/* Title & Description */} <h3 className="text-2xl text-white mb-4">{agent.title}</h3> <p className="text-gray-400 leading-relaxed mb-6">{agent.description}</p> {/* Try Agent Button */} <button className={` flex items-center gap-2 text-sm text-purple-400 hover:text-purple-300 transition-all duration-300 ${activeAgent === index ? 'translate-x-2' : ''} `}> Try this agent <ArrowRight className="w-4 h-4" /> </button> </div> {/* Decorative Elements */} <div className={` absolute -bottom-4 -right-4 w-32 h-32 bg-gradient-to-br ${agent.gradient} rounded-full blur-3xl transition-opacity duration-500 opacity-0 group-hover:opacity-20 `} /> </div> ))} </div> {/* CTA Button */} <div className="text-center mt-16"> <a href="/ai-agents"> <button className=" group relative overflow-hidden px-8 py-4 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 flex items-center gap-2"> Explore More Sample Agents <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" /> </span> </button></a> </div> </div> </div> ); }