71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
'use client';
|
||
|
||
import { Users } from 'lucide-react';
|
||
import { useEffect, useRef, useState } from 'react';
|
||
|
||
import AnimatedCounter from './animated-counter';
|
||
|
||
export default function AboutCounter() {
|
||
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 (
|
||
<div ref={sectionRef} className='my-8 grid grid-cols-3 gap-6 text-center'>
|
||
<div className='transform rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'>
|
||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||
<Users className='h-6 w-6 text-red-600' />
|
||
</div>
|
||
<h3 className='text-2xl font-bold text-gray-900'>
|
||
{isVisible ? <AnimatedCounter end={150} suffix='+' /> : '0+'}
|
||
</h3>
|
||
<p className='text-gray-600'>Сотрудников</p>
|
||
</div>
|
||
<div className='transform rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'>
|
||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||
<Users className='h-6 w-6 text-red-600' />
|
||
</div>
|
||
<h3 className='text-2xl font-bold text-gray-900'>
|
||
{isVisible ? <AnimatedCounter end={5} suffix='M+' /> : '0M+'}
|
||
</h3>
|
||
<p className='text-gray-600'>Литров топлива в месяц</p>
|
||
</div>
|
||
<div className='transform rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'>
|
||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||
<Users className='h-6 w-6 text-red-600' />
|
||
</div>
|
||
<h3 className='text-2xl font-bold text-gray-900'>
|
||
{isVisible ? (
|
||
<AnimatedCounter end={98} suffix='%' decimals={1} />
|
||
) : (
|
||
'0%'
|
||
)}
|
||
</h3>
|
||
<p className='text-gray-600'>Довольных клиентов</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|