43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
|
|
const stats = [
|
|
{ value: "120,000+", label: "服务实体商户", highlight: "12万+" },
|
|
{ value: "500,000+", label: "日均交易笔数", highlight: "50万+" },
|
|
{ value: "300万+", label: "累计引流人次", highlight: "300万+" },
|
|
{ value: "20亿+", label: "平台年GMV流水", highlight: "20亿+" }
|
|
]
|
|
|
|
export function Stats() {
|
|
return (
|
|
<section className="py-0">
|
|
<div className="bg-gradient-to-r from-[#0A1931] via-[#185ADB] to-[#0A1931] text-white py-16 md:py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 items-center">
|
|
{stats.map((stat, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
className="text-center"
|
|
>
|
|
{/* 大号数字，突出显示 */}
|
|
<h3 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-[#FF6600] mb-2 md:mb-3 leading-none">
|
|
{stat.highlight}
|
|
</h3>
|
|
{/* 下方详细说明 */}
|
|
<p className="text-sm sm:text-base md:text-lg text-gray-300 font-medium uppercase tracking-wider">
|
|
{stat.label}
|
|
</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|