kit-ui/components/ToolsGrid.tsx

'use client';

import { motion } from 'framer-motion';
import ToolCard from './ToolCard';

const tools = [
  {
    title: 'Vert',
    description: 'Privacy-focused file converter that processes images, audio, and documents locally on your device. No file size limits, completely open source.',
    url: 'https://vert.kit.pivoine.art',
    gradient: 'gradient-green-teal',
    badges: ['Privacy', 'Open Source', 'Free'],
    icon: (
      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
      </svg>
    ),
  },
  {
    title: 'Paint',
    description: 'An advanced image editor running in your browser. Edit photos, create graphics, and more.',
    url: 'https://paint.kit.pivoine.art',
    gradient: 'gradient-orange-pink',
    badges: ['Browser-Based', 'Free'],
    icon: (
      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
      </svg>
    ),
  },
  {
    title: 'Pastel',
    description: 'Modern color manipulation toolkit with palette generation, accessibility testing, and format conversion. Supports hex, RGB, HSL, Lab, and more.',
    url: 'https://pastel.kit.pivoine.art',
    gradient: 'gradient-indigo-purple',
    badges: ['Open Source', 'WCAG', 'Free'],
    icon: (
      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
        <circle cx="8.5" cy="8.5" r="1.5" fill="currentColor" />
        <circle cx="15" cy="8.5" r="1.5" fill="currentColor" />
        <circle cx="8.5" cy="15" r="1.5" fill="currentColor" />
      </svg>
    ),
  },
  {
    title: 'Stirling',
    description: 'Powerful locally-hosted PDF toolkit with 50+ operations. Merge, split, convert, OCR, sign, and manipulate PDFs with complete privacy.',
    url: 'https://stirling.kit.pivoine.art',
    gradient: 'gradient-purple-blue',
    badges: ['Privacy', 'Open Source', 'Free'],
    icon: (
      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 12h4m-4 4h4" />
      </svg>
    ),
  },
];

export default function ToolsGrid() {
  return (
    <section id="tools" className="relative py-20 px-4">
      <div className="max-w-6xl mx-auto">
        {/* Section heading */}
        <motion.div
          className="text-center mb-16"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          <h2 className="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-cyan-400">
            Available Tools
          </h2>
          <p className="text-gray-400 text-lg max-w-2xl mx-auto">
            Explore our collection of carefully crafted tools designed to boost your productivity and creativity.
          </p>
        </motion.div>

        {/* Tools grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {tools.map((tool, index) => (
            <ToolCard
              key={tool.title}
              title={tool.title}
              description={tool.description}
              icon={tool.icon}
              url={tool.url}
              gradient={tool.gradient}
              badges={tool.badges}
              index={index}
            />
          ))}
        </div>
      </div>
    </section>
  );
}