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="mb-10"
          style={{ animation: 'fadeIn 0.5s ease-out both' }}
        >
          <h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-foreground">
            Available{' '}
            <span className="bg-gradient-to-r from-primary via-violet-400 to-pink-400 bg-clip-text text-transparent">
              Tools
            </span>
          </h2>
          <p className="text-sm text-muted-foreground/40 mt-2">
            {tools.length} tools &mdash; everything runs in your browser, no data leaves your machine
          </p>
        </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>
  );
}