Reviews Components in Yofte library

<section class="relative py-20 md:pt-32 bg-blue-800 overflow-x-hidden" x-data="{ showContent: false, slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <img class="absolute h-24 md:h-auto top-0 left-0 right-0" src="yofte-assets/elements/line-top.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <h2 class="mb-20 text-5xl text-white font-bold font-heading">What Customers Say</h2>
    <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
        <div x-ref="slide1" class="flex-shrink-0 w-full p-5">
            <div class="relative max-w-4xl mx-auto">
              <div class="absolute inset-0 border border-gray-500 my-8 -ml-6 -mr-6"></div>
              <div class="relative mx-auto mb-20 py-12 md:py-28 bg-blue-800 border border-white">
                <img class="w-32 h-32 mb-10 mx-auto rounded-full" src="yofte-assets/images/placeholder-portrait.png" alt="">
                <div class="relative max-w-2xl px-4 mx-auto">
                  <img class="hidden md:block absolute top-0 left-0" src="yofte-assets/elements/quote.svg" alt="">
                  <img class="hidden md:block absolute top-0 right-0" src="yofte-assets/elements/quote.svg" alt="">
                  <div class="max-w-md mx-auto px-4">
                    <h3 class="mb-16 text-2xl font-bold font-heading text-white">Tonight I had interdum at ante porta, eleifend feugiat nunc. In semper euismod mi a accumsan. Thaaank you! 👏💥</h3>
                    <div class="flex flex-wrap items-center">
                      <p class="mb-6 md:mb-0 text-gray-300">Alice Kenowski, NYC</p>
                      <div class="ml-auto flex items-center justify-end">
                        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="mr-5 flex items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md">
                          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
                          </svg>
                        </button>
                        <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="flex items-center justify-center w-12 h-12 bg-blue-300 hover:bg-blue-400 rounded-md">
                          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <div x-ref="slide2" class="flex-shrink-0 w-full p-5">
            <div class="relative max-w-4xl mx-auto">
              <div class="absolute inset-0 border border-gray-500 my-8 -ml-6 -mr-6"></div>
              <div class="relative mx-auto mb-20 py-12 md:py-28 bg-blue-800 border border-white">
                <img class="w-32 h-32 mb-10 mx-auto rounded-full" src="yofte-assets/images/placeholder-portrait.png" alt="">
                <div class="relative max-w-2xl px-4 mx-auto">
                  <img class="hidden md:block absolute top-0 left-0" src="yofte-assets/elements/quote.svg" alt="">
                  <img class="hidden md:block absolute top-0 right-0" src="yofte-assets/elements/quote.svg" alt="">
                  <div class="max-w-md mx-auto px-4">
                    <h3 class="mb-16 text-2xl font-bold font-heading text-white">Embracing Serendipity: A Spontaneous Encounter with Interdum at Ante Porta</h3>
                    <div class="flex flex-wrap items-center">
                      <p class="mb-6 md:mb-0 text-gray-300">John Doe, NYC</p>
                      <div class="ml-auto flex items-center justify-end">
                        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="mr-5 flex items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md">
                          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
                          </svg>
                        </button>
                        <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="flex items-center justify-center w-12 h-12 bg-blue-300 hover:bg-blue-400 rounded-md">
                          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <div x-ref="slide3" class="flex-shrink-0 w-full p-5">
            <div class="relative max-w-4xl mx-auto">
              <div class="absolute inset-0 border border-gray-500 my-8 -ml-6 -mr-6"></div>
              <div class="relative mx-auto mb-20 py-12 md:py-28 bg-blue-800 border border-white">
                <img class="w-32 h-32 mb-10 mx-auto rounded-full" src="yofte-assets/images/placeholder-portrait.png" alt="">
                <div class="relative max-w-2xl px-4 mx-auto">
                  <img class="hidden md:block absolute top-0 left-0" src="yofte-assets/elements/quote.svg" alt="">
                  <img class="hidden md:block absolute top-0 right-0" src="yofte-assets/elements/quote.svg" alt="">
                  <div class="max-w-md mx-auto px-4">
                    <h3 class="mb-16 text-2xl font-bold font-heading text-white">Through the Lens of Taste: Capturing the Essence of Interdum at Ante Porta</h3>
                    <div class="flex flex-wrap items-center">
                      <p class="mb-6 md:mb-0 text-gray-300">Anthony Smith, NYC</p>
                      <div class="ml-auto flex items-center justify-end">
                        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="mr-5 flex items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md">
                          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
                          </svg>
                        </button>
                        <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="flex items-center justify-center w-12 h-12 bg-blue-300 hover:bg-blue-400 rounded-md">
                          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
    <div :class="{'hidden': showContent}" class="text-center"><a x-on:click.prevent="showContent = true" class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-5 px-8 rounded-md uppercase" href="#">Show More</a></div>
  </div>
</section>

<section class="section pt-32-tablet is-relative has-background-dark is-clipped">
  <img class="is-absolute is-top-0 is-left-0 is-right-0 image is-fullwidth" src="yofte-assets/elements/line-top.svg" alt="">
  <div class="container is-relative">
    <h2 class="title has-text-white mb-20">What Customers Say</h2>
    <div class="has-mw-4xl mx-auto is-relative">
      <div class="-ml-6 -mr-6 mt-12 mb-12 is-absolute is-top-0 is-bottom-0 is-left-0 is-right-0" style="border: 1px solid rgba(255, 255, 255, 0.6);"></div>
      <div class="mx-auto mb-20 py-12 py-28-tablet is-relative has-background-dark" style="border: 1px solid rgba(255, 255, 255, 0.6);">
        <img class="mx-auto mb-10 is-block is-rounded" style="width: 128px; height: 128px; border-radius: 50% !important;" src="yofte-assets/images/placeholder-portrait.png" alt="">
        <div class="has-mw-2xl mx-auto px-4 is-relative">
          <img class="is-absolute is-hidden-touch is-top-0 is-left-0 image" src="yofte-assets/elements/quote.svg" alt="">
          <img class="is-absolute is-hidden-touch is-top-0 is-right-0 image" src="yofte-assets/elements/quote.svg" alt="">
          <div class="has-mw-xl mx-auto px-4">
            <h5 class="title is-size-4 has-text-white mb-16">Tonight I had interdum at ante porta, eleifend feugiat nunc. In semper euismod mi a accumsan. Thaaank you! &#x1F44F;&#x1F4A5;</h5>
            <div class="is-flex is-align-items-center">
              <p class="has-text-grey-dark mb-6 mb-0-tablet">Alice Kenowski, NYC</p>
              <div class="ml-auto is-flex is-justify-content-end is-align-items-center">
                <a class="button is-primary p-0 mr-5" href="#" style="width: 48px; height: 48px;">
                  <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
                  </svg>
                </a>
                <a class="button is-info p-0" href="#" style="width: 48px; height: 48px;">
                  <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="has-text-centered"><a class="button is-primary" href="#">Show More</a></div>
  </div>
</section>

<section class="position-relative py-20 pt-md-32 bg-dark overflow-hidden"><img class="position-absolute top-0 start-0 end-0 img-fluid" src="yofte-assets/elements/line-top.svg" alt=""/>
  <div class="position-relative container">
    <h2 class="mb-20 text-white" >What Customers Say</h2>
    <div class="position-relative mw-4xl mx-auto">
      <div class="position-absolute top-50 translate-middle-y start-0 end-0 border ms-n6 me-n6" style="height: 90%;"></div>
      <div class="position-relative mx-auto mb-20 py-12 py-md-28 bg-dark border border-white"><img class="mb-10 d-block mx-auto rounded-circle" style="width: 128px; height: 128px;" src="yofte-assets/images/placeholder-portrait.png" alt="" />
        <div class="position-relative mw-2xl px-4 mx-auto"><img class="d-none d-md-block position-absolute top-0 start-0 img-fluid" src="yofte-assets/elements/quote.svg" alt=""/><img class="d-none d-md-block position-absolute top-0 end-0 img-fluid" src="yofte-assets/elements/quote.svg" alt=""/>
          <div class="mw-md mx-auto px-4">
            <h5 class="mb-16 text-white" >Tonight I had interdum at ante porta, eleifend feugiat nunc. In semper euismod mi a accumsan. Thaaank you! &#x1F44F;&#x1F4A5;</h5>
            <div class="d-flex flex-wrap align-items-center">
              <p class="mb-6 mb-md-0 text-muted"  >Alice Kenowski, NYC</p>
              <div class="ms-auto d-flex align-items-center justify-content-end"><a class="me-5 d-flex align-items-center justify-content-center bg-primary rounded-2" href="#" style="width: 48px; height: 48px;">
                  <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
                  </svg></a><a class="d-flex align-items-center justify-content-center bg-info rounded-2" href="#" style="width: 48px; height: 48px;">
                  <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
                  </svg></a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center"><a class="btn btn-primary" href="#" >Show More</a></div>
  </div>
</section>