123 lines
4.2 KiB
TypeScript
123 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { Menu, X, Diamond } from "lucide-react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
|
|
const navLinks = [
|
|
{ href: "/gallery", label: "GALLERY" },
|
|
{ href: "/submit", label: "SUBMIT ART" },
|
|
{ href: "/about", label: "ABOUT" },
|
|
{ href: "/rules", label: "RULES" },
|
|
{ href: "/faq", label: "FAQ" },
|
|
{ href: "/contact", label: "CONTACT" },
|
|
];
|
|
|
|
export default function Navbar() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
return (
|
|
<nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-zinc-200">
|
|
{/* Announcement Bar */}
|
|
<div className="bg-black text-white overflow-hidden">
|
|
<div className="whitespace-nowrap py-2 text-xs tracking-widest flex">
|
|
|
|
{/* Track */}
|
|
<div className="animate-marquee flex">
|
|
{[...Array(10)].map((_, i) => (
|
|
<span key={`first-${i}`} className="mx-8 shrink-0">
|
|
✦ OPEN FOR SUBMISSIONS
|
|
</span>
|
|
))}
|
|
|
|
{/* Duplicate for seamless loop */}
|
|
{[...Array(10)].map((_, i) => (
|
|
<span key={`second-${i}`} className="mx-8 shrink-0">
|
|
✦ OPEN FOR SUBMISSIONS
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Navbar */}
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-16">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center gap-2 group">
|
|
<Diamond className="w-6 h-6 text-lime-400 group-hover:rotate-12 transition-transform" />
|
|
<span className="text-xl font-bold tracking-tight">ARTSPLASH</span>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden lg:flex items-center gap-8">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="text-sm font-medium tracking-wide text-zinc-700 hover:text-black transition-colors relative group"
|
|
>
|
|
{link.label}
|
|
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-lime-400 group-hover:w-full transition-all duration-300" />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<div className="hidden lg:block">
|
|
<Link
|
|
href="/register"
|
|
className="bg-lime-400 text-black px-6 py-2.5 text-sm font-bold tracking-wide hover:bg-lime-300 transition-colors rounded-full"
|
|
>
|
|
REGISTER NOW
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="lg:hidden p-2 hover:bg-zinc-100 rounded-lg transition-colors"
|
|
aria-label="Toggle menu"
|
|
>
|
|
{isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: "auto" }}
|
|
exit={{ opacity: 0, height: 0 }}
|
|
className="lg:hidden bg-white border-t border-zinc-200"
|
|
>
|
|
<div className="px-4 py-6 space-y-4">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
onClick={() => setIsOpen(false)}
|
|
className="block text-lg font-medium text-zinc-700 hover:text-black hover:pl-2 transition-all"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
<Link
|
|
href="/register"
|
|
onClick={() => setIsOpen(false)}
|
|
className="block w-full text-center bg-lime-400 text-black px-6 py-3 text-sm font-bold tracking-wide hover:bg-lime-300 transition-colors rounded-full mt-6"
|
|
>
|
|
REGISTER NOW
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</nav>
|
|
);
|
|
}
|