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

components/book-cover.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useState, useEffect } from "react"
 import { Button } from "@/components/ui/button"
-import { BookOpen } from "lucide-react"
+import { BookOpen, Sparkles } from "lucide-react"
 import Link from "next/link"
 import { getFullBookPrice, getAllSections } from "@/lib/book-data"
 import { useStore } from "@/lib/store"
@@ -22,82 +22,95 @@ export function BookCover() {
   }, [])
 
   return (
-    <section className="relative min-h-[85vh] flex flex-col items-center justify-center px-4 py-8 overflow-hidden bg-app-bg">
-      {/* Background decorative lines - simplified */}
-      <div className="absolute inset-0 overflow-hidden opacity-50">
-        <svg className="absolute w-full h-full" viewBox="0 0 800 600" fill="none">
-          <path
-            d="M-100 300 Q 200 100, 400 200 T 900 150"
-            stroke="rgba(56, 189, 172, 0.2)"
-            strokeWidth="1"
-            strokeDasharray="8 8"
-            fill="none"
-          />
-        </svg>
+    <section className="relative min-h-[90vh] flex flex-col items-center justify-center px-4 py-12 overflow-hidden safe-top">
+      {/* 动态光效背景 */}
+      <div className="absolute inset-0 overflow-hidden">
+        {/* 主光晕 */}
+        <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[500px] h-[500px] bg-[var(--app-brand)] opacity-[0.08] blur-[120px] rounded-full animate-pulse" />
+        {/* 次光晕 */}
+        <div className="absolute bottom-1/4 left-1/4 w-[300px] h-[300px] bg-[var(--ios-blue)] opacity-[0.05] blur-[100px] rounded-full" />
+        <div className="absolute top-1/3 right-1/4 w-[200px] h-[200px] bg-[var(--ios-purple)] opacity-[0.04] blur-[80px] rounded-full" />
       </div>
 
-      {/* Content - more compact for mobile */}
-      <div className="relative z-10 w-full max-w-sm mx-auto text-center">
-        {/* Soul badge */}
-        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-app-card/80 backdrop-blur-md border border-app-brand/30 mb-6">
-          <span className="text-app-brand text-sm font-medium">Soul · 派对房</span>
+      {/* 装饰性网格线 */}
+      <div className="absolute inset-0 opacity-[0.02]" style={{
+        backgroundImage: `linear-gradient(var(--app-text) 1px, transparent 1px), linear-gradient(90deg, var(--app-text) 1px, transparent 1px)`,
+        backgroundSize: '60px 60px'
+      }} />
+
+      {/* 内容区域 */}
+      <div className="relative z-10 w-full max-w-md mx-auto text-center">
+        {/* Soul 徽章 - 毛玻璃效果 */}
+        <div className="inline-flex items-center gap-2 px-4 py-2 glass-card mb-8">
+          <Sparkles className="w-4 h-4 text-[var(--app-brand)]" />
+          <span className="text-[var(--app-brand)] text-sm font-medium tracking-wide">Soul · 派对房</span>
         </div>
 
-        {/* Main title - smaller on mobile */}
-        <h1 className="text-3xl font-bold mb-3 leading-tight text-app-text">
+        {/* 主标题 - iOS风格大字体 */}
+        <h1 className="text-4xl sm:text-5xl font-bold mb-4 leading-[1.15] text-white tracking-tight">
           一场SOUL的
           <br />
-          创业实验场
+          <span className="bg-gradient-to-r from-[var(--app-brand)] to-[var(--ios-teal)] bg-clip-text text-transparent">
+            创业实验场
+          </span>
         </h1>
 
-        {/* Subtitle */}
-        <p className="text-app-text-muted text-sm mb-4">来自Soul派对房的真实商业故事</p>
+        {/* 副标题 */}
+        <p className="text-[var(--app-text-secondary)] text-base mb-4">
+          来自Soul派对房的真实商业故事
+        </p>
 
-        {/* Quote - smaller */}
-        <p className="text-app-text-muted/80 italic text-sm mb-6">"社会不是靠努力，是靠洞察与选择"</p>
+        {/* 引用语 */}
+        <p className="text-[var(--app-text-tertiary)] italic text-sm mb-8 px-4">
+          "社会不是靠努力，是靠洞察与选择"
+        </p>
 
-        {/* Price info - compact card */}
-        <div className="bg-app-card/60 backdrop-blur-md rounded-xl p-4 mb-6 border border-app-border">
-          <div className="flex items-center justify-center gap-6 text-sm">
+        {/* 价格信息卡片 - 毛玻璃效果 */}
+        <div className="glass-card-light p-5 mb-8">
+          <div className="flex items-center justify-center gap-8">
             <div className="text-center">
-              <p className="text-xl font-bold text-app-brand">¥{fullBookPrice.toFixed(1)}</p>
-              <p className="text-app-text-muted text-xs">整本价格</p>
+              <p className="text-3xl font-bold text-[var(--app-brand)] glow-text">
+                ¥{fullBookPrice.toFixed(1)}
+              </p>
+              <p className="text-[var(--app-text-tertiary)] text-xs mt-1">整本价格</p>
             </div>
-            <div className="w-px h-8 bg-app-border" />
+            <div className="w-px h-12 bg-[var(--app-separator)]" />
             <div className="text-center">
-              <p className="text-xl font-bold text-app-text">{sectionsCount}</p>
-              <p className="text-app-text-muted text-xs">商业案例</p>
+              <p className="text-3xl font-bold text-white">{sectionsCount}</p>
+              <p className="text-[var(--app-text-tertiary)] text-xs mt-1">商业案例</p>
             </div>
           </div>
         </div>
 
-        {/* Author info - compact */}
-        <div className="flex justify-between items-center px-2 mb-6 text-sm">
+        {/* 作者信息 */}
+        <div className="flex justify-between items-center px-4 mb-8">
           <div className="text-left">
-            <p className="text-app-text-muted text-xs">作者</p>
-            <p className="text-app-brand font-medium">卡若</p>
+            <p className="text-[var(--app-text-tertiary)] text-xs mb-0.5">作者</p>
+            <p className="text-[var(--app-brand)] font-semibold">卡若</p>
           </div>
           <div className="text-right">
-            <p className="text-app-text-muted text-xs">每日直播</p>
-            <p className="text-app-text font-medium">06:00-09:00</p>
+            <p className="text-[var(--app-text-tertiary)] text-xs mb-0.5">每日直播</p>
+            <p className="text-white font-semibold">06:00-09:00</p>
           </div>
         </div>
 
-        {/* CTA Button */}
-        <Link href="/chapters" className="block">
-          <Button
-            size="lg"
-            className="w-full bg-app-brand hover:bg-app-brand-hover text-white py-5 text-base rounded-xl flex items-center justify-center gap-2"
-          >
+        {/* CTA按钮 - iOS风格 */}
+        <Link href="/chapters" className="block touch-feedback">
+          <button className="btn-ios w-full flex items-center justify-center gap-2 glow">
             <BookOpen className="w-5 h-5" />
-            立即阅读
-          </Button>
+            <span>立即阅读</span>
+          </button>
         </Link>
 
-        <p className="text-app-text-muted text-xs mt-4">首章免费 · 部分章节3天后解锁</p>
+        <p className="text-[var(--app-text-tertiary)] text-xs mt-5">
+          首章免费 · 部分章节3天后解锁
+        </p>
       </div>
 
-      {/* Modals */}
+      {/* 底部渐变遮罩 */}
+      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black to-transparent" />
+
+      {/* 弹窗 */}
       <AuthModal isOpen={isAuthOpen} onClose={() => setIsAuthOpen(false)} />
       <PaymentModal
         isOpen={isPaymentOpen}