85 lines
3.2 KiB
JavaScript
85 lines
3.2 KiB
JavaScript
'use client'; // Ensure this file is treated as a Client Component
|
|
|
|
import { useState } from 'react';
|
|
import { Button } from '@/components/Button';
|
|
import { Container } from '@/components/Container';
|
|
import { Logo } from '@/components/Logo';
|
|
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
|
|
|
|
// Example navigation items
|
|
const navigationItems = [
|
|
{ name: 'About', href: '/about.html' },
|
|
{ name: 'HeroVerse 3D', href: '/heroverse.html' },
|
|
{ name: 'Features', href: '/features.html' },
|
|
{ name: 'Usecases', href: '/usecases.html' },
|
|
{ name: 'Community', href: '/community.html' },
|
|
];
|
|
|
|
export function Header() {
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<header className="relative z-50 flex-none lg:py-2 bg-white">
|
|
<Container className="flex flex-wrap items-center justify-between lg:justify-center lg:flex-nowrap">
|
|
<a href="/">
|
|
<div className="my-5 lg:my-0 lg:grow lg:basis-0">
|
|
<Logo className="h-12 w-auto text-slate-900" />
|
|
</div>
|
|
</a>
|
|
<div className="hidden lg:flex lg:items-center lg:gap-8 lg:grow lg:basis-0">
|
|
<div className="flex gap-8 mx-auto">
|
|
{navigationItems.map((item) => (
|
|
<a key={item.name} href={item.href} className="text-purple-700 font-semibold hover:text-purple-600">
|
|
{item.name}
|
|
</a>
|
|
))}
|
|
</div>
|
|
<Button href="https://portal.ourverse.tf" target='_blank'>Join OurVerse</Button>
|
|
</div>
|
|
<div className="lg:hidden flex items-center bg-gradient3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setMobileMenuOpen(true)}
|
|
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-purple-700"
|
|
>
|
|
<span className="sr-only">Open menu</span>
|
|
<Bars3Icon aria-hidden="true" className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
</Container>
|
|
|
|
{/* Mobile menu */}
|
|
{mobileMenuOpen && (
|
|
<div className="fixed inset-0 z-10 bg-white shadow-lg lg:hidden">
|
|
<div className="flex items-center justify-between p-6">
|
|
<Logo className="h-12 w-auto text-slate-900" />
|
|
<button
|
|
type="button"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-purple-700"
|
|
>
|
|
<span className="sr-only">Close menu</span>
|
|
<XMarkIcon aria-hidden="true" className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
<div className="flex flex-col p-6 space-y-4">
|
|
{navigationItems.map((item) => (
|
|
<a
|
|
key={item.name}
|
|
href={item.href}
|
|
className="text-purple-600 hover:text-purple-800 text-lg font-semibold"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
{item.name}
|
|
</a>
|
|
))}
|
|
<Button href="https://portal.ourverse.tf" target='_blank' className="mt-4 btn-gradient-dark">
|
|
Join OurVerse
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|