About Awards & Logos

<section class="mx-auto w-full max-w-6xl bg-white px-4 py-12 md:px-6 md:py-16 dark:bg-gray-900" aria-labelledby="abt-awards-title">
  <p class="text-xs font-bold uppercase tracking-widest text-blue-700 dark:text-blue-400">Recognition</p>
  <h2 id="abt-awards-title" class="mt-3 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">
    Kind words, in writing
  </h2>

  <ul class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
    <li class="flex items-center gap-3 rounded-2xl border border-gray-200 bg-gray-50 p-5 dark:border-gray-800 dark:bg-gray-800/50">
      <!-- The laurel is a decorative inline SVG; the award text is real, readable content. -->
      <svg class="h-9 w-9 flex-none text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
        <path d="M12 2a6 6 0 0 0-3 11.2V15a3 3 0 0 0 6 0v-1.8A6 6 0 0 0 12 2Zm-2 15v1a2 2 0 0 0 4 0v-1a5.98 5.98 0 0 1-4 0Z" />
      </svg>
      <div class="min-w-0">
        <p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Studio of the Year</p>
        <p class="text-xs text-gray-500 dark:text-gray-400">Design Week &middot; 2025</p>
      </div>
    </li>
    <!-- Repeat one <li> per award. -->
  </ul>

  <p class="mt-10 text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500">As seen in</p>
  <ul class="mt-4 flex flex-wrap items-center gap-x-8 gap-y-4">
    <li class="flex items-center gap-2 text-gray-400 dark:text-gray-500">
      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10" /></svg>
      <span class="text-base font-bold tracking-tight text-gray-500 dark:text-gray-400">Northwind</span>
    </li>
    <li class="flex items-center gap-2 text-gray-400 dark:text-gray-500">
      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><rect x="3" y="3" width="18" height="18" rx="4" /></svg>
      <span class="text-base font-bold tracking-tight text-gray-500 dark:text-gray-400">Meridian</span>
    </li>
  </ul>
</section>