48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { ScrollReveal } from "@/components/scroll-reveal";
|
|
|
|
const story = [
|
|
{
|
|
title: "发现优质资源",
|
|
desc: "搜索、分类与推荐协同，让用户 3 秒定位所需软件。",
|
|
badge: "Discover",
|
|
},
|
|
{
|
|
title: "透明化下载细节",
|
|
desc: "版本、大小、更新日期、修改日志与安全标识完整可视化。",
|
|
badge: "Trust",
|
|
},
|
|
{
|
|
title: "自然引导转化",
|
|
desc: "公众号解锁、社群、VIP 与付费能力以产品化方式融入。",
|
|
badge: "Convert",
|
|
},
|
|
];
|
|
|
|
export function HomeScrollStory() {
|
|
return (
|
|
<section className="space-y-4 py-2">
|
|
<ScrollReveal>
|
|
<h2 className="text-xl font-semibold">滚动叙事体验</h2>
|
|
</ScrollReveal>
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
{story.map((item, idx) => (
|
|
<ScrollReveal key={item.title} delay={idx * 0.08}>
|
|
<motion.article
|
|
whileHover={{ y: -8, scale: 1.01 }}
|
|
className="card-glass relative overflow-hidden"
|
|
>
|
|
<div className="absolute -right-5 -top-5 h-24 w-24 rounded-full bg-cyan-300/20 blur-2xl" />
|
|
<p className="text-xs uppercase tracking-wider text-cyan-300">{item.badge}</p>
|
|
<h3 className="mt-2 text-lg font-semibold">{item.title}</h3>
|
|
<p className="mt-2 text-sm text-slate-300">{item.desc}</p>
|
|
</motion.article>
|
|
</ScrollReveal>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|