597 lines
29 KiB
TypeScript
597 lines
29 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 { GrContactInfo, 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 { MdAutoAwesome, MdSecurity, MdStore, 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',
|
|
},
|
|
{
|
|
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',
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
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>
|
|
);
|
|
};
|
|
|
|
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',
|
|
},
|
|
];
|
|
|
|
// 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'>
|
|
{solutionItems.map((solutionGroup, index) => (
|
|
<div className='w-1/3 space-y-2' key={index}>
|
|
<h3 className='font-medium text-sm text-slate-300'>{solutionGroup.category}</h3>
|
|
<ul className='space-y-4'>
|
|
{solutionGroup.list.map((item, itemIndex) => (
|
|
<li className='flex items-center space-x-4' key={itemIndex}>
|
|
{item.icon && item.icon} {/* Render icon if it exists */}
|
|
<div className='group hover:cursor-pointer'>
|
|
<a href={item.link} >
|
|
<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>
|
|
</a>
|
|
</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'>
|
|
{aiTools.map((tool, index) => (
|
|
<li className='flex items-center space-x-4' key={index}>
|
|
{tool.icon}
|
|
<div className='group hover:cursor-pointer'>
|
|
<a href={tool.link}>
|
|
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>{tool.name}</h3>
|
|
<p className='font-thin text-xs'>{tool.description}</p>
|
|
</a>
|
|
</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
|
|
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
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
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 a lot more.</p>
|
|
</div>
|
|
<div className='flex space-x-4'>
|
|
{/* Mapping over resource items, ensuring Build & Services are in the same column */}
|
|
{resourceItems.map((item, index) => {
|
|
if (item.category === 'Build') {
|
|
return (
|
|
<div key={index} className='w-1/4 space-y-2'>
|
|
{/* Render Build category */}
|
|
<h3 className='font-medium text-sm text-slate-300'>{item.category}</h3>
|
|
<ul className='space-y-4'>
|
|
{item.list.slice(0, 2).map((listItem) => (
|
|
<li key={listItem.name} className='flex items-center space-x-4'>
|
|
{listItem.icon && listItem.icon}
|
|
<div className='group'>
|
|
<a href={listItem.link}>
|
|
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>
|
|
{listItem.name}
|
|
</h3>
|
|
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>
|
|
{listItem.description}
|
|
</p>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* Render Services category immediately after Build */}
|
|
{resourceItems
|
|
.filter((el) => el.category === 'Services')
|
|
.map((serviceItem) => (
|
|
<div key={serviceItem.category}>
|
|
<h3 className='font-medium text-sm text-slate-300 mt-6'>{serviceItem.category}</h3>
|
|
<ul className='space-y-4'>
|
|
{serviceItem.list.slice(0, 2).map((listItem) => (
|
|
<li key={listItem.name} className='flex items-center space-x-4'>
|
|
{listItem.icon && listItem.icon}
|
|
<div className='group'>
|
|
<a href={listItem.link}>
|
|
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>
|
|
{listItem.name}
|
|
</h3>
|
|
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>
|
|
{listItem.description}
|
|
</p>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
} else if (item.category !== 'Services') {
|
|
return (
|
|
<div key={index} className='w-1/4 space-y-2'>
|
|
<h3 className='font-medium text-sm text-slate-300'>{item.category}</h3>
|
|
<ul className='space-y-4'>
|
|
{item.list.map((listItem) => (
|
|
<li key={listItem.name} className='flex items-center space-x-4'>
|
|
{listItem.icon && listItem.icon}
|
|
<div className='group'>
|
|
<a href={listItem.link}>
|
|
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>
|
|
{listItem.name}
|
|
</h3>
|
|
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>
|
|
{listItem.description}
|
|
</p>
|
|
</a>
|
|
</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>
|
|
);
|
|
}; |