App Screenshot Hero

<section class="mx-auto w-full max-w-4xl px-4 py-12 text-center sm:px-6 sm:py-16">
  <h1 class="text-3xl font-bold leading-tight tracking-tight text-gray-900 sm:text-5xl dark:text-gray-100">
    Your whole workflow, one screen
  </h1>
  <p class="mx-auto mt-4 max-w-xl text-base leading-relaxed text-gray-600 dark:text-gray-400">
    A calm, fast interface that gets out of the way so the work stays in view.
  </p>
  <a href="#" class="mt-6 inline-flex items-center justify-center rounded-lg bg-blue-600 px-5 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">
    Start building
  </a>

  <!-- A pure-CSS browser chrome so the hero ships no screenshot to go stale.
       aria-hidden: it is an illustration of the product, not content. -->
  <div class="mx-auto mt-10 max-w-3xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900" aria-hidden="true">
    <div class="flex items-center gap-1.5 border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-800 dark:bg-gray-950">
      <span class="h-3 w-3 rounded-full bg-red-400"></span>
      <span class="h-3 w-3 rounded-full bg-amber-400"></span>
      <span class="h-3 w-3 rounded-full bg-green-400"></span>
      <span class="ml-3 hidden h-5 flex-1 rounded bg-gray-200 sm:block dark:bg-gray-800"></span>
    </div>
    <div class="grid grid-cols-1 gap-4 p-4 sm:grid-cols-[8rem_1fr]">
      <div class="hidden space-y-2 sm:block">
        <span class="block h-6 rounded bg-gradient-to-r from-blue-500 to-indigo-500"></span>
        <span class="block h-4 rounded bg-gray-100 dark:bg-gray-800"></span>
        <span class="block h-4 rounded bg-gray-100 dark:bg-gray-800"></span>
        <span class="block h-4 w-2/3 rounded bg-gray-100 dark:bg-gray-800"></span>
      </div>
      <div class="space-y-3 text-left">
        <div class="grid grid-cols-3 gap-3">
          <span class="h-14 rounded-lg bg-gradient-to-br from-sky-400 to-cyan-500"></span>
          <span class="h-14 rounded-lg bg-gradient-to-br from-violet-400 to-fuchsia-500"></span>
          <span class="h-14 rounded-lg bg-gradient-to-br from-emerald-400 to-teal-500"></span>
        </div>
        <span class="block h-24 rounded-lg bg-gray-100 dark:bg-gray-800"></span>
      </div>
    </div>
  </div>
</section>