Split Featured Testimonial

<section class="mx-auto grid w-full max-w-6xl gap-6 px-4 py-12 sm:px-6 lg:grid-cols-2">
  <!-- Featured quote gets its own painted surface so it reads as primary even
       before the smaller list loads beside it. -->
  <figure class="flex flex-col justify-center rounded-2xl bg-gradient-to-br from-blue-600 to-violet-600 p-8 text-white">
    <blockquote class="text-xl font-medium leading-relaxed sm:text-2xl">
      &ldquo;We shipped in a week what used to take a quarter. The team stopped fighting the tooling and started building.&rdquo;
    </blockquote>
    <figcaption class="mt-6 flex items-center gap-3">
      <span aria-hidden="true" class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-white/20 text-sm font-semibold">AO</span>
      <span>
        <span class="block text-sm font-semibold">Amara Okafor</span>
        <span class="block text-xs text-blue-100">Head of Operations, Northwind</span>
      </span>
    </figcaption>
  </figure>

  <ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
    <li>
      <figure class="flex h-full flex-col rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
        <blockquote class="flex-1 text-sm leading-relaxed text-gray-700 dark:text-gray-300">
          &ldquo;It paid for itself in the first month.&rdquo;
        </blockquote>
        <figcaption class="mt-4 text-sm">
          <span class="font-semibold text-gray-900 dark:text-gray-100">Priya Nair</span>
          <span class="text-gray-500 dark:text-gray-400"> · Cadence</span>
        </figcaption>
      </figure>
    </li>
    <!-- Repeat secondary <li> items. -->
  </ul>
</section>