How It Works 4-Step Process Section

<div class="max-w-5xl md:px-6 mr-auto ml-auto pt-8 pr-8 pb-8 pl-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="workflow"
        class="lucide lucide-workflow h-4 w-4 text-violet-400">
        <rect width="8" height="8" x="3" y="3" rx="2" class=""></rect>
        <path d="M7 11v4a2 2 0 0 0 2 2h4" class=""></path>
        <rect width="8" height="8" x="13" y="13" rx="2" class=""></rect>
      </svg>
      Simple 4-step process
    </p>
    <h2 class="text-3xl sm:text-4xl text-white mb-2 font-geist font-light tracking-tight">How it works</h2>
    <p class="text-base text-slate-300 max-w-2xl font-geist">Create accessible palettes in minutes—generate, test
      contrast, simulate vision, and export tokens.</p>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Step 1 -->
    <div class="p-6 rounded-xl border border-white/10 bg-white/[0.03]">
      <span class="inline-flex items-center rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-[11px] text-slate-300 mb-4 font-geist">Step 1</span>
      <h3 class="text-2xl text-white mb-2 font-geist font-light tracking-tight">Choose Base Colors</h3>
      <p class="text-sm text-slate-400 font-geist">Start from brand hues or import existing tokens.</p>
      <div class="mt-5 grid grid-cols-6 gap-2">
        <div class="h-10 rounded bg-violet-500"></div>
        <div class="h-10 rounded bg-fuchsia-500"></div>
        <div class="h-10 rounded bg-emerald-500"></div>
        <div class="h-10 rounded bg-orange-500"></div>
        <div class="h-10 rounded bg-cyan-500"></div>
        <div class="h-10 rounded bg-rose-500"></div>
      </div>
    </div>

    <!-- Step 2 -->
    <div class="p-6 rounded-xl border border-white/10 bg-white/[0.03]">
      <span class="inline-flex items-center rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-[11px] text-slate-300 mb-4 font-geist">Step 2</span>
      <h3 class="text-2xl text-white mb-2 font-geist font-light tracking-tight">Generate Scales</h3>
      <p class="text-sm text-slate-400 font-geist">Create tints/shades with consistent deltas and luminance spacing.</p>
      <div class="mt-5 space-y-2">
        <div class="grid grid-cols-6 gap-1">
          <div class="h-6 rounded bg-violet-900/90"></div>
          <div class="h-6 rounded bg-violet-700/90"></div>
          <div class="h-6 rounded bg-violet-600"></div>
          <div class="h-6 rounded bg-violet-500"></div>
          <div class="h-6 rounded bg-violet-400"></div>
          <div class="h-6 rounded bg-violet-200"></div>
        </div>
        <div class="grid grid-cols-6 gap-1">
          <div class="h-6 rounded bg-emerald-900/90"></div>
          <div class="h-6 rounded bg-emerald-700/90"></div>
          <div class="h-6 rounded bg-emerald-600"></div>
          <div class="h-6 rounded bg-emerald-500"></div>
          <div class="h-6 rounded bg-emerald-400"></div>
          <div class="h-6 rounded bg-emerald-200"></div>
        </div>
      </div>
    </div>

    <!-- Step 3 -->
    <div class="p-6 rounded-xl border border-white/10 bg-white/[0.03]">
      <span class="inline-flex items-center rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-[11px] text-slate-300 mb-4 font-geist">Step 3</span>
      <h3 class="text-2xl text-white mb-2 font-geist font-light tracking-tight">Check Contrast</h3>
      <p class="text-sm text-slate-400 font-geist">Instant AA/AAA results for normal and large text.</p>
      <div class="mt-5 rounded-lg border border-white/10 bg-black/30 p-4">
        <div class="flex items-center justify-between">
          <span class="text-xs text-slate-300 font-geist">Contrast</span>
          <span class="text-xs text-violet-300 font-geist">7.8:1</span>
        </div>
        <div class="mt-3 grid grid-cols-3 gap-2">
          <div class="rounded-md border border-white/10 bg-white/5 p-2 text-center">
            <div class="text-[10px] text-slate-400 font-geist">AA</div>
            <div class="mt-1 text-xs font-geist text-emerald-400 inline-flex items-center gap-1">
              <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="check" class="lucide lucide-check h-3.5 w-3.5">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg> Pass
            </div>
          </div>
          <div class="rounded-md border border-white/10 bg-white/5 p-2 text-center">
            <div class="text-[10px] text-slate-400 font-geist">AAA</div>
            <div class="mt-1 text-xs font-geist text-emerald-400 inline-flex items-center gap-1">
              <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="check" class="lucide lucide-check h-3.5 w-3.5">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg> Pass
            </div>
          </div>
          <div class="rounded-md border border-white/10 bg-white/5 p-2 text-center">
            <div class="text-[10px] text-slate-400 font-geist">AA Large</div>
            <div class="mt-1 text-xs font-geist text-emerald-400 inline-flex items-center gap-1">
              <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="check" class="lucide lucide-check h-3.5 w-3.5">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg> Pass
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Step 4 -->
    <div class="p-6 rounded-xl border border-white/10 bg-white/[0.03]">
      <span class="inline-flex items-center rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-[11px] text-slate-300 mb-4 font-geist">Step 4</span>
      <h3 class="text-2xl text-white mb-2 font-geist font-light tracking-tight">Export &amp; Sync</h3>
      <p class="text-sm text-slate-400 font-geist">Ship tokens to your design and codebase in one click.</p>
      <div class="mt-5 space-y-2">
        <div class="flex items-center justify-between rounded-md border border-white/10 bg-white/5 px-3 py-2">
          <div class="inline-flex items-center gap-2">
            <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="code"
              class="lucide lucide-code h-4 w-4 text-slate-300">
              <path d="m16 18 6-6-6-6" class=""></path>
              <path d="m8 6-6 6 6 6" class=""></path>
            </svg>
            <div>
              <div class="text-xs text-slate-200 font-geist">CSS Variables</div>
              <div class="text-[10px] text-slate-500 font-geist">Design token syntax</div>
            </div>
          </div>
          <button class="px-3 py-1 bg-violet-600 text-white text-xs rounded hover:bg-violet-500 font-geist">Export</button>
        </div>
        <div class="flex items-center justify-between rounded-md border border-white/10 bg-white/5 px-3 py-2">
          <div class="inline-flex items-center gap-2">
            <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="box"
              class="lucide lucide-box h-4 w-4 text-slate-300">
              <path
                d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"
                class=""></path>
              <path d="m3.3 7 8.7 5 8.7-5" class=""></path>
              <path d="M12 22V12" class=""></path>
            </svg>
            <div>
              <div class="text-xs text-slate-200 font-geist">Figma Styles</div>
              <div class="text-[10px] text-slate-500 font-geist">Sync styles to Figma</div>
            </div>
          </div>
          <button class="px-3 py-1 bg-white/5 text-white text-xs rounded border border-white/10 hover:bg-white/10 font-geist">Sync</button>
        </div>
      </div>
    </div>
  </div>
</div>