cta

<section class="bg-white px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <div
      class="relative isolate overflow-hidden rounded-3xl bg-gray-950 px-8 py-20 text-center sm:px-16"
    >
      <div
        aria-hidden="true"
        class="absolute -top-24 left-1/2 h-80 w-3xl -translate-x-1/2 rounded-full bg-violet-700 opacity-25 blur-3xl"
      ></div>
      <div
        aria-hidden="true"
        class="absolute -bottom-16 right-0 h-64 w-xl rounded-full bg-fuchsia-600 opacity-20 blur-3xl"
      ></div>
      <div class="relative">
        <p
          class="mb-4 text-xs font-semibold uppercase tracking-widest text-violet-400"
        >
          Get started
        </p>
        <h2
          class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl"
        >
          Start building today.
        </h2>
        <p class="mx-auto mt-4 max-w-lg text-base leading-7 text-gray-400">
          Browse the full block gallery, copy what you need, and ship your next
          project faster than ever.
        </p>
        <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
          <a
            href="#"
            class="rounded-full bg-white px-6 py-3 text-sm font-semibold text-gray-950 transition hover:bg-gray-100"
          >
            Browse blocks
          </a>
          <a
            href="#"
            class="flex items-center gap-2 rounded-full px-6 py-3 text-sm font-semibold text-gray-300 ring-1 ring-white/20 transition hover:ring-white/40"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              class="h-4 w-4"
              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 0 1 12 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>
      </div>
    </div>
  </div>
</section>

<section class="border-t border-gray-100 bg-white px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <div
      class="flex flex-col items-start justify-between gap-10 sm:flex-row sm:items-center"
    >
      <div class="max-w-xl">
        <p
          class="mb-2 text-xs font-semibold uppercase tracking-widest text-violet-600"
        >
          Get started
        </p>
        <h2 class="text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl">
          Ready to ship faster?
        </h2>
        <p class="mt-3 text-base leading-7 text-gray-500">
          Copy a block, drop it in your project, and go. No setup, no
          dependencies, no surprises.
        </p>
      </div>
      <div class="flex shrink-0 flex-col gap-3 sm:items-end">
        <a
          href="#"
          class="rounded-full bg-gray-950 px-6 py-3 text-sm font-semibold text-white transition hover:bg-gray-800"
        >
          Browse blocks
        </a>
        <a
          href="#"
          class="text-xs text-gray-400 transition hover:text-gray-600"
        >
          View on GitHub →
        </a>
      </div>
    </div>
  </div>
</section>

<section class="bg-violet-600 px-6 py-12 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <div
      class="flex flex-col items-center justify-between gap-6 text-center sm:flex-row sm:text-left"
    >
      <div>
        <h2 class="text-xl font-bold text-white">
          Build your next project with BlockUI.
        </h2>
        <p class="mt-1 text-sm text-violet-200">
          Free, open-source blocks built with Astro and Tailwind CSS.
        </p>
      </div>
      <div class="flex shrink-0 items-center gap-3">
        <a
          href="#"
          class="rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-violet-700 transition hover:bg-violet-50"
        >
          Get started free
        </a>
        <a
          href="#"
          class="text-sm font-semibold text-violet-200 transition hover:text-white"
        >
          Learn more →
        </a>
      </div>
    </div>
  </div>
</section>