feat: refactor homepage and navigation structure

Remove unused pages, redesign author page, update homepage with new chapter display, and modify bottom navigation.

#VERCEL_SKIP

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

app/about/page.tsx

@@ -1,15 +1,16 @@
 "use client"
 
-import Link from "next/link"
-import { ChevronLeft, Clock, MessageCircle, BookOpen, Users, Award, TrendingUp } from "lucide-react"
-import { Button } from "@/components/ui/button"
 import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { ChevronLeft, Clock, MessageCircle, BookOpen, Users, Award, TrendingUp } from "lucide-react"
 import { QRCodeModal } from "@/components/modules/marketing/qr-code-modal"
 import { useStore } from "@/lib/store"
 
 export default function AboutPage() {
+  const router = useRouter()
   const [showQRModal, setShowQRModal] = useState(false)
   const { settings } = useStore()
+
   const authorInfo = settings?.authorInfo || {
     name: "卡若",
     description: "连续创业者,私域运营专家",
@@ -17,6 +18,13 @@ export default function AboutPage() {
     platform: "Soul派对房",
   }
 
+  const stats = [
+    { icon: BookOpen, value: "55+", label: "真实案例" },
+    { icon: Users, value: "10000+", label: "派对房听众" },
+    { icon: Award, value: "15年", label: "创业经验" },
+    { icon: TrendingUp, value: "3000万", label: "最高年流水" },
+  ]
+
   const milestones = [
     { year: "2012", event: "开始做游戏推广,从魔兽世界外挂代理起步" },
     { year: "2015", event: "转型电商,做天猫虚拟充值,月流水380万" },
@@ -26,126 +34,129 @@ export default function AboutPage() {
     { year: "2024", event: "在Soul派对房每日直播,分享真实商业故事" },
   ]
 
-  const stats = [
-    { icon: BookOpen, value: "55+", label: "真实案例" },
-    { icon: Users, value: "10000+", label: "派对房听众" },
-    { icon: Award, value: "15年", label: "创业经验" },
-    { icon: TrendingUp, value: "3000万", label: "最高年流水" },
-  ]
-
   return (
-    <div className="min-h-screen bg-[#0a1628] text-white pb-20">
-      {/* Header */}
-      <header className="sticky top-0 z-50 bg-[#0a1628]/90 backdrop-blur-md border-b border-gray-800">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center">
-          <Link href="/" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
-            <ChevronLeft className="w-5 h-5" />
-            <span>返回</span>
-          </Link>
-          <h1 className="flex-1 text-center text-lg font-semibold">关于作者</h1>
-          <div className="w-16" />
+    <div className="min-h-screen bg-black text-white pb-24">
+      {/* 顶部导航 */}
+      <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" />
+          </button>
+          <h1 className="text-lg font-semibold text-[#ffd700]">关于作者</h1>
+          <div className="w-9" />
         </div>
       </header>
 
-      <main className="max-w-4xl mx-auto px-4 py-8">
-        {/* Author Card */}
-        <div className="bg-gradient-to-br from-[#38bdac]/20 to-[#0f2137] rounded-2xl p-8 border border-[#38bdac]/30 mb-8">
-          <div className="flex flex-col md:flex-row items-center gap-6">
-            <div className="w-24 h-24 rounded-full bg-gradient-to-br from-[#38bdac] to-[#1a5a50] flex items-center justify-center text-4xl font-bold text-white">
+      <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">
               {authorInfo.name.charAt(0)}
             </div>
-            <div className="text-center md:text-left flex-1">
-              <h2 className="text-2xl font-bold text-white mb-2">{authorInfo.name}</h2>
-              <p className="text-gray-400 mb-4">{authorInfo.description}</p>
-              <div className="flex items-center justify-center md:justify-start gap-4 text-sm">
-                <span className="flex items-center gap-1 text-[#38bdac]">
-                  <Clock className="w-4 h-4" />
+            <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">
-                  <MessageCircle className="w-4 h-4" />
+                <span className="flex items-center gap-1 text-gray-400 text-xs">
+                  <MessageCircle className="w-3 h-3" />
                   {authorInfo.platform}
                 </span>
               </div>
             </div>
-            <Button onClick={() => setShowQRModal(true)} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
-              <MessageCircle className="w-4 h-4 mr-2" />
-              加入派对群
-            </Button>
           </div>
         </div>
 
-        {/* Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        {/* 数据统计 */}
+        <div className="grid grid-cols-4 gap-3">
           {stats.map((stat, index) => (
-            <div
-              key={index}
-              className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-4 border border-gray-700/50 text-center"
-            >
-              <stat.icon className="w-6 h-6 text-[#38bdac] mx-auto mb-2" />
-              <p className="text-2xl font-bold text-white">{stat.value}</p>
-              <p className="text-gray-400 text-sm">{stat.label}</p>
+            <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>
+              <p className="text-gray-500 text-[10px]">{stat.label}</p>
             </div>
           ))}
         </div>
 
-        {/* Introduction */}
-        <div className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-6 border border-gray-700/50 mb-8">
-          <h3 className="text-lg font-semibold text-white mb-4">关于这本书</h3>
-          <div className="space-y-4 text-gray-300 leading-relaxed">
+        {/* 关于这本书 */}
+        <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">
             <p>"这不是一本教你成功的鸡汤书。"</p>
-            <p>
-              这是我每天早上6点到9点,在Soul派对房和几百个陌生人分享的真实故事。 有人来找项目,有人来找钱,有人来找方向。
-            </p>
-            <p>
-              我见过凌晨四点还在撸运费险的年轻人,见过七十岁还在开滴滴做生意的老人,
-              见过一个月赚七八块却拼命倒卖游戏金币的大学生。
-            </p>
-            <p className="text-[#38bdac] font-semibold">"社会不是靠努力,是靠洞察与选择。"</p>
-            <p>
-              这本书,就是把那些在派对房里讲过的、能让人清醒的故事,整理成文字。每个案例都真实发生过,每个教训都是用钱换来的。
-            </p>
+            <p>这是我每天早上6点到9点,在Soul派对房和几百个陌生人分享的真实故事。</p>
+            <p className="text-[#ff3b5c] font-medium">"社会不是靠努力,是靠洞察与选择。"</p>
           </div>
         </div>
 
-        {/* Timeline */}
-        <div className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-6 border border-gray-700/50 mb-8">
-          <h3 className="text-lg font-semibold text-white mb-6">创业历程</h3>
+        {/* 创业历程 */}
+        <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">
             {milestones.map((item, index) => (
-              <div key={index} className="flex gap-4">
+              <div key={index} className="flex gap-3">
                 <div className="flex flex-col items-center">
-                  <div className="w-3 h-3 rounded-full bg-[#38bdac]" />
-                  {index < milestones.length - 1 && <div className="w-0.5 h-full bg-gray-700 mt-1" />}
+                  <div className="w-2.5 h-2.5 rounded-full bg-[#ff3b5c]" />
+                  {index < milestones.length - 1 && <div className="w-0.5 flex-1 bg-gray-700 mt-1" />}
                 </div>
-                <div className="pb-4">
-                  <p className="text-[#38bdac] font-semibold">{item.year}</p>
-                  <p className="text-gray-300">{item.event}</p>
+                <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>
               </div>
             ))}
           </div>
         </div>
 
-        {/* CTA */}
-        <div className="bg-gradient-to-r from-[#38bdac]/10 to-[#1a3a4a]/50 rounded-2xl p-6 border border-[#38bdac]/30 text-center">
-          <h3 className="text-xl font-semibold text-white mb-2">想听更多真实故事?</h3>
-          <p className="text-gray-400 mb-6">每天早上6-9点,卡若在Soul派对房免费分享</p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button onClick={() => setShowQRModal(true)} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
-              <MessageCircle className="w-4 h-4 mr-2" />
-              加入派对群
-            </Button>
-            <Link href="/chapters">
-              <Button variant="outline" className="border-gray-600 text-white hover:bg-gray-700/50 bg-transparent">
-                <BookOpen className="w-4 h-4 mr-2" />
-                开始阅读
-              </Button>
-            </Link>
-          </div>
+        {/* 行动引导 */}
+        <div className="p-5 rounded-2xl bg-gradient-to-r from-[#ff3b5c]/10 to-[#ff6b8a]/10 border border-[#ff3b5c]/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"
+          >
+            <MessageCircle className="w-4 h-4" />
+            加入派对群
+          </button>
         </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>
   )