<section>
  <div class="container relative py-24">
    <div class="flex flex-col items-center justify-center text-center">
      <div
        class="mx-auto mb-5 inline-flex size-20 shrink-0 items-center justify-center rounded-full bg-gray-50 text-blue-600">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" class="size-12" viewBox="0 0 24 24">
          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M6 19a2 2 0 0 1-2-2v-4l-1-1l1-1V7a2 2 0 0 1 2-2m6 6.875l3-1.687m-3 1.687v3.375m0-3.375l-3-1.687m3 1.687l3 1.688M12 8.5v3.375m0 0l-3 1.688M18 19a2 2 0 0 0 2-2v-4l1-1l-1-1V7a2 2 0 0 0-2-2">
          </path>
        </svg>
      </div>
      <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>

      <a class="mx-auto mt-8 inline-flex items-center text-sm font-semibold text-blue-600 hover:text-blue-700"
        title="read more" href="#">
        Read more about the offer <svg width="24" height="24" viewBox="0 0 24 24" class="ml-1 size-4">
          <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>
      </a>
    </div>
  </div>
</section>