cta #1

<section>
  <div class="relative px-8 py-32 mx-auto md:px-12 lg:px-24 max-w-7xl">
    <div class="items-end grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <h2
          class="text-2xl md:text-3xl lg:text-4xl font-semibold text-base-900"
        >
          Get started with our app today
        </h2>
        <p class="text-base mt-4 font-medium text-base-500">
          Streamline your workflow and collaborate seamlessly on staging and
          temporary environments
        </p>
      </div>
      <div class="flex flex-col items-center lg:flex-row gap-2 sm:ml-auto">
        <button
          class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-base-700 bg-white outline outline-base-200 hover:shadow-sm focus:outline-base-900 shadow-sm h-9 px-4 py-2 text-sm gap-2 rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon icon-tabler-layout-apple size-4"
            slot="left-icon"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path
              d="M8.286 7.008c-3.216 0 -4.286 3.23 -4.286 5.92c0 3.229 2.143 8.072 4.286 8.072c1.165 -.05 1.799 -.538 3.214 -.538c1.406 0 1.607 .538 3.214 .538s4.286 -3.229 4.286 -5.381c-.03 -.011 -2.649 -.434 -2.679 -3.23c-.02 -2.335 2.589 -3.179 2.679 -3.228c-1.096 -1.606 -3.162 -2.113 -3.75 -2.153c-1.535 -.12 -3.032 1.077 -3.75 1.077c-.729 0 -2.036 -1.077 -3.214 -1.077z"
            ></path>
            <path d="M12 4a2 2 0 0 0 2 -2a2 2 0 0 0 -2 2"></path>
          </svg>
          Download on App Store
        </button>
        <button
          class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-base-700 bg-white outline outline-base-200 hover:shadow-sm focus:outline-base-900 shadow-sm h-9 px-4 py-2 text-sm gap-2 rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon icon-tabler-layout-grid size-4"
            slot="left-icon"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path
              d="M4 3.71v16.58a.7 .7 0 0 0 1.05 .606l14.622 -8.42a.55 .55 0 0 0 0 -.953l-14.622 -8.419a.7 .7 0 0 0 -1.05 .607z"
            ></path>
            <path d="M15 9l-10.5 11.5"></path>
            <path d="M4.5 3.5l10.5 11.5"></path>
          </svg>
          Download on Google Play
        </button>
      </div>
    </div>
  </div>
</section>