311 lines
13 KiB
TypeScript
311 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import React from 'react';
|
||
import { motion } from 'framer-motion';
|
||
import { MessageCircle, CheckCircle, Lightbulb, Code, Users, ArrowRight, Settings, Brain, RefreshCw, UserCheck, ChevronRight } from 'lucide-react';
|
||
import Navbar from '@/components/Navbar/navbar';
|
||
import Footer from '@/components/footer';
|
||
|
||
const ConversationalAIAgents = () => {
|
||
|
||
const keyFeatures = [
|
||
{
|
||
title: "Human-Style Chat Interface",
|
||
desc: "Experience seamless, interactive conversations that mimic real human dialogue.",
|
||
icon: <MessageCircle className="w-6 h-6 text-white" />
|
||
},
|
||
{
|
||
title: "Semi-Autonomous Agents",
|
||
desc: "Automate everyday processes while deferring to human judgment for complex decisions.",
|
||
icon: <Settings className="w-6 h-6 text-white" />
|
||
},
|
||
{
|
||
title: "Adaptive Learning & Optimization",
|
||
desc: "The agent gathers insights from each engagement, fine-tuning workflows and boosting overall efficiency.",
|
||
icon: <RefreshCw className="w-6 h-6 text-white" />
|
||
},
|
||
{
|
||
title: "Effortless Integration",
|
||
desc: "Convert existing Tools or Series workflows to conversational agents with just a few clicks—no coding required.",
|
||
icon: <Code className="w-6 h-6 text-white" />
|
||
},
|
||
{
|
||
title: "Enhanced User Engagement",
|
||
desc: "Deliver a personalized, interactive experience that increases user satisfaction and drives better outcomes.",
|
||
icon: <Users className="w-6 h-6 text-white" />
|
||
}
|
||
];
|
||
|
||
const benefits = [
|
||
{
|
||
title: "Streamlined Operations",
|
||
desc: "Automate routine processes without sacrificing the quality of human judgment where it matters most.",
|
||
icon: <CheckCircle className="w-6 h-6 text-white" />
|
||
},
|
||
{
|
||
title: "Continuous Improvement",
|
||
desc: "With adaptive learning, your agents become smarter and more efficient, optimizing workflows over time.",
|
||
icon: <Brain className="w-6 h-6 text-white" />
|
||
},
|
||
{
|
||
title: "Improved Accessibility",
|
||
desc: "A conversational interface makes complex workflows accessible to everyone, reducing training time and boosting productivity.",
|
||
icon: <Lightbulb className="w-6 h-6 text-white" />
|
||
},
|
||
{
|
||
title: "Versatile Applications",
|
||
desc: "Ideal for customer support, sales, HR, project management, and more—scale your intelligent automation across your organization.",
|
||
icon: <UserCheck className="w-6 h-6 text-white" />
|
||
}
|
||
];
|
||
|
||
const useCases = [
|
||
{
|
||
title: "Customer Support",
|
||
desc: "Convert FAQs and troubleshooting guides into interactive chat agents that assist customers 24/7.",
|
||
icon: <MessageCircle className="w-6 h-6 text-white" />
|
||
},
|
||
{
|
||
title: "Sales & Marketing",
|
||
desc: "Engage prospects through conversational agents that guide them through product features and answer inquiries in real time.",
|
||
icon: <Lightbulb className="w-6 h-6 text-white" />
|
||
},
|
||
{
|
||
title: "HR & Administration",
|
||
desc: "Streamline internal processes by turning routine HR queries and administrative tasks into dynamic, chat-driven workflows.",
|
||
icon: <Users className="w-6 h-6 text-white" />
|
||
},
|
||
{
|
||
title: "Project Management",
|
||
desc: "Enhance team collaboration by using agents to manage tasks, gather feedback, and update project statuses interactively.",
|
||
icon: <Settings className="w-6 h-6 text-white" />
|
||
}
|
||
];
|
||
|
||
|
||
return (
|
||
<div className="w-full p-6 bg-[#080E12] min-h-screen space-y-36">
|
||
<Navbar />
|
||
|
||
{/* Hero Section */}
|
||
<motion.section
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="max-w-6xl mx-auto h-screen flex flex-col justify-between relative"
|
||
>
|
||
{/* Animated Gradient Background */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.9, rotate: 0 }}
|
||
animate={{ opacity: 0.15, scale: 1.9, rotate: 8 }}
|
||
transition={{ duration: 2, repeat: Infinity, repeatType: "mirror", ease: "easeInOut" }}
|
||
className="absolute top-[-100px] right-[-50px] w-96 h-80 bg-gradient-to-br from-[#F472B6] to-[#6366F1] rounded-full opacity-30 blur-[120px] skew-y-6"
|
||
/>
|
||
|
||
<div className="max-w-6xl h-fit mt-auto pb-80 relative z-10">
|
||
<motion.h1
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
className="text-7xl text-white mb-6"
|
||
>
|
||
AI Agents
|
||
</motion.h1>
|
||
|
||
<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2">
|
||
<div className="w-32 h-px bg-gradient-to-r from-transparent via-blue-500/30 to-transparent" />
|
||
</div>
|
||
|
||
<motion.div className="text-4xl text-[#ffc1e1] font-medium mb-6">
|
||
<span className="bg-gradient-to-r from-[#EC4899] to-[#A855F7] text-transparent bg-clip-text">Conversational AI Agents:</span> Transform Your Workflows into Smart, Human-Centric Assistants
|
||
</motion.div>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
className="text-gray-400 text-2xl mb-8"
|
||
>
|
||
Elevate your business operations by converting any workflow—whether it’s a tool or a Series—into an intelligent, conversational AI agent. Our platform empowers you to create semi-autonomous agents that communicate in a human-like manner while keeping human decision-making in the loop.
|
||
</motion.p>
|
||
</div>
|
||
</motion.section>
|
||
|
||
{/* How It Works Section */}
|
||
<motion.section
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="max-w-6xl mx-auto py-20"
|
||
>
|
||
<h2 className="text-5xl text-white mb-8">How It Works</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
{[
|
||
{
|
||
icon: <Code className="w-6 h-6 text-white" />,
|
||
title: "Convert with a Click",
|
||
desc: "Easily transform your existing workflows into a chat-based AI agent using our intuitive interface.",
|
||
color: "from-blue-500 to-cyan-500"
|
||
},
|
||
{
|
||
icon: <MessageCircle className="w-6 h-6 text-white" />,
|
||
title: "Human-Like Interaction",
|
||
desc: "The agent engages users through a conversational interface, guiding them through tasks and processes in a natural, friendly manner.",
|
||
color: "from-pink-500 to-red-500"
|
||
},
|
||
{
|
||
icon: <Settings className="w-6 h-6 text-white" />,
|
||
title: "Semi-Autonomous Operation",
|
||
desc: "Routine tasks are automated, while critical decision points trigger human intervention—ensuring that key decisions always benefit from human insight.",
|
||
color: "from-green-500 to-emerald-500"
|
||
},
|
||
{
|
||
icon: <RefreshCw className="w-6 h-6 text-white" />,
|
||
title: "Adaptive Learning",
|
||
desc: "The system learns from every interaction, refining its processes and becoming more efficient over time through continuous feedback.",
|
||
color: "from-purple-500 to-indigo-500"
|
||
}
|
||
].map((item, index) => (
|
||
<div
|
||
key={index}
|
||
className="relative group bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden"
|
||
>
|
||
{/* Icon & Title */}
|
||
<div className="flex items-center gap-4 mb-2">
|
||
<div className="p-3 bg-gray-900 rounded-lg">{item.icon}</div>
|
||
<h3 className="text-xl text-white font-medium">{item.title}</h3>
|
||
</div>
|
||
|
||
{/* Description */}
|
||
<p className="text-gray-400">{item.desc}</p>
|
||
|
||
{/* Soft Glow Effect */}
|
||
<div
|
||
className={`absolute inset-0 rounded-xl bg-gradient-to-br ${item.color} opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20`}
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.section>
|
||
|
||
{/* Key Features Section */}
|
||
<motion.section
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="max-w-6xl mx-auto py-20"
|
||
>
|
||
<h2 className="text-5xl text-white mb-8">Key Features</h2>
|
||
<div className="flex flex-col gap-4">
|
||
{keyFeatures.map((feature, index) => (
|
||
<div
|
||
key={index}
|
||
className="relative group bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden flex items-start gap-8"
|
||
>
|
||
<div className="p-4 bg-gray-900 rounded-lg flex items-center justify-center">
|
||
{feature.icon}
|
||
</div>
|
||
<div>
|
||
<h3 className="text-xl text-white font-medium mb-2">{feature.title}</h3>
|
||
<p className="text-gray-400">{feature.desc}</p>
|
||
</div>
|
||
{/* Soft Glow Effect */}
|
||
<div
|
||
className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20"
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.section>
|
||
|
||
{/* Benefits Section */}
|
||
<motion.section
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="max-w-6xl mx-auto py-20"
|
||
>
|
||
<h2 className="text-5xl text-white mb-8">Benefits</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
{benefits.map((benefit, index) => (
|
||
<div
|
||
key={index}
|
||
className="relative group bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden"
|
||
>
|
||
<div className="flex items-center gap-4 mb-2">
|
||
<div className="p-3 bg-gray-900 rounded-lg">{benefit.icon}</div>
|
||
<h3 className="text-xl text-white font-medium">{benefit.title}</h3>
|
||
</div>
|
||
<p className="text-gray-400">{benefit.desc}</p>
|
||
|
||
{/* Soft Glow Effect */}
|
||
<div
|
||
className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20"
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.section>
|
||
|
||
{/* Use Cases Section */}
|
||
<motion.section
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="max-w-6xl mx-auto py-20"
|
||
>
|
||
<h2 className="text-5xl text-white mb-8">Use Cases</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
{useCases.map((useCase, index) => (
|
||
<div
|
||
key={index}
|
||
className="relative group bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden"
|
||
>
|
||
<div className="flex items-center gap-4 mb-2">
|
||
<div className="p-3 bg-gray-900 rounded-lg">{useCase.icon}</div>
|
||
<h3 className="text-xl text-white font-medium">{useCase.title}</h3>
|
||
</div>
|
||
<p className="text-gray-400">{useCase.desc}</p>
|
||
|
||
{/* Soft Glow Effect with Different Colors */}
|
||
<div
|
||
className={`absolute inset-0 rounded-xl opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20 ${index % 4 === 0
|
||
? "bg-gradient-to-br from-purple-500 to-indigo-500"
|
||
: index % 4 === 1
|
||
? "bg-gradient-to-br from-pink-500 to-red-500"
|
||
: index % 4 === 2
|
||
? "bg-gradient-to-br from-green-500 to-teal-500"
|
||
: "bg-gradient-to-br from-yellow-500 to-orange-500"
|
||
}`}
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.section>
|
||
|
||
{/* Get Started Section */}
|
||
<motion.section
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="max-w-6xl mx-auto py-20 text-center"
|
||
>
|
||
<h2 className="text-4xl text-white mb-8">Get Started</h2>
|
||
<p className="text-gray-400 text-xl mb-8">Transform your workflows into intelligent, human-centric AI agents today. Experience the perfect blend of automation and human engagement that evolves with your business needs.</p>
|
||
<div className="flex justify-center gap-6">
|
||
<motion.button
|
||
whileHover={{ scale: 1.05 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
className="relative px-8 py-4 rounded-lg text-white font-medium inline-flex items-center gap-2
|
||
bg-gradient-to-r from-purple-500 via-purple-700 to-indigo-500 shadow-lg transition-all duration-500"
|
||
>
|
||
Convert Your Workflow <ChevronRight className="w-4 h-4" /></motion.button>
|
||
<motion.button
|
||
whileHover={{ scale: 1.05 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
className="relative px-8 py-4 rounded-lg text-white font-medium inline-flex items-center gap-2
|
||
bg-gradient-to-r from-purple-500 via-purple-700 to-indigo-500 shadow-lg transition-all duration-500"
|
||
>
|
||
Learn More <ChevronRight className="w-4 h-4" /></motion.button>
|
||
</div>
|
||
</motion.section>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ConversationalAIAgents;
|