<section>
  <div class="container py-24">
    <div class="relative flex flex-col items-center align-middle">
      <h1
        class="mb-8 flex max-w-6xl text-center text-4xl font-semibold leading-none tracking-tight text-gray-800 md:text-7xl">
        Transform your business with our landing page blocks
      </h1>
      <p class="max-w-3xl text-center text-lg leading-relaxed text-gray-500">
        Wicked Blocks offers a wide array of both free and premium components
        specifically designed for Tailwind CSS. Our extensive collection
        features meticulously crafted Tailwind blocks that cater to various
        design needs and preferences.
      </p>

      <div class="mt-8 flex justify-center gap-4">
        <button
          class="flex 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-8">Get
          Bundle</button>
        <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 class="mt-24">
      <img class="w-full rounded-xl object-cover object-center" alt="hero" src="/images/placeholders/original/1600x1200.png" />
    </div>
  </div>
</section>