kit-ui/components/Stats.tsx

import { tools } from '@/lib/tools';
import { Box, Code2, Shield } from 'lucide-react';

const stats = [
  { value: tools.length, label: 'Tools available', icon: Box },
  { value: '100%', label: 'Open source', icon: Code2 },
  { value: '0', label: 'Data collected', icon: Shield },
];

export default function Stats() {
  return (
    <section className="relative py-4 px-6">
      <div className="max-w-5xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {stats.map((stat, i) => {
            const Icon = stat.icon;
            return (
              <div
                key={stat.label}
                className="glass rounded-2xl p-5 flex items-center gap-4 border border-white/[0.06]"
                style={{ animation: `slideUp 0.5s ease-out ${0.1 + i * 0.1}s both` }}
              >
                <div className="w-10 h-10 rounded-xl bg-primary/10 border border-primary/15 flex items-center justify-center shrink-0">
                  <Icon className="w-4.5 h-4.5 text-primary" />
                </div>
                <div>
                  <span className="text-2xl font-bold tabular-nums text-foreground block leading-none">
                    {stat.value}
                  </span>
                  <span className="text-[10px] font-mono text-muted-foreground/40 uppercase tracking-widest mt-1 block">
                    {stat.label}
                  </span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}