Curated Color Palette Gallery Section

<div class="max-w-5xl md:px-6 mr-auto ml-auto pt-8 pr-8 pb-8 pl-8 space-y-8">
      <div class="mb-8">
        <p class="mb-3 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-slate-300 font-geist">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="palette" class="lucide lucide-palette h-4 w-4 text-violet-400"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" class=""></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle></svg>
          Starter palettes
        </p>
        <h2 class="text-3xl sm:text-4xl text-white mb-2 font-geist font-light tracking-tight">Kickstart with curated palettes</h2>
        <p class="text-base text-slate-300 max-w-2xl font-geist">Professionally tuned palettes designed to pass WCAG checks across light and dark themes.</p>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Template card -->
        <div class="group relative overflow-hidden rounded-xl border border-white/10 bg-white/[0.02]">
          <div class="aspect-video p-6 bg-neutral-900/50">
            <div class="grid grid-cols-6 gap-2">
              <div class="h-12 rounded bg-violet-500"></div>
              <div class="h-12 rounded bg-fuchsia-500"></div>
              <div class="h-12 rounded bg-emerald-500"></div>
              <div class="h-12 rounded bg-orange-500"></div>
              <div class="h-12 rounded bg-cyan-500"></div>
              <div class="h-12 rounded bg-rose-500"></div>
            </div>
          </div>
          <div class="p-4">
            <h3 class="text-lg font-medium text-white mb-1 font-geist">Vibrant Core</h3>
            <p class="text-sm text-slate-400 mb-3 font-geist">High-contrast vibrant system</p>
            <div class="flex items-center justify-between">
              <span class="text-xs text-slate-500 font-geist">AA/AAA Ready</span>
              <button class="text-xs text-violet-300 hover:text-violet-200 font-geist">Use Palette</button>
            </div>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl border border-white/10 bg-white/[0.02]">
          <div class="aspect-video p-6 bg-neutral-900/50">
            <div class="grid grid-cols-6 gap-2">
              <div class="h-12 rounded bg-sky-500"></div>
              <div class="h-12 rounded bg-indigo-500"></div>
              <div class="h-12 rounded bg-blue-400"></div>
              <div class="h-12 rounded bg-slate-600"></div>
              <div class="h-12 rounded bg-neutral-200"></div>
              <div class="h-12 rounded bg-neutral-50"></div>
            </div>
          </div>
          <div class="p-4">
            <h3 class="text-lg font-medium text-white mb-1 font-geist">Calm Interface</h3>
            <p class="text-sm text-slate-400 mb-3 font-geist">Muted tones for product UI</p>
            <div class="flex items-center justify-between">
              <span class="text-xs text-slate-500 font-geist">AA Ready</span>
              <button class="text-xs text-violet-300 hover:text-violet-200 font-geist">Use Palette</button>
            </div>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl border border-white/10 bg-white/[0.02]">
          <div class="aspect-video p-6 bg-neutral-900/50">
            <div class="grid grid-cols-6 gap-2">
              <div class="h-12 rounded bg-amber-500"></div>
              <div class="h-12 rounded bg-orange-600"></div>
              <div class="h-12 rounded bg-red-500"></div>
              <div class="h-12 rounded bg-rose-600"></div>
              <div class="h-12 rounded bg-stone-700"></div>
              <div class="h-12 rounded bg-neutral-900"></div>
            </div>
          </div>
          <div class="p-4">
            <h3 class="text-lg font-medium text-white mb-1 font-geist">Warm Brand</h3>
            <p class="text-sm text-slate-400 mb-3 font-geist">Bold, warm emphasis colors</p>
            <div class="flex items-center justify-between">
              <span class="text-xs text-slate-500 font-geist">AA Large</span>
              <button class="text-xs text-violet-300 hover:text-violet-200 font-geist">Use Palette</button>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-10 text-center">
        <button class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-white bg-violet-600 rounded-lg hover:bg-violet-500 transition-colors font-geist">
          Browse All Palettes
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right ml-2 h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
        </button>
      </div>
    </div>