93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
|
|
|
const NAV_LINKS = [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "Nearle for Business", href: "/businesses" },
|
|
{ label: "Nearle for People", href: "/people" },
|
|
{ label: "About", href: "/about" },
|
|
{ label: "Contact", href: "/contact" },
|
|
];
|
|
|
|
export function Navbar() {
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
|
|
return (
|
|
<nav className="sticky top-0 z-50 w-full bg-[#4d046a]/95 backdrop-blur-md border-b border-white/10 transition-all duration-300">
|
|
<div className="grid w-full grid-cols-[auto_auto] md:grid-cols-[auto_1fr_auto] items-center gap-4 md:gap-8 px-6 md:px-12 lg:px-20 xl:px-24 py-3">
|
|
{/* Left: Brand */}
|
|
<div className="flex items-center">
|
|
<Link
|
|
href="/"
|
|
className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
|
|
>
|
|
<Image
|
|
src="/logo-light.png"
|
|
alt="Nearle"
|
|
width={400}
|
|
height={50}
|
|
style={{ height: "40px", width: "auto" }}
|
|
className="object-contain"
|
|
priority
|
|
/>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="hidden md:flex items-center justify-center gap-8 xl:gap-10">
|
|
{NAV_LINKS.map((link) => (
|
|
<Link
|
|
key={link.label}
|
|
href={link.href}
|
|
className="relative py-1 text-[15px] font-bold leading-5 text-white/80 hover:text-brand-accent transition-all duration-200 group whitespace-nowrap"
|
|
>
|
|
{link.label}
|
|
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-brand-accent transition-all duration-300 group-hover:w-full" />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right: Actions */}
|
|
<div className="flex items-center justify-end gap-3">
|
|
<Link
|
|
href="/#download"
|
|
className="hidden md:inline-flex bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-bold px-7 py-3 rounded-full text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-95 whitespace-nowrap"
|
|
>
|
|
Get App
|
|
</Link>
|
|
|
|
{/* Mobile menu toggle */}
|
|
<button
|
|
className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 text-white transition-all active:scale-90 cursor-pointer"
|
|
onClick={() => setMobileOpen(!mobileOpen)}
|
|
aria-label="Toggle menu"
|
|
>
|
|
<MaterialIcon icon={mobileOpen ? "close" : "menu"} size={22} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Drawer */}
|
|
{mobileOpen && (
|
|
<div className="md:hidden bg-[#4d046a] border-t border-white/10">
|
|
<div className="max-w-container-max mx-auto px-6 py-stack-md flex flex-col gap-2">
|
|
{NAV_LINKS.map((link) => (
|
|
<Link
|
|
key={link.label}
|
|
href={link.href}
|
|
className="px-3 py-2.5 text-body-md text-white/80 hover:text-brand-accent hover:bg-white/10 rounded-lg transition-colors"
|
|
onClick={() => setMobileOpen(false)}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
}
|