<div class="pb-16">
  <div class="w-full">
    <!--Section title-->
    <div class="w-full max-w-md mb-5">
      <h2
        class="
          font-heading font-semibold
          text-3xl text-muted-800
          dark:text-white
          mb-4
        "
      >
        Demo Pages
      </h2>
      <p class="font-sans text-muted-500 dark:text-muted-400">
        Mistral ships with 13 superb demo pages to help you get started as fast
        as possible, and build an outstanding and memorable project.
      </p>
    </div>

    <!--Template demos-->
    <div id="template-demos" class="mt-8" x-data="renderScreenshots()">
      <div class="grid md:grid-cols-2 gap-6">
        <template x-for="screenshot in screenshots">
          <a
            x-bind:href="screenshot.link"
            target="_blank"
            class="
              group
              block
              w-full
              rounded-xl
              bg-white
              dark:bg-muted-800
              border border-muted-200
              dark:border-muted-700
              p-3
              text-center
            "
          >
            <div class="relative overflow-hidden">
              <div class="relative">
                <img
                  class="block dark:hidden rounded-xl"
                  x-bind:src="screenshot.screenshotLight"
                  alt="screenshot light image"
                />
                <img
                  class="hidden dark:block rounded-xl"
                  x-bind:src="screenshot.screenshotDark"
                  alt="screenshot dark image"
                />
                <template x-if="screenshot.new">
                  <span
                    class="
                      block
                      absolute
                      bottom-4
                      right-4
                      py-1.5
                      px-3
                      font-sans
                      text-xs
                      font-semibold
                      rounded-full
                      bg-rose-500
                      text-white
                      shadow-xl shadow-rose-500/20
                    "
                  >
                    New
                  </span>
                </template>
              </div>

              <div class="circle-overlay is-landing"></div>
              <div class="w-full pb-3 pt-4 px-1">
                <div class="w-full flex items-center justify-between">
                  <h4
                    class="
                      font-heading font-semibold
                      text-muted-800
                      dark:text-muted-100
                    "
                    x-text="screenshot.name"
                  ></h4>
                  <div class="block">
                    <span
                      class="
                        font-sans
                        flex
                        items-center
                        pr-1
                        gap-2
                        text-muted-500
                        dark:text-muted-400
                        group-hover:text-primary-500
                        transition-colors
                        duration-300
                      "
                    >
                      <span>Go to demo</span>
                      <i
                        class="
                          iconify
                          w-4
                          h-4
                          group-hover:text-primary-500 group-hover:translate-x-1
                          transition-all
                          duration-300
                        "
                        data-icon="ph:arrow-right-bold"
                      ></i>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </template>
      </div>
    </div>
  </div>
</div>
