Testimonials Components in Vista library

<section class="bg-darkPink-900 py-28" x-data="{ activeSlide: 1 }">
    <div class="container mx-auto px-4">
        <p class="mb-6 uppercase text-pink-400 text-xs text-center tracking-widest">WHAT THEY SAY ABOUT US</p>
        <h1 class="font-heading text-white text-center text-3xl md:text-5xl font-bold mb-20">Testimonials</h1>
        <div class="relative max-w-3xl mx-auto mb-24">
            <div class="relative z-50 rounded-3xl bg-pink-500 py-10 pl-12 pr-20">
                <div class="absolute right-8 -bottom-6">
                    <svg xmlns="http://www.w3.org/2000/svg" width="44" height="33" viewBox="0 0 44 33" fill="none">
                        <path d="M26.7544 29.8238C24.3526 32.9439 19.6474 32.9439 17.2456 29.8238L1.72343 9.65996C-1.31375 5.71454 1.49884 -4.5898e-06 6.47787 -4.15452e-06L37.5221 -1.44054e-06C42.5012 -1.00526e-06 45.3138 5.71455 42.2766 9.65996L26.7544 29.8238Z" fill="#F53D6C"></path>
                    </svg>
                </div>
                <h2 :class="{ 'block': activeSlide == 1, 'hidden': activeSlide != 1 }" class="text-white text-3xl md:text-4xl font-medium">We use Vista daily and we’re very happy that they are created this amazing bookkeeping software.</h2>
                <h2 :class="{ 'block': activeSlide == 2, 'hidden': activeSlide != 2 }" class="hidden text-white text-3xl md:text-4xl font-medium">We rely on Vista's bookkeeping software for our daily operations, and we couldn't be more pleased with its functionality and efficiency.</h2>
                <h2 :class="{ 'block': activeSlide == 3, 'hidden': activeSlide != 3 }" class="hidden text-white text-3xl md:text-4xl font-medium">Vista's bookkeeping software has become an indispensable tool in our workflow, making our accounting tasks seamless and hassle-free.</h2>
                <h2 :class="{ 'block': activeSlide == 4, 'hidden': activeSlide != 4 }" class="hidden text-white text-3xl md:text-4xl font-medium">Thanks to Vista's exceptional bookkeeping software, managing our financial records has never been easier. It's truly a game-changer for our business.</h2>
            </div>
            <div class="absolute -bottom-6 -right-4 w-full h-52 rounded-3xl bg-white bg-opacity-10"></div>
        </div>
        <div class="flex justify-center gap-2">
            <button class="rounded-3xl h-1 w-8 bg-white" x-on:click="activeSlide = 1" :class="{ 'bg-white': activeSlide == 1, 'bg-white bg-opacity-10': activeSlide != 1 }"></button>
            <button class="rounded-3xl h-1 w-8 bg-white bg-opacity-10" x-on:click="activeSlide = 2" :class="{ 'bg-white': activeSlide == 2, 'bg-white bg-opacity-10': activeSlide != 2 }"></button>
            <button class="rounded-3xl h-1 w-8 bg-white bg-opacity-10" x-on:click="activeSlide = 3" :class="{ 'bg-white': activeSlide == 3, 'bg-white bg-opacity-10': activeSlide != 3 }"></button>
            <button class="rounded-3xl h-1 w-8 bg-white bg-opacity-10" x-on:click="activeSlide = 4" :class="{ 'bg-white': activeSlide == 4, 'bg-white bg-opacity-10': activeSlide != 4 }"></button>
        </div>
    </div>
</section>

<section class="position-relative py-12 py-lg-24 bg-danger-dark">
  <div class="container">
    <div class="mw-5xl mx-auto text-center mb-20"><span class="badge mb-4 text-danger-light" style="letter-spacing: 1.44px;">WHAT THEY SAY ABOUT US</span>
      <h3 class="font-heading mb-0">Testimonials</h3>
    </div>
    <div class="mw-4xl mx-auto px-12">
      <div class="position-relative mb-20">
        <div class="position-absolute top-0 start-0 w-100 h-100 mt-6 ms-4 bg-white bg-opacity-10 rounded-4"></div>
        <div class="position-relative ps-10 py-10 pe-20 bg-danger rounded-4">
          <div class="position-absolute top-100 end-0 mt-n3 me-10 text-danger">
            <svg width="44" height="33" viewBox="0 0 44 33" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M26.7544 29.8238C24.3526 32.9439 19.6474 32.9439 17.2456 29.8238L1.72343 9.65996C-1.31375 5.71454 1.49884 -4.5898e-06 6.47787 -4.15452e-06L37.5221 -1.44054e-06C42.5012 -1.00526e-06 45.3138 5.71455 42.2766 9.65996L26.7544 29.8238Z" fill="currentColor"></path>
            </svg>
          </div>
          <div>
            <h4 class="text-white fw-medium">We use Vista daily and we’re very happy that they are created this amazing bookkeeping software.</h4>
          </div>
        </div>
      </div>
      <div class="d-flex align-items-center justify-content-center">
        <button class="btn p-0 me-2 text-light">
          <svg width="32" height="6" viewBox="0 0 32 6" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="32" height="6" rx="3" fill="currentColor"></rect>
          </svg>
        </button>
        <button class="btn p-0 me-2 text-light text-opacity-25">
          <svg width="32" height="6" viewBox="0 0 32 6" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="32" height="6" rx="3" fill="currentColor"></rect>
          </svg>
        </button>
        <button class="btn p-0 me-2 text-light text-opacity-25">
          <svg width="32" height="6" viewBox="0 0 32 6" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="32" height="6" rx="3" fill="currentColor"></rect>
          </svg>
        </button>
        <button class="btn p-0 me-2 text-light text-opacity-25">
          <svg width="32" height="6" viewBox="0 0 32 6" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="32" height="6" rx="3" fill="currentColor"></rect>
          </svg>
        </button>
      </div>
    </div>
  </div>
</section>