Stats

Key metrics display section.

Usage

import { Stats } from '@/components/landing';

<Stats />

Location: src/components/landing/Stats.tsx

Features

• 4-column grid (2 on mobile)
• Large numbers with labels
• Dark background

Customization

Edit the stats array in Stats.tsx:

const stats: Stat[] = [
  { valueKey: 'users.value', labelKey: 'users.label' },      // "10,000+" / "Developers"
  { valueKey: 'uptime.value', labelKey: 'uptime.label' },    // "99.9%" / "Uptime"
  { valueKey: 'support.value', labelKey: 'support.label' },  // "24/7" / "Support"
  { valueKey: 'countries.value', labelKey: 'countries.label' }, // "50+" / "Countries"
];

i18n

Update translations:

{
  "landing": {
    "stats": {
      "users": { "value": "10,000+", "label": "Active Users" },
      "uptime": { "value": "99.9%", "label": "Uptime" },
      "support": { "value": "24/7", "label": "Support" },
      "countries": { "value": "50+", "label": "Countries" }
    }
  }
}

Styling

The default styling uses a dark background:

<section className="py-16 bg-zinc-900 dark:bg-zinc-950">
  <div className="container mx-auto px-4">
    <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
      {stats.map((stat, index) => (
        <div key={index} className="text-center">
          <div className="text-4xl font-bold text-white mb-2">
            {t(stat.valueKey)}
          </div>
          <div className="text-zinc-400">
            {t(stat.labelKey)}
          </div>
        </div>
      ))}
    </div>
  </div>
</section>

Animated Numbers

For animated counting numbers, you can add a counter effect:

import { useEffect, useState } from 'react';

function AnimatedNumber({ value }: { value: number }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const duration = 2000;
    const steps = 60;
    const increment = value / steps;
    let current = 0;

    const timer = setInterval(() => {
      current += increment;
      if (current >= value) {
        setCount(value);
        clearInterval(timer);
      } else {
        setCount(Math.floor(current));
      }
    }, duration / steps);

    return () => clearInterval(timer);
  }, [value]);

  return <span>{count.toLocaleString()}</span>;
}