kit-ui/components/ToolsGrid.tsx

import ToolCard from './ToolCard';
import { tools } from '@/lib/tools';

export default function ToolsGrid() {
  return (
    <section id="tools" className="relative py-16 px-6">
      <div className="max-w-5xl mx-auto">

        {/* Section heading */}
        <div
          className="flex items-end justify-between mb-8"
          style={{ animation: 'fadeIn 0.5s ease-out both' }}
        >
          <div>
            <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest block mb-1">
              Available Tools
            </span>
            <p className="text-xs text-muted-foreground/40">
              {tools.length} tools — everything runs in your browser
            </p>
          </div>
          <span className="text-[9px] font-mono text-muted-foreground/25 tabular-nums hidden sm:block">
            {tools.length.toString().padStart(2, '0')} modules
          </span>
        </div>

        {/* Tools grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
          {tools.map((tool, index) => (
            <ToolCard
              key={tool.href}
              title={tool.shortTitle}
              description={tool.summary}
              icon={tool.icon}
              url={tool.href}
              badges={tool.badges}
              index={index}
            />
          ))}
        </div>
      </div>
    </section>
  );
}