Webinar Signup

<!--
  A webinar registration card. aria-labelledby ties the section to its heading.
  The date badge and the email row both stack on mobile; submit is UI-only here.
-->
<section aria-labelledby="webinar-title" class="w-full rounded-2xl border border-gray-200 bg-white p-6 sm:p-7 dark:border-gray-800 dark:bg-gray-900">
  <div class="flex items-center gap-3">
    <span class="inline-flex h-11 w-11 flex-none items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 dark:bg-indigo-950 dark:text-indigo-400">
      <svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
        <rect x="3" y="4" width="18" height="17" rx="2" />
        <path d="M8 2v4M16 2v4M3 10h18" stroke-linecap="round" />
      </svg>
    </span>
    <div class="min-w-0">
      <p class="text-xs font-semibold uppercase tracking-wide text-indigo-600 dark:text-indigo-400">Live webinar</p>
      <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Thu, Aug 14 &middot; 11:00 AM ET</p>
    </div>
  </div>
  <h2 id="webinar-title" class="mt-4 text-lg font-bold tracking-tight text-gray-900 dark:text-gray-100">Scaling design systems without slowing product teams</h2>
  <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Hosted by Dana Ruiz, Head of Design</p>
  <form class="mt-5 flex flex-col gap-2 sm:flex-row" action="/api/register" method="post">
    <label for="webinar-email" class="sr-only">Work email</label>
    <input
      id="webinar-email"
      name="email"
      type="email"
      autocomplete="email"
      placeholder="you@company.com"
      required
      class="min-w-0 flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-500 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400"
    />
    <button type="submit" class="whitespace-nowrap rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
      Save my seat
    </button>
  </form>
  <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Can&rsquo;t make it? Register and we&rsquo;ll send the recording.</p>
</section>