highperfocused/open-saas
1
0
Fork 0
mirror of https://github.com/wasp-lang/open-saas.git synced 2025-07-27 21:32:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

added dark mode for sidebar/mobile menu (#17)

Browse Source 
* added dark mode for sidebar

* fixed menu behavior

* removed lucide icons, replaced with react-icons icon
This commit is contained in:
Boris Martinovic
2024-01-11 16:44:21 +01:00
committed by GitHub
parent 962644a325
commit 71886777d0
4 changed files with 125 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/main.wasp
View File

@@ -83,7 +83,6 @@ app SaaSTemplate {
("@faker-js/faker", "8.3.1"), ("@faker-js/faker", "8.3.1"),
("@google-analytics/data", "4.1.0"), ("@google-analytics/data", "4.1.0"),
("openai", "^4.24.1"), ("openai", "^4.24.1"),
("lucide-react", "0.306.0"),
("prettier", "3.1.1"), ("prettier", "3.1.1"),
("prettier-plugin-tailwindcss", "0.5.11"), ("prettier-plugin-tailwindcss", "0.5.11"),
("zod", "3.22.4") ("zod", "3.22.4")

4
app/src/client/app/DemoAppPage.tsx
View File

@@ -7,7 +7,7 @@ import { useQuery } from '@wasp/queries';
import getAllTasksByUser from '@wasp/queries/getAllTasksByUser'; import getAllTasksByUser from '@wasp/queries/getAllTasksByUser';
import { Task } from '@wasp/entities'; import { Task } from '@wasp/entities';
import { CgSpinner } from 'react-icons/cg'; import { CgSpinner } from 'react-icons/cg';
import { XSquare } from 'lucide-react'; import { TiDelete } from 'react-icons/ti';
export default function DemoAppPage() { export default function DemoAppPage() {
return ( return (
@@ -97,7 +97,7 @@ function Todo({ id, isDone, description, time }: TodoProps) {
</div> </div>
<div className='flex items-center justify-end w-15'> <div className='flex items-center justify-end w-15'>
<button className='p-1' onClick={handleDeleteClick} title='Remove task'> <button className='p-1' onClick={handleDeleteClick} title='Remove task'>
<XSquare size='20' className='text-red-600 hover:text-red-700' /> <TiDelete size='20' className='text-red-600 hover:text-red-700' />
</button> </button>
</div> </div>
</div> </div>

41
app/src/client/components/AppNavBar.tsx
View File

@@ -13,12 +13,14 @@ import { Link } from '@wasp/router';
const navigation = [ const navigation = [
{ name: 'AI Scheduler (Demo App)', href: '/demo-app' }, { name: 'AI Scheduler (Demo App)', href: '/demo-app' },
{ name: 'Pricing', href: '/pricing'}, { name: 'Pricing', href: '/pricing' },
{ name: 'Documentation', href: DOCS_URL }, { name: 'Documentation', href: DOCS_URL },
{ name: 'Blog', href: BLOG_URL }, { name: 'Blog', href: BLOG_URL },
]; ];
const NavLogo = () => <img className='h-8 w-8' src={logo} alt='Your SaaS App' />; const NavLogo = () => (
<img className='h-8 w-8' src={logo} alt='Your SaaS App' />
);
export default function AppNavBar() { export default function AppNavBar() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -26,7 +28,10 @@ export default function AppNavBar() {
const { data: user, isLoading: isUserLoading } = useAuth(); const { data: user, isLoading: isUserLoading } = useAuth();
return ( return (
<header className='absolute inset-x-0 top-0 z-50 shadow sticky bg-white bg-opacity-50 backdrop-blur-lg backdrop-filter dark:border-strokedark dark:bg-boxdark-2'> <header className='absolute inset-x-0 top-0 z-50 shadow sticky bg-white bg-opacity-50 backdrop-blur-lg backdrop-filter dark:border-strokedark dark:bg-boxdark-2'>
<nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'> <nav
className='flex items-center justify-between p-6 lg:px-8'
aria-label='Global'
>
<div className='flex lg:flex-1'> <div className='flex lg:flex-1'>
<a href='/' className='-m-1.5 p-1.5'> <a href='/' className='-m-1.5 p-1.5'>
<img className='h-8 w-8' src={logo} alt='My SaaS App' /> <img className='h-8 w-8' src={logo} alt='My SaaS App' />
@@ -35,7 +40,7 @@ export default function AppNavBar() {
<div className='flex lg:hidden'> <div className='flex lg:hidden'>
<button <button
type='button' type='button'
className='-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700' className='-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700 dark:text-white'
onClick={() => setMobileMenuOpen(true)} onClick={() => setMobileMenuOpen(true)}
> >
<span className='sr-only'>Open main menu</span> <span className='sr-only'>Open main menu</span>
@@ -60,7 +65,10 @@ export default function AppNavBar() {
</ul> </ul>
</div> </div>
{isUserLoading ? null : !user ? ( {isUserLoading ? null : !user ? (
<a href={!user ? '/login' : '/account'} className='text-sm font-semibold leading-6 ml-4'> <a
href={!user ? '/login' : '/account'}
className='text-sm font-semibold leading-6 ml-4'
>
<div className='flex items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'> <div className='flex items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
Log in <BiLogIn size='1.1rem' className='ml-1 mt-[0.1rem]' /> Log in <BiLogIn size='1.1rem' className='ml-1 mt-[0.1rem]' />
</div> </div>
@@ -72,9 +80,14 @@ export default function AppNavBar() {
)} )}
</div> </div>
</nav> </nav>
<Dialog as='div' className='lg:hidden' open={mobileMenuOpen} onClose={setMobileMenuOpen}> <Dialog
as='div'
className='lg:hidden'
open={mobileMenuOpen}
onClose={setMobileMenuOpen}
>
<div className='fixed inset-0 z-50' /> <div className='fixed inset-0 z-50' />
<Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10'> <Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white dark:text-white dark:bg-boxdark px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10'>
<div className='flex items-center justify-between'> <div className='flex items-center justify-between'>
<a href='/' className='-m-1.5 p-1.5'> <a href='/' className='-m-1.5 p-1.5'>
<span className='sr-only'>Your SaaS</span> <span className='sr-only'>Your SaaS</span>
@@ -82,7 +95,7 @@ export default function AppNavBar() {
</a> </a>
<button <button
type='button' type='button'
className='-m-2.5 rounded-md p-2.5 text-gray-700' className='-m-2.5 rounded-md p-2.5 text-gray-700 dark:text-gray-50'
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}
> >
<span className='sr-only'>Close menu</span> <span className='sr-only'>Close menu</span>
@@ -96,7 +109,7 @@ export default function AppNavBar() {
<a <a
key={item.name} key={item.name}
href={item.href} href={item.href}
className='-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50' className='-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 dark:text-white hover:dark:bg-boxdark-2'
> >
{item.name} {item.name}
</a> </a>
@@ -105,7 +118,7 @@ export default function AppNavBar() {
<div className='py-6'> <div className='py-6'>
{isUserLoading ? null : !user ? ( {isUserLoading ? null : !user ? (
<Link to='/login'> <Link to='/login'>
<div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500'> <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
Log in <BiLogIn size='1.1rem' className='ml-1' /> Log in <BiLogIn size='1.1rem' className='ml-1' />
</div> </div>
</Link> </Link>
@@ -119,4 +132,4 @@ export default function AppNavBar() {
</Dialog> </Dialog>
</header> </header>
); );
} }

128
app/src/client/landing-page/LandingPage.tsx
View File

@@ -6,38 +6,51 @@ import { BiLogIn } from 'react-icons/bi';
import { Link } from '@wasp/router'; import { Link } from '@wasp/router';
import logo from '../static/logo.png'; import logo from '../static/logo.png';
import openSaasBanner from '../static/open-saas-banner.png'; import openSaasBanner from '../static/open-saas-banner.png';
import { features, navigation, faqs, footerNavigation, testimonials } from './contentSections'; import {
features,
navigation,
faqs,
footerNavigation,
testimonials,
} from './contentSections';
import DropdownUser from '../components/DropdownUser'; import DropdownUser from '../components/DropdownUser';
import { DOCS_URL } from '@wasp/shared/constants'; import { DOCS_URL } from '@wasp/shared/constants';
import { UserMenuItems } from '../components/UserMenuItems'; import { UserMenuItems } from '../components/UserMenuItems';
import useAuth from '@wasp/auth/useAuth'; import useAuth from '@wasp/auth/useAuth';
import DarkModeSwitcher from '../admin/components/DarkModeSwitcher'; import DarkModeSwitcher from '../admin/components/DarkModeSwitcher';
export default function LandingPage() { export default function LandingPage() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const { data: user, isLoading: isUserLoading } = useAuth(); const { data: user, isLoading: isUserLoading } = useAuth();
const NavLogo = () => <img className='h-8 w-8' src={logo} alt='Your SaaS App' />; const NavLogo = () => (
<img className='h-8 w-8' src={logo} alt='Your SaaS App' />
);
return ( return (
<div className='bg-white dark:text-white dark:bg-boxdark-2'> <div className='bg-white dark:text-white dark:bg-boxdark-2'>
{/* Header */} {/* Header */}
<header className='absolute inset-x-0 top-0 z-50 dark:bg-boxdark-2'> <header className='absolute inset-x-0 top-0 z-50 dark:bg-boxdark-2'>
<nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'> <nav
className='flex items-center justify-between p-6 lg:px-8'
aria-label='Global'
>
<div className='flex items-center lg:flex-1'> <div className='flex items-center lg:flex-1'>
<a <a
href='/' href='/'
className='flex items-center -m-1.5 p-1.5 text-gray-900 duration-300 ease-in-out hover:text-yellow-500' className='flex items-center -m-1.5 p-1.5 text-gray-900 duration-300 ease-in-out hover:text-yellow-500'
> >
<NavLogo /> <NavLogo />
<span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Your Saas</span> <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>
Your Saas
</span>
</a> </a>
</div> </div>
<div className='flex lg:hidden'> <div className='flex lg:hidden'>
<button <button
type='button' type='button'
className='-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700' className='-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700 dark:text-white'
onClick={() => setMobileMenuOpen(true)} onClick={() => setMobileMenuOpen(true)}
> >
<span className='sr-only'>Open main menu</span> <span className='sr-only'>Open main menu</span>
@@ -73,9 +86,14 @@ export default function LandingPage() {
</div> </div>
</div> </div>
</nav> </nav>
<Dialog as='div' className='lg:hidden' open={mobileMenuOpen} onClose={setMobileMenuOpen}> <Dialog
as='div'
className='lg:hidden'
open={mobileMenuOpen}
onClose={setMobileMenuOpen}
>
<div className='fixed inset-0 z-50' /> <div className='fixed inset-0 z-50' />
<Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10'> <Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 dark:bg-boxdark dark:text-white'>
<div className='flex items-center justify-between'> <div className='flex items-center justify-between'>
<a href='/' className='-m-1.5 p-1.5'> <a href='/' className='-m-1.5 p-1.5'>
<span className='sr-only'>Your SaaS</span> <span className='sr-only'>Your SaaS</span>
@@ -83,7 +101,7 @@ export default function LandingPage() {
</a> </a>
<button <button
type='button' type='button'
className='-m-2.5 rounded-md p-2.5 text-gray-700' className='-m-2.5 rounded-md p-2.5 text-gray-700 dark:text-gray-50'
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}
> >
<span className='sr-only'>Close menu</span> <span className='sr-only'>Close menu</span>
@@ -97,7 +115,7 @@ export default function LandingPage() {
<a <a
key={item.name} key={item.name}
href={item.href} href={item.href}
className='-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50' className='-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-boxdark-2'
> >
{item.name} {item.name}
</a> </a>
@@ -106,7 +124,7 @@ export default function LandingPage() {
<div className='py-6'> <div className='py-6'>
{isUserLoading ? null : !user ? ( {isUserLoading ? null : !user ? (
<Link to='/login'> <Link to='/login'>
<div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500'> <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
Log in <BiLogIn size='1.1rem' className='ml-1' /> Log in <BiLogIn size='1.1rem' className='ml-1' />
</div> </div>
</Link> </Link>
@@ -130,7 +148,8 @@ export default function LandingPage() {
<div <div
className='aspect-[1020/880] w-[55rem] flex-none sm:right-1/4 sm:translate-x-1/2 dark:hidden bg-gradient-to-tr from-amber-400 to-purple-300 opacity-40' className='aspect-[1020/880] w-[55rem] flex-none sm:right-1/4 sm:translate-x-1/2 dark:hidden bg-gradient-to-tr from-amber-400 to-purple-300 opacity-40'
style={{ style={{
clipPath: 'polygon(80% 20%, 90% 55%, 50% 100%, 70% 30%, 20% 50%, 50% 0)', clipPath:
'polygon(80% 20%, 90% 55%, 50% 100%, 70% 30%, 20% 50%, 50% 0)',
}} }}
/> />
</div> </div>
@@ -149,8 +168,8 @@ export default function LandingPage() {
<div className='mx-auto max-w-8xl px-6 lg:px-8'> <div className='mx-auto max-w-8xl px-6 lg:px-8'>
<div className='lg:mb-18 mx-auto max-w-3xl text-center'> <div className='lg:mb-18 mx-auto max-w-3xl text-center'>
<h1 className='text-4xl font-bold text-gray-900 sm:text-6xl dark:text-white'> <h1 className='text-4xl font-bold text-gray-900 sm:text-6xl dark:text-white'>
Some <span className='italic'>cool</span> words about your
Some <span className='italic'>cool</span> words about your product product
</h1> </h1>
<p className='mt-6 mx-auto max-w-2xl text-lg leading-8 text-gray-600 dark:text-white'> <p className='mt-6 mx-auto max-w-2xl text-lg leading-8 text-gray-600 dark:text-white'>
With some more exciting words about your product! With some more exciting words about your product!
@@ -181,7 +200,9 @@ export default function LandingPage() {
{/* Clients section */} {/* Clients section */}
<div className='mt-12 mx-auto max-w-7xl px-6 lg:px-8 flex flex-col items-between gap-y-6'> <div className='mt-12 mx-auto max-w-7xl px-6 lg:px-8 flex flex-col items-between gap-y-6'>
<h2 className='mb-6 text-center font-semibold tracking-wide text-gray-500 dark:text-white'>Built with / Used by:</h2> <h2 className='mb-6 text-center font-semibold tracking-wide text-gray-500 dark:text-white'>
Built with / Used by:
</h2>
<div className='mx-auto grid max-w-lg grid-cols-2 items-center gap-x-8 gap-y-12 sm:max-w-xl md:grid-cols-4 sm:gap-x-10 sm:gap-y-14 lg:mx-0 lg:max-w-none'> <div className='mx-auto grid max-w-lg grid-cols-2 items-center gap-x-8 gap-y-12 sm:max-w-xl md:grid-cols-4 sm:gap-x-10 sm:gap-y-14 lg:mx-0 lg:max-w-none'>
<div className='flex justify-center col-span-1 max-h-12 w-full object-contain dark:opacity-80'> <div className='flex justify-center col-span-1 max-h-12 w-full object-contain dark:opacity-80'>
@@ -190,7 +211,6 @@ export default function LandingPage() {
<path id='a' d='M.06.5h272v190H.06z' /> <path id='a' d='M.06.5h272v190H.06z' />
</defs> </defs>
<g fill-rule='evenodd'> <g fill-rule='evenodd'>
<path <path
className='dark:fill-white' className='dark:fill-white'
fill='#545454' fill='#545454'
@@ -211,7 +231,12 @@ export default function LandingPage() {
</svg> </svg>
</div> </div>
<div className='flex justify-center col-span-1 max-h-12 w-full object-contain dark:opacity-80'> <div className='flex justify-center col-span-1 max-h-12 w-full object-contain dark:opacity-80'>
<svg width={48} height={48} viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'> <svg
width={48}
height={48}
viewBox='0 0 32 32'
xmlns='http://www.w3.org/2000/svg'
>
<path <path
className='dark:fill-white' className='dark:fill-white'
fill='#545454' fill='#545454'
@@ -234,7 +259,11 @@ export default function LandingPage() {
</svg> </svg>
</div> </div>
<div className='flex justify-center col-span-1 w-full max-h-12 object-contain dark:opacity-80'> <div className='flex justify-center col-span-1 w-full max-h-12 object-contain dark:opacity-80'>
<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid' viewBox='0 0 256 260'> <svg
xmlns='http://www.w3.org/2000/svg'
preserveAspectRatio='xMidYMid'
viewBox='0 0 256 260'
>
<path <path
className='dark:fill-white' className='dark:fill-white'
fill='#545454' fill='#545454'
@@ -266,7 +295,9 @@ export default function LandingPage() {
</div> </div>
{feature.name} {feature.name}
</dt> </dt>
<dd className='mt-2 text-base leading-7 text-gray-600 dark:text-white'>{feature.description}</dd> <dd className='mt-2 text-base leading-7 text-gray-600 dark:text-white'>
{feature.description}
</dd>
</div> </div>
))} ))}
</dl> </dl>
@@ -287,10 +318,18 @@ export default function LandingPage() {
<p>{testimonial.quote}</p> <p>{testimonial.quote}</p>
</blockquote> </blockquote>
<figcaption className='mt-6 text-base text-white'> <figcaption className='mt-6 text-base text-white'>
<a href={testimonial.socialUrl} className='flex items-center gap-x-2'> <a
<img src={testimonial.avatarSrc} className='h-12 w-12 rounded-full' /> href={testimonial.socialUrl}
className='flex items-center gap-x-2'
>
<img
src={testimonial.avatarSrc}
className='h-12 w-12 rounded-full'
/>
<div> <div>
<div className='font-semibold hover:underline'>{testimonial.name}</div> <div className='font-semibold hover:underline'>
{testimonial.name}
</div>
<div className='mt-1'>{testimonial.role}</div> <div className='mt-1'>{testimonial.role}</div>
</div> </div>
</a> </a>
@@ -304,15 +343,27 @@ export default function LandingPage() {
{/* FAQ */} {/* FAQ */}
<div className='mt-32 mx-auto max-w-2xl divide-y divide-gray-900/10 dark:divide-gray-200/10 px-6 pb-8 sm:pb-24 sm:pt-12 lg:max-w-7xl lg:px-8 lg:py-32'> <div className='mt-32 mx-auto max-w-2xl divide-y divide-gray-900/10 dark:divide-gray-200/10 px-6 pb-8 sm:pb-24 sm:pt-12 lg:max-w-7xl lg:px-8 lg:py-32'>
<h2 className='text-2xl font-bold leading-10 tracking-tight text-gray-900 dark:text-white'>Frequently asked questions</h2> <h2 className='text-2xl font-bold leading-10 tracking-tight text-gray-900 dark:text-white'>
Frequently asked questions
</h2>
<dl className='mt-10 space-y-8 divide-y divide-gray-900/10'> <dl className='mt-10 space-y-8 divide-y divide-gray-900/10'>
{faqs.map((faq) => ( {faqs.map((faq) => (
<div key={faq.id} className='pt-8 lg:grid lg:grid-cols-12 lg:gap-8'> <div
<dt className='text-base font-semibold leading-7 text-gray-900 lg:col-span-5 dark:text-white'>{faq.question}</dt> key={faq.id}
className='pt-8 lg:grid lg:grid-cols-12 lg:gap-8'
>
<dt className='text-base font-semibold leading-7 text-gray-900 lg:col-span-5 dark:text-white'>
{faq.question}
</dt>
<dd className='flex items-center justify-start gap-2 mt-4 lg:col-span-7 lg:mt-0'> <dd className='flex items-center justify-start gap-2 mt-4 lg:col-span-7 lg:mt-0'>
<p className='text-base leading-7 text-gray-600 dark:text-white'>{faq.answer}</p> <p className='text-base leading-7 text-gray-600 dark:text-white'>
{faq.answer}
</p>
{faq.href && ( {faq.href && (
<a href={faq.href} className='text-base leading-7 text-yellow-500 hover:text-yellow-600'> <a
href={faq.href}
className='text-base leading-7 text-yellow-500 hover:text-yellow-600'
>
Learn more → Learn more →
</a> </a>
)} )}
@@ -325,17 +376,25 @@ export default function LandingPage() {
{/* Footer */} {/* Footer */}
<div className='mx-auto mt-6 max-w-7xl px-6 lg:px-8 dark:bg-boxdark-2'> <div className='mx-auto mt-6 max-w-7xl px-6 lg:px-8 dark:bg-boxdark-2'>
<footer aria-labelledby='footer-heading' className='relative border-t border-gray-900/10 dark:border-gray-200/10 py-24 sm:mt-32'> <footer
aria-labelledby='footer-heading'
className='relative border-t border-gray-900/10 dark:border-gray-200/10 py-24 sm:mt-32'
>
<h2 id='footer-heading' className='sr-only'> <h2 id='footer-heading' className='sr-only'>
Footer Footer
</h2> </h2>
<div className='flex items-start justify-end mt-10 gap-20'> <div className='flex items-start justify-end mt-10 gap-20'>
<div> <div>
<h3 className='text-sm font-semibold leading-6 text-gray-900 dark:text-white'>App</h3> <h3 className='text-sm font-semibold leading-6 text-gray-900 dark:text-white'>
App
</h3>
<ul role='list' className='mt-6 space-y-4'> <ul role='list' className='mt-6 space-y-4'>
{footerNavigation.app.map((item) => ( {footerNavigation.app.map((item) => (
<li key={item.name}> <li key={item.name}>
<a href={item.href} className='text-sm leading-6 text-gray-600 hover:text-gray-900 dark:text-white'> <a
href={item.href}
className='text-sm leading-6 text-gray-600 hover:text-gray-900 dark:text-white'
>
{item.name} {item.name}
</a> </a>
</li> </li>
@@ -343,11 +402,16 @@ export default function LandingPage() {
</ul> </ul>
</div> </div>
<div> <div>
<h3 className='text-sm font-semibold leading-6 text-gray-900 dark:text-white'>Company</h3> <h3 className='text-sm font-semibold leading-6 text-gray-900 dark:text-white'>
Company
</h3>
<ul role='list' className='mt-6 space-y-4'> <ul role='list' className='mt-6 space-y-4'>
{footerNavigation.company.map((item) => ( {footerNavigation.company.map((item) => (
<li key={item.name}> <li key={item.name}>
<a href={item.href} className='text-sm leading-6 text-gray-600 hover:text-gray-900 dark:text-white'> <a
href={item.href}
className='text-sm leading-6 text-gray-600 hover:text-gray-900 dark:text-white'
>
{item.name} {item.name}
</a> </a>
</li> </li>