67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useRef, useState } from 'react';
|
||
|
||
import AnimatedCounter from '../shared/components/animated-counter';
|
||
|
||
export function StatsSection() {
|
||
const [isVisible, setIsVisible] = useState(false);
|
||
const sectionRef = useRef<HTMLDivElement>(null);
|
||
|
||
useEffect(() => {
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
const [entry] = entries;
|
||
if (entry.isIntersecting) {
|
||
setIsVisible(true);
|
||
observer.disconnect();
|
||
}
|
||
},
|
||
{
|
||
threshold: 0.1,
|
||
},
|
||
);
|
||
|
||
if (sectionRef.current) {
|
||
observer.observe(sectionRef.current);
|
||
}
|
||
|
||
return () => {
|
||
observer.disconnect();
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<section ref={sectionRef} className='bg-red-600 py-12 text-white'>
|
||
<div className='container mx-auto'>
|
||
<div className='grid grid-cols-2 gap-8 text-center md:grid-cols-4'>
|
||
<div className='space-y-2'>
|
||
<h3 className='text-3xl font-bold'>
|
||
{isVisible ? <AnimatedCounter end={25} suffix='+' /> : '0+'}
|
||
</h3>
|
||
<p className='text-sm text-white/80'>Заправок по стране</p>
|
||
</div>
|
||
<div className='space-y-2'>
|
||
<h3 className='text-3xl font-bold'>
|
||
{isVisible ? <AnimatedCounter end={10000} suffix='+' /> : '0+'}
|
||
</h3>
|
||
<p className='text-sm text-white/80'>Клиентов ежедневно</p>
|
||
</div>
|
||
<div className='space-y-2'>
|
||
<h3 className='text-3xl font-bold'>
|
||
{isVisible ? <AnimatedCounter end={15} /> : '0'}
|
||
</h3>
|
||
<p className='text-sm text-white/80'>Лет на рынке</p>
|
||
</div>
|
||
<div className='space-y-2'>
|
||
<h3 className='text-3xl font-bold'>
|
||
{isVisible ? <AnimatedCounter end={24} suffix='/7' /> : '0/7'}
|
||
</h3>
|
||
<p className='text-sm text-white/80'>Работаем круглосуточно</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|