Upload components/Header.jsx with huggingface_hub

components/Header.jsx

@@ -0,0 +1,105 @@
+import { useState, useEffect } from 'react'
+import { Link, Shield, BarChart3, Globe, Menu, X } from 'lucide-react'
+
+export default function Header() {
+  const [scrolled, setScrolled] = useState(false)
+  const [mobileOpen, setMobileOpen] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 20)
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  const navLinks = [
+    { label: 'Shortener', href: '#shorten' },
+    { label: 'Features', href: '#features' },
+    { label: 'Analytics', href: '#analytics' },
+  ]
+
+  return (
+    <header
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+        scrolled
+          ? 'bg-slate-950/80 backdrop-blur-xl border-b border-slate-800/50'
+          : '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 lg:h-20">
+          <a
+            href="/"
+            className="flex items-center gap-2.5 group"
+          >
+            <div className="relative">
+              <div className="absolute inset-0 bg-emerald-400/30 blur-lg rounded-full" />
+              <div className="relative w-9 h-9 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center shadow-lg shadow-emerald-500/20 group-hover:shadow-emerald-500/40 transition-shadow">
+                <Link className="w-5 h-5 text-white" />
+              </div>
+            </div>
+            <span className="text-xl font-bold tracking-tight">
+              sh0rtl<span className="text-emerald-400">.ink</span>
+            </span>
+          </a>
+
+          <nav className="hidden md:flex items-center gap-8">
+            {navLinks.map((link) => (
+              <a
+                key={link.label}
+                href={link.href}
+                className="text-sm font-medium text-slate-400 hover:text-slate-100 transition-colors"
+              >
+                {link.label}
+              </a>
+            ))}
+          </nav>
+
+          <div className="hidden md:flex items-center gap-4">
+            <a
+              href="https://huggingface.co/spaces/akhaliq/anycoder"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs font-semibold text-emerald-400 hover:text-emerald-300 transition-colors px-3 py-1.5 rounded-lg border border-emerald-500/20 hover:border-emerald-500/40 bg-emerald-500/5 hover:bg-emerald-500/10"
+            >
+              Built with anycoder
+            </a>
+          </div>
+
+          <button
+            onClick={() => setMobileOpen(!mobileOpen)}
+            className="md:hidden p-2 text-slate-400 hover:text-slate-100 transition-colors"
+          >
+            {mobileOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+          </button>
+        </div>
+      </div>
+
+      {mobileOpen && (
+        <div className="md:hidden bg-slate-900/95 backdrop-blur-xl border-t border-slate-800">
+          <div className="px-4 py-4 space-y-3">
+            {navLinks.map((link) => (
+              <a
+                key={link.label}
+                href={link.href}
+                onClick={() => setMobileOpen(false)}
+                className="block text-sm font-medium text-slate-400 hover:text-slate-100 transition-colors py-2"
+              >
+                {link.label}
+              </a>
+            ))}
+            <div className="pt-3 border-t border-slate-800">
+              <a
+                href="https://huggingface.co/spaces/akhaliq/anycoder"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block text-xs font-semibold text-emerald-400"
+              >
+                Built with anycoder
+              </a>
+            </div>
+          </div>
+        </div>
+      )}
+    </header>
+  )
+}