145 lines
6.7 KiB
TypeScript
145 lines
6.7 KiB
TypeScript
import { BookCover } from "@/components/book-cover"
|
||
import { BookIntro } from "@/components/book-intro"
|
||
import { PurchaseSection } from "@/components/purchase-section"
|
||
import { Footer } from "@/components/footer"
|
||
import { MatchSection } from "@/components/match-section"
|
||
import { getBookStructure } from "@/lib/book-file-system"
|
||
import { Home, Sparkles, User } from "lucide-react"
|
||
import Link from "next/link"
|
||
|
||
export default async function HomePage() {
|
||
const parts = getBookStructure()
|
||
const totalChapters = parts.reduce((acc, part) => acc + part.chapters.length, 0)
|
||
const totalSections = parts.reduce((acc, part) => {
|
||
return acc + part.chapters.reduce((sum, ch) => sum + ch.sections.length, 0)
|
||
}, 0)
|
||
|
||
return (
|
||
<main className="min-h-screen bg-black text-white pb-24 relative overflow-x-hidden">
|
||
{/* 顶部标签 */}
|
||
<div className="flex justify-center pt-8 mb-6">
|
||
<div className="glass-card px-4 py-1.5 flex items-center gap-2 border-[0.5px] border-white/10 rounded-full">
|
||
<Sparkles className="w-3.5 h-3.5 text-[#30D158]" />
|
||
<span className="text-xs font-medium text-white/80 tracking-wider">Soul · 派对房</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 核心标题区 */}
|
||
<div className="px-8 text-center mb-10">
|
||
<h1 className="text-[40px] font-bold leading-tight mb-4 tracking-tight">
|
||
一场SOUL的<br />
|
||
<span className="text-[#30D158]">创业实验场</span>
|
||
</h1>
|
||
<p className="text-white/60 text-lg mb-4">来自Soul派对房的真实商业故事</p>
|
||
<p className="text-[#30D158]/80 italic text-sm">“社会不是靠努力，是靠洞察与选择”</p>
|
||
</div>
|
||
|
||
{/* 核心数据卡片 */}
|
||
<div className="px-6 mb-10">
|
||
<div className="glass-card grid grid-cols-2 p-6 divide-x divide-white/10">
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-[#30D158] mb-1">¥9.9</div>
|
||
<div className="text-[10px] text-white/40">整本价格</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-white mb-1">{totalSections}</div>
|
||
<div className="text-[10px] text-white/40">商业案例</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 作者卡片 */}
|
||
<div className="px-6 mb-10">
|
||
<div className="flex items-center justify-between px-2">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-full bg-[#30D158] flex items-center justify-center text-black font-bold text-sm">卡若</div>
|
||
<div>
|
||
<div className="text-xs text-white/40 mb-0.5">作者</div>
|
||
<div className="text-sm font-medium">卡若</div>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-xs text-white/40 mb-0.5">每日直播</div>
|
||
<div className="text-sm font-medium text-[#30D158]">06:00-09:00</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 立即阅读按钮 */}
|
||
<div className="px-6 mb-6">
|
||
<Link href="/read/preface" className="btn-ios w-full py-4 text-lg shadow-[0_0_20px_rgba(48,209,88,0.2)]">
|
||
<div className="flex items-center gap-2">
|
||
<Home className="w-5 h-5" />
|
||
<span>立即阅读</span>
|
||
</div>
|
||
</Link>
|
||
<p className="text-center text-[10px] text-white/30 mt-3">首章免费 · 部分章节3天后解锁</p>
|
||
</div>
|
||
|
||
{/* 引用寄语 */}
|
||
<div className="px-6 mb-10">
|
||
<div className="glass-card p-8 relative overflow-hidden">
|
||
<div className="absolute top-0 left-0 w-1 h-full bg-[#30D158]"></div>
|
||
<div className="text-[#30D158] mb-4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C20.1216 16 21.017 16.8954 21.017 18V21C21.017 22.1046 20.1216 23 19.017 23H16.017C14.9124 23 14.017 22.1046 14.017 21ZM14.017 21C14.017 19.8954 13.1216 19 12.017 19H9.017C7.91243 19 7.017 19.8954 7.017 21V23C7.017 22.1046 7.91243 23 9.017 23H12.017C13.1216 23 14.017 22.1046 14.017 21ZM5.017 21V18C5.017 16.8954 5.91243 16 7.017 16H10.017C11.1216 16 12.017 16.8954 12.017 18V21C12.017 22.1046 11.1216 23 10.017 23H7.017C5.91243 23 5.017 22.1046 5.017 21Z" />
|
||
</svg>
|
||
</div>
|
||
<p className="text-white/80 leading-relaxed text-sm mb-6">
|
||
这不是一本教你成功的鸡汤书。这是我每天早上6点到9点，在Soul派对房和几百个陌生人分享的真实故事。
|
||
</p>
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-[10px]">卡</div>
|
||
<div>
|
||
<div className="text-xs font-medium">卡若</div>
|
||
<div className="text-[10px] text-white/30">Soul派对房主理人</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 核心亮点数据 */}
|
||
<div className="px-6 mb-16">
|
||
<div className="grid grid-cols-3 gap-4">
|
||
<div className="text-center">
|
||
<div className="text-xl font-bold mb-1 tracking-tight">55+</div>
|
||
<div className="text-[10px] text-white/40">真实案例</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-xl font-bold mb-1 tracking-tight">11</div>
|
||
<div className="text-[10px] text-white/40">核心章节</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-xl font-bold mb-1 tracking-tight">100+</div>
|
||
<div className="text-[10px] text-white/40">商业洞察</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 购买区域 */}
|
||
<PurchaseSection />
|
||
|
||
{/* 匹配区域预览 */}
|
||
<MatchSection />
|
||
|
||
<Footer />
|
||
|
||
{/* 底部导航 */}
|
||
<nav className="fixed bottom-0 left-0 right-0 h-20 bg-black/80 backdrop-blur-xl border-t border-white/5 flex items-center justify-around px-6 z-50">
|
||
<Link href="/" className="flex flex-col items-center gap-1 text-[#30D158]">
|
||
<Home className="w-6 h-6" />
|
||
<span className="text-[10px] font-medium">首页</span>
|
||
</Link>
|
||
<Link href="/match" className="flex flex-col items-center gap-1 text-white/40">
|
||
<Sparkles className="w-6 h-6" />
|
||
<span className="text-[10px] font-medium">匹配书友</span>
|
||
</Link>
|
||
<Link href="/my" className="flex flex-col items-center gap-1 text-white/40">
|
||
<User className="w-6 h-6" />
|
||
<span className="text-[10px] font-medium">我的</span>
|
||
</Link>
|
||
</nav>
|
||
</main>
|
||
)
|
||
}
|