Updated Frontend

app/components/Navbar.tsx

@@ -0,0 +1,112 @@
+"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="animate-marquee whitespace-nowrap py-2 text-xs tracking-widest">
+          {Array(10)
+            .fill("✦ OPEN FOR SUBMISSIONS")
+            .map((text, i) => (
+              <span key={i} className="mx-8">
+                {text}
+              </span>
+            ))}
+        </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>
+  );
+}