Upload components/Header.tsx with huggingface_hub

components/Header.tsx

@@ -0,0 +1,96 @@
+import { useState, useEffect } from 'react'
+import { Menu, X } from 'lucide-react'
+
+const Header = () => {
+  const [isScrolled, setIsScrolled] = useState(false)
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 50)
+    }
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  const navLinks = [
+    { href: '#about', label: 'About' },
+    { href: '#projects', label: 'Projects' },
+    { href: '#services', label: 'Services' },
+    { href: '#contact', label: 'Contact' },
+  ]
+
+  return (
+    <header 
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+        isScrolled ? 'bg-margins-black/90 backdrop-blur-md py-4' : 'bg-transparent py-6'
+      }`}
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between">
+          <a href="#" className="text-2xl font-light tracking-wider uppercase">
+            Margins
+          </a>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center space-x-8">
+            {navLinks.map((link) => (
+              <a
+                key={link.href}
+                href={link.href}
+                className="text-sm uppercase tracking-widest text-margins-gray hover:text-white transition-colors duration-300"
+              >
+                {link.label}
+              </a>
+            ))}
+            <a 
+              href="https://huggingface.co/spaces/akhaliq/anycoder" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="text-xs uppercase tracking-widest text-margins-gray hover:text-white transition-colors duration-300 border-l border-margins-gray pl-8"
+            >
+              Built with anycoder
+            </a>
+          </nav>
+
+          {/* Mobile Menu Button */}
+          <button 
+            className="md:hidden text-white p-2"
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            aria-label="Toggle menu"
+          >
+            {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Navigation */}
+      {isMobileMenuOpen && (
+        <div className="md:hidden absolute top-full left-0 right-0 bg-margins-black border-t border-margins-dark">
+          <nav className="flex flex-col py-4">
+            {navLinks.map((link) => (
+              <a
+                key={link.href}
+                href={link.href}
+                className="px-6 py-3 text-sm uppercase tracking-widest text-margins-gray hover:text-white hover:bg-margins-dark transition-colors"
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                {link.label}
+              </a>
+            ))}
+            <a 
+              href="https://huggingface.co/spaces/akhaliq/anycoder" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="px-6 py-3 text-xs uppercase tracking-widest text-margins-gray hover:text-white hover:bg-margins-dark transition-colors"
+            >
+              Built with anycoder
+            </a>
+          </nav>
+        </div>
+      )}
+    </header>
+  )
+}
+
+export default Header