<section class="relative isolate overflow-hidden bg-white">
  <!-- Gradient background blobs -->
  <div aria-hidden="true" class="absolute inset-0 -z-10 overflow-hidden">
    <div
      class="absolute -top-40 left-1/2 h-[40rem] w-[80rem] -translate-x-1/2 rounded-full bg-gradient-to-tr from-violet-100 via-sky-100 to-emerald-100 opacity-60 blur-3xl"
    ></div>
    <div
      class="absolute right-0 -bottom-32 h-[30rem] w-[50rem] rounded-full bg-gradient-to-bl from-pink-100 via-fuchsia-100 to-violet-100 opacity-50 blur-3xl"
    ></div>
  </div>
  <!-- Subtle dot-grid overlay -->
  <div
    aria-hidden="true"
    class="absolute inset-0 -z-10 bg-[radial-gradient(#d1d5db_1px,transparent_1px)] [background-size:24px_24px] opacity-40"
  ></div>
  <div class="mx-auto max-w-4xl px-6 py-32 text-center sm:py-44 lg:px-8">
    <!-- Badge -->
    <div class="mb-8 flex justify-center">
      <span
        class="inline-flex items-center gap-2 rounded-full border border-violet-200 bg-white/80 px-4 py-1.5 text-sm font-medium text-violet-700 shadow-sm backdrop-blur-sm"
      >
        <span class="h-2 w-2 animate-pulse rounded-full bg-violet-500"></span>
        Introducing BlockUI
      </span>
    </div>
    <!-- Headline -->
    <h1
      class="text-5xl font-extrabold tracking-tight text-gray-950 sm:text-6xl lg:text-7xl"
    >
      Build beautiful interfaces,
      <span
        class="bg-gradient-to-r from-violet-600 via-fuchsia-500 to-pink-500 bg-clip-text text-transparent"
      >
        faster
      </span>
    </h1>
    <!-- Sub-headline -->
    <p
      class="mx-auto mt-6 max-w-2xl text-lg leading-8 text-gray-500 sm:text-xl"
    >
      A curated collection of copy-paste UI blocks built with Astro, Preact, and
      Tailwind CSS. Pick a block, drop it in, ship.
    </p>
    <!-- CTA Buttons -->
    <div
      class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row"
    >
      <a
        href="#"
        class="rounded-full bg-gray-950 px-7 py-3.5 text-sm font-semibold text-white shadow-lg ring-1 ring-gray-950 transition hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-950"
      >
        Browse blocks
      </a>
      <a
        href="#"
        class="flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-gray-200 transition hover:ring-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="h-4 w-4 text-gray-500"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            d="M12 2C6.477 2 2 6.484 2 12.021c0 4.428 2.865 8.185 6.839 9.506.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.342-3.369-1.342-.454-1.154-1.11-1.461-1.11-1.461-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.337 4.687-4.565 4.934.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.741 0 .267.18.578.688.48C19.138 20.203 22 16.447 22 12.021 22 6.484 17.523 2 12 2z"
            clip-rule="evenodd"
          ></path>
        </svg>
        View on GitHub
      </a>
    </div>
    <!-- Social proof -->
    <p class="mt-10 text-sm text-gray-400">
      Trusted by
      <span class="font-semibold text-gray-600">2,400+</span> developers &amp;
      designers
    </p>
  </div>
</section>

<section class="bg-white px-6 py-32 sm:py-44 lg:px-8">
  <div class="mx-auto max-w-3xl">
    <!-- Eyebrow -->
    <p
      class="mb-6 text-xs font-semibold uppercase tracking-widest text-gray-400"
    >
      UI Component Library
    </p>
    <!-- Headline -->
    <h1
      class="text-5xl font-light leading-[1.1] tracking-tight text-gray-950 sm:text-6xl lg:text-7xl"
    >
      Beautiful blocks,<br />
      <em class="font-semibold not-italic">ready to ship.</em>
    </h1>
    <!-- Divider -->
    <div class="my-10 h-px w-16 bg-gray-200"></div>
    <!-- Body -->
    <p class="max-w-lg text-base leading-7 text-gray-500">
      A focused collection of copy-paste UI blocks built with Astro and Tailwind
      CSS. No dependencies, no lock-in — just clean markup you own.
    </p>
    <!-- CTAs -->
    <div class="mt-10 flex flex-wrap items-center gap-8">
      <a
        href="#"
        class="group inline-flex items-center gap-2 text-sm font-semibold text-gray-950 underline-offset-4 hover:underline"
      >
        Browse blocks
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="h-4 w-4 transition-transform group-hover:translate-x-0.5"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z"
            clip-rule="evenodd"
          ></path>
        </svg>
      </a>
      <a
        href="#"
        class="text-sm text-gray-400 underline-offset-4 hover:text-gray-600 hover:underline transition-colors"
      >
        View on GitHub
      </a>
    </div>
  </div>
</section>