updated responsiveness

Co-Authored-By: Nakshatra <87943295+codebox283@users.noreply.github.com>

components/Companies/partners.tsx

@@ -29,7 +29,7 @@ const customers = [
 
 export function Partners() {
     return (
-        <div className="h-screen max-w-7xl mx-auto flex flex-col items-center justify-center space-y-10 ">
+        <div className="h-screen max-w-7xl sm:w-full mx-auto flex flex-col items-center justify-center space-y-10 ">
 
             // Supported By
             <div className="flex flex-col items-center space-y-6 mb-20">

components/How/how.tsx

@@ -36,11 +36,11 @@ export default function HowItWorks() {
   }, [isHovering]);
 
   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">How It Works</h2>
-          <p className="text-xl text-gray-400">Transform your business with AI in three simple steps</p>
+    <div className="w-full py-32 md:py-40 lg:py-48">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-24 md:mb-32 lg:mb-40">
+          <h2 className="text-4xl md:text-6xl lg:text-7xl text-white mb-8">How It Works</h2>
+          <p className="text-xl md:text-2xl lg:text-3xl text-gray-400">Transform your business with AI in three simple steps</p>
         </div>
 
         <div className="relative max-w-6xl mx-auto">
@@ -58,7 +58,7 @@ export default function HowItWorks() {
             </div>
           </div>
 
-          <div className="relative flex justify-between items-start gap-12">
+          <div className="relative flex flex-col md:flex-row justify-between items-start gap-12 sm:gap-16 lg:gap-20">
             {steps.map((step, index) => (
               <div
                 key={index}
@@ -99,7 +99,7 @@ export default function HowItWorks() {
                     transition-all duration-500 ease-out
                     ${activeStep === index ? 'bg-purple-900/20 translate-y-0 opacity-100' : 'bg-transparent translate-y-4 opacity-60'}
                   `}>
-                    <h3 className="text-2xl text-white mb-4">{step.title}</h3>
+                    <h3 className="text-2xl md:text-3xl lg:text-4xl text-white mb-4">{step.title}</h3>
                     <p className="text-gray-400 leading-relaxed">{step.description}</p>
                   </div>
                 </div>
@@ -110,9 +110,9 @@ export default function HowItWorks() {
                   transition-opacity duration-500
                   ${activeStep === index ? 'opacity-100' : 'opacity-50'}
                 `}>
-                  <span className="text-sm text-purple-400">Step {index + 1}</span>
+                  <span className="text-sm md:text-base lg:text-lg text-purple-400">Step {index + 1}</span>
                   {index < steps.length - 1 && (
-                    <ArrowRight className="w-4 h-4 text-purple-400" />
+                    <ArrowRight className="w-4 h-4 md:w-6 md:h-6 lg:w-8 lg:h-8 text-purple-400" />
                   )}
                 </div>
               </div>
@@ -122,4 +122,4 @@ export default function HowItWorks() {
       </div>
     </div>
   );
-}
+}

components/Navbar/MobileMenu.tsx

@@ -1,34 +1,465 @@
-// MobileMenu.tsx
-import React from 'react';
-import { FaAngleDown } from "react-icons/fa";
+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 h-screen bg-[#080E12] text-white bg-opacity-90 transition-transform duration-300 ${show ? 'translate-x-0' : '-translate-x-full'} z-50`}>
-      <div className="flex justify-end p-4">
-        <button onClick={toggle} className="text-white">Close</button>
+    <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">
-        <li className="flex items-center cursor-pointer">
-          Product <FaAngleDown className='ml-2' />
-        </li>
-        <li className="flex items-center cursor-pointer">
-          Solutions <FaAngleDown className='ml-2' />
-        </li>
-        <li className="flex items-center cursor-pointer">
-          Pricing
-        </li>
-        <li className="flex items-center cursor-pointer">
-          Resources <FaAngleDown className='ml-2' />
-        </li>
+        {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'
+      },
+      {
+        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
+      },
+    ],
+  },
+];