pastel-ui/app/palettes/page.tsx

import Link from 'next/link';
import { Palette, Sparkles, GraduationCap } from 'lucide-react';

export default function PalettesPage() {
  const paletteTypes = [
    {
      title: 'Gradient Creator',
      description: 'Create smooth color gradients with multiple stops and color spaces',
      href: '/palettes/gradient',
      icon: GraduationCap,
      features: ['Multiple color stops', 'Various color spaces', 'Live preview'],
    },
    {
      title: 'Distinct Colors',
      description: 'Generate visually distinct colors using simulated annealing algorithm',
      href: '/palettes/distinct',
      icon: Sparkles,
      features: ['Perceptual distance', 'Configurable count', 'Quality metrics'],
    },
    {
      title: 'Harmony Palettes',
      description: 'Create color palettes based on color theory and harmony rules',
      href: '/palettes/harmony',
      icon: Palette,
      features: ['Color theory', 'Multiple schemes', 'Instant generation'],
    },
  ];

  return (
    <div className="min-h-screen px-8 py-12">
      <div className="max-w-7xl mx-auto space-y-8">
        <div>
          <h1 className="text-4xl font-bold mb-2">Palette Generation</h1>
          <p className="text-muted-foreground">
            Create beautiful color palettes using various generation methods
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {paletteTypes.map((type) => {
            const Icon = type.icon;
            return (
              <Link
                key={type.href}
                href={type.href}
                className="p-6 border rounded-lg bg-card hover:border-primary transition-colors"
              >
                <div className="flex items-start justify-between mb-4">
                  <Icon className="h-8 w-8 text-primary" />
                </div>
                <h2 className="text-xl font-semibold mb-2">{type.title}</h2>
                <p className="text-sm text-muted-foreground mb-4">{type.description}</p>
                <ul className="space-y-1">
                  {type.features.map((feature) => (
                    <li key={feature} className="text-sm text-muted-foreground flex items-center">
                      <span className="mr-2">•</span>
                      {feature}
                    </li>
                  ))}
                </ul>
              </Link>
            );
          })}
        </div>
      </div>
    </div>
  );
}