<section>
  <div class="container py-24">
    <div class="flex flex-col items-center justify-center">
      <h1
        class="mb-8 flex max-w-4xl text-center text-4xl font-semibold leading-none tracking-tight text-gray-800 md:text-5xl lg:max-w-3xl">
        Transform your business with our landing page blocks
      </h1>
      <p class="max-w-xl text-center text-lg leading-normal text-gray-500">
        Wicked Blocks offers a wide array of both free and premium components
        specifically designed for Tailwind CSS.
      </p>

      <div class="mx-auto mt-8 flex w-full max-w-2xl justify-center gap-2">
        <div class="mt-3 rounded-lg sm:mt-0">
          <button
            class="block items-center rounded-xl bg-blue-600 px-5 py-4 text-center text-base font-medium text-white transition duration-500 ease-in-out hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 lg:px-10">Get
            Bundle</button>
        </div>
        <div class="mt-3 rounded-lg sm:ml-3 sm:mt-0">
          <button
            class="flex items-center rounded-xl border border-gray-600 px-5 py-4 text-center font-medium text-gray-600 transition duration-500 ease-in-out hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 lg:px-8">See
            Features<svg width="24" height="24" viewBox="0 0 24 24" class="ml-1 size-6">
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M5 12h14m-4 4l4-4m-4-4l4 4"></path>
            </svg></button>
        </div>
      </div>
    </div>
  </div>
</section>