<section
  class="w-full pt-20 px-4 bg-muted-100 dark:bg-muted-1000 overflow-hidden"
>
  <div class="w-full max-w-7xl mx-auto">
    <!--CTA-->
    <div
      class="
        w-full
        flex flex-col
        ltablet:flex-row
        lg:flex-row
        items-center
        ltablet:-m-6
        lg:-m-6
      "
    >
      <!--Column-->
      <div class="w-full ltablet:w-1/2 lg:w-1/2 p-6">
        <div
          class="
            max-w-md
            space-y-4
            text-center
            mx-auto
            ltablet:text-left
            lg:text-left
            ltablet:mx-0
            lg:mx-0
          "
        >
          <h2
            class="
              font-heading font-bold
              text-4xl text-muted-800
              dark:text-white
            "
          >
            Ready to dive in?
          </h2>
          <p
            class="
              font-sans
              text-base
              md:text-lg
              text-muted-500
              dark:text-muted-400
            "
          >
            Forget about the hassle, about spaghetti sauce template code and
            start working with a clean and professional UI template.
          </p>

          <div
            class="
              flex
              items-center
              justify-center
              ltablet:justify-start
              lg:justify-start
              gap-x-2
            "
          >
            <a
              href="https://go.cssninja.io/buy-mistral"
              class="
                relative
                font-sans font-normal
                inline-flex
                items-center
                justify-center
                leading-5
                no-underline
                min-w-[130px]
                space-x-1
                text-white
                bg-primary-500
                h-12
                px-5
                py-3
                text-base
                rounded-xl
                hover:bg-primary-600 hover:shadow-xl hover:shadow-primary-500/20
                tw-accessibility
                transition-all
                duration-300
              "
            >
              Buy Now
            </a>
            <a
              href="https://go.cssninja.io/docs-mistral"
              class="
                relative
                font-sans font-normal
                inline-flex
                items-center
                justify-center
                leading-5
                no-underline
                min-w-[130px]
                space-x-1
                text-slate-700
                bg-white
                border
                dark:text-white dark:bg-slate-700 dark:border-slate-600
                h-12
                px-5
                py-3
                text-base
                rounded-xl
                hover:bg-slate-50
                tw-accessibility
                transition-all
                duration-300
              "
            >
              Read Docs
            </a>
          </div>
        </div>
      </div>
      <!--Column-->
      <div
        class="w-full ltablet:w-1/2 lg:w-1/2 px-6 pt-6 pb-0 ltablet:p-6 lg:p-6"
      >
        <img
          class="
            block
            ptablet:max-w-xl ptablet:mx-auto
            dark:hidden
            border border-muted-200
            dark:border-muted-800
            border-b-0
            rounded-t-2xl
            shadow-2xl shadow-muted-500/20
            dark:shadow-muted-800/20
          "
          src="/img/demo/mistral-mockup-1.png"
          alt="Mistral Mockup"
          width="570"
          height="495"
        />
        <img
          class="
            hidden
            dark:block
            ptablet:max-w-xl ptablet:mx-auto
            border border-muted-200
            dark:border-muted-800
            border-b-0
            rounded-t-2xl
            shadow-2xl shadow-muted-500/20
            dark:shadow-muted-800/20
          "
          src="/img/demo/mistral-mockup-1-dark.png"
          alt="Mistral Mockup"
          width="570"
          height="495"
        />
      </div>
    </div>
  </div>
</section>
