feat: Implement iOS-style UI, payment, referral, and reading experience improvements

app/page.tsx

@@ -5,17 +5,20 @@ import { PurchaseSection } from "@/components/purchase-section"
 import { Footer } from "@/components/footer"
 import { getBookStructure } from "@/lib/book-file-system"
 
-// Force dynamic rendering if we want it to update on every request without rebuild
-// or use revalidation. For now, we can leave it default (static if no dynamic functions used, but fs usage makes it dynamic in dev usually).
-// Actually, in App Router, using fs directly in a Server Component usually makes it static at build time unless using dynamic functions.
-// To ensure it updates when files change in dev, it should be fine.
+// 强制动态渲染，确保内容实时更新
 export const dynamic = 'force-dynamic'; 
 
 export default async function HomePage() {
   const parts = getBookStructure()
 
   return (
-    <main className="min-h-screen bg-[#0a1628] text-white pb-20">
+    <main className="min-h-screen bg-black text-white pb-20 page-transition">
+      {/* 背景渐变效果 */}
+      <div className="fixed inset-0 bg-gradient-to-b from-black via-[#0a0a0a] to-[#111111] -z-10" />
+      
+      {/* 装饰性光晕 */}
+      <div className="fixed top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-[var(--app-brand)] opacity-[0.03] blur-[150px] rounded-full -z-10" />
+      
       <BookCover />
       <BookIntro />
       <TableOfContents parts={parts} />