50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
export function Statistics() {
|
|
const stats = [
|
|
{
|
|
number: '25',
|
|
symbol: '+',
|
|
label: 'Years Experience',
|
|
},
|
|
{
|
|
number: '450',
|
|
symbol: '+',
|
|
label: 'Families Saved',
|
|
},
|
|
{
|
|
number: '99',
|
|
symbol: '+',
|
|
label: 'Trained Staff',
|
|
},
|
|
{
|
|
number: '93',
|
|
symbol: '%',
|
|
label: 'Trusted Clients',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="w-full bg-black py-10 sm:py-20 lg:py-15">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 lg:gap-12">
|
|
{stats.map((stat, index) => (
|
|
<div key={index} className="flex flex-col items-center justify-center">
|
|
{/* Number and Symbol */}
|
|
<div className="flex items-baseline gap-2">
|
|
<span className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white">
|
|
{stat.number}
|
|
</span>
|
|
<span className="text-2xl sm:text-3xl font-bold text-red-600">{stat.symbol}</span>
|
|
</div>
|
|
|
|
{/* Label */}
|
|
<p className="text-sm sm:text-base text-gray-300 mt-4 text-center font-medium">
|
|
{stat.label}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|