's'

2026-03-07 09:34:01 -06:00
parent 742815f2db
commit da5f9c18a7
39 changed files with 8602 additions and 0 deletions
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+const navLinks = [
+  { label: "学习路径", href: "#roadmap" },
+  { label: "工具推荐", href: "#tools" },
+  { label: "精选资源", href: "#resources" },
+  { label: "社区", href: "#community" },
+];
+
+export default function Header() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 20);
+    window.addEventListener("scroll", onScroll);
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  return (
+    <header
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+        scrolled
+          ? "bg-white/80 backdrop-blur-lg shadow-sm"
+          : "bg-transparent"
+      }`}
+    >
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex h-16 items-center justify-between">
+          <a href="#" className="flex items-center gap-2 text-lg font-bold">
+            <span className="text-2xl">🌍</span>
+            <span className="hidden sm:inline">数字游民指南</span>
+            <span className="sm:hidden">DN Guide</span>
+          </a>
+
+          <nav className="hidden items-center gap-1 md:flex">
+            {navLinks.map((link) => (
+              <a
+                key={link.href}
+                href={link.href}
+                className="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
+              >
+                {link.label}
+              </a>
+            ))}
+          </nav>
+
+          <div className="flex items-center gap-3">
+            <a
+              href="#roadmap"
+              className="hidden rounded-full bg-sky-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-sky-600 sm:inline-flex"
+            >
+              开始探索 →
+            </a>
+
+            <button
+              onClick={() => setMobileOpen(!mobileOpen)}
+              className="inline-flex items-center justify-center rounded-lg p-2 text-slate-600 transition-colors hover:bg-slate-100 md:hidden"
+              aria-label="切换菜单"
+            >
+              {mobileOpen ? (
+                <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              ) : (
+                <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {mobileOpen && (
+        <div className="border-t border-slate-100 bg-white/95 backdrop-blur-lg md:hidden">
+          <nav className="mx-auto max-w-7xl space-y-1 px-4 py-3">
+            {navLinks.map((link) => (
+              <a
+                key={link.href}
+                href={link.href}
+                onClick={() => setMobileOpen(false)}
+                className="block rounded-lg px-3 py-2.5 text-base font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
+              >
+                {link.label}
+              </a>
+            ))}
+            <a
+              href="#roadmap"
+              onClick={() => setMobileOpen(false)}
+              className="mt-2 block rounded-full bg-sky-500 px-4 py-2.5 text-center text-base font-medium text-white transition-colors hover:bg-sky-600"
+            >
+              开始探索 →
+            </a>
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+}