112 lines
4.3 KiB
TypeScript
112 lines
4.3 KiB
TypeScript
"use client"
|
|
import { useState, useEffect } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { BookOpen } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { getFullBookPrice, getAllSections } from "@/lib/book-data"
|
|
import { useStore } from "@/lib/store"
|
|
import { AuthModal } from "./modules/auth/auth-modal"
|
|
import { PaymentModal } from "./modules/payment/payment-modal"
|
|
|
|
export function BookCover() {
|
|
const [fullBookPrice, setFullBookPrice] = useState(9.9)
|
|
const [sectionsCount, setSectionsCount] = useState(55)
|
|
const [isAuthOpen, setIsAuthOpen] = useState(false)
|
|
const [isPaymentOpen, setIsPaymentOpen] = useState(false)
|
|
const { isLoggedIn } = useStore()
|
|
|
|
useEffect(() => {
|
|
const sections = getAllSections()
|
|
setSectionsCount(sections.length)
|
|
setFullBookPrice(getFullBookPrice(sections.length))
|
|
}, [])
|
|
|
|
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>
|
|
</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>
|
|
|
|
{/* Main title - smaller on mobile */}
|
|
<h1 className="text-3xl font-bold mb-3 leading-tight text-app-text">
|
|
一场SOUL的
|
|
<br />
|
|
创业实验场
|
|
</h1>
|
|
|
|
{/* Subtitle */}
|
|
<p className="text-app-text-muted text-sm mb-4">来自Soul派对房的真实商业故事</p>
|
|
|
|
{/* Quote - smaller */}
|
|
<p className="text-app-text-muted/80 italic text-sm mb-6">"社会不是靠努力，是靠洞察与选择"</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="text-center">
|
|
<p className="text-xl font-bold text-app-brand">¥{fullBookPrice.toFixed(1)}</p>
|
|
<p className="text-app-text-muted text-xs">整本价格</p>
|
|
</div>
|
|
<div className="w-px h-8 bg-app-border" />
|
|
<div className="text-center">
|
|
<p className="text-xl font-bold text-app-text">{sectionsCount}</p>
|
|
<p className="text-app-text-muted text-xs">商业案例</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Author info - compact */}
|
|
<div className="flex justify-between items-center px-2 mb-6 text-sm">
|
|
<div className="text-left">
|
|
<p className="text-app-text-muted text-xs">作者</p>
|
|
<p className="text-app-brand font-medium">卡若</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>
|
|
</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"
|
|
>
|
|
<BookOpen className="w-5 h-5" />
|
|
立即阅读
|
|
</Button>
|
|
</Link>
|
|
|
|
<p className="text-app-text-muted text-xs mt-4">首章免费 · 部分章节3天后解锁</p>
|
|
</div>
|
|
|
|
{/* Modals */}
|
|
<AuthModal isOpen={isAuthOpen} onClose={() => setIsAuthOpen(false)} />
|
|
<PaymentModal
|
|
isOpen={isPaymentOpen}
|
|
onClose={() => setIsPaymentOpen(false)}
|
|
type="fullbook"
|
|
amount={fullBookPrice}
|
|
onSuccess={() => window.location.reload()}
|
|
/>
|
|
</section>
|
|
)
|
|
}
|