    
      <section x-data="{ current: 0 }" class="wave-top wave-bottom">
        <div class="wave wave-top w-full text-coolGray-900">
          <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
          </svg>
        </div>
        <div class="py-16 md:py-24 bg-coolGray-900" style="background-image: url('{{ asset('/flex-ui-assets/elements/pattern-dark.svg') }}'); background-position: center;">
          <div class="container px-4 mx-auto">
              <div x-show="current === 0">
                  <div class="relative max-w-5xl sm:px-6 pb-6 mb-10 mx-auto text-center">
                    <img class="absolute top-0 left-0" src="{{ asset('/flex-ui-assets/elements/testimonials/quote-top-dark.svg') }}" alt="">
                    <img class="absolute bottom-0 right-0" src="{{ asset('/flex-ui-assets/elements/testimonials/quote-down-dark.svg') }}" alt="">
                    <div class="relative">
                      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Quotes</span>
                      <h2 class="text-2xl md:text-5xl text-white font-semibold tracking-tighter">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h2>
                    </div>
                  </div>
                  <div class="text-center mb-8">
                    <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="{{ asset('/flex-ui-assets/images/testimonials/avatar1.png') }}" alt="">
                    <h3 class="mb-2 text-xl md:text-2xl text-white font-semibold">Darren Dunlap</h3>
                    <span class="text-lg text-coolGray-600 font-medium">CEO &amp; Founder at Flex.co</span>
                  </div>
              </div>
              <div x-show="current === 1">
                  <div class="relative max-w-5xl sm:px-6 pb-6 mb-10 mx-auto text-center">
                    <img class="absolute top-0 left-0" src="{{ asset('/flex-ui-assets/elements/testimonials/quote-top-dark.svg') }}" alt="">
                    <img class="absolute bottom-0 right-0" src="{{ asset('/flex-ui-assets/elements/testimonials/quote-down-dark.svg') }}" alt="">
                    <div class="relative">
                      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Quotes</span>
                      <h2 class="text-2xl md:text-5xl text-white font-semibold tracking-tighter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</h2>
                    </div>
                  </div>
                  <div class="text-center mb-8">
                    <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="{{ asset('/flex-ui-assets/images/testimonials/avatar1.png') }}" alt="">
                    <h3 class="mb-2 text-xl md:text-2xl text-white font-semibold">John Doe</h3>
                    <span class="text-lg text-coolGray-600 font-medium">CEO &amp; Founder at Flex.co</span>
                  </div>
              </div>
              <div x-show="current === 2">
                  <div class="relative max-w-5xl sm:px-6 pb-6 mb-10 mx-auto text-center">
                    <img class="absolute top-0 left-0" src="{{ asset('/flex-ui-assets/elements/testimonials/quote-top-dark.svg') }}" alt="">
                    <img class="absolute bottom-0 right-0" src="{{ asset('/flex-ui-assets/elements/testimonials/quote-down-dark.svg') }}" alt="">
                    <div class="relative">
                      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Quotes</span>
                      <h2 class="text-2xl md:text-5xl text-white font-semibold tracking-tighter">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h2>
                    </div>
                  </div>
                  <div class="text-center mb-8">
                    <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="{{ asset('/flex-ui-assets/images/testimonials/avatar1.png') }}" alt="">
                    <h3 class="mb-2 text-xl md:text-2xl text-white font-semibold">David P. Pry</h3>
                    <span class="text-lg text-coolGray-600 font-medium">CEO &amp; Founder at Flex.co</span>
                  </div>
              </div>
              <div class="flex justify-center items-center gap-3">
                  <div x-on:click="current = 0" :class="{'bg-green-500': current === 0, 'bg-coolGray-700': current !== 0 }" class="inline-block h-3 w-3 rounded-full cursor-pointer"></div>
                  <div x-on:click="current = 1" :class="{'bg-green-500': current === 1, 'bg-coolGray-700': current !== 1 }" class="inline-block h-3 w-3 rounded-full cursor-pointer"></div>
                  <div x-on:click="current = 2" :class="{'bg-green-500': current === 2, 'bg-coolGray-700': current !== 2 }" class="inline-block h-3 w-3 rounded-full cursor-pointer"></div>
              </div>
          </div>
        </div>
        <div class="wave wave-bottom w-full text-coolGray-900">
          <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1440 51.4091H1090.08C833.336 51.4091 580.229 116 360 116C139.771 116 0 51.4091 0 51.4091V0H1440V51.4091Z" fill="currentColor"></path>
          </svg>
        </div>
      </section>