<div x-data="cardCarousel()" class="w-full py-6">
  <div class="swiper swiper-cards">
    <!-- Carousel wrapper -->
    <div class="swiper-wrapper">
      <!-- Slide -->
      <div class="swiper-slide">
        <div
          class="
            p-6
            rounded-lg
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
          "
        >
          <div class="w-full flex items-center justify-between">
            <i
              class="iconify w-6 h-6 text-emerald-500"
              data-icon="fa6-solid:quote-left"
            ></i>
            <img
              src="/img/brands/vonmo.svg"
              class="block h-6 object-contain dark:invert"
              alt="Client logo"
              width="92"
              height="24"
            />
          </div>

          <p class="font-sans text-sm text-muted-500 dark:text-muted-400 py-4">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duo enim
            genera quae erant, fecit tria. Erat enim Polemonis
          </p>
          <div class="flex items-center gap-2">
            <img
              class="block h-8 w-8 mask mask-blob"
              src="/img/avatars/25.jpg"
              alt="User photo"
              width="32"
              height="32"
            />
            <div>
              <h4
                class="
                  font-heading font-semibold
                  text-sm text-muted-800
                  dark:text-muted-100
                "
              >
                Adam Smith
              </h4>
              <p class="font-sans text-xs text-muted-400">Project manager</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Slide -->
      <div class="swiper-slide">
        <div
          class="
            p-6
            rounded-lg
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
          "
        >
          <div class="w-full flex items-center justify-between">
            <i
              class="iconify w-6 h-6 text-emerald-500"
              data-icon="fa6-solid:quote-left"
            ></i>
            <img
              src="/img/brands/asuna.svg"
              class="block h-6 object-contain dark:invert"
              alt="Client logo"
              width="92"
              height="24"
            />
          </div>

          <p class="font-sans text-sm text-muted-500 dark:text-muted-400 py-4">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duo enim
            genera quae erant, fecit tria. Erat enim Polemonis
          </p>
          <div class="flex items-center gap-2">
            <img
              class="block h-8 w-8 mask mask-blob"
              src="/img/avatars/37.jpg"
              alt="User photo"
              width="32"
              height="32"
            />
            <div>
              <h4
                class="
                  font-heading font-semibold
                  text-sm text-muted-800
                  dark:text-muted-100
                "
              >
                Jake Wilson
              </h4>
              <p class="font-sans text-xs text-muted-400">Frontend developer</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Slide -->
      <div class="swiper-slide">
        <div
          class="
            p-6
            rounded-lg
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
          "
        >
          <div class="w-full flex items-center justify-between">
            <i
              class="iconify w-6 h-6 text-emerald-500"
              data-icon="fa6-solid:quote-left"
            ></i>
            <img
              src="/img/brands/tribe.svg"
              class="block h-6 object-contain dark:invert"
              alt="Client logo"
              width="92"
              height="24"
            />
          </div>

          <p class="font-sans text-sm text-muted-500 dark:text-muted-400 py-4">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duo enim
            genera quae erant, fecit tria. Erat enim Polemonis
          </p>
          <div class="flex items-center gap-2">
            <img
              class="block h-8 w-8 mask mask-blob"
              src="/img/avatars/21.jpg"
              alt="User photo"
              width="32"
              height="32"
            />
            <div>
              <h4
                class="
                  font-heading font-semibold
                  text-sm text-muted-800
                  dark:text-muted-100
                "
              >
                Melany Stokes
              </h4>
              <p class="font-sans text-xs text-muted-400">Product manager</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Slide -->
      <div class="swiper-slide">
        <div
          class="
            p-6
            rounded-lg
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
          "
        >
          <div class="w-full flex items-center justify-between">
            <i
              class="iconify w-6 h-6 text-emerald-500"
              data-icon="fa6-solid:quote-left"
            ></i>
            <img
              src="/img/brands/kromo.svg"
              class="block h-6 object-contain dark:invert"
              alt="Client logo"
              width="92"
              height="24"
            />
          </div>

          <p class="font-sans text-sm text-muted-500 dark:text-muted-400 py-4">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duo enim
            genera quae erant, fecit tria. Erat enim Polemonis
          </p>
          <div class="flex items-center gap-2">
            <img
              class="block h-8 w-8 mask mask-blob"
              src="/img/avatars/29.jpg"
              alt="User photo"
              width="32"
              height="32"
            />
            <div>
              <h4
                class="
                  font-heading font-semibold
                  text-sm text-muted-800
                  dark:text-muted-100
                "
              >
                Christina Chu
              </h4>
              <p class="font-sans text-xs text-muted-400">Backend developer</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Slide -->
      <div class="swiper-slide">
        <div
          class="
            p-6
            rounded-lg
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
          "
        >
          <div class="w-full flex items-center justify-between">
            <i
              class="iconify w-6 h-6 text-emerald-500"
              data-icon="fa6-solid:quote-left"
            ></i>
            <img
              src="/img/brands/gutwork.svg"
              class="block h-6 object-contain dark:invert"
              alt="Client logo"
              width="92"
              height="24"
            />
          </div>

          <p class="font-sans text-sm text-muted-500 dark:text-muted-400 py-4">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duo enim
            genera quae erant, fecit tria. Erat enim Polemonis
          </p>
          <div class="flex items-center gap-2">
            <img
              class="block h-8 w-8 mask mask-blob"
              src="/img/avatars/39.jpg"
              alt="User photo"
              width="32"
              height="32"
            />
            <div>
              <h4
                class="
                  font-heading font-semibold
                  text-sm text-muted-800
                  dark:text-muted-100
                "
              >
                Rob Hellward
              </h4>
              <p class="font-sans text-xs text-muted-400">Frontend developer</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Slide -->
      <div class="swiper-slide">
        <div
          class="
            p-6
            rounded-lg
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
          "
        >
          <div class="w-full flex items-center justify-between">
            <i
              class="iconify w-6 h-6 text-emerald-500"
              data-icon="fa6-solid:quote-left"
            ></i>
            <img
              src="/img/brands/covenant.svg"
              class="block h-6 object-contain dark:invert"
              alt="Client logo"
              width="92"
              height="24"
            />
          </div>

          <p class="font-sans text-sm text-muted-500 dark:text-muted-400 py-4">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duo enim
            genera quae erant, fecit tria. Erat enim Polemonis
          </p>
          <div class="flex items-center gap-2">
            <img
              class="block h-8 w-8 mask mask-blob"
              src="/img/avatars/17.jpg"
              alt="User photo"
              width="32"
              height="32"
            />
            <div>
              <h4
                class="
                  font-heading font-semibold
                  text-sm text-muted-800
                  dark:text-muted-100
                "
              >
                Anya Valenko
              </h4>
              <p class="font-sans text-xs text-muted-400">Sales Manager</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
