Profiles Colorful Grid

<div class="ws-profiles bg-[var(--ws-profiles-bg)] py-16 px-6">
  <div class="mx-auto max-w-7xl">
    <div class="text-center">
      <h2 class="text-2xl font-bold text-[var(--ws-profiles-text)] sm:text-3xl">Meet the community</h2>
      <p class="mt-3 text-sm text-[var(--ws-profiles-text-soft)]">Builders, researchers, and creators from around the world.</p>
    </div>

    <!-- Colorful grid — each card has an individual background color + matching glow -->
    <div class="mt-12 flex flex-wrap justify-center gap-3">

      <!-- Card: Indigo -->
      <a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
         style="background-color: oklch(0.55 0.22 264); box-shadow: 0 8px 24px oklch(0.55 0.22 264 / 0.45);">
        <div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
          <div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">AK</div>
        </div>
        <p class="mt-2.5 text-xs font-semibold text-white">Alex K.</p>
        <p class="text-[10px] text-white/70">Berlin</p>
      </a>

      <!-- Card: Pink -->
      <a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
         style="background-color: oklch(0.6 0.22 340); box-shadow: 0 8px 24px oklch(0.6 0.22 340 / 0.45);">
        <div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
          <div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">SM</div>
        </div>
        <p class="mt-2.5 text-xs font-semibold text-white">Sara M.</p>
        <p class="text-[10px] text-white/70">Paris</p>
      </a>

      <!-- Card: Orange -->
      <a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
         style="background-color: oklch(0.68 0.19 50); box-shadow: 0 8px 24px oklch(0.68 0.19 50 / 0.45);">
        <div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
          <div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">RB</div>
        </div>
        <p class="mt-2.5 text-xs font-semibold text-white">Robin B.</p>
        <p class="text-[10px] text-white/70">London</p>
      </a>

      <!-- Card: Emerald -->
      <a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
         style="background-color: oklch(0.62 0.17 162); box-shadow: 0 8px 24px oklch(0.62 0.17 162 / 0.45);">
        <div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
          <div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">YL</div>
        </div>
        <p class="mt-2.5 text-xs font-semibold text-white">Yuki L.</p>
        <p class="text-[10px] text-white/70">Tokyo</p>
      </a>

      <!-- Card: Yellow -->
      <a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
         style="background-color: oklch(0.77 0.17 90); box-shadow: 0 8px 24px oklch(0.77 0.17 90 / 0.45);">
        <div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
          <div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">PM</div>
        </div>
        <p class="mt-2.5 text-xs font-semibold text-white">Priya M.</p>
        <p class="text-[10px] text-white/70">Mumbai</p>
      </a>

      <!-- Card: Sky -->
      <a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
         style="background-color: oklch(0.62 0.18 220); box-shadow: 0 8px 24px oklch(0.62 0.18 220 / 0.45);">
        <div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
          <div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">CW</div>
        </div>
        <p class="mt-2.5 text-xs font-semibold text-white">Chris W.</p>
        <p class="text-[10px] text-white/70">NYC</p>
      </a>

      <!-- Card: Red -->
      <a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
         style="background-color: oklch(0.58 0.22 25); box-shadow: 0 8px 24px oklch(0.58 0.22 25 / 0.45);">
        <div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
          <div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">FO</div>
        </div>
        <p class="mt-2.5 text-xs font-semibold text-white">Fatima O.</p>
        <p class="text-[10px] text-white/70">Lagos</p>
      </a>

      <!-- Card: Purple -->
      <a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
         style="background-color: oklch(0.55 0.2 300); box-shadow: 0 8px 24px oklch(0.55 0.2 300 / 0.45);">
        <div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
          <div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">DN</div>
        </div>
        <p class="mt-2.5 text-xs font-semibold text-white">Diego N.</p>
        <p class="text-[10px] text-white/70">São Paulo</p>
      </a>

      <!-- Card: "You?" — rainbow gradient, application CTA -->
      <a href="#apply" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
         style="background: conic-gradient(from 0deg, oklch(0.6 0.22 340), oklch(0.68 0.19 50), oklch(0.77 0.17 90), oklch(0.62 0.17 162), oklch(0.62 0.18 220), oklch(0.55 0.22 264), oklch(0.55 0.2 300), oklch(0.6 0.22 340)); box-shadow: 0 8px 24px rgba(0,0,0,0.25);"> <!-- ws-ok: decorative rainbow gradient with rgba shadow — intentional -->
        <div class="h-14 w-14 rounded-full bg-white/20 ring-2 ring-white/40 flex items-center justify-center">
          <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
        </div>
        <p class="mt-2.5 text-xs font-bold text-white">You?</p>
        <p class="text-[10px] text-white/80">Apply now</p>
      </a>

    </div>
  </div>
</div>