Upload components/Navbar.js with huggingface_hub

components/Navbar.js

@@ -0,0 +1,91 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Menu, X } from 'lucide-react';
+import { useState } from 'react';
+
+export default function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const navLinks = [
+    { name: 'Research', href: '#research' },
+    { name: 'Projects', href: '#projects' },
+    { name: 'About', href: '#about' },
+    { name: 'Contact', href: '#contact' },
+  ];
+
+  return (
+    <motion.nav
+      initial={{ y: -100 }}
+      animate={{ y: 0 }}
+      transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+      className="fixed top-0 left-0 w-full z-50 px-6 py-6 flex justify-between items-center mix-blend-difference"
+    >
+      <a href="/" className="font-serif text-2xl font-bold tracking-tighter hover:opacity-70 transition-opacity">
+        A.I.
+      </a>
+
+      {/* Desktop Nav */}
+      <div className="hidden md:flex items-center gap-8 font-mono text-sm uppercase tracking-widest">
+        {navLinks.map((link) => (
+          <a
+            key={link.name}
+            href={link.href}
+            className="relative group overflow-hidden"
+          >
+            <span className="block transition-transform duration-300 group-hover:-translate-y-full">
+              {link.name}
+            </span>
+            <span className="absolute top-0 left-0 block translate-y-full transition-transform duration-300 group-hover:translate-y-0 text-gray-400">
+              {link.name}
+            </span>
+          </a>
+        ))}
+        <a 
+          href="https://huggingface.co/spaces/akhaliq/anycoder" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="text-xs border-b border-white/30 pb-0.5 hover:border-white transition-colors"
+        >
+          Built with anycoder
+        </a>
+      </div>
+
+      {/* Mobile Toggle */}
+      <button 
+        className="md:hidden"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        {isOpen ? <X /> : <Menu />}
+      </button>
+
+      {/* Mobile Menu */}
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="absolute top-full left-0 w-full bg-void/90 backdrop-blur-xl border-b border-white/10 p-6 flex flex-col gap-4 md:hidden"
+        >
+          {navLinks.map((link) => (
+            <a
+              key={link.name}
+              href={link.href}
+              className="font-mono text-lg uppercase tracking-widest hover:text-gray-400"
+              onClick={() => setIsOpen(false)}
+            >
+              {link.name}
+            </a>
+          ))}
+          <a 
+            href="https://huggingface.co/spaces/akhaliq/anycoder" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="text-xs border-b border-white/30 pb-0.5 w-fit"
+          >
+            Built with anycoder
+          </a>
+        </motion.div>
+      )}
+    </motion.nav>
+  );
+}