Lead Magnet

<!--
  A gated download. The cover is an inline-SVG gradient (no external image) and
  stacks above the copy on mobile. The email row goes vertical below sm. Submit
  is UI-only here - wire onSubmit in the React/TS variants.
-->
<section class="grid w-full max-w-3xl items-center gap-6 rounded-2xl border border-gray-200 bg-white p-6 sm:grid-cols-[auto_1fr] sm:p-7 dark:border-gray-800 dark:bg-gray-900">
  <div class="relative mx-auto aspect-[3/4] w-28 flex-none overflow-hidden rounded-lg bg-gradient-to-br from-emerald-500 to-teal-700 shadow-sm sm:mx-0">
    <svg viewBox="0 0 60 80" class="absolute inset-0 h-full w-full" aria-hidden="true" focusable="false">
      <rect x="10" y="20" width="40" height="5" rx="2.5" fill="rgba(255,255,255,0.5)" />
      <rect x="10" y="32" width="30" height="4" rx="2" fill="rgba(255,255,255,0.35)" />
      <rect x="10" y="42" width="34" height="4" rx="2" fill="rgba(255,255,255,0.35)" />
    </svg>
  </div>
  <div class="min-w-0">
    <h2 class="text-lg font-bold tracking-tight text-gray-900 dark:text-gray-100">The 2026 SaaS onboarding playbook</h2>
    <p class="mt-1.5 text-sm text-gray-600 dark:text-gray-400">28 pages of teardown, checklists and copy you can steal for your own flow.</p>
    <form class="mt-4 flex flex-col gap-2 sm:flex-row" action="/api/subscribe" method="post">
      <label for="lead-magnet-email" class="sr-only">Email address</label>
      <input
        id="lead-magnet-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">
        Get the guide
      </button>
    </form>
    <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Free PDF. No spam, unsubscribe anytime.</p>
  </div>
</section>