dios.one
69 lines
2.1 KiB
React
69 lines
2.1 KiB
React
import React, { useEffect, useState, useRef } from 'react'
|
|
import useReveal from '../hooks/useReveal'
|
|
|
|
function Counter({ end, suffix = '', duration = 2000 }) {
|
|
const [count, setCount] = useState(0)
|
|
const ref = useRef(null)
|
|
const started = useRef(false)
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
([entry]) => {
|
|
if (entry.isIntersecting && !started.current) {
|
|
started.current = true
|
|
const step = end / (duration / 16)
|
|
let current = 0
|
|
const timer = setInterval(() => {
|
|
current += step
|
|
if (current >= end) {
|
|
setCount(end)
|
|
clearInterval(timer)
|
|
} else {
|
|
setCount(Math.floor(current))
|
|
}
|
|
}, 16)
|
|
}
|
|
},
|
|
{ threshold: 0.5 }
|
|
)
|
|
if (ref.current) observer.observe(ref.current)
|
|
return () => observer.disconnect()
|
|
}, [end, duration])
|
|
|
|
return (
|
|
<span ref={ref}>
|
|
{count.toLocaleString()}{suffix}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
const stats = [
|
|
{ value: 40, suffix: '', label: 'Days to Transform', color: 'text-nova-primary' },
|
|
{ value: 5, suffix: '', label: 'Daily Habits', color: 'text-nova-accent' },
|
|
{ value: 40, suffix: '+', label: 'Days of History', color: 'text-nova-warning' },
|
|
{ value: 100, suffix: '%', label: 'Free to Use', color: 'text-nova-success' },
|
|
]
|
|
|
|
export default function Stats() {
|
|
const ref = useReveal()
|
|
|
|
return (
|
|
<section className="py-16 relative" ref={ref}>
|
|
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="reveal glass-card p-8 sm:p-10">
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{stats.map((stat, i) => (
|
|
<div key={i} className="text-center">
|
|
<p className={`text-4xl sm:text-5xl font-bold ${stat.color} mb-2`}>
|
|
<Counter end={stat.value} suffix={stat.suffix} />
|
|
</p>
|
|
<p className="text-nova-textSecondary text-sm font-medium">{stat.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|