74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { Users } from 'lucide-react';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
|
|
import AnimatedCounter from './animated-counter';
|
|
import { useLanguage } from '../language';
|
|
|
|
export default function AboutCounter() {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const sectionRef = useRef<HTMLDivElement>(null);
|
|
|
|
const {t} = useLanguage()
|
|
|
|
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-1 gap-6 text-center'>
|
|
<div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
|
|
<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'>{t("about.stats.items.2.label")}</p>
|
|
</div>
|
|
<div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
|
|
<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'>{t("about.stats.items.4.label")}</p>
|
|
</div>
|
|
<div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
|
|
<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'>{t("about.stats.items.5.label")}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|