56 lines
2.6 KiB
TypeScript
56 lines
2.6 KiB
TypeScript
export function BookIntro() {
|
||
return (
|
||
<section className="py-12 px-4">
|
||
<div className="max-w-2xl mx-auto">
|
||
{/* 毛玻璃卡片 */}
|
||
<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>
|
||
</blockquote>
|
||
|
||
{/* 作者签名 */}
|
||
<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">
|
||
卡
|
||
</div>
|
||
<div>
|
||
<p className="text-[var(--app-brand)] font-semibold">卡若</p>
|
||
<p className="text-[var(--app-text-tertiary)] text-xs">Soul派对房主理人</p>
|
||
</div>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|