feat: redesign navigation with modern centered layout

Centered title, optimized search box, improved category headers,
enhanced card interactions, and realigned footer.

Co-authored-by: Simon <85533298+handsomezhuzhu@users.noreply.github.com>

app/globals.css

@@ -3,27 +3,27 @@
 
 @custom-variant dark (&:is(.dark *));
 
-/* 深色主题设计，适合个人导航站 */
+/* 深色主题设计，个人导航站 - 深蓝色调 */
 :root {
-  --background: oklch(0.13 0.01 260);
-  --foreground: oklch(0.95 0 0);
-  --card: oklch(0.18 0.01 260);
-  --card-foreground: oklch(0.95 0 0);
-  --popover: oklch(0.18 0.01 260);
-  --popover-foreground: oklch(0.95 0 0);
-  --primary: oklch(0.7 0.15 200);
+  --background: oklch(0.12 0.015 240);
+  --foreground: oklch(0.98 0 0);
+  --card: oklch(0.16 0.015 240);
+  --card-foreground: oklch(0.98 0 0);
+  --popover: oklch(0.16 0.015 240);
+  --popover-foreground: oklch(0.98 0 0);
+  --primary: oklch(0.75 0.12 180);
   --primary-foreground: oklch(0.1 0 0);
-  --secondary: oklch(0.25 0.01 260);
-  --secondary-foreground: oklch(0.9 0 0);
-  --muted: oklch(0.25 0.01 260);
-  --muted-foreground: oklch(0.65 0 0);
-  --accent: oklch(0.7 0.15 200);
+  --secondary: oklch(0.22 0.015 240);
+  --secondary-foreground: oklch(0.95 0 0);
+  --muted: oklch(0.22 0.015 240);
+  --muted-foreground: oklch(0.6 0.01 240);
+  --accent: oklch(0.75 0.12 180);
   --accent-foreground: oklch(0.1 0 0);
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.28 0.01 260);
-  --input: oklch(0.28 0.01 260);
-  --ring: oklch(0.7 0.15 200);
+  --border: oklch(0.24 0.02 240);
+  --input: oklch(0.20 0.015 240);
+  --ring: oklch(0.75 0.12 180);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);

components/site-navigation.tsx

@@ -389,64 +389,74 @@ export function SiteNavigation() {
     .filter((category) => category.sites.length > 0)
 
   return (
-    <div className="min-h-screen px-4 py-12 md:px-8 lg:px-16">
+    <div className="min-h-screen px-4 py-16 md:px-8 lg:px-16">
       <div className="mx-auto max-w-6xl">
-        {/* Header */}
-        <header className="mb-12">
-          <div className="flex items-center gap-3 mb-4">
-            <Globe className="size-8 text-primary" />
-            <h1 className="text-3xl font-bold tracking-tight text-foreground">站点导航</h1>
+        {/* Header - 居中设计 */}
+        <header className="mb-16 text-center">
+          <div className="inline-flex items-center justify-center gap-3 mb-6">
+            <div className="p-3 bg-primary/10 rounded-2xl">
+              <Globe className="size-8 text-primary" />
+            </div>
           </div>
-          <p className="text-muted-foreground text-lg">zhuzihan.com 全部站点与服务管理</p>
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">
+            站点导航
+          </h1>
+          <p className="text-muted-foreground text-lg md:text-xl">
+            <span className="font-mono text-primary/80">zhuzihan.com</span>
+            <span className="mx-2 text-border">|</span>
+            全部站点与服务管理
+          </p>
         </header>
 
-        {/* Search */}
-        <div className="relative mb-10">
+        {/* Search - 居中设计 */}
+        <div className="relative mb-12 max-w-2xl mx-auto">
           <Search className="absolute left-4 top-1/2 -translate-y-1/2 size-5 text-muted-foreground" />
           <input
             type="text"
             placeholder="搜索站点、域名或服务器..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full bg-card border border-border rounded-lg py-3 pl-12 pr-4 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all"
+            className="w-full bg-input border border-border rounded-xl py-4 pl-12 pr-4 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 transition-all shadow-lg shadow-black/10"
           />
         </div>
 
         {/* Categories */}
-        <div className="space-y-10">
+        <div className="space-y-12">
           {filteredCategories.map((category) => (
             <section key={category.title}>
-              <div className="flex items-center gap-2 mb-4">
-                <span className="text-primary">{category.icon}</span>
+              <div className="flex items-center gap-3 mb-6 pb-3 border-b border-border/50">
+                <span className="p-2 bg-primary/10 rounded-lg text-primary">{category.icon}</span>
                 <h2 className="text-xl font-semibold text-foreground">{category.title}</h2>
-                <span className="text-sm text-muted-foreground ml-2">({category.sites.length})</span>
+                <span className="text-sm text-muted-foreground px-2 py-1 bg-muted/50 rounded-full">
+                  {category.sites.length} 个站点
+                </span>
               </div>
 
-              <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                 {category.sites.map((site) => (
                   <a
                     key={site.domain}
                     href={site.url}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="group flex flex-col gap-3 p-4 bg-card border border-border rounded-lg hover:border-primary/50 hover:bg-card/80 transition-all"
+                    className="group flex flex-col gap-3 p-5 bg-card border border-border/50 rounded-xl hover:border-primary/50 hover:shadow-lg hover:shadow-primary/5 transition-all duration-300"
                   >
                     <div className="flex items-start justify-between">
                       <div className="flex-1 min-w-0">
-                        <h3 className="font-medium text-foreground group-hover:text-primary transition-colors truncate">
+                        <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors truncate">
                           {site.name}
                         </h3>
-                        <p className="text-sm text-muted-foreground font-mono truncate mt-1">{site.domain}</p>
+                        <p className="text-sm text-muted-foreground font-mono truncate mt-1.5">{site.domain}</p>
                       </div>
-                      <ExternalLink className="size-4 text-muted-foreground group-hover:text-primary transition-colors flex-shrink-0 ml-2" />
+                      <ExternalLink className="size-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all flex-shrink-0 ml-2 mt-1" />
                     </div>
 
-                    <div className="flex flex-wrap gap-2">
+                    <div className="flex flex-wrap gap-2 pt-1">
                       {Array.isArray(site.server) ? (
                         site.server.map((s) => (
                           <span
                             key={s}
-                            className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${getServerBadgeStyle(s)}`}
+                            className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium ${getServerBadgeStyle(s)}`}
                           >
                             <Server className="size-3" />
                             {s}
@@ -454,7 +464,7 @@ export function SiteNavigation() {
                         ))
                       ) : (
                         <span
-                          className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${getServerBadgeStyle(site.server)}`}
+                          className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium ${getServerBadgeStyle(site.server)}`}
                         >
                           <Server className="size-3" />
                           {site.server}
@@ -462,7 +472,7 @@ export function SiteNavigation() {
                       )}
                       {site.cdn !== "-" && (
                         <span
-                          className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${getCdnBadgeStyle(site.cdn)}`}
+                          className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium ${getCdnBadgeStyle(site.cdn)}`}
                         >
                           <Shield className="size-3" />
                           {site.cdn}
@@ -477,14 +487,21 @@ export function SiteNavigation() {
         </div>
 
         {/* Footer */}
-        <footer className="mt-16 pt-8 border-t border-border">
-          <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
+        <footer className="mt-20 pt-10 border-t border-border/50">
+          <div className="text-center mb-6">
+            <p className="text-muted-foreground">
+              共 <span className="text-primary font-semibold">{categories.reduce((acc, cat) => acc + cat.sites.length, 0)}</span> 个站点
+              <span className="mx-2 text-border">·</span>
+              个人使用
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-muted-foreground">
             <span>Copyright © 2019 - 2025</span>
             <a
               href="https://beian.miit.gov.cn/"
               target="_blank"
               rel="noopener noreferrer"
-              className="hover:text-foreground transition-colors"
+              className="hover:text-primary transition-colors"
             >
               滇ICP备2025074424号
             </a>
@@ -492,15 +509,12 @@ export function SiteNavigation() {
               href="https://beian.mps.gov.cn"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
+              className="inline-flex items-center gap-1.5 hover:text-primary transition-colors"
             >
               <img src="/images/beian.png" alt="备案图标" className="size-4" />
               滇公网安备53250402000233号
             </a>
           </div>
-          <p className="text-center text-sm text-muted-foreground mt-4">
-            共 {categories.reduce((acc, cat) => acc + cat.sites.length, 0)} 个站点 · 个人使用
-          </p>
         </footer>
       </div>
     </div>