103 lines
3.9 KiB
TypeScript
103 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Image from "next/image";
|
|
import { navigationData } from "@/data/navigation";
|
|
import { SearchIcon } from "@/components/shared/icons/SearchIcon";
|
|
|
|
export function Navbar() {
|
|
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
|
|
|
|
return (
|
|
<header className="relative z-30 mx-auto flex h-[76px] max-w-[2520px] items-center justify-between px-2">
|
|
{/* Logo */}
|
|
<a href="#" className="flex items-center">
|
|
<Image
|
|
src="/images/aiero/logo-dark.png"
|
|
alt="Aiero"
|
|
width={109.5}
|
|
height={19.5}
|
|
className="h-auto w-auto"
|
|
priority
|
|
/>
|
|
</a>
|
|
|
|
{/* Navigation */}
|
|
<nav className="hidden items-center gap-0 lg:flex" aria-label="Primary navigation">
|
|
{navigationData.map((item) => (
|
|
<div
|
|
key={item.label}
|
|
className="relative"
|
|
onMouseEnter={() => setOpenDropdown(item.label)}
|
|
onMouseLeave={() => setOpenDropdown(null)}
|
|
>
|
|
<a
|
|
href={item.href}
|
|
className="flex items-center gap-1 rounded-[20px] px-[18px] py-[10px] text-[11px] font-semibold uppercase tracking-[0.18em] text-white transition-colors hover:bg-[#1f1f1f]"
|
|
style={{ fontFamily: "var(--font-sora)" }}
|
|
>
|
|
{item.label}
|
|
{item.children && (
|
|
<svg className="ml-0.5 h-2 w-2 opacity-60" viewBox="0 0 8 5" fill="none">
|
|
<path d="M1 1L4 4L7 1" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
)}
|
|
</a>
|
|
|
|
{/* Dropdown */}
|
|
{item.children && openDropdown === item.label && (
|
|
<div className="absolute left-0 top-full z-50 min-w-[200px] rounded-[15px] border border-[#2a2a2a] bg-[#111111] py-3 shadow-2xl">
|
|
{item.children.map((child) => (
|
|
<a
|
|
key={child.label}
|
|
href={child.href}
|
|
className="block px-5 py-2.5 text-[12px] font-medium text-white/80 transition-colors hover:text-[#45d0bd]"
|
|
style={{ fontFamily: "var(--font-sora)" }}
|
|
>
|
|
{child.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Right Icons */}
|
|
<div className="flex items-center gap-5">
|
|
<button className="hidden text-white transition-colors hover:text-[#45d0bd] md:block" aria-label="Search">
|
|
<SearchIcon className="h-[18px] w-[18px]" />
|
|
</button>
|
|
|
|
<a
|
|
href="#"
|
|
className="hidden items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-white transition-colors hover:text-[#45d0bd] md:flex"
|
|
style={{ fontFamily: "var(--font-sora)" }}
|
|
>
|
|
<svg className="h-4 w-4" viewBox="0 0 16 16" fill="none">
|
|
<circle cx="8" cy="5" r="3.5" stroke="currentColor" strokeWidth="1.3"/>
|
|
<path d="M2 14.5C2 11.5 4.5 9.5 8 9.5C11.5 9.5 14 11.5 14 14.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
|
|
</svg>
|
|
Log in
|
|
</a>
|
|
|
|
<a
|
|
href="#"
|
|
className="aiero-button aiero-button-gradient-border rounded-full px-[22px] py-[10px] text-[11px] font-semibold uppercase tracking-[0.18em] text-white"
|
|
style={{ fontFamily: "var(--font-sora)" }}
|
|
>
|
|
Get in Touch
|
|
<span className="button-inner" />
|
|
</a>
|
|
|
|
{/* Mobile menu button */}
|
|
<button className="flex flex-col gap-[5px] lg:hidden" aria-label="Menu">
|
|
<span className="h-[2px] w-[22px] bg-white" />
|
|
<span className="h-[2px] w-[22px] bg-white" />
|
|
<span className="h-[2px] w-[22px] bg-white" />
|
|
</button>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|