refactor: redesign homepage and navigation based on trends

Update homepage layout and navigation to match current trends.

#VERCEL_SKIP

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>

app/about/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react"
 import { useRouter } from "next/navigation"
-import { ChevronLeft, Clock, MessageCircle, BookOpen, Users, Award, TrendingUp } from "lucide-react"
+import { Clock, MessageCircle, BookOpen, Users, Award, TrendingUp, ArrowLeft } from "lucide-react"
 import { QRCodeModal } from "@/components/modules/marketing/qr-code-modal"
 import { useStore } from "@/lib/store"
 
@@ -35,51 +35,42 @@ export default function AboutPage() {
   ]
 
   return (
-    <div className="min-h-screen bg-black text-white pb-24">
-      {/* 顶部导航 */}
+    <div className="min-h-screen bg-black text-white pb-8">
       <header className="sticky top-0 z-40 bg-black/90 backdrop-blur-xl border-b border-white/5">
-        <div className="px-4 py-3 flex items-center justify-between">
-          <button
-            onClick={() => router.back()}
-            className="w-9 h-9 rounded-full bg-[#1c1c1e] flex items-center justify-center"
-          >
-            <ChevronLeft className="w-5 h-5 text-gray-400" />
+        <div className="px-4 py-3 flex items-center">
+          <button onClick={() => router.back()} className="p-2 -ml-2 rounded-full hover:bg-white/5">
+            <ArrowLeft className="w-5 h-5 text-white" />
           </button>
-          <h1 className="text-lg font-semibold text-[#ffd700]">关于作者</h1>
-          <div className="w-9" />
+          <h1 className="text-lg font-semibold text-[#00CED1] flex-1 text-center pr-7">关于作者</h1>
         </div>
       </header>
 
-      <main className="px-4 py-6 space-y-6">
-        {/* 作者头像卡片 */}
-        <div className="p-6 rounded-2xl bg-gradient-to-br from-[#1c1c1e] to-[#2c2c2e] border border-white/5">
-          <div className="flex items-center gap-4">
-            <div className="w-20 h-20 rounded-full bg-gradient-to-br from-[#ff3b5c] to-[#ff6b8a] flex items-center justify-center text-3xl font-bold text-white flex-shrink-0">
+      <main className="px-4 py-6 space-y-5">
+        <div className="p-5 rounded-2xl bg-gradient-to-br from-[#1c1c1e] to-[#2c2c2e] border border-[#00CED1]/20">
+          <div className="flex flex-col items-center text-center">
+            <div className="w-20 h-20 rounded-full bg-gradient-to-br from-[#00CED1] to-[#20B2AA] flex items-center justify-center text-3xl font-bold text-white mb-4">
               {authorInfo.name.charAt(0)}
             </div>
-            <div className="flex-1 min-w-0">
-              <h2 className="text-xl font-bold text-white">{authorInfo.name}</h2>
-              <p className="text-gray-400 text-sm mt-1">{authorInfo.description}</p>
-              <div className="flex flex-wrap items-center gap-3 mt-3">
-                <span className="flex items-center gap-1 text-[#ff3b5c] text-xs bg-[#ff3b5c]/10 px-2 py-1 rounded-lg">
-                  <Clock className="w-3 h-3" />
-                  每日 {authorInfo.liveTime}
-                </span>
-                <span className="flex items-center gap-1 text-gray-400 text-xs">
-                  <MessageCircle className="w-3 h-3" />
-                  {authorInfo.platform}
-                </span>
-              </div>
+            <h2 className="text-xl font-bold text-white">{authorInfo.name}</h2>
+            <p className="text-gray-400 text-sm mt-1">{authorInfo.description}</p>
+            <div className="flex items-center gap-4 mt-4">
+              <span className="flex items-center gap-1 text-[#00CED1] text-xs bg-[#00CED1]/10 px-3 py-1.5 rounded-full">
+                <Clock className="w-3 h-3" />
+                每日 {authorInfo.liveTime}
+              </span>
+              <span className="flex items-center gap-1 text-gray-400 text-xs bg-white/5 px-3 py-1.5 rounded-full">
+                <MessageCircle className="w-3 h-3" />
+                {authorInfo.platform}
+              </span>
             </div>
           </div>
         </div>
 
-        {/* 数据统计 */}
-        <div className="grid grid-cols-4 gap-3">
+        <div className="grid grid-cols-4 gap-2">
           {stats.map((stat, index) => (
             <div key={index} className="p-3 rounded-xl bg-[#1c1c1e] border border-white/5 text-center">
-              <stat.icon className="w-5 h-5 text-[#ff3b5c] mx-auto mb-2" />
-              <p className="text-lg font-bold text-white">{stat.value}</p>
+              <stat.icon className="w-5 h-5 text-[#00CED1] mx-auto mb-2" />
+              <p className="text-base font-bold text-white">{stat.value}</p>
               <p className="text-gray-500 text-[10px]">{stat.label}</p>
             </div>
           ))}
@@ -87,40 +78,38 @@ export default function AboutPage() {
 
         {/* 关于这本书 */}
         <div className="p-5 rounded-2xl bg-[#1c1c1e] border border-white/5">
-          <h3 className="text-base font-semibold text-white mb-4">关于这本书</h3>
-          <div className="space-y-3 text-gray-300 text-sm leading-relaxed">
+          <h3 className="text-base font-semibold text-white mb-3">关于这本书</h3>
+          <div className="space-y-2 text-gray-300 text-sm leading-relaxed">
             <p>"这不是一本教你成功的鸡汤书。"</p>
             <p>这是我每天早上6点到9点,在Soul派对房和几百个陌生人分享的真实故事。</p>
-            <p className="text-[#ff3b5c] font-medium">"社会不是靠努力,是靠洞察与选择。"</p>
+            <p className="text-[#00CED1] font-medium">"社会不是靠努力,是靠洞察与选择。"</p>
           </div>
         </div>
 
-        {/* 创业历程 */}
         <div className="p-5 rounded-2xl bg-[#1c1c1e] border border-white/5">
-          <h3 className="text-base font-semibold text-white mb-4">创业历程</h3>
-          <div className="space-y-4">
+          <h3 className="text-base font-semibold text-white mb-3">创业历程</h3>
+          <div className="space-y-3">
             {milestones.map((item, index) => (
               <div key={index} className="flex gap-3">
                 <div className="flex flex-col items-center">
-                  <div className="w-2.5 h-2.5 rounded-full bg-[#ff3b5c]" />
+                  <div className="w-2 h-2 rounded-full bg-[#00CED1]" />
                   {index < milestones.length - 1 && <div className="w-0.5 flex-1 bg-gray-700 mt-1" />}
                 </div>
-                <div className="pb-4 flex-1">
-                  <p className="text-[#ff3b5c] font-semibold text-sm">{item.year}</p>
-                  <p className="text-gray-300 text-sm mt-0.5">{item.event}</p>
+                <div className="pb-3 flex-1">
+                  <p className="text-[#00CED1] font-semibold text-sm">{item.year}</p>
+                  <p className="text-gray-300 text-xs mt-0.5">{item.event}</p>
                 </div>
               </div>
             ))}
           </div>
         </div>
 
-        {/* 行动引导 */}
-        <div className="p-5 rounded-2xl bg-gradient-to-r from-[#ff3b5c]/10 to-[#ff6b8a]/10 border border-[#ff3b5c]/20">
+        <div className="p-5 rounded-2xl bg-gradient-to-r from-[#00CED1]/10 to-[#20B2AA]/10 border border-[#00CED1]/20">
           <h3 className="text-base font-semibold text-white mb-2">想听更多真实故事?</h3>
           <p className="text-gray-400 text-sm mb-4">每天早上6-9点,卡若在Soul派对房免费分享</p>
           <button
             onClick={() => setShowQRModal(true)}
-            className="w-full py-3 rounded-xl bg-[#ff3b5c] text-white font-medium flex items-center justify-center gap-2 active:scale-[0.98] transition-transform"
+            className="w-full py-3 rounded-xl bg-[#00CED1] text-white font-medium flex items-center justify-center gap-2 active:scale-[0.98] transition-transform"
           >
             <MessageCircle className="w-4 h-4" />
             加入派对群
@@ -128,35 +117,6 @@ export default function AboutPage() {
         </div>
       </main>
 
-      {/* 底部导航 */}
-      <nav className="fixed bottom-0 left-0 right-0 bg-[#1c1c1e]/95 backdrop-blur-xl border-t border-white/5 pb-safe-bottom">
-        <div className="px-4 py-3">
-          <div className="flex items-center justify-between gap-2">
-            <button
-              onClick={() => router.push("/")}
-              className="flex-1 py-2.5 rounded-xl bg-[#2c2c2e] text-white text-sm font-medium text-center active:bg-[#3c3c3e]"
-            >
-              首页
-            </button>
-            <button
-              onClick={() => router.push("/chapters")}
-              className="flex-1 py-2.5 rounded-xl bg-[#2c2c2e] text-white text-sm font-medium text-center active:bg-[#3c3c3e]"
-            >
-              目录
-            </button>
-            <button className="flex-1 py-2.5 rounded-xl bg-[#ff3b5c]/20 text-[#ff3b5c] text-sm font-medium text-center">
-              作者
-            </button>
-            <button
-              onClick={() => router.push("/my")}
-              className="flex-1 py-2.5 rounded-xl bg-[#2c2c2e] text-white text-sm font-medium text-center active:bg-[#3c3c3e]"
-            >
-              我的
-            </button>
-          </div>
-        </div>
-      </nav>
-
       <QRCodeModal isOpen={showQRModal} onClose={() => setShowQRModal(false)} />
     </div>
   )