everydayserieswebsite/components/Navbar/MobileMenu.tsx

import React, { useState } from 'react';
import { FaAngleDown, FaAngleUp } from "react-icons/fa";
import { CgWebsite } from 'react-icons/cg';
import { FaBook, FaBookmark, FaMicrophone, FaMoneyBillAlt, FaPen, FaServicestack, FaStore, FaUserCog, FaUserPlus, FaVideo } from 'react-icons/fa';
import { GiArtificialIntelligence } from 'react-icons/gi';
import { GoWorkflow } from 'react-icons/go';
import { GrContactInfo, GrTemplate } from 'react-icons/gr';
import { IoIosApps, IoIosDocument, IoIosMail, IoMdAnalytics, IoMdArrowRoundForward, IoMdClose } from 'react-icons/io';
import { IoFlash, IoText } from 'react-icons/io5';
import { LuWorkflow } from 'react-icons/lu';
import { MdAutoAwesome, MdSecurity, MdStore, MdTranslate } from 'react-icons/md';
import { RiMoneyEuroBoxFill, RiProductHuntFill } from 'react-icons/ri';
import { VscTools } from 'react-icons/vsc';

interface MobileMenuProps {
  show: boolean;
  toggle: () => void;
}

const menuItems = [
  { name: "Product", items: "productItems" },
  { name: "Solutions", items: "solutionItems" },
  { name: "Pricing", items: null },
  { name: "Resources", items: "resourceItems" },
];

const MobileMenu: React.FC<MobileMenuProps> = ({ show, toggle }) => {
  const [openMenu, setOpenMenu] = useState<string | null>(null);

  const toggleMenu = (menu: string) => {
    setOpenMenu(openMenu === menu ? null : menu);
  };

  return (
    <div
      className={`fixed top-0 left-0 w-full min-h-screen bg-[#080E12] text-white bg-opacity-90 transition-transform duration-300 ${show ? 'translate-x-0' : '-translate-x-full'} z-50`}
    >
      <div className="mt-20 ml-10">
        <button onClick={toggle} className="text-white"><IoMdClose className='h-4 w-4'/></button>
      </div>
      <ul className="flex flex-col items-center space-y-4 mt-20">
        {menuItems.map((item) => (
          <li key={item.name} className="flex flex-col items-center cursor-pointer w-full">
            <div onClick={() => item.items && toggleMenu(item.name)} className="flex items-center justify-between w-48">
              {item.name} {item.items && (openMenu === item.name ? <FaAngleUp className='ml-2' /> : <FaAngleDown className='ml-2' />)}
            </div>
            {openMenu === item.name && item.items && (
              <div className="w-full mt-2 py-4 px-20 rounded-lg">
                {item.items === "productItems" &&
                  productItems.map((category) => (
                    <div key={category.category} className='border-b'>
                      <h3 className="text-sm font-bold mt-4">{category.category}</h3>
                      <ul>
                        {category.list.map((subItem) => (
                          <li key={subItem.name} className="flex items-center gap-2 p-2">
                           <a href={subItem.link}>{subItem.name}</a>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                {item.items === "solutionItems" &&
                  solutionItems.map((category) => (
                    <div key={category.category}>
                      <h3 className="text-sm font-bold">{category.category}</h3>
                      <ul>
                        {category.list.map((subItem) => (
                          <li key={subItem.name} className="flex items-center gap-2 p-2">
                            <a href={subItem.link}>{subItem.name}</a>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                {item.items === "resourceItems" &&
                  resourceItems.map((category) => (
                    <div key={category.category}>
                      <h3 className="text-sm font-bold">{category.category}</h3>
                      <ul>
                        {category.list.map((subItem) => (
                          <li key={subItem.name} className="flex items-center gap-2 p-2">
                            <a href={subItem.link}>{subItem.name}</a>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default MobileMenu;





const productItems = [
  {
    category: 'FEATURES',
    list: [
      {
        name: 'Series',
        description: 'Drag - drop and create amazing workflows',
        icon: <GoWorkflow className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
        link: '/series',
      },
      {
        name: 'Template',
        description: 'Create awesome templates for easier integration',
        icon: <GrTemplate className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
        link: '/template',
      },
      {
        name: 'Tools',
        description: 'For the non-techies, just input and output',
        icon: <VscTools className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
        link: '/tools',
      },
      {
        name: 'Click Video',
        description: 'Create interactive videos for your clients',
        icon: <FaVideo className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
        link: '/click-video',
      },
      {
        name: 'Writer',
        description: 'Write with ease with built in AI text generator',
        icon: <FaPen className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
        link: '/writer',
      },
      {
        name: 'Website',
        description: '',
        icon: <CgWebsite className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
        link: '/website',
      },
    ],
  },
  {
    category: 'CAPABILITIES',
    list: [
      {
        name: 'App Integration',
        description: 'Integrate your workflows in your apps',
        icon: <IoIosApps className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
        link: '/integrations',
      },
      {
        name: 'Data Syncing',
        description: 'Keep your data up-to-date across platforms.',
        icon: <IoIosApps className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
        link: '/data-syncing',
      },
      // {
      //   name: 'Analytics Dashboard',
      //   description: 'Visualize your workflow performance.',
      //   icon: <IoIosApps className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
      //   link: '/analytics-dashboard',
      // },
      {
        name: 'Micro-Saas',
        description: 'Build Your MicroSAAS & Grow Your Community',
        icon: <IoIosApps className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
        link: '/micro-saas',
      },
    ],
  },
  {
    category: "WHAT'S NEW",
    list: [
      {
        name: 'Improved Workflow Builder',
        description: 'Build smarter workflows faster with new updates.',
        icon: <LuWorkflow className="h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500" />,
        link: '/workflow-builder',
      },
      {
        name: 'Enhanced AI Writer',
        description: 'Generate better, smarter content effortlessly.',
        icon: <FaPen className="h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500" />,
        link: '/ai-writer',
      },
      {
        name: 'Marketplace Expansion',
        description: 'Explore more tools and integrations today.',
        icon: <FaStore className="h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500" />,
        link: '/marketplace-expansion',
      },
      {
        name: 'Upgraded Video Interactivity',
        description: 'Create dynamic, engaging videos with ease.',
        icon: <FaVideo className="h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500" />,
        link: '/video-interactivity',
      },
    ],
  },
];


interface SolutionItem {
  category: string;
  list: {
    name: string;
    description: string;
    icon: React.ReactNode;
    link?: string;
  }[];
}
const solutionItems: SolutionItem[] = [
  {
    category: 'Overview',
    list: [
      {
        name: 'Marketing',
        description: 'Revolutionize campaigns with AI-driven automation',
        icon: <IoMdAnalytics className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/marketing'
      },
      {
        name: 'Product Manager',
        description: 'Streamline workflows and build smarter, faster products',
        icon: <RiProductHuntFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/product-manager'
      },
      {
        name: 'Sales',
        description: 'Close deals faster with seamless, automated tools',
        icon: <RiMoneyEuroBoxFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/sales'
      },
      {
        name: 'Finance',
        description: 'Optimize processes and track budgets with ease',
        icon: <FaMoneyBillAlt className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/finance'
      },
      {
        name: 'HR',
        description: 'Empower your team with smarter workflow solutions',
        icon: <FaUserCog className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/hr'
      },
    ],
  },
  {
    category: 'Enterprises',
    list: [
      {
        name: 'Services',
        description: 'Transform operations with AI-driven service solutions',
        icon: <FaServicestack className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/services'
      },
      // {
      //   name: 'Security',
      //   description: 'Protect your data with next-gen secure workflows',
      //   icon: <MdSecurity className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
      //   link: '/security'
      // },
      {
        name: 'Marketplace',
        description: 'Explore a wide range of AI-driven tools and solutions tailored for your business.',
        icon: <MdStore className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/marketplace-page'
      },
      {
        name: 'GenAI Readiness Program',
        description: 'Prepare your organization for the future with cutting-edge AI adoption strategies.',
        icon: <MdAutoAwesome className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/genai-readiness'
      }

    ],
  },
  {
    category: 'Users',
    list: [
      {
        name: 'For Learners',
        description: 'Learn smarter with intuitive tools and AI support',
        icon: null,
        link: '/learners'
      },
      {
        name: 'For Coders',
        description: 'Code faster and build better with powerful tools',
        icon: null,
        link: '/coders'
      },
      {
        name: 'For Enterprises',
        description: 'Scale operations with solutions built for enterprise growth',
        icon: null,
        link: '/enterprises'
      },
    ],
  },
];
const aiTools: { name: string; description: string; icon: React.ReactNode; link: string }[] = [
  {
    name: 'Story Book',
    description: 'Generate a story using the power of AI.',
    icon: <FaBook className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />,
    link: '/storybook',
  },
  {
    name: 'Audio Genie',
    description: 'Generate and modify audio content effortlessly.',
    icon: <FaMicrophone className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />,
    link: '/audiogenie',
  },
  {
    name: 'Custom Translator',
    description: 'Neural Text translation system tailored to your needs.',
    icon: <MdTranslate className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />,
    link: '/translator',
  },
  {
    name: 'Text Classification',
    description: 'Categorise text into user defined classes.',
    icon: <IoText className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />,
    link: '/text-classification',
  },
];

// Resources Dropdown Component
interface ResourceItem {
  category: string;
  list: {
    name: string;
    description: string;
    icon?: React.ReactNode; // Making icon optional as some items don't have it
    link?: string;
  }[];
}

const resourceItems: ResourceItem[] = [
  {
    category: 'Learn',
    list: [
      {
        name: 'Demo',
        description: 'Experience the power of automation-live now',
        icon: <IoMdAnalytics className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/demo' // Add the correct link
      },
      {
        name: 'Blogs',
        description: 'Innovative insights to empower your next move',
        icon: <RiProductHuntFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/blogs' // Add the correct link
      },
      {
        name: 'Webinars',
        description: 'Learn, connect, and grow with expert-led sessions',
        icon: <RiMoneyEuroBoxFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/webinars' // Add the correct link
      },
      {
        name: 'Guides',
        description: 'Step-by-step tools to unlock your potential',
        icon: <FaMoneyBillAlt className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/guides' // Add the correct link
      },
    ],
  },
  {
    category: 'Build',
    list: [
      {
        name: 'API Doc',
        description: 'Comprehensive API docs for seamless integrations',
        icon: <IoIosDocument className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/api-doc' // Add the correct link
      },
      {
        name: 'Videos',
        description: 'Engage with interactive, on-demand video solutions',
        icon: <FaVideo className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/videos' // Add the correct link
      },
    ],
  },
  {
    category: 'Services',
    list: [
      {
        name: 'Documentations',
        description: 'Explore detailed resources to optimize your workflows',
        icon: <IoIosDocument className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/documentations' // Add the correct link
      },
      {
        name: 'Enterprise Contact',
        description: 'Partner with us to scale your enterprise',
        icon: <GrContactInfo className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/enterprise-contact' // Add the correct link
      },
    ],
  },
  {
    category: 'Resources',
    list: [
      {
        name: 'Books',
        description: 'Discover knowledge to inspire and empower action',
        icon: <FaBook className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/books' // Add the correct link
      },
      {
        name: 'Agents',
        description: 'Your personalized support, every step of the way',
        icon: <GiArtificialIntelligence className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/agents' // Add the correct link
      },
      {
        name: 'Podcasts',
        description: 'Tune in for fresh perspectives and expert advice',
        icon: <FaMicrophone className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/podcasts' // Add the correct link
      },
      {
        name: 'Newsletters',
        description: 'Stay updated with the latest insights and tools',
        icon: <IoIosMail className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/newsletters' // Add the correct link
      },
      {
        name: 'Bookmarks',
        description: 'Save and revisit your go-to resources anytime',
        icon: <FaBookmark className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
        link: '/bookmarks' // Add the correct link
      },
    ],
  },
  {
    category: 'Connect',
    list: [
      {
        name: 'Developer Connect',
        description: 'Empower developers to create and integrate seamlessly',
        icon: undefined, // No Icon
        link: '/developer-connect' // Add the correct link
      },
      {
        name: 'Community',
        description: 'Join a network of creators and innovators',
        icon: undefined, // No Icon
        link: '/community' // Add the correct link
      },
      {
        name: 'Meetups',
        description: 'Collaborate, learn, and grow at local events',
        icon: undefined, // No Icon
        link: '/meetups' // Add the correct link
      },
    ],
  },
];