475 lines
31 KiB
TypeScript
475 lines
31 KiB
TypeScript
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>
|
|
);
|
|
};
|