2026-01-09 11:58:08 +08:00
|
|
|
|
export function BookIntro() {
|
|
|
|
|
|
return (
|
2026-01-09 12:24:15 +08:00
|
|
|
|
<section className="py-12 px-4">
|
2026-01-09 11:58:08 +08:00
|
|
|
|
<div className="max-w-2xl mx-auto">
|
2026-01-09 12:24:15 +08:00
|
|
|
|
{/* 毛玻璃卡片 */}
|
|
|
|
|
|
<div className="glass-card-heavy p-6 sm:p-8">
|
|
|
|
|
|
{/* 引用图标 */}
|
|
|
|
|
|
<div className="w-10 h-10 rounded-xl bg-[var(--app-brand-light)] flex items-center justify-center mb-6">
|
|
|
|
|
|
<svg className="w-5 h-5 text-[var(--app-brand)]" fill="currentColor" viewBox="0 0 24 24">
|
|
|
|
|
|
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 引用内容 */}
|
|
|
|
|
|
<blockquote className="text-lg sm:text-xl text-white leading-relaxed mb-6 font-light">
|
|
|
|
|
|
这不是一本教你成功的鸡汤书。
|
|
|
|
|
|
<span className="text-[var(--app-text-secondary)]">
|
|
|
|
|
|
这是我每天早上6点到9点，在Soul派对房和几百个陌生人分享的真实故事。
|
|
|
|
|
|
</span>
|
2026-01-09 11:58:08 +08:00
|
|
|
|
</blockquote>
|
|
|
|
|
|
|
2026-01-09 12:24:15 +08:00
|
|
|
|
{/* 作者签名 */}
|
|
|
|
|
|
<div className="flex items-center gap-3 mb-8">
|
|
|
|
|
|
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-[var(--app-brand)] to-[var(--ios-teal)] flex items-center justify-center text-white font-semibold text-sm">
|
|
|
|
|
|
卡
|
2026-01-09 11:58:08 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
2026-01-09 12:24:15 +08:00
|
|
|
|
<p className="text-[var(--app-brand)] font-semibold">卡若</p>
|
|
|
|
|
|
<p className="text-[var(--app-text-tertiary)] text-xs">Soul派对房主理人</p>
|
2026-01-09 11:58:08 +08:00
|
|
|
|
</div>
|
2026-01-09 12:24:15 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 分隔线 */}
|
|
|
|
|
|
<div className="separator-ios mx-0 mb-6" />
|
|
|
|
|
|
|
|
|
|
|
|
{/* 统计数据 */}
|
|
|
|
|
|
<div className="grid grid-cols-3 gap-4 text-center">
|
|
|
|
|
|
<div className="p-3">
|
|
|
|
|
|
<p className="text-2xl sm:text-3xl font-bold text-white mb-1">55+</p>
|
|
|
|
|
|
<p className="text-[var(--app-text-tertiary)] text-xs">真实案例</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="p-3 border-x border-[var(--app-separator)]">
|
|
|
|
|
|
<p className="text-2xl sm:text-3xl font-bold text-white mb-1">11</p>
|
|
|
|
|
|
<p className="text-[var(--app-text-tertiary)] text-xs">核心章节</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="p-3">
|
|
|
|
|
|
<p className="text-2xl sm:text-3xl font-bold text-white mb-1">100+</p>
|
|
|
|
|
|
<p className="text-[var(--app-text-tertiary)] text-xs">商业洞察</p>
|
2026-01-09 11:58:08 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
