Upload components/Navigation.jsx with huggingface_hub

components/Navigation.jsx

@@ -0,0 +1,135 @@
+import { useState, useEffect } from 'react';
+import { Menu, X, Cpu, Zap, Terminal, Code, Layers } from 'lucide-react';
+
+const navItems = [
+  { name: 'Workbench', href: '#workbench', icon: Terminal },
+  { name: 'Lab Notes', href: '#lab-notes', icon: Code },
+  { name: 'Experiments', href: '#experiments', icon: Zap },
+  { name: 'Arsenal', href: '#arsenal', icon: Layers },
+  { name: 'Connect', href: '#connect', icon: Cpu },
+];
+
+export default function Navigation() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const [activeSection, setActiveSection] = useState('');
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 50);
+      
+      // Update active section based on scroll position
+      const sections = navItems.map(item => item.href.slice(1));
+      for (const section of sections.reverse()) {
+        const element = document.getElementById(section);
+        if (element) {
+          const rect = element.getBoundingClientRect();
+          if (rect.top <= 100) {
+            setActiveSection(section);
+            break;
+          }
+        }
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const scrollToSection = (href) => {
+    const element = document.querySelector(href);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${scrolled ? 'bg-iron-900/90 backdrop-blur-xl border-b border-iron-600/30' : 'bg-transparent'}`}>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between h-16 md:h-20">
+            {/* Logo */}
+            <a href="#" className="flex items-center gap-3 group">
+              <div className="relative">
+                <div className="w-10 h-10 bg-gradient-to-br from-electric-500 to-magma-500 rounded-lg flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+                  <Cpu className="w-6 h-6 text-iron-900" />
+                </div>
+                <div className="absolute inset-0 bg-electric-500 rounded-lg blur-lg opacity-50 group-hover:opacity-75 transition-opacity" />
+              </div>
+              <span className="font-mono font-bold text-xl tracking-tight">
+                <span className="text-electric-500">IRON</span>
+                <span className="text-iron-200">_LABS</span>
+              </span>
+            </a>
+
+            {/* Desktop Navigation */}
+            <div className="hidden md:flex items-center gap-1">
+              {navItems.map((item) => {
+                const Icon = item.icon;
+                const isActive = activeSection === item.href.slice(1);
+                return (
+                  <button
+                    key={item.name}
+                    onClick={() => scrollToSection(item.href)}
+                    className={`group relative px-4 py-2 rounded-lg transition-all duration-300 ${isActive ? 'text-electric-500' : 'text-iron-300 hover:text-iron-100'}`}
+                  >
+                    <span className="flex items-center gap-2 font-mono text-sm">
+                      <Icon className="w-4 h-4" />
+                      {item.name}
+                    </span>
+                    {isActive && (
+                      <span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-1 h-1 bg-electric-500 rounded-full" />
+                    )}
+                    <span className="absolute inset-0 bg-iron-600/20 rounded-lg scale-0 group-hover:scale-100 transition-transform duration-300" />
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* CTA Button */}
+            <div className="hidden md:block">
+              <button className="relative px-6 py-2.5 bg-gradient-to-r from-electric-500 to-electric-400 text-iron-900 font-mono font-semibold text-sm rounded-lg overflow-hidden group">
+                <span className="relative z-10">INITIATE</span>
+                <div className="absolute inset-0 bg-gradient-to-r from-magma-500 to-electric-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+              </button>
+            </div>
+
+            {/* Mobile Menu Button */}
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              className="md:hidden p-2 text-iron-200 hover:text-electric-500 transition-colors"
+            >
+              {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile Menu */}
+        <div className={`md:hidden absolute top-full left-0 right-0 bg-iron-900/95 backdrop-blur-xl border-b border-iron-600/30 transition-all duration-300 ${isOpen ? 'opacity-100 visible' : 'opacity-0 invisible'}`}>
+          <div className="px-4 py-6 space-y-2">
+            {navItems.map((item) => {
+              const Icon = item.icon;
+              return (
+                <button
+                  key={item.name}
+                  onClick={() => scrollToSection(item.href)}
+                  className="w-full flex items-center gap-3 px-4 py-3 text-iron-300 hover:text-electric-500 hover:bg-iron-800/50 rounded-lg transition-all font-mono"
+                >
+                  <Icon className="w-5 h-5" />
+                  {item.name}
+                </button>
+              );
+            })}
+            <button className="w-full mt-4 px-6 py-3 bg-gradient-to-r from-electric-500 to-electric-400 text-iron-900 font-mono font-semibold rounded-lg">
+              INITIATE SEQUENCE
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      {/* Progress Bar */}
+      <div className="fixed top-0 left-0 h-0.5 bg-gradient-to-r from-electric-500 via-magma-500 to-gold-500 z-50" id="progress-bar" style={{ width: '0%' }} />
+    </>
+  );
+}