27 lines
1010 B
TypeScript
27 lines
1010 B
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import { ScrollReveal } from "@/components/scroll-reveal";
|
||
|
||
export function DetailScrollShowcase({ name }: { name: string }) {
|
||
return (
|
||
<section className="space-y-4">
|
||
<ScrollReveal>
|
||
<h3 className="text-lg font-semibold">{name} · 深度特性分段</h3>
|
||
</ScrollReveal>
|
||
<ScrollReveal delay={0.06}>
|
||
<motion.div
|
||
whileInView={{ backgroundPositionX: ["0%", "100%"] }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 1.6, ease: "linear" }}
|
||
className="card-glass bg-[linear-gradient(120deg,rgba(34,211,238,.08),rgba(139,92,246,.12),rgba(34,211,238,.08))] bg-[length:220%_100%]"
|
||
>
|
||
<p className="text-sm text-slate-300">
|
||
分段滚动将“下载信息 -> 历史版本 -> 更新日志 -> 解锁引导”串成连续阅读路径，提升理解与转化效率。
|
||
</p>
|
||
</motion.div>
|
||
</ScrollReveal>
|
||
</section>
|
||
);
|
||
}
|