Upload components/Header.jsx with huggingface_hub

components/Header.jsx

@@ -0,0 +1,83 @@
+import Link from 'next/link';
+import { Menu, X } from 'lucide-react';
+import { useState } from 'react';
+
+export default function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const navigation = [
+    { name: 'Features', href: '#features' },
+    { name: 'Specifications', href: '#specs' },
+    { name: 'Applications', href: '#applications' },
+    { name: 'Documentation', href: '#docs' },
+  ];
+
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 bg-gray-900/80 backdrop-blur-lg border-b border-gray-800">
+      <nav className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <div className="flex items-center space-x-2">
+            <div className="w-10 h-10 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center">
+              <span className="text-white font-bold text-xl">R</span>
+            </div>
+            <span className="text-xl font-bold">Reachy Mini</span>
+          </div>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center space-x-8">
+            {navigation.map((item) => (
+              <Link
+                key={item.name}
+                href={item.href}
+                className="text-gray-300 hover:text-white transition-colors duration-200"
+              >
+                {item.name}
+              </Link>
+            ))}
+            <a
+              href="https://huggingface.co/spaces/akhaliq/anycoder"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-primary-400 hover:text-primary-300 transition-colors"
+            >
+              Built with anycoder
+            </a>
+          </div>
+
+          {/* Mobile menu button */}
+          <button
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+            className="md:hidden p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800"
+          >
+            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
+          </button>
+        </div>
+
+        {/* Mobile Navigation */}
+        {isMenuOpen && (
+          <div className="md:hidden py-4 border-t border-gray-800">
+            {navigation.map((item) => (
+              <Link
+                key={item.name}
+                href={item.href}
+                className="block py-2 text-gray-300 hover:text-white transition-colors"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                {item.name}
+              </Link>
+            ))}
+            <a
+              href="https://huggingface.co/spaces/akhaliq/anycoder"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block py-2 text-primary-400 hover:text-primary-300 transition-colors"
+            >
+              Built with anycoder
+            </a>
+          </div>
+        )}
+      </nav>
+    </header>
+  );
+}