import React from 'react';
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 { GrTemplate } from 'react-icons/gr';
import { IoIosApps, IoIosDocument, IoIosMail, IoMdAnalytics, IoMdArrowRoundForward } from 'react-icons/io';
import { IoFlash, IoText } from 'react-icons/io5';
import { LuWorkflow } from 'react-icons/lu';
import { MdSecurity, MdTranslate } from 'react-icons/md';
import { RiMoneyEuroBoxFill, RiProductHuntFill } from 'react-icons/ri';
import { VscTools } from 'react-icons/vsc';
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',
},
],
},
{
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',
},
],
},
];
export const ProductDropdown: React.FC = () => {
return (
<div className="w-full text-white py-10 px-28">
<div className="flex">
{/* Main Content */}
<div className="w-2/3 space-y-8">
<div>
<h1 className="text-3xl">Everyday Series Workflows</h1>
<p className="text-gray-300 text-sm">No code automation and much more.</p>
</div>
<div className="flex space-x-4">
{/* Render Features and Capabilities */}
{productItems.slice(0, 2).map((itemGroup, index) => (
<div key={index} className="w-1/2 space-y-4">
<h3 className="font-medium text-sm text-slate-300">{itemGroup.category}</h3>
<ul className="space-y-4">
{itemGroup.list.map((item, idx) => (
<li key={idx} className="flex items-center space-x-4">
{item.icon}
<div
className="group hover:cursor-pointer"
onClick={() => window.location.href = item.link} // Navigate on click
>
<h3 className="font-medium transition-colors duration-200 group-hover:text-violet-500">{item.name}</h3>
<p className="font-thin text-xs transition-all duration-200 group-hover:underline">
{item.description}
</p>
</div>
</li>
))}
</ul>
</div>
))}
</div>
</div>
{/* What's New Section */}
<div className='w-1/3 space-y-10 border-gray-300 border-l pl-16 py-5'>
<h1 className='text-3xl'>What's New!</h1>
<ul className='space-y-4'>
{productItems.find(group => group.category === "WHAT'S NEW")?.list.map((item, index) => (
<li key={index} className='flex items-center space-x-4'>
{item.icon}
<div>
<h3 className='font-medium'>{item.name}</h3>
<p className='font-thin text-xs'>{item.description}</p>
</div>
</li>
))}
</ul>
</div>
</div>
{/* Footer Links */}
<div className='relative bottom-0 flex border-gray-300 border-t mt-10 pt-5 px-10 text-sm font-light space-x-8'>
<p className='hover:underline cursor-pointer'>Explore templates</p>
<p className='hover:underline cursor-pointer'>Explore tools</p>
<p className='hover:underline cursor-pointer'>Join Everyday Free Access</p>
</div>
</div>
);
};
// Solutions Dropdown Component
export const SolutionsDropdown: React.FC = () => {
return (
<div className="w-full text-white py-10 px-28">
<div className='flex'>
<div className='w-3/4 space-y-8 space-x-4'>
<div>
<h1 className='text-3xl'>Explore AI driven solutions.</h1>
<p className='text-gray-300 text-sm'>Create AI solutions for your clients and enterprises.</p>
</div>
<div className='flex space-x-4'>
<div className='w-1/2 space-y-2'>
<h3 className='font-medium text-sm text-slate-300'>Overview</h3>
<ul className='space-y-4'>
<li className='flex items-center space-x-4'>
<IoMdAnalytics className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Marketing</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Revolutionize campaigns with AI-driven automation</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<RiProductHuntFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Product Manager</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Streamline workflows and build smarter, faster products</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<RiMoneyEuroBoxFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Sales</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Close deals faster with seamless, automated tools</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<FaMoneyBillAlt className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Finance</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Optimize processes and track budgets with ease</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<FaUserCog className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>HR</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Empower your team with smarter workflow solutions</p>
</div>
</li>
</ul>
</div>
<div className='w-1/2 space-y-2'>
<h3 className='font-medium text-sm text-slate-300'>Enterprises</h3>
<ul className='space-y-4'>
<li className='flex items-center space-x-4'>
<FaServicestack className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Services</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Transform operations with AI-driven service solutions</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<MdSecurity className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Security</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Protect your data with next-gen secure workflows</p>
</div>
</li>
</ul>
</div>
{/* */}
<div className='w-1/2 space-y-2'>
<h3 className='font-medium text-sm text-slate-300'>Users</h3>
<ul className='space-y-4'>
<li className='flex items-center space-x-4'>
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>For Learners</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Learn smarter with intuitive tools and AI support</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>For Coders</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Code faster and build better with powerful tools</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>For Enterprises</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Scale operations with solutions built for enterprise growth</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div className='w-1/4 space-y-10 border-gray-300 border-l pl-10 py-5'>
<h1 className='text-3xl'>Latest AI tools!</h1>
<div>
<ul className='space-y-4'>
<li className='flex items-center space-x-4'>
<FaBook className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />
<div className='group hover:cursor-pointer'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Story Book</h3>
<p className='font-thin text-xs'>Generate a story using the power of AI.</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<FaMicrophone className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />
<div className='group hover:cursor-pointer'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Audio Genie</h3>
<p className='font-thin text-xs'>Generate and modify audio content effortlessly.</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<MdTranslate className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />
<div className='group hover:cursor-pointer'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Custom Translator</h3>
<p className='font-thin text-xs'>Neural Text translation system tailored to your needs.</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<IoText className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />
<div className='group hover:cursor-pointer'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Text Classification</h3>
<p className='font-thin text-xs'>Categorise text into user defined classes.</p>
</div>
</li>
<li className='transition-colors duration-200 hover:text-violet-500 hover:underline cursor-pointer flex items-center'>View More <IoMdArrowRoundForward /> </li>
</ul>
</div>
</div>
</div>
<div className='relative bottom-0 flex border-gray-300 border-t mt-10 pt-5 px-10 text-sm font-light space-x-8'>
<p className='hover:underline cursor-pointer'>Explore templates</p>
<p className='hover:underline cursor-pointer'>Explore tools</p>
<p className='hover:underline cursor-pointer'>Join Everyday Free Access</p>
</div>
</div>
);
};
// Resources Dropdown Component
export const ResourcesDropdown: React.FC = () => {
return (
<div className="w-full text-white py-10 px-28">
<div className='flex'>
<div className='w-full space-y-8'>
<div>
<h1 className='text-3xl'>Curated Resources to Get You Started.</h1>
<p className='text-gray-300 text-sm'>Documents, videos, communities and lot more.</p>
</div>
<div className='flex space-x-4'>
<div className='w-1/4 space-y-2'>
<h3 className='font-medium text-sm text-slate-300'>Learn</h3>
<ul className='space-y-4'>
<li className='flex items-center space-x-4'>
<IoMdAnalytics className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Demo</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Experience the power of automation-live now</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<RiProductHuntFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Blogs</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Innovative insights to empower your next move</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<RiMoneyEuroBoxFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Webinars</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Learn, connect, and grow with expert-led sessions</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<FaMoneyBillAlt className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Guides</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Step-by-step tools to unlock your potential</p>
</div>
</li>
</ul>
</div>
<div className='w-1/4 space-y-2'>
<h3 className='font-medium text-sm text-slate-300'>Build</h3>
<ul className='space-y-4'>
<li className='flex items-center space-x-4'>
<IoIosDocument className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>API Doc</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Comprehensive API docs for seamless integrations</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<FaVideo className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Videos</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Engage with interactive, on-demand video solutions</p>
</div>
</li>
</ul>
<h3 className='font-medium text-sm text-slate-300'>Services</h3>
<ul className='space-y-4'>
<li className='flex items-center space-x-4'>
<IoIosDocument className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Documentations</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Explore detailed resources to optimize your workflows</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<FaUserPlus className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Enterprise Contact</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Partner with us to scale your enterprise</p>
</div>
</li>
</ul>
</div>
<div className='w-1/4 space-y-2'>
<h3 className='font-medium text-sm text-slate-300'>Resources</h3>
<ul className='space-y-4'>
<li className='flex items-center space-x-4'>
<FaBook className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Books</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Discover knowledge to inspire and empower action</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<GiArtificialIntelligence className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Agents</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Your personalized support, every step of the way</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<FaMicrophone className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Podcasts</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Tune in for fresh perspectives and expert advice</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<IoIosMail className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Newsletters</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Stay updated with the latest insights and tools</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<FaBookmark className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Bookmarks</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Save and revisit your go-to resources anytime</p>
</div>
</li>
</ul>
</div>
<div className='w-1/4 space-y-2'>
<h3 className='font-medium text-sm text-slate-300'>Connect</h3>
<ul className='space-y-4'>
<li className='flex items-center space-x-4'>
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Developer Connect</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Empower developers to create and integrate seamlessly</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Community</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Join a network of creators and innovators</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<div className='group'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Meetups</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Collaborate, learn, and grow at local events</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className='relative bottom-0 flex border-gray-300 border-t mt-10 pt-5 px-10 text-sm font-light space-x-8'>
<p className='hover:underline cursor-pointer'>Explore templates</p>
<p className='hover:underline cursor-pointer'>Explore tools</p>
<p className='hover:underline cursor-pointer'>Join Everyday Free Access</p>
</div>
</div>
);
};