Structured Workflow Engine MCP Server

export default function FeaturesSection() { const features = [ { icon: ( <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg> ), title: "Semantic Search", description: "Find workflows by meaning, not keywords. Powered by advanced OpenAI embeddings for intelligent matching.", gradient: "from-blue-500 to-cyan-500" }, { icon: ( <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> </svg> ), title: "6 Workflows", description: "Curated collection of proven AI agent workflows covering every development scenario and use case.", gradient: "from-purple-500 to-pink-500" }, { icon: ( <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /> </svg> ), title: "MCP Compatible", description: "Seamlessly integrates with Claude Desktop, Cursor, and other MCP-enabled tools for effortless workflow automation.", gradient: "from-green-500 to-emerald-500" } ]; return ( <section className="py-24 bg-white relative overflow-hidden"> {/* Background decoration */} <div className="absolute inset-0"> <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30"></div> <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30"></div> </div> <div className="relative max-w-7xl mx-auto px-6"> {/* Section Header */} <div className="text-center mb-20"> <h2 className="text-4xl lg:text-5xl font-bold mb-6"> <span className="bg-gradient-to-r from-slate-900 to-slate-700 bg-clip-text text-transparent"> Powerful Features </span> </h2> <p className="text-xl text-slate-600 max-w-3xl mx-auto"> Everything you need to discover, implement, and optimize AI agent workflows </p> </div> {/* Features Grid */} <div className="grid md:grid-cols-3 gap-8"> {features.map((feature, index) => ( <div key={index} className="group relative bg-white rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 border border-slate-100 hover:border-slate-200 hover:-translate-y-2" > {/* Card background gradient on hover */} <div className={`absolute inset-0 bg-gradient-to-br ${feature.gradient} opacity-0 group-hover:opacity-5 rounded-3xl transition-opacity duration-500`}></div> {/* Icon */} <div className="relative mb-6"> <div className={`w-16 h-16 bg-gradient-to-br ${feature.gradient} rounded-2xl flex items-center justify-center text-white shadow-lg group-hover:scale-110 transition-transform duration-300`}> {feature.icon} </div> {/* Icon glow effect */} <div className={`absolute inset-0 w-16 h-16 bg-gradient-to-br ${feature.gradient} rounded-2xl blur-xl opacity-20 group-hover:opacity-40 transition-opacity duration-300`}></div> </div> {/* Content */} <h3 className="text-2xl font-bold text-slate-900 mb-4 group-hover:text-slate-800 transition-colors duration-300"> {feature.title} </h3> <p className="text-slate-600 leading-relaxed group-hover:text-slate-700 transition-colors duration-300"> {feature.description} </p> {/* Hover arrow */} <div className="mt-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <div className="flex items-center text-slate-400 group-hover:text-slate-600"> <span className="text-sm font-medium mr-2">Learn more</span> <svg className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /> </svg> </div> </div> </div> ))} </div> {/* Info section */} <div className="text-center mt-16"> <div className="bg-gradient-to-r from-slate-50 to-blue-50 rounded-2xl p-8 max-w-2xl mx-auto"> <h3 className="text-xl font-semibold text-slate-800 mb-4"> Ready to explore AI workflows? </h3> <p className="text-slate-600"> Install the MCP server in Claude Desktop or Cursor and start using intelligent workflow recommendations right away. </p> </div> </div> </div> </section> ); }