everydayserieswebsite/app/ai-agents/page.tsx

"use client";

import React from 'react';
import { useState, useEffect } 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" />,
      image: "https://images.unsplash.com/photo-1525182008055-f88b95ff7980?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Y2FsbCUyMHN1cHBvcnR8ZW58MHx8MHx8fDA%3D"
    },
    {
      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" />,
      image: "https://images.unsplash.com/photo-1560250056-07ba64664864?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c2FsZXN8ZW58MHx8MHx8fDA%3D"
    },
    {
      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" />,
      image: "https://images.unsplash.com/photo-1629904853716-f0bc54eea481?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fG9mZmljZSUyMHdvcmt8ZW58MHx8MHx8fDA%3D"
    },
    {
      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" />,
      image: "https://plus.unsplash.com/premium_photo-1661277697952-0cacde72c755?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2plY3QlMjBtYW5hZ2VtZW50fGVufDB8fDB8fHww"
    }
  ];

  const agents = [
    {
      name: "Agent 1",
      email: "agent1@example.com",
      intro: "With years of experience in customer support and engagement, Agent 1 has played a crucial role in transforming how businesses interact with their customers. They have led support teams for multiple startups, ensuring that customers receive prompt and effective assistance. Specializing in AI-powered chatbots, ticketing systems, and automated workflows, Agent 1 helps optimize response times and customer satisfaction. Their deep understanding of customer behavior allows them to create personalized support experiences, improving retention rates and overall user engagement. Beyond support, they focus on data-driven insights to enhance service quality and drive operational efficiency. They have consulted for companies looking to scale their customer service operations while maintaining a high standard of support.",
      image: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVvcGxlfGVufDB8fDB8fHww",
      apps: [
        { icon: "https://cdn-icons-png.flaticon.com/128/2463/2463046.png", name: "ChatFlow AI", link: "https://chatflow.example.com" },
        { icon: "https://cdn-icons-png.flaticon.com/128/2706/2706950.png", name: "SupportPro", link: "https://supportpro.example.com" },
        { icon: "https://cdn-icons-png.flaticon.com/128/2839/2839174.png", name: "Feedbackly", link: "https://feedbackly.example.com" },
        { icon: "https://cdn-icons-png.flaticon.com/128/3129/3129290.png", name: "Crazily", link: "https://feedbackly.example.com" }
      ]
    },
    {
      name: "Agent 2",
      email: "agent2@example.com",
      intro: "Agent 2 is a seasoned expert in sales and marketing automation, helping businesses maximize revenue through data-driven strategies. Their expertise spans lead generation, conversion optimization, and CRM automation. They have successfully implemented email marketing sequences, predictive analytics, and customer segmentation techniques to improve sales performance. Understanding the importance of multi-channel marketing, they have experience with PPC campaigns, SEO, and influencer partnerships. Their knowledge of automation tools enables businesses to scale outreach efforts efficiently. They have worked with both B2B and B2C brands, developing high-converting sales funnels for sustainable business growth.",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGVvcGxlfGVufDB8fDB8fHww",
      apps: [
        { icon: "https://cdn-icons-png.flaticon.com/128/3271/3271314.png", name: "SalesBoost", link: "https://salesboost.example.com" },
        { icon: "https://cdn-icons-png.flaticon.com/128/12990/12990669.png", name: "EmailFlow", link: "https://emailflow.example.com" },
        { icon: "https://cdn-icons-png.flaticon.com/128/13088/13088153.png", name: "AdOptimizer", link: "https://adoptimizer.example.com" }
      ]
    },
    {
      name: "Agent 3",
      email: "agent3@example.com",
      intro: "With a keen eye for organization and efficiency, Agent 3 specializes in HR and administrative tasks, ensuring that businesses run smoothly behind the scenes. They have managed large-scale recruitment processes, streamlined payroll systems, and introduced employee wellness programs to enhance workplace productivity. Agent 3 excels in automating repetitive HR tasks such as onboarding, leave management, and performance tracking. Their expertise in compliance and labor laws helps businesses stay ahead of regulatory requirements while fostering a positive work culture. They have also played a key role in designing internal communication platforms that improve team collaboration and transparency within organizations.",
      image: "https://plus.unsplash.com/premium_photo-1671656349322-41de944d259b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDF8fHBlb3BsZXxlbnwwfHwwfHx8MA%3D%3D",
      apps: [
        { icon: "https://cdn-icons-png.flaticon.com/128/2920/2920316.png", name: "HRStream", link: "https://hrstream.example.com" },
        { icon: "https://cdn-icons-png.flaticon.com/128/3006/3006874.png", name: "RecruitEase", link: "https://recruitease.example.com" },
        { icon: "https://cdn-icons-png.flaticon.com/128/939/939354.png", name: "PerformTrack", link: "https://performtrack.example.com" }
      ]
    },
    {
      name: "Agent 4",
      email: "agent4@example.com",
      intro: "Agent 4 is a highly skilled project manager with a strong focus on optimizing team collaboration and workflow efficiency. They have successfully led multiple software development teams, ensuring that projects are completed on time and within budget. Specializing in Agile and Scrum methodologies, Agent 4 helps teams stay aligned with project goals through structured sprints and daily stand-ups. Their ability to integrate project management tools with automation enables companies to track progress, identify bottlenecks, and maintain high productivity levels. They have worked on cross-functional projects involving engineering, design, and marketing teams, ensuring smooth coordination and execution. Their leadership skills and problem-solving approach make them an invaluable asset in any organization.",
      image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGVvcGxlfGVufDB8fDB8fHww",
      apps: [
        { icon: "https://cdn-icons-png.flaticon.com/128/14571/14571652.png", name: "TaskFlow", link: "https://taskflow.example.com" },
        { icon: "https://cdn-icons-png.flaticon.com/128/1087/1087840.png", name: "AgileSync", link: "https://agilesync.example.com" },
        { icon: "https://cdn-icons-png.flaticon.com/128/2331/2331970.png", name: "KanbanPro", link: "https://kanbanpro.example.com" }
      ]
    }
  ];    
  const [currentSlide, setCurrentSlide] = useState(0);
  
    useEffect(() => {
      const timer = setInterval(() => {
        setCurrentSlide((prev) => (prev + 1) % agents.length);
      }, 10000);
  
      return () => clearInterval(timer);
    }, []);
  
    const nextSlide = () => {
      setCurrentSlide((prev) => (prev + 1) % agents.length);
    };
  
    const prevSlide = () => {
      setCurrentSlide((prev) => (prev - 1 + agents.length) % agents.length);
    };

  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: 1, 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>

          <motion.a
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            href="/agents"
            className="bg-white px-8 py-3 rounded-lg hover:bg-black hover:shadow-white/10 hover:shadow-md transition-all duration-300"
          >
            <button className="bg-gradient-to-r from-[#EC4899] to-[#A855F7] text-transparent bg-clip-text text-lg font-medium">Explore our agents</button>
          </motion.a>
        </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>

      {/* 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"
            >
              {/* Image */}
              <div className="mb-4 rounded-lg h-64 overflow-hidden"><img src={useCase.image} alt={useCase.title} className="w-full h-full object-cover rounded-lg" /></div>
              <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>

      {/* 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>

      {/* 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>

      {/* Agents Slideshow Section */}
      <motion.section
        id='agents'
        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">Meet Our Agents</h2>
        <div className="relative w-full overflow-hidden">
          <div className="flex transition-transform duration-700" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
            {agents.map((agent, index) => (
              <div key={index} className="w-full flex bg-[#121212] border border-gray-800 rounded-xl p-6 flex-shrink-0 snap-center">
                <div className='w-1/3 px-4'>
                  <img src={agent.image} alt={agent.name} className="h-[400px] w-full object-cover rounded-lg mb-4" />
                  <h3 className="text-xl text-white font-medium mb-2">{agent.name}</h3>
                  <p className="text-gray-400 mb-2">{agent.email}</p>
                </div>
                <div className='w-2/3 px-4'>
                  <p className="text-gray-400 mb-4">{agent.intro}</p>
                  <div className="text-gray-400">
                    <h4 className="text-lg text-white mb-2">Apps:</h4>
                    <div className="flex flex-wrap gap-4">
                      {agent.apps.slice(0, 3).map((app, i) => (
                        <a key={i} href={app.link} target="_blank" rel="noopener noreferrer" className="flex flex-col items-center gap-2 bg-gray-900 p-3 rounded-lg hover:bg-gray-800 transition">
                          <img src={app.icon} alt={app.name} className="h-6 w-6" />
                          <span className="text-white text-xs">{app.name}</span>
                        </a>
                      ))}
                    </div>

                    {agent.apps.length > 3 && (
                      <button className="text-blue-500 mt-2">Show more</button>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
          <button onClick={prevSlide} className="absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full">‹</button>
          <button onClick={nextSlide} className="absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full">›</button>
        </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;