Hero Centered

<section class="ws-hero relative overflow-hidden bg-[var(--ws-hero-bg)]">
  <!-- Background decoration -->
  <div class="absolute inset-0 -z-10" aria-hidden="true">
    <div
      class="absolute left-1/2 top-0 h-[600px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-indigo-100/50 blur-3xl"
    ></div>
  </div>

  <div class="mx-auto max-w-4xl px-6 py-24 text-center sm:py-32 lg:py-40">
    <p
      class="inline-flex rounded-full border border-indigo-200 bg-indigo-50 px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-indigo-700"
    >
      Now in public beta
    </p>
    <h1
      class="mt-6 text-balance text-5xl font-bold tracking-tight text-[var(--ws-hero-text)] sm:text-6xl lg:text-7xl"
    >
      Build beautiful pages in minutes
    </h1>
    <p
      class="mx-auto mt-6 max-w-2xl text-pretty text-lg text-[var(--ws-hero-text-soft)]"
    >
      A curated collection of production-ready UI patterns. Copy, paste,
      customize — ship polished landing pages without starting from scratch.
    </p>
    <div class="mt-10 flex flex-wrap justify-center gap-3">
      <a
        href="#"
        class="rounded-xl bg-[var(--ws-hero-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-action-text)] shadow-sm transition hover:bg-[var(--ws-hero-action-bg-hover)]"
        >Browse patterns</a
      >
      <a
        href="#"
        class="rounded-xl border border-[var(--ws-hero-border)] bg-[var(--ws-hero-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-text-soft)] transition hover:opacity-80"
      >
        <span class="flex items-center gap-2">
          <svg
            class="h-4 w-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="2"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"
            />
          </svg>
          Watch demo
        </span>
      </a>
    </div>
    <div
      class="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-[var(--ws-hero-text-muted)]"
    >
      <div class="flex items-center gap-2">
        <svg
          class="h-4 w-4 text-emerald-500"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M4.5 12.75l6 6 9-13.5"
          />
        </svg>
        Production-ready patterns
      </div>
      <div class="flex items-center gap-2">
        <svg
          class="h-4 w-4 text-emerald-500"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M4.5 12.75l6 6 9-13.5"
          />
        </svg>
        Dark mode
      </div>
      <div class="flex items-center gap-2">
        <svg
          class="h-4 w-4 text-emerald-500"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M4.5 12.75l6 6 9-13.5"
          />
        </svg>
        Fully responsive
      </div>
      <div class="flex items-center gap-2">
        <svg
          class="h-4 w-4 text-emerald-500"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M4.5 12.75l6 6 9-13.5"
          />
        </svg>
        MIT license
      </div>
    </div>
  </div>
</section>