Tailwind CSS Testimonials Components

<section x-data="{ current: 0 }" class="relative py-20 lg:py-32 overflow-hidden">
  <img class="absolute top-0 left-0" src="saturn-assets/images/testimonials/blue-light.png" alt="">
  <img class="absolute bottom-0 right-0" src="saturn-assets/images/testimonials/orange-light.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-lg lg:max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-18 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="max-w-md xl:max-w-xl">
            <h1 class="font-heading text-4xl xs:text-6xl font-bold text-gray-900">
              <span>Our</span>
              <span class="font-serif italic">happy</span>
              <span>clients says about us</span>
            </h1>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-md lg:ml-auto">
            <p class="text-gray-500">Risus viverra justo sagittis vestibulum metus. Massa lacinia eros posuere cursus sed vestibulum massa gravida. Turpis volutpat faucibus hac sed suspendisse convallis vestibulum massa.</p>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="lg:max-w-md xl:max-w-lg">
            <img class="block w-full" src="saturn-assets/images/testimonials/men-photo.png" alt="">
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-lg">
            <img class="block mb-8" src="saturn-assets/images/testimonials/quote.svg" alt="">
            <div :class="{ 'hidden': current != 0 }">
                <p class="text-2xl font-semibold text-gray-900 mb-5">“They are able to help a startup like mine scale and are very responsive to all our unique needs”</p>
                <span class="block text-gray-900 font-semibold mb-1">— Yacob Sudarmaji</span>
                <span class="block text-gray-500 mb-10">Product Manager, XYZ Tech</span>
            </div>
            <div :class="{ 'hidden': current != 1 }" class="hidden">
                <p class="text-2xl font-semibold text-gray-900 mb-5">“The best solution for anyone who wants to work a flexible schedule but still earn a full-time income”</p>
                <span class="block text-gray-900 font-semibold mb-1">— Darren Dunlap</span>
                <span class="block text-gray-500 mb-10">Founder of Saturn</span>
            </div>
            <div :class="{ 'hidden': current != 2 }" class="hidden">
                <p class="text-2xl font-semibold text-gray-900 mb-5">“Saturn has proven to be a reliable partner for scaling our business. Their responsiveness to our startup's unique needs has been crucial in navigating challenges and achieving success”</p>
                <span class="block text-gray-900 font-semibold mb-1">— John Doe</span>
                <span class="block text-gray-500 mb-10">CTO of Coca Soft</span>
            </div>
            <div :class="{ 'hidden': current != 3 }" class="hidden">
                <p class="text-2xl font-semibold text-gray-900 mb-5">“Saturn has been an exceptional growth partner for our agency. Their ability to assist our startup in scaling and their responsiveness to our specific needs have been invaluable”</p>
                <span class="block text-gray-900 font-semibold mb-1">— David P. Pry</span>
                <span class="block text-gray-500 mb-10">CEO of Sans Design</span>
            </div>
            <div>
              <div x-on:click="current = 0" :class="{'bg-orange-900': current === 0, 'bg-gray-200': current !== 0 }" class="inline-block mr-3 w-3 h-3 bg-orange-900 rounded-full cursor-pointer"></div>
              <div x-on:click="current = 1" :class="{'bg-orange-900': current === 1, 'bg-gray-200': current !== 1 }" class="inline-block mr-3 w-3 h-3 bg-gray-200 rounded-full cursor-pointer"></div>
              <div x-on:click="current = 2" :class="{'bg-orange-900': current === 2, 'bg-gray-200': current !== 2 }" class="inline-block mr-3 w-3 h-3 bg-gray-200 rounded-full cursor-pointer"></div>
              <div x-on:click="current = 3" :class="{'bg-orange-900': current === 3, 'bg-gray-200': current !== 3 }" class="inline-block mr-3 w-3 h-3 bg-gray-200 rounded-full cursor-pointer"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-20">
      <div class="w-full lg:w-5/12 px-20 mb-16 lg:mb-0">
        <div class="relative">
          <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
          <div class="relative p-1 border border-white border-opacity-20 rounded-2xl">
            <img class="mx-auto bg-center object-cover rounded-xl border border-neutral-800 w-full" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=8&amp;w=700&amp;h=700&amp;q=80" alt="">
          </div>
        </div>
      </div>
      <div class="w-full lg:w-7/12 px-20">
        <div class="relative">
          <div class="remb-6">
            <svg class="w-12 h-12 text-white" viewBox="0 0 24 24" fill="currentColor">
              <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h4v10h-10z"></path>
            </svg>
          </div>
          <h2 class="mb-4 text-3xl md:text-4xl md:leading-tight lg:text-5xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="mb-9 max-w-xl text-base lg:text-xl lg:leading-relaxed text-neutral-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <p class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Danny Bailey</p>
          <p class="text-lg text-neutral-400">CEO &amp; Founder</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative pt-24 pb-32 bg-white overflow-hidden">
  <img class="absolute top-0 left-0" src="flaro-assets/images/testimonials/gradient.svg" alt="">
  <img class="absolute bottom-0 right-0" src="flaro-assets/images/testimonials/gradient2.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <h2 class="mb-16 text-6xl md:text-7xl font-bold font-heading text-center tracking-px-n leading-tight">Don't just take our word for it</h2>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 lg:w-1/3 p-3">
        <div class="p-6 h-full bg-white bg-opacity-60 border rounded-4xl">
          <div class="flex flex-col justify-between h-full">
            <div class="mb-5 block">
              <div class="flex flex-wrap mb-4 -m-2">
                <div class="w-auto p-2">
                  <img class="h-12 rounded-full" src="flaro-assets/images/testimonials/avatar.png" alt="">
                </div>
                <div class="w-auto p-2">
                  <h3 class="font-semibold leading-normal">Jacob Jones</h3>
                  <p class="text-gray-500 uppercase">@brooklysim</p>
                </div>
              </div>
              <p class="text-lg font-medium">If you haven’t tried out Flaro App yet, I would definitely recommend it for both designers and developers 🤙🏻</p>
            </div>
            <div class="block">
              <p class="text-sm text-gray-500 font-medium">3 days ago</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-3">
        <div class="p-6 h-full bg-white bg-opacity-60 border rounded-4xl">
          <div class="flex flex-col justify-between h-full">
            <div class="mb-5 block">
              <div class="flex flex-wrap mb-4 -m-2">
                <div class="w-auto p-2">
                  <img class="h-12 rounded-full" src="flaro-assets/images/testimonials/avatar2.png" alt="">
                </div>
                <div class="w-auto p-2">
                  <h3 class="font-semibold leading-normal">Wade Warren</h3>
                  <p class="text-gray-500 uppercase">@brooklysim</p>
                </div>
              </div>
              <p class="text-lg font-medium">If you are thinking of a design partner to help you convert more customers, Flaro is a great choice.</p>
            </div>
            <div class="block">
              <p class="text-sm text-gray-500 font-medium">3 days ago</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-3">
        <div class="p-6 h-full bg-white bg-opacity-60 border rounded-4xl">
          <div class="flex flex-col justify-between h-full">
            <div class="mb-5 block">
              <div class="flex flex-wrap mb-4 -m-2">
                <div class="w-auto p-2">
                  <img class="h-12 rounded-full" src="flaro-assets/images/testimonials/avatar3.png" alt="">
                </div>
                <div class="w-auto p-2">
                  <h3 class="font-semibold leading-normal">Bessie Cooper</h3>
                  <p class="text-gray-500 uppercase">@brooklysim</p>
                </div>
              </div>
              <p class="text-lg font-medium">We have built a few web apps using Flaro. It saves us a lot of time, because we don't have to build design features from scratch.</p>
            </div>
            <div class="block">
              <p class="text-sm text-gray-500 font-medium">3 days ago</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-3">
        <div class="p-6 h-full bg-white bg-opacity-60 border rounded-4xl">
          <div class="flex flex-col justify-between h-full">
            <div class="mb-5 block">
              <div class="flex flex-wrap mb-4 -m-2">
                <div class="w-auto p-2">
                  <img class="h-12 rounded-full" src="flaro-assets/images/testimonials/avatar4.png" alt="">
                </div>
                <div class="w-auto p-2">
                  <h3 class="font-semibold leading-normal">Esther Howard</h3>
                  <p class="text-gray-500 uppercase">@brooklysim</p>
                </div>
              </div>
              <p class="text-lg font-medium">Wrike is great to make work visible and collaborative. People can pass tasks off as they complete their parts, allowing you to see the flow of work.</p>
            </div>
            <div class="block">
              <p class="text-sm text-gray-500 font-medium">3 days ago</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-3">
        <div class="p-6 h-full bg-white bg-opacity-60 border rounded-4xl">
          <div class="flex flex-col justify-between h-full">
            <div class="mb-5 block">
              <div class="flex flex-wrap mb-4 -m-2">
                <div class="w-auto p-2">
                  <img class="h-12 rounded-full" src="flaro-assets/images/testimonials/avatar5.png" alt="">
                </div>
                <div class="w-auto p-2">
                  <h3 class="font-semibold leading-normal">Albert Flores</h3>
                  <p class="text-gray-500 uppercase">@brooklysim</p>
                </div>
              </div>
              <p class="text-lg font-medium">Ease of use and efficiency of design tools. The ability for the integrated marketing team to see all aspects of a project.</p>
            </div>
            <div class="block">
              <p class="text-sm text-gray-500 font-medium">3 days ago</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-3">
        <div class="p-6 h-full bg-white bg-opacity-60 border rounded-4xl">
          <div class="flex flex-col justify-between h-full">
            <div class="mb-5 block">
              <div class="flex flex-wrap mb-4 -m-2">
                <div class="w-auto p-2">
                  <img class="h-12 rounded-full" src="flaro-assets/images/testimonials/avatar6.png" alt="">
                </div>
                <div class="w-auto p-2">
                  <h3 class="font-semibold leading-normal">Jerome Bell</h3>
                  <p class="text-gray-500 uppercase">@brooklysim</p>
                </div>
              </div>
              <p class="text-lg font-medium">Very very easy for customer information to get secured if all orders are on one device.</p>
            </div>
            <div class="block">
              <p class="text-sm text-gray-500 font-medium">3 days ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative pt-24 pb-32 overflow-hidden">
  <div class="container mx-auto px-4">
    <h2 class="mb-5 max-w-2xl mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >12k+ Happy Clients</h2>
    <p class="mb-16 text-base max-w-md mx-auto text-center text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    <div class="flex flex-wrap -m-5">
      <div class="w-full md:w-1/3 p-5">
        <div class="h-full p-0.5 bg-gradient-cyan transform hover:-translate-y-3 rounded-10 transition ease-out duration-1000">
          <div class="h-full px-7 py-8 bg-white rounded-lg"><img class="mb-8" src="gradia-assets/images/testimonials/avatar.png" alt="">
            <p class="mb-8 text-lg text-gray-900" >“You made it so simple. My new site is so much faster and easier to work with than my old site. I just choose the page, make the change.”</p>
            <h3 class="mb-1.5 font-heading font-bold text-lg text-gray-900" >Darrell Steward</h3>
            <p class="text-sm text-gray-600" >Product Designer</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-5">
        <div class="h-full p-0.5 bg-gradient-cyan transform hover:-translate-y-3 rounded-10 shadow-5xl transition ease-out duration-1000">
          <div class="h-full px-7 py-8 bg-white rounded-lg"><img class="mb-8" src="gradia-assets/images/testimonials/avatar2.png" alt="">
            <p class="mb-8 text-lg text-gray-900" >“Simply the best. Better than all the rest. I’d recommend this product to beginners and advanced users.”</p>
            <h3 class="mb-1.5 font-heading font-bold text-lg text-gray-900" >Ronald Richards</h3>
            <p class="text-sm text-gray-600" >Software Engineer</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-5">
        <div class="h-full p-0.5 bg-gradient-cyan transform hover:-translate-y-3 rounded-10 transition ease-out duration-1000">
          <div class="h-full px-7 py-8 bg-white rounded-lg"><img class="mb-8" src="gradia-assets/images/testimonials/avatar3.png" alt="">
            <p class="mb-8 text-lg text-gray-900" >“I cannot believe that I have got a brand new landing page after getting Omega. It was super easy to edit and publish.”</p>
            <h3 class="mb-1.5 font-heading font-bold text-lg text-gray-900" >Darrell Steward</h3>
            <p class="text-sm text-gray-600" >Product Designer</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 5 }">
  <div class="container mx-auto px-4">
    <h1 class="text-4xl lg:text-5xl text-center font-bold font-heading max-w-md lg:max-w-xl mx-auto mb-24">For those seeking an enjoyable way to learn</h1>
    <div class="h-96 mb-32 lg:mb-16">
      <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -mx-4">
        <div x-ref="slide1" class="flex-shrink-0 w-full max-w-sm px-4">
          <div class="border border-gray-100 shadow rounded-3xl p-8">
            <div class="flex items-center flex-wrap gap-4 mb-20">
              <div class="bg-orange-50 rounded-xl overflow-hidden">
                <img src="solstice-assets/images/testimonials/man-avatar3.png" alt="">
              </div>
              <div class="p-2 rounded-lg bg-gray-50 bg-opacity-50">
                <p>
                  <span class="font-bold font-heading">Ethan Maynard,</span>
                  <span></span>
                  <span class="text-gray-400">Student</span>
                </p>
              </div>
            </div>
            <p class="text-gray-700 text-lg">“Yesterday I had my first day to study. What a great experience learning something so useful in simple ways!.”</p>
          </div>
        </div>
        <div x-ref="slide2" class="flex-shrink-0 w-full max-w-sm px-4">
          <div class="border border-gray-100 shadow rounded-3xl p-8">
            <div class="flex items-center flex-wrap gap-4 mb-20">
              <div class="bg-orange-50 rounded-xl overflow-hidden">
                <img src="solstice-assets/images/testimonials/man-avatar1.png" alt="">
              </div>
              <div class="p-2 rounded-lg bg-gray-50 bg-opacity-50">
                <p>
                  <span class="font-bold font-heading">Steven Klein,</span>
                  <span></span>
                  <span class="text-gray-400">Student</span>
                </p>
              </div>
            </div>
            <p class="text-gray-700 text-lg">“I've been more productive with Solstice and my academic performance is getting better every semester.”</p>
          </div>
        </div>
        <div x-ref="slide3" class="flex-shrink-0 w-full max-w-sm px-4">
          <div class="border border-gray-100 shadow rounded-3xl px-8 lg:px-12 py-8 lg:py-14 relative">
            <div class="absolute bottom-20 -right-6">
              <svg xmlns="http://www.w3.org/2000/svg" width="57" height="65" viewBox="0 0 57 65" fill="none">
                <g filter="url(#filter0_d_185_3282)">
                  <path d="M2.57076 1.83286C2.48332 1.4058 2.93358 1.07148 3.304 1.28843L54.6184 31.3429C54.9928 31.5622 54.9274 32.1332 54.5129 32.2635L28.9156 40.3104C28.8037 40.3456 28.7074 40.4199 28.6437 40.5202L15.5706 61.1006C15.3297 61.4799 14.7611 61.3747 14.6709 60.9342L2.57076 1.83286Z" fill="#FF7100"></path>
                  <path d="M26.9838 39.4298L26.9837 39.4298L15.8744 56.9188L5.189 4.72776L50.666 31.3633L28.3433 38.3808C27.7839 38.5567 27.3024 38.9282 26.9838 39.4298Z" stroke="white" stroke-width="4"></path>
                </g>
                <defs><filter id="filter0_d_185_3282" x="0.559814" y="0.220398" width="56.3052" height="64.1128" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix><feOffset dy="1"></feOffset><feGaussianBlur stdDeviation="1"></feGaussianBlur><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.28 0"></feColorMatrix><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_185_3282"></feBlend><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_185_3282" result="shape"></feBlend></filter></defs>
              </svg>
            </div>
            <div class="flex items-center flex-wrap gap-4 mb-20">
              <div class="rounded-xl overflow-hidden">
                <img src="solstice-assets/images/testimonials/woman-avatar1.png" alt="">
              </div>
              <div class="p-2 rounded-lg bg-gray-50 bg-opacity-50">
                <p>
                  <span class="font-bold font-heading">Hanna Stanton,</span>
                  <span></span>
                  <span class="text-gray-400">Student</span>
                </p>
              </div>
            </div>
            <p class="font-medium text-xl">“I can invite my friend to study in specific topic together. They took learning to the next level.”</p>
          </div>
        </div>
        <div x-ref="slide4" class="flex-shrink-0 w-full max-w-sm px-4">
          <div class="border border-gray-100 shadow rounded-3xl p-8">
            <div class="flex items-center flex-wrap gap-4 mb-20">
              <div class="rounded-xl overflow-hidden">
                <img src="solstice-assets/images/testimonials/man-avatar2.png" alt="">
              </div>
              <div class="p-2 rounded-lg bg-gray-50 bg-opacity-50">
                <p>
                  <span class="font-bold font-heading">Levin Sandoval,</span>
                  <span></span>
                  <span class="text-gray-400">Student</span>
                </p>
              </div>
            </div>
            <p class="text-gray-700 text-lg">“What a great learning experience. I had my first day to study learning something so useful in simple ways!”</p>
          </div>
        </div>
        <div x-ref="slide5" class="flex-shrink-0 w-full max-w-sm px-4">
          <div class="border border-gray-100 shadow rounded-3xl p-8">
            <div class="flex items-center flex-wrap gap-4 mb-20">
              <div class="bg-orange-50 rounded-xl overflow-hidden">
                <img src="solstice-assets/images/testimonials/woman-avatar2.png" alt="">
              </div>
              <div class="p-2 rounded-lg bg-gray-50 bg-opacity-50">
                <p>
                  <span class="font-bold font-heading">Elena Rae,</span>
                  <span></span>
                  <span class="text-gray-400">Student</span>
                </p>
              </div>
            </div>
            <p class="text-gray-700 text-lg">“Yesterday I had my first day to study. What a great experience learning something so useful in simple ways! ”</p>
          </div>
        </div>
      </div>
    </div>
    <div class="flex mx-auto w-40 h-1.5 bg-gray-50 rounded-full">
      <a href="#" x-on:click.prevent="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" :class="{ 'bg-orange-500': activeSlide == 0 }" class="block w-1/5 h-1.5 bg-orange-500 rounded-full"></a>
      <a href="#" x-on:click.prevent="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" :class="{ 'bg-orange-500': activeSlide == 1 }" class="block w-1/5 h-1.5 bg-transparent rounded-full"></a>
      <a href="#" x-on:click.prevent="activeSlide = 2, slideWidth = $refs['slide3'].offsetWidth * 2" :class="{ 'bg-orange-500': activeSlide == 2 }" class="block w-1/5 h-1.5 bg-transparent rounded-full"></a>
      <a href="#" x-on:click.prevent="activeSlide = 3, slideWidth = $refs['slide4'].offsetWidth * 3" :class="{ 'bg-orange-500': activeSlide == 3 }" class="block w-1/5 h-1.5 bg-transparent rounded-full"></a>
      <a href="#" x-on:click.prevent="activeSlide = 4, slideWidth = $refs['slide5'].offsetWidth * 4" :class="{ 'bg-orange-500': activeSlide == 4 }" class="block w-1/5 h-1.5 bg-transparent rounded-full"></a>
    </div>
  </div>
</section>

<section class="relative py-24 lg:pb-28 bg-gray-100 overflow-hidden">
  <div class="absolute top-0 left-0 w-24 md:w-96 h-full" style="background: linear-gradient(90deg, #F3F7FA 10.94%, rgba(243, 247, 250, 0) 100%);"></div>
  <div class="absolute top-0 right-0 w-24 md:w-96 h-full transform rotate-180" style="background: linear-gradient(90deg, #F3F7FA 10.94%, rgba(243, 247, 250, 0) 100%);"></div>
  <div class="container px-4 mx-auto">
    <div class="relative max-w-xl text-center mx-auto mb-16">
      <h2 class="font-heading mb-4 text-6xl tracking-tighter">What our clients say</h2>
      <p class="text-xl tracking-tight">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
    </div>
    <div class="max-w-4xl mx-auto">
      <div class="flex flex-nowrap justify-center -m-3 mb-3">
        <div class="flex-shrink-0 w-96 p-3">
          <div class="p-6 bg-white hover:bg-opacity-80 border border-gray-200 hover:border-gray-300 rounded-xl transition duration-200">
            <div class="flex flex-wrap justify-between -m-2 mb-6">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="basko-assets/images/testimonials/avatar.png" alt="">
                  </div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-semibold tracking-tight">Margie Sutton</h3>
                    <span class="text-sm tracking-tight">@andysm</span>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.9465 5.42638C20.9603 5.62475 20.9603 5.82313 20.9603 6.02338C20.9603 12.123 16.3168 19.1578 7.82588 19.1578V19.154C5.31752 19.1576 2.86113 18.4393 0.75 17.0846C1.11475 17.1285 1.48125 17.1504 1.84875 17.1513C3.92771 17.1529 5.94685 16.4556 7.58175 15.1714C6.61849 15.1532 5.68501 14.8344 4.9118 14.2597C4.13859 13.6849 3.56431 12.8829 3.26925 11.9658C3.96085 12.0991 4.67382 12.0719 5.35325 11.8863C3.19975 11.4511 1.65037 9.55901 1.65037 7.3615V7.30301C2.29236 7.66058 3.01085 7.85872 3.74538 7.88076C1.71713 6.52513 1.09188 3.82675 2.31663 1.717C3.47554 3.14312 4.92149 4.3095 6.56056 5.14038C8.19963 5.97125 9.99515 6.44804 11.8305 6.53975C11.6475 5.75205 11.6745 4.93011 11.9089 4.15613C12.1432 3.38215 12.5767 2.68327 13.1659 2.12937C15.0251 0.381619 17.9493 0.471244 19.697 2.3295C20.7308 2.1254 21.7221 1.74642 22.6284 1.20887C22.2838 2.2777 21.5626 3.18496 20.5991 3.76187C21.5142 3.65406 22.4078 3.40911 23.25 3.03525C22.6305 3.963 21.8505 4.77265 20.9465 5.42638Z" fill="#3EAEFF"></path>
                </svg>
              </div>
            </div>
            <p>
              <span>“</span>
              <span class="text-indigo-500">@Basko</span>
              <span>has completely revolutionized the way I work. I used to waste so much time on manual tasks, but now everything is automated and streamlined.”</span>
            </p>
          </div>
        </div>
        <div class="flex-shrink-0 w-96 p-3">
          <div class="p-6 bg-white hover:bg-opacity-80 border border-gray-200 hover:border-gray-300 rounded-xl transition duration-200">
            <div class="flex flex-wrap justify-between -m-2 mb-6">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="basko-assets/images/testimonials/avatar2.png" alt="">
                  </div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-semibold tracking-tight">Luke Mccormick</h3>
                    <span class="text-sm tracking-tight">@andysm</span>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.9465 5.42638C20.9603 5.62475 20.9603 5.82313 20.9603 6.02338C20.9603 12.123 16.3168 19.1578 7.82588 19.1578V19.154C5.31752 19.1576 2.86113 18.4393 0.75 17.0846C1.11475 17.1285 1.48125 17.1504 1.84875 17.1513C3.92771 17.1529 5.94685 16.4556 7.58175 15.1714C6.61849 15.1532 5.68501 14.8344 4.9118 14.2597C4.13859 13.6849 3.56431 12.8829 3.26925 11.9658C3.96085 12.0991 4.67382 12.0719 5.35325 11.8863C3.19975 11.4511 1.65037 9.55901 1.65037 7.3615V7.30301C2.29236 7.66058 3.01085 7.85872 3.74538 7.88076C1.71713 6.52513 1.09188 3.82675 2.31663 1.717C3.47554 3.14312 4.92149 4.3095 6.56056 5.14038C8.19963 5.97125 9.99515 6.44804 11.8305 6.53975C11.6475 5.75205 11.6745 4.93011 11.9089 4.15613C12.1432 3.38215 12.5767 2.68327 13.1659 2.12937C15.0251 0.381619 17.9493 0.471244 19.697 2.3295C20.7308 2.1254 21.7221 1.74642 22.6284 1.20887C22.2838 2.2777 21.5626 3.18496 20.5991 3.76187C21.5142 3.65406 22.4078 3.40911 23.25 3.03525C22.6305 3.963 21.8505 4.77265 20.9465 5.42638Z" fill="#3EAEFF"></path>
                </svg>
              </div>
            </div>
            <p>
              <span>“</span>
              <span class="text-indigo-500">@Basko</span>
              <span>has completely revolutionized the way I work. I used to waste so much time on manual tasks, but now everything is automated and streamlined.”</span>
            </p>
          </div>
        </div>
        <div class="flex-shrink-0 w-96 p-3">
          <div class="p-6 bg-white hover:bg-opacity-80 border border-gray-200 hover:border-gray-300 rounded-xl transition duration-200">
            <div class="flex flex-wrap justify-between -m-2 mb-6">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="basko-assets/images/testimonials/avatar3.png" alt="">
                  </div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-semibold tracking-tight">Danielle Watkins</h3>
                    <span class="text-sm tracking-tight">@andysm</span>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.9465 5.42638C20.9603 5.62475 20.9603 5.82313 20.9603 6.02338C20.9603 12.123 16.3168 19.1578 7.82588 19.1578V19.154C5.31752 19.1576 2.86113 18.4393 0.75 17.0846C1.11475 17.1285 1.48125 17.1504 1.84875 17.1513C3.92771 17.1529 5.94685 16.4556 7.58175 15.1714C6.61849 15.1532 5.68501 14.8344 4.9118 14.2597C4.13859 13.6849 3.56431 12.8829 3.26925 11.9658C3.96085 12.0991 4.67382 12.0719 5.35325 11.8863C3.19975 11.4511 1.65037 9.55901 1.65037 7.3615V7.30301C2.29236 7.66058 3.01085 7.85872 3.74538 7.88076C1.71713 6.52513 1.09188 3.82675 2.31663 1.717C3.47554 3.14312 4.92149 4.3095 6.56056 5.14038C8.19963 5.97125 9.99515 6.44804 11.8305 6.53975C11.6475 5.75205 11.6745 4.93011 11.9089 4.15613C12.1432 3.38215 12.5767 2.68327 13.1659 2.12937C15.0251 0.381619 17.9493 0.471244 19.697 2.3295C20.7308 2.1254 21.7221 1.74642 22.6284 1.20887C22.2838 2.2777 21.5626 3.18496 20.5991 3.76187C21.5142 3.65406 22.4078 3.40911 23.25 3.03525C22.6305 3.963 21.8505 4.77265 20.9465 5.42638Z" fill="#3EAEFF"></path>
                </svg>
              </div>
            </div>
            <p>
              <span>“</span>
              <span class="text-indigo-500">@Basko</span>
              <span>has completely revolutionized the way I work. I used to waste so much time on manual tasks, but now everything is automated and streamlined.”</span>
            </p>
          </div>
        </div>
        <div class="flex-shrink-0 w-96 p-3">
          <div class="p-6 bg-white hover:bg-opacity-80 border border-gray-200 hover:border-gray-300 rounded-xl transition duration-200">
            <div class="flex flex-wrap justify-between -m-2 mb-6">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="basko-assets/images/testimonials/avatar4.png" alt="">
                  </div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-semibold tracking-tight">Fernando Sims</h3>
                    <span class="text-sm tracking-tight">@andysm</span>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.9465 5.42638C20.9603 5.62475 20.9603 5.82313 20.9603 6.02338C20.9603 12.123 16.3168 19.1578 7.82588 19.1578V19.154C5.31752 19.1576 2.86113 18.4393 0.75 17.0846C1.11475 17.1285 1.48125 17.1504 1.84875 17.1513C3.92771 17.1529 5.94685 16.4556 7.58175 15.1714C6.61849 15.1532 5.68501 14.8344 4.9118 14.2597C4.13859 13.6849 3.56431 12.8829 3.26925 11.9658C3.96085 12.0991 4.67382 12.0719 5.35325 11.8863C3.19975 11.4511 1.65037 9.55901 1.65037 7.3615V7.30301C2.29236 7.66058 3.01085 7.85872 3.74538 7.88076C1.71713 6.52513 1.09188 3.82675 2.31663 1.717C3.47554 3.14312 4.92149 4.3095 6.56056 5.14038C8.19963 5.97125 9.99515 6.44804 11.8305 6.53975C11.6475 5.75205 11.6745 4.93011 11.9089 4.15613C12.1432 3.38215 12.5767 2.68327 13.1659 2.12937C15.0251 0.381619 17.9493 0.471244 19.697 2.3295C20.7308 2.1254 21.7221 1.74642 22.6284 1.20887C22.2838 2.2777 21.5626 3.18496 20.5991 3.76187C21.5142 3.65406 22.4078 3.40911 23.25 3.03525C22.6305 3.963 21.8505 4.77265 20.9465 5.42638Z" fill="#3EAEFF"></path>
                </svg>
              </div>
            </div>
            <p>
              <span>“</span>
              <span class="text-indigo-500">@Basko</span>
              <span>has completely revolutionized the way I work. I used to waste so much time on manual tasks, but now everything is automated and streamlined.”</span>
            </p>
          </div>
        </div>
        <div class="flex-shrink-0 w-96 p-3">
          <div class="p-6 bg-white hover:bg-opacity-80 border border-gray-200 hover:border-gray-300 rounded-xl transition duration-200">
            <div class="flex flex-wrap justify-between -m-2 mb-6">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="basko-assets/images/testimonials/avatar.png" alt="">
                  </div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-semibold tracking-tight">Luke Mccormick</h3>
                    <span class="text-sm tracking-tight">@andysm</span>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.9465 5.42638C20.9603 5.62475 20.9603 5.82313 20.9603 6.02338C20.9603 12.123 16.3168 19.1578 7.82588 19.1578V19.154C5.31752 19.1576 2.86113 18.4393 0.75 17.0846C1.11475 17.1285 1.48125 17.1504 1.84875 17.1513C3.92771 17.1529 5.94685 16.4556 7.58175 15.1714C6.61849 15.1532 5.68501 14.8344 4.9118 14.2597C4.13859 13.6849 3.56431 12.8829 3.26925 11.9658C3.96085 12.0991 4.67382 12.0719 5.35325 11.8863C3.19975 11.4511 1.65037 9.55901 1.65037 7.3615V7.30301C2.29236 7.66058 3.01085 7.85872 3.74538 7.88076C1.71713 6.52513 1.09188 3.82675 2.31663 1.717C3.47554 3.14312 4.92149 4.3095 6.56056 5.14038C8.19963 5.97125 9.99515 6.44804 11.8305 6.53975C11.6475 5.75205 11.6745 4.93011 11.9089 4.15613C12.1432 3.38215 12.5767 2.68327 13.1659 2.12937C15.0251 0.381619 17.9493 0.471244 19.697 2.3295C20.7308 2.1254 21.7221 1.74642 22.6284 1.20887C22.2838 2.2777 21.5626 3.18496 20.5991 3.76187C21.5142 3.65406 22.4078 3.40911 23.25 3.03525C22.6305 3.963 21.8505 4.77265 20.9465 5.42638Z" fill="#3EAEFF"></path>
                </svg>
              </div>
            </div>
            <p>
              <span>“</span>
              <span class="text-indigo-500">@Basko</span>
              <span>has completely revolutionized the way I work. I used to waste so much time on manual tasks, but now everything is automated and streamlined.”</span>
            </p>
          </div>
        </div>
      </div>
      <div class="flex flex-nowrap justify-center -m-3">
        <div class="flex-shrink-0 w-96 p-3">
          <div class="p-6 bg-white hover:bg-opacity-80 border border-gray-200 hover:border-gray-300 rounded-xl transition duration-200">
            <div class="flex flex-wrap justify-between -m-2 mb-6">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="basko-assets/images/testimonials/avatar.png" alt="">
                  </div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-semibold tracking-tight">Luke Mccormick</h3>
                    <span class="text-sm tracking-tight">@andysm</span>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.9465 5.42638C20.9603 5.62475 20.9603 5.82313 20.9603 6.02338C20.9603 12.123 16.3168 19.1578 7.82588 19.1578V19.154C5.31752 19.1576 2.86113 18.4393 0.75 17.0846C1.11475 17.1285 1.48125 17.1504 1.84875 17.1513C3.92771 17.1529 5.94685 16.4556 7.58175 15.1714C6.61849 15.1532 5.68501 14.8344 4.9118 14.2597C4.13859 13.6849 3.56431 12.8829 3.26925 11.9658C3.96085 12.0991 4.67382 12.0719 5.35325 11.8863C3.19975 11.4511 1.65037 9.55901 1.65037 7.3615V7.30301C2.29236 7.66058 3.01085 7.85872 3.74538 7.88076C1.71713 6.52513 1.09188 3.82675 2.31663 1.717C3.47554 3.14312 4.92149 4.3095 6.56056 5.14038C8.19963 5.97125 9.99515 6.44804 11.8305 6.53975C11.6475 5.75205 11.6745 4.93011 11.9089 4.15613C12.1432 3.38215 12.5767 2.68327 13.1659 2.12937C15.0251 0.381619 17.9493 0.471244 19.697 2.3295C20.7308 2.1254 21.7221 1.74642 22.6284 1.20887C22.2838 2.2777 21.5626 3.18496 20.5991 3.76187C21.5142 3.65406 22.4078 3.40911 23.25 3.03525C22.6305 3.963 21.8505 4.77265 20.9465 5.42638Z" fill="#3EAEFF"></path>
                </svg>
              </div>
            </div>
            <p>
              <span>“</span>
              <span class="text-indigo-500">@Basko</span>
              <span>has completely revolutionized the way I work. I used to waste so much time on manual tasks, but now everything is automated and streamlined.”</span>
            </p>
          </div>
        </div>
        <div class="flex-shrink-0 w-96 p-3">
          <div class="p-6 bg-white hover:bg-opacity-80 border border-gray-200 hover:border-gray-300 rounded-xl transition duration-200">
            <div class="flex flex-wrap justify-between -m-2 mb-6">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="basko-assets/images/testimonials/avatar2.png" alt="">
                  </div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-semibold tracking-tight">Luke Mccormick</h3>
                    <span class="text-sm tracking-tight">@andysm</span>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.9465 5.42638C20.9603 5.62475 20.9603 5.82313 20.9603 6.02338C20.9603 12.123 16.3168 19.1578 7.82588 19.1578V19.154C5.31752 19.1576 2.86113 18.4393 0.75 17.0846C1.11475 17.1285 1.48125 17.1504 1.84875 17.1513C3.92771 17.1529 5.94685 16.4556 7.58175 15.1714C6.61849 15.1532 5.68501 14.8344 4.9118 14.2597C4.13859 13.6849 3.56431 12.8829 3.26925 11.9658C3.96085 12.0991 4.67382 12.0719 5.35325 11.8863C3.19975 11.4511 1.65037 9.55901 1.65037 7.3615V7.30301C2.29236 7.66058 3.01085 7.85872 3.74538 7.88076C1.71713 6.52513 1.09188 3.82675 2.31663 1.717C3.47554 3.14312 4.92149 4.3095 6.56056 5.14038C8.19963 5.97125 9.99515 6.44804 11.8305 6.53975C11.6475 5.75205 11.6745 4.93011 11.9089 4.15613C12.1432 3.38215 12.5767 2.68327 13.1659 2.12937C15.0251 0.381619 17.9493 0.471244 19.697 2.3295C20.7308 2.1254 21.7221 1.74642 22.6284 1.20887C22.2838 2.2777 21.5626 3.18496 20.5991 3.76187C21.5142 3.65406 22.4078 3.40911 23.25 3.03525C22.6305 3.963 21.8505 4.77265 20.9465 5.42638Z" fill="#3EAEFF"></path>
                </svg>
              </div>
            </div>
            <p>
              <span>“</span>
              <span class="text-indigo-500">@Basko</span>
              <span>has completely revolutionized the way I work. I used to waste so much time on manual tasks, but now everything is automated and streamlined.”</span>
            </p>
          </div>
        </div>
        <div class="flex-shrink-0 w-96 p-3">
          <div class="p-6 bg-white hover:bg-opacity-80 border border-gray-200 hover:border-gray-300 rounded-xl transition duration-200">
            <div class="flex flex-wrap justify-between -m-2 mb-6">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="basko-assets/images/testimonials/avatar3.png" alt="">
                  </div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-semibold tracking-tight">Luke Mccormick</h3>
                    <span class="text-sm tracking-tight">@andysm</span>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.9465 5.42638C20.9603 5.62475 20.9603 5.82313 20.9603 6.02338C20.9603 12.123 16.3168 19.1578 7.82588 19.1578V19.154C5.31752 19.1576 2.86113 18.4393 0.75 17.0846C1.11475 17.1285 1.48125 17.1504 1.84875 17.1513C3.92771 17.1529 5.94685 16.4556 7.58175 15.1714C6.61849 15.1532 5.68501 14.8344 4.9118 14.2597C4.13859 13.6849 3.56431 12.8829 3.26925 11.9658C3.96085 12.0991 4.67382 12.0719 5.35325 11.8863C3.19975 11.4511 1.65037 9.55901 1.65037 7.3615V7.30301C2.29236 7.66058 3.01085 7.85872 3.74538 7.88076C1.71713 6.52513 1.09188 3.82675 2.31663 1.717C3.47554 3.14312 4.92149 4.3095 6.56056 5.14038C8.19963 5.97125 9.99515 6.44804 11.8305 6.53975C11.6475 5.75205 11.6745 4.93011 11.9089 4.15613C12.1432 3.38215 12.5767 2.68327 13.1659 2.12937C15.0251 0.381619 17.9493 0.471244 19.697 2.3295C20.7308 2.1254 21.7221 1.74642 22.6284 1.20887C22.2838 2.2777 21.5626 3.18496 20.5991 3.76187C21.5142 3.65406 22.4078 3.40911 23.25 3.03525C22.6305 3.963 21.8505 4.77265 20.9465 5.42638Z" fill="#3EAEFF"></path>
                </svg>
              </div>
            </div>
            <p>
              <span>“</span>
              <span class="text-indigo-500">@Basko</span>
              <span>has completely revolutionized the way I work. I used to waste so much time on manual tasks, but now everything is automated and streamlined.”</span>
            </p>
          </div>
        </div>
        <div class="flex-shrink-0 w-96 p-3">
          <div class="p-6 bg-white hover:bg-opacity-80 border border-gray-200 hover:border-gray-300 rounded-xl transition duration-200">
            <div class="flex flex-wrap justify-between -m-2 mb-6">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="basko-assets/images/testimonials/avatar4.png" alt="">
                  </div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-semibold tracking-tight">Luke Mccormick</h3>
                    <span class="text-sm tracking-tight">@andysm</span>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.9465 5.42638C20.9603 5.62475 20.9603 5.82313 20.9603 6.02338C20.9603 12.123 16.3168 19.1578 7.82588 19.1578V19.154C5.31752 19.1576 2.86113 18.4393 0.75 17.0846C1.11475 17.1285 1.48125 17.1504 1.84875 17.1513C3.92771 17.1529 5.94685 16.4556 7.58175 15.1714C6.61849 15.1532 5.68501 14.8344 4.9118 14.2597C4.13859 13.6849 3.56431 12.8829 3.26925 11.9658C3.96085 12.0991 4.67382 12.0719 5.35325 11.8863C3.19975 11.4511 1.65037 9.55901 1.65037 7.3615V7.30301C2.29236 7.66058 3.01085 7.85872 3.74538 7.88076C1.71713 6.52513 1.09188 3.82675 2.31663 1.717C3.47554 3.14312 4.92149 4.3095 6.56056 5.14038C8.19963 5.97125 9.99515 6.44804 11.8305 6.53975C11.6475 5.75205 11.6745 4.93011 11.9089 4.15613C12.1432 3.38215 12.5767 2.68327 13.1659 2.12937C15.0251 0.381619 17.9493 0.471244 19.697 2.3295C20.7308 2.1254 21.7221 1.74642 22.6284 1.20887C22.2838 2.2777 21.5626 3.18496 20.5991 3.76187C21.5142 3.65406 22.4078 3.40911 23.25 3.03525C22.6305 3.963 21.8505 4.77265 20.9465 5.42638Z" fill="#3EAEFF"></path>
                </svg>
              </div>
            </div>
            <p>
              <span>“</span>
              <span class="text-indigo-500">@Basko</span>
              <span>has completely revolutionized the way I work. I used to waste so much time on manual tasks, but now everything is automated and streamlined.”</span>
            </p>
          </div>
        </div>
        <div class="flex-shrink-0 w-96 p-3">
          <div class="p-6 bg-white hover:bg-opacity-80 border border-gray-200 hover:border-gray-300 rounded-xl transition duration-200">
            <div class="flex flex-wrap justify-between -m-2 mb-6">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="basko-assets/images/testimonials/avatar.png" alt="">
                  </div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-semibold tracking-tight">Luke Mccormick</h3>
                    <span class="text-sm tracking-tight">@andysm</span>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.9465 5.42638C20.9603 5.62475 20.9603 5.82313 20.9603 6.02338C20.9603 12.123 16.3168 19.1578 7.82588 19.1578V19.154C5.31752 19.1576 2.86113 18.4393 0.75 17.0846C1.11475 17.1285 1.48125 17.1504 1.84875 17.1513C3.92771 17.1529 5.94685 16.4556 7.58175 15.1714C6.61849 15.1532 5.68501 14.8344 4.9118 14.2597C4.13859 13.6849 3.56431 12.8829 3.26925 11.9658C3.96085 12.0991 4.67382 12.0719 5.35325 11.8863C3.19975 11.4511 1.65037 9.55901 1.65037 7.3615V7.30301C2.29236 7.66058 3.01085 7.85872 3.74538 7.88076C1.71713 6.52513 1.09188 3.82675 2.31663 1.717C3.47554 3.14312 4.92149 4.3095 6.56056 5.14038C8.19963 5.97125 9.99515 6.44804 11.8305 6.53975C11.6475 5.75205 11.6745 4.93011 11.9089 4.15613C12.1432 3.38215 12.5767 2.68327 13.1659 2.12937C15.0251 0.381619 17.9493 0.471244 19.697 2.3295C20.7308 2.1254 21.7221 1.74642 22.6284 1.20887C22.2838 2.2777 21.5626 3.18496 20.5991 3.76187C21.5142 3.65406 22.4078 3.40911 23.25 3.03525C22.6305 3.963 21.8505 4.77265 20.9465 5.42638Z" fill="#3EAEFF"></path>
                </svg>
              </div>
            </div>
            <p>
              <span>“</span>
              <span class="text-indigo-500">@Basko</span>
              <span>has completely revolutionized the way I work. I used to waste so much time on manual tasks, but now everything is automated and streamlined.”</span>
            </p>
          </div>
        </div>
        <div class="flex-shrink-0 w-96 p-3">
          <div class="p-6 bg-white hover:bg-opacity-80 border border-gray-200 hover:border-gray-300 rounded-xl transition duration-200">
            <div class="flex flex-wrap justify-between -m-2 mb-6">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="basko-assets/images/testimonials/avatar.png" alt="">
                  </div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-semibold tracking-tight">Luke Mccormick</h3>
                    <span class="text-sm tracking-tight">@andysm</span>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.9465 5.42638C20.9603 5.62475 20.9603 5.82313 20.9603 6.02338C20.9603 12.123 16.3168 19.1578 7.82588 19.1578V19.154C5.31752 19.1576 2.86113 18.4393 0.75 17.0846C1.11475 17.1285 1.48125 17.1504 1.84875 17.1513C3.92771 17.1529 5.94685 16.4556 7.58175 15.1714C6.61849 15.1532 5.68501 14.8344 4.9118 14.2597C4.13859 13.6849 3.56431 12.8829 3.26925 11.9658C3.96085 12.0991 4.67382 12.0719 5.35325 11.8863C3.19975 11.4511 1.65037 9.55901 1.65037 7.3615V7.30301C2.29236 7.66058 3.01085 7.85872 3.74538 7.88076C1.71713 6.52513 1.09188 3.82675 2.31663 1.717C3.47554 3.14312 4.92149 4.3095 6.56056 5.14038C8.19963 5.97125 9.99515 6.44804 11.8305 6.53975C11.6475 5.75205 11.6745 4.93011 11.9089 4.15613C12.1432 3.38215 12.5767 2.68327 13.1659 2.12937C15.0251 0.381619 17.9493 0.471244 19.697 2.3295C20.7308 2.1254 21.7221 1.74642 22.6284 1.20887C22.2838 2.2777 21.5626 3.18496 20.5991 3.76187C21.5142 3.65406 22.4078 3.40911 23.25 3.03525C22.6305 3.963 21.8505 4.77265 20.9465 5.42638Z" fill="#3EAEFF"></path>
                </svg>
              </div>
            </div>
            <p>
              <span>“</span>
              <span class="text-indigo-500">@Basko</span>
              <span>has completely revolutionized the way I work. I used to waste so much time on manual tasks, but now everything is automated and streamlined.”</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-10 bg-gray-100 border border-gray-100 ooverflow-hidden">
  <div class="container mx-auto px-4">
    <div class="bg-white rounded-3xl">
      <div class="py-16 px-8 md:max-w-3xl mx-auto text-center">
        <img class="mb-6 mx-auto rounded-full" src="zanrly-assets/images/testimonials/avatar.png" alt="">
        <p class="mb-10 text-2xl font-bold">"Had some issues where my site crashed and broke, reached out to Fouroom to see if they could help me fix it. Even though we are 12 hours apart in time, they were quick to reply and helpful/willing to do what is needed to fix the issue."</p>
        <h3 class="font-heading mb-2 text-2xl text-gray-900 font-black">Monica</h3>
        <p class="text-sm text-gray-500 font-bold">@monicajohnson</p>
      </div>
    </div>
  </div>
</section>

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="relative py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-3xl text-center mx-auto">
      <span class="inline-block mb-2.5 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-tighter-xl">What people are saying</h2>
    </div>
    <div class="relative p-3 bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
      <div class="relative z-10 flex flex-wrap lg:items-center -m-10">
        <div class="w-auto mx-auto md:ml-0 p-10">
          <img src="nightsable-assets/images/testimonials/man.png" alt="">
        </div>
        <div class="flex-1 p-10">
          <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
              <div x-ref="slide1" class="flex-shrink-0 w-full">
                <h3 class="mb-20 text-3xl text-white tracking-tighter leading-snug md:max-w-2xl">“GTIS Partners is a leading real estate investment firm in the Americas, headquartered in New York with offices in São Paulo, San Francisco, Los Angeles, Atlanta, Charlotte, Phoenix”</h3>
                <h4 class="text-white font-medium tracking-tighter">Wade Warren</h4>
                <span class="mb-8 lg:mb-0 inline-block text-sm text-white">CEO, Since Industry</span>
              </div>
              <div x-ref="slide2" class="flex-shrink-0 w-full">
                <h3 class="mb-20 font-heading text-3xl text-white tracking-tighter leading-snug md:max-w-2xl">“Capital Horizon Investments, a prominent finance powerhouse, is strategically based in Chicago, with a widespread network encompassing Miami, Dallas, Denver, Seattle, Boston, and Toronto”</h3>
                <h4 class="text-white font-medium tracking-tighter">Wade Warren</h4>
                <span class="mb-8 lg:mb-0 inline-block text-sm text-white">CEO, Since Industry</span>
              </div>
              <div x-ref="slide3" class="flex-shrink-0 w-full">
                <h3 class="mb-20 font-heading text-3xl text-white tracking-tighter leading-snug md:max-w-2xl">“Metropolitan Capital Partners, a leading financial force, proudly operates from its central hub in Tokyo, extending its influence across major cities including London, Shanghai, Mumbai, Paris, New York, and Singapore”</h3>
                <h4 class="text-white font-medium tracking-tighter">Wade Warren</h4>
                <span class="mb-8 lg:mb-0 inline-block text-sm text-white">CEO, Since Industry</span>
              </div>
            </div>
          </div>
          <div class="flex flex-wrap justify-center lg:justify-end pr-10 -m-2">
            <div class="w-auto p-2">
              <a x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="group inline-block" href="#">
                <div class="flex items-center justify-center w-20 h-20 hover:bg-opacity-30 border border-gray-900 hover:border-gray-800 rounded-full transition duration-200">
                  <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.7041 7.12817L4.15635 13.6759L10.7041 20.2237" stroke="white" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M22.4941 13.6759H4.33949" stroke="white" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </a>
            </div>
            <div class="w-auto p-2">
              <a x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="group inline-block" href="#">
                <div class="flex items-center justify-center w-20 h-20 hover:bg-opacity-30 border border-gray-900 hover:border-gray-800 rounded-full transition duration-200">
                  <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16.2959 7.12817L22.8437 13.6759L16.2959 20.2237" stroke="white" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M4.50586 13.6759H22.6605" stroke="white" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="nightsable-assets/images/testimonials/blur.png">
    </div>
  </div>
</section>

<section class="relative py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="relative w-full lg:w-5/12 px-4 order-last lg:order-first">
        <img class="mx-auto mt-10 lg:mt-0 h-96 lg:h-112 object-cover" src="zeus-assets/images/z-picture.png" alt="">
        <img class="hidden lg:block absolute top-0 left-0 mt-32 -ml-16" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
      </div>
      <div class="w-full lg:w-7/12 px-4">
        <div class="max-w-xl lg:ml-auto">
          <span class="inline-block mb-10">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M26 29.45C26 19.3858 33.4577 8.86747 45.2297 6.16443C45.6793 6.0612 46.1364 6.29467 46.3301 6.71327L47.5161 9.27572C47.7602 9.80299 47.5031 10.4238 46.9877 10.692C43.3044 12.608 40.1644 17.1966 39.3647 20.8059C39.2493 21.3268 39.6241 21.8042 40.1413 21.9351C44.6581 23.0784 48 27.1681 48 32.042C48 38.406 42.832 42 37.602 42C31.572 42 26 37.39 26 29.45ZM0 29.45C0 19.3858 7.45772 8.86747 19.2297 6.16443C19.6793 6.0612 20.1364 6.29467 20.3301 6.71327L21.5161 9.27572C21.7602 9.80299 21.5031 10.4238 20.9877 10.692C17.3044 12.608 14.1644 17.1966 13.3647 20.8059C13.2493 21.3268 13.6241 21.8042 14.1413 21.9351C18.6581 23.0784 22 27.1681 22 32.042C22 38.406 16.832 42 11.602 42C5.572 42 0 37.39 0 29.45Z" fill="#FF4564"></path>
            </svg>
          </span>
          <h2 class="mb-10 text-4xl font-semibold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="mb-10 text-xl text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <p class="mb-3 text-2xl font-semibold font-heading">Esther Howard</p>
          <p class="text-gray-500">CEO &amp; Founder</p>
        </div>
      </div>
    </div>
  </div>
  <img class="hidden lg:block absolute bottom-0 right-0" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
</section>

<section class="relative py-20 2xl:py-40 bg-gray-800 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <img class="absolute top-0 right-0 -mr-80 -mt-80" src="zospace-assets/lines/circle.svg" alt="">
  <img class="hidden lg:block absolute bottom-0 left-0 w-96" src="zospace-assets/lines/half-double-circle.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <div class="text-center mb-20 lg:mb-32">
        <span class="text-lg text-blue-400 font-bold">Testimonials</span>
        <h2 class="mt-12 text-5xl font-bold font-heading text-white">What people say</h2>
      </div>
      <div class="overflow-hidden">
        <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-10">
            <div x-ref="slide1" class="flex-shrink-0 w-full p-10">
                <div class="relative flex flex-wrap -mx-5 mb-20">
                  <div class="w-full lg:w-1/2 px-5 mb-12 lg:mb-0">
                    <div class="flex -mx-4 lg:mx-0">
                      <div class="w-1/3 px-4">
                        <img class="w-30 h-40 mx-auto rounded-full object-cover" src="https://images.pexels.com/photos/5325840/pexels-photo-5325840.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=940&amp;w=940" alt="">
                      </div>
                      <div class="w-2/3 px-4">
                        <div class="relative inline-block mb-8 p-10 bg-gray-500 rounded-lg">
                          <div class="absolute top-0 left-0 -ml-5 mt-10 w-14 h-14 bg-gray-500" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
                          <img class="absolute top-0 right-0 md:-mr-6 -mt-6 lg:mt-14" src="zospace-assets/images/quote-circle.svg" alt="">
                          <p class="mb-8 text-lg text-gray-200">The brown me malesuada nisi quis arcu ultrices, a fermentum libero maximus. Donec est urna, semper. At sem quis, congue dictum ipsum quam, sagittis.</p>
                          <div class="flex mb-4">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img src="zospace-assets/images/star-empty.svg" alt="">
                          </div>
                          <h3 class="mb-1 text-2xl text-white font-bold">Léa Herrera</h3>
                          <p class="text-white">Google</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="w-full lg:w-1/2 px-5">
                    <div class="flex -mx-4 lg:mx-0">
                      <div class="w-1/3 px-4">
                        <img class="w-30 h-40 mx-auto rounded-full object-cover object-top" src="https://images.pexels.com/photos/5325893/pexels-photo-5325893.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=940&amp;w=940" alt="">
                      </div>
                      <div class="w-2/3 px-4">
                        <div class="relative inline-block mb-8 p-10 bg-gray-500 rounded-lg">
                          <div class="absolute top-0 right-0 left-0 -ml-5 mt-10 w-14 h-14 bg-gray-500" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
                          <img class="absolute top-0 right-0 md:-mr-6 -mt-6 lg:mt-14" src="zospace-assets/images/quote-circle.svg" alt="">
                          <p class="mb-8 text-lg text-gray-200">The brown me malesuada nisi quis arcu ultrices, a fermentum libero maximus. Donec est urna, semper. At sem quis, congue dictum ipsum quam, sagittis.</p>
                          <div class="flex mb-4">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img src="zospace-assets/images/star-half.svg" alt="">
                          </div>
                          <h3 class="mb-1 text-2xl text-white font-bold">Harry Douglas</h3>
                          <p class="text-white">Asos</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <div x-ref="slide2" class="flex-shrink-0 w-full p-10">
                <div class="relative flex flex-wrap -mx-5 mb-20">
                  <div class="w-full lg:w-1/2 px-5 mb-12 lg:mb-0">
                    <div class="flex -mx-4 lg:mx-0">
                      <div class="w-1/3 px-4">
                        <img class="w-30 h-40 mx-auto rounded-full object-cover" src="https://images.pexels.com/photos/5325840/pexels-photo-5325840.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=940&amp;w=940" alt="">
                      </div>
                      <div class="w-2/3 px-4">
                        <div class="relative inline-block mb-8 p-10 bg-gray-500 rounded-lg">
                          <div class="absolute top-0 left-0 -ml-5 mt-10 w-14 h-14 bg-gray-500" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
                          <img class="absolute top-0 right-0 md:-mr-6 -mt-6 lg:mt-14" src="zospace-assets/images/quote-circle.svg" alt="">
                          <p class="mb-8 text-lg text-gray-200">Vivamus gravida leo eget erat fermentum, nec maximus sapien consequat.</p>
                          <div class="flex mb-4">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img src="zospace-assets/images/star-empty.svg" alt="">
                          </div>
                          <h3 class="mb-1 text-2xl text-white font-bold">Mia Nguyen</h3>
                          <p class="text-white">Twitter</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="w-full lg:w-1/2 px-5">
                    <div class="flex -mx-4 lg:mx-0">
                      <div class="w-1/3 px-4">
                        <img class="w-30 h-40 mx-auto rounded-full object-cover object-top" src="https://images.pexels.com/photos/5325893/pexels-photo-5325893.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=940&amp;w=940" alt="">
                      </div>
                      <div class="w-2/3 px-4">
                        <div class="relative inline-block mb-8 p-10 bg-gray-500 rounded-lg">
                          <div class="absolute top-0 right-0 left-0 -ml-5 mt-10 w-14 h-14 bg-gray-500" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
                          <img class="absolute top-0 right-0 md:-mr-6 -mt-6 lg:mt-14" src="zospace-assets/images/quote-circle.svg" alt="">
                          <p class="mb-8 text-lg text-gray-200">Nullam vel eros sit amet ipsum feugiat malesuada. Integer aliquam felis vel nisi sagittis, eget molestie ipsum congue.</p>
                          <div class="flex mb-4">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img src="zospace-assets/images/star-half.svg" alt="">
                          </div>
                          <h3 class="mb-1 text-2xl text-white font-bold">Alex Bennett</h3>
                          <p class="text-white">Asos</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <div x-ref="slide3" class="flex-shrink-0 w-full p-10">
                <div class="relative flex flex-wrap -mx-5 mb-20">
                  <div class="w-full lg:w-1/2 px-5 mb-12 lg:mb-0">
                    <div class="flex -mx-4 lg:mx-0">
                      <div class="w-1/3 px-4">
                        <img class="w-30 h-40 mx-auto rounded-full object-cover" src="https://images.pexels.com/photos/5325840/pexels-photo-5325840.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=940&amp;w=940" alt="">
                      </div>
                      <div class="w-2/3 px-4">
                        <div class="relative inline-block mb-8 p-10 bg-gray-500 rounded-lg">
                          <div class="absolute top-0 left-0 -ml-5 mt-10 w-14 h-14 bg-gray-500" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
                          <img class="absolute top-0 right-0 md:-mr-6 -mt-6 lg:mt-14" src="zospace-assets/images/quote-circle.svg" alt="">
                          <p class="mb-8 text-lg text-gray-200">Fusce ut ipsum eget ligula porta tristique. Morbi consequat velit sed turpis malesuada, ac condimentum arcu consequat.</p>
                          <div class="flex mb-4">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img src="zospace-assets/images/star-empty.svg" alt="">
                          </div>
                          <h3 class="mb-1 text-2xl text-white font-bold">Emily Patel</h3>
                          <p class="text-white">Meta</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="w-full lg:w-1/2 px-5">
                    <div class="flex -mx-4 lg:mx-0">
                      <div class="w-1/3 px-4">
                        <img class="w-30 h-40 mx-auto rounded-full object-cover object-top" src="https://images.pexels.com/photos/5325893/pexels-photo-5325893.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=940&amp;w=940" alt="">
                      </div>
                      <div class="w-2/3 px-4">
                        <div class="relative inline-block mb-8 p-10 bg-gray-500 rounded-lg">
                          <div class="absolute top-0 right-0 left-0 -ml-5 mt-10 w-14 h-14 bg-gray-500" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
                          <img class="absolute top-0 right-0 md:-mr-6 -mt-6 lg:mt-14" src="zospace-assets/images/quote-circle.svg" alt="">
                          <p class="mb-8 text-lg text-gray-200">Sed at velit eu mi ullamcorper convallis ac vitae arcu. Nullam vel eros sit amet ipsum feugiat malesuada.</p>
                          <div class="flex mb-4">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
                            <img src="zospace-assets/images/star-half.svg" alt="">
                          </div>
                          <h3 class="mb-1 text-2xl text-white font-bold">Rachel Chen</h3>
                          <p class="text-white">Zospace</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
      </div>
      <div class="text-center">
        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-flex mr-2 items-center justify-center w-14 h-14 bg-blue-500 hover:bg-blue-600 rounded-full">
          <svg width="7" height="14" viewBox="0 0 7 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.84708 12.115C7.05097 12.3207 7.05097 12.6512 6.84708 12.8554C6.64319 13.0596 6.31377 13.0603 6.10987 12.8554L0.152917 6.87493C-0.0509739 6.67074 -0.0509738 6.34026 0.152917 6.13456L6.10988 0.154119C6.31377 -0.0500693 6.64319 -0.0500693 6.84708 0.154119C7.05097 0.359063 7.05097 0.690301 6.84708 0.894489L1.4143 6.50512L6.84708 12.115Z" fill="white"></path>
          </svg>
        </button>
        <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-flex items-center justify-center w-14 h-14 bg-blue-500 hover:bg-blue-600 rounded-full">
          <svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.15292 0.901511C-0.0509709 0.696057 -0.0509709 0.365972 0.15292 0.16203C0.356811 -0.0419136 0.686232 -0.0426689 0.890123 0.16203L6.84708 6.13528C7.05097 6.33923 7.05097 6.66931 6.84708 6.87476L0.890121 12.848C0.686231 13.052 0.35681 13.052 0.152919 12.848C-0.050972 12.6433 -0.0509719 12.3125 0.152919 12.1085L5.5857 6.50465L0.15292 0.901511Z" fill="white"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</section>

<section class="relative pb-52 bg-gray-900 overflow-hidden">
  <div class="bg-white h-16 mb-32 sm:mb-52">
    <div class="absolute top-0 left-1/2">
      <div class="w-px h-16 bg-gray-900"></div>
      <div class="w-px h-24 bg-white"></div>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-20">
      <span class="font-heading text-xl text-white">08</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl text-white">Customer review</span>
    </div>
    <div class="max-w-4xl 3xl:max-w-6xl mx-auto">
      <div class="sm:flex mb-12 items-center">
        <div class="flex-shrink-0 relative max-w-max mr-5 mb-6 sm:mb-0">
          <img class="w-16 h-16 rounded-full object-cover" src="wrexa-assets/images/avatar.png" alt="">
          <img class="absolute bottom-0 right-0 -mb-1 -mr-1" src="wrexa-assets/elements/miro-logo-small-icon.svg" alt="">
        </div>
        <div class="sm:flex items-center sm:mr-20 mb-5 sm:mb-0">
          <h5 class="text-xl text-white font-mono">Helen Keller</h5>
          <div class="ml-4 pl-4 border-l border-gray-600">
            <span class="text-gray-600">Miro, Head of Design</span>
          </div>
        </div>
        <svg width="130" height="22" viewBox="0 0 130 22" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M22 8.70801H13.6583L11 0.458008L8.34166 8.70801H0L6.80168 13.548L4.19835 21.5414L11 16.5913L17.8017 21.5414L15.1983 13.548L22 8.70801Z" fill="white"></path>
          <path d="M49 8.70801H40.6583L38 0.458008L35.3417 8.70801H27L33.8017 13.548L31.1984 21.5414L38 16.5913L44.8017 21.5414L42.1983 13.548L49 8.70801Z" fill="white"></path>
          <path d="M76 8.70801H67.6583L65 0.458008L62.3417 8.70801H54L60.8017 13.548L58.1984 21.5414L65 16.5913L71.8017 21.5414L69.1983 13.548L76 8.70801Z" fill="white"></path>
          <path d="M103 8.70801H94.6583L92 0.458008L89.3417 8.70801H81L87.8017 13.548L85.1984 21.5414L92 16.5913L98.8017 21.5414L96.1983 13.548L103 8.70801Z" fill="white"></path>
          <path d="M130 8.70801H121.658L119 0.458008L116.342 8.70801H108L114.802 13.548L112.198 21.5414L119 16.5913L125.802 21.5414L123.198 13.548L130 8.70801Z" fill="white"></path>
        </svg>
      </div>
      <div class="flex -mx-4 mb-32">
        <div class="w-10 px-4 relative">
          <div class="absolute top-0 left-0 ml-12 w-px h-full bg-gray-600"></div>
          <a class="absolute bottom-0 left-0 ml-12 w-10 h-10 mb-12 transform -translate-x-1/2 flex items-center justify-center bg-gray-900 border border-gray-600 rounded-full" href="#">
            <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 2L6 6L2 2" stroke="#C6C9CF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
        <div class="w-3/4 px-4">
          <div class="pl-8 sm:pl-20">
            <h2 class="font-heading text-3xl sm:text-5xl 3xl:text-7xl text-white mb-14">“Tried a lot, find the best Tried a lot. Choose this one.”</h2>
            <p class="text-gray-600 font-light">“A real nice tools and app. It comes with a few free plug-ins that will be more than enough for beginners. For more advansed users, you'll need to get a few more plug-ins for an extra cost on 3rd party websites, but Wressa makes it quite easy to set them up.”</p>
          </div>
        </div>
      </div>
      <div class="sm:flex items-center opacity-25">
        <div class="flex-shrink-0 relative max-w-max mr-5 mb-6 sm:mb-0">
          <img class="w-16 h-16 rounded-full object-cover" src="wrexa-assets/images/avatar-male1.png" alt="">
          <img class="absolute bottom-0 right-0 -mb-1 -mr-1" src="wrexa-assets/elements/miro-logo-small-icon.svg" alt="">
        </div>
        <div class="sm:flex items-center sm:mr-20 mb-5 sm:mb-0">
          <h5 class="text-xl text-white font-mono">Helen Keller</h5>
          <div class="ml-4 pl-4 border-l border-gray-600">
            <span class="text-gray-600">Miro, Head of Design</span>
          </div>
        </div>
        <svg width="130" height="22" viewBox="0 0 130 22" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M22 8.70801H13.6583L11 0.458008L8.34166 8.70801H0L6.80168 13.548L4.19835 21.5414L11 16.5913L17.8017 21.5414L15.1983 13.548L22 8.70801Z" fill="white"></path>
          <path d="M49 8.70801H40.6583L38 0.458008L35.3417 8.70801H27L33.8017 13.548L31.1984 21.5414L38 16.5913L44.8017 21.5414L42.1983 13.548L49 8.70801Z" fill="white"></path>
          <path d="M76 8.70801H67.6583L65 0.458008L62.3417 8.70801H54L60.8017 13.548L58.1984 21.5414L65 16.5913L71.8017 21.5414L69.1983 13.548L76 8.70801Z" fill="white"></path>
          <path d="M103 8.70801H94.6583L92 0.458008L89.3417 8.70801H81L87.8017 13.548L85.1984 21.5414L92 16.5913L98.8017 21.5414L96.1983 13.548L103 8.70801Z" fill="white"></path>
          <path d="M130 8.70801H121.658L119 0.458008L116.342 8.70801H108L114.802 13.548L112.198 21.5414L119 16.5913L125.802 21.5414L123.198 13.548L130 8.70801Z" fill="white"></path>
        </svg>
      </div>
    </div>
  </div>
</section>

<section x-data="{ current: 0 }" class="py-24 md:pb-28 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.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="flex-ui-assets/elements/testimonials/quote-top-green.svg" alt="">
        <img class="absolute bottom-0 right-0" src="flex-ui-assets/elements/testimonials/quote-down-green.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 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="flex-ui-assets/images/testimonials/avatar1.png" alt="">
        <h3 class="mb-2 text-xl md:text-2xl font-semibold">Darren Dunlap</h3>
        <span class="text-lg text-coolGray-500 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="flex-ui-assets/elements/testimonials/quote-top-green.svg" alt="">
        <img class="absolute bottom-0 right-0" src="flex-ui-assets/elements/testimonials/quote-down-green.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 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="flex-ui-assets/images/testimonials/avatar1.png" alt="">
        <h3 class="mb-2 text-xl md:text-2xl font-semibold">John Doe</h3>
        <span class="text-lg text-coolGray-500 font-medium">CTO &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="flex-ui-assets/elements/testimonials/quote-top-green.svg" alt="">
        <img class="absolute bottom-0 right-0" src="flex-ui-assets/elements/testimonials/quote-down-green.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 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="flex-ui-assets/images/testimonials/avatar1.png" alt="">
        <h3 class="mb-2 text-xl md:text-2xl font-semibold">David P. Pry</h3>
        <span class="text-lg text-coolGray-500 font-medium">CPO &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-100': 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-100': 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-100': current !== 2 }" class="inline-block h-3 w-3 rounded-full cursor-pointer"></div>
    </div>
  </div>
</section>

<section class="py-26 bg-white" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-12">
      <span class="inline-block mb-3 text-lg font-extrabold text-red-500">Quotes</span>
      <div class="flex flex-wrap sm:flex-nowrap -mx-4">
        <div class="hidden sm:block self-start px-4 text-red-300 opacity-10">
          <svg class="h-10 sm:h-auto" width="75" height="64" viewBox="0 0 75 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M74.1252 0.631112L72.2546 13.9596C68.5132 13.6478 65.4734 14.2714 63.1351 15.8303C60.7967 17.3112 59.1599 19.4937 58.2246 22.3776C57.3672 25.1836 57.2113 28.4573 57.7569 32.1986H74.1252V64H42.3239V32.1986C42.3239 20.9746 44.935 12.4787 50.1573 6.71079C55.3796 0.864946 63.3689 -1.16161 74.1252 0.631112ZM31.8014 0.631112L29.9307 13.9596C26.1894 13.6478 23.1495 14.2714 20.8112 15.8303C18.4729 17.3112 16.836 19.4937 15.9007 22.3776C15.0433 25.1836 14.8874 28.4573 15.433 32.1986H31.8014V64H0V32.1986C0 20.9746 2.61114 12.4787 7.83342 6.71079C13.0557 0.864946 21.045 -1.16161 31.8014 0.631112Z" fill="currentColor"></path>
          </svg>
        </div>
        <div class="w-full lg:w-auto py-6 lg:py-0 px-4">
            <div class="overflow-hidden">
              <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                  <div x-ref="slide1" class="flex-shrink-0 w-full">
                      <h1 class="mb-12 text-2xl sm:text-3xl xl:text-4xl font-extrabold font-heading">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h1>
                      <img class="block mb-6 mx-auto" src="nigodo-assets/testimonials/avatar-men.png" alt="">
                      <h4 class="text-xl font-extrabold">Macauley Herring</h4>
                      <span class="text-red-400 font-bold">CEO &amp; Founder at Nigodo</span>
                  </div>
                  <div x-ref="slide2" class="flex-shrink-0 w-full">
                      <h1 class="mb-12 text-2xl sm:text-3xl xl:text-4xl font-extrabold font-heading">Empowering Independence: A Game-Changer for Balancing Work and Life.</h1>
                      <img class="block mb-6 mx-auto" src="nigodo-assets/testimonials/avatar-men.png" alt="">
                      <h4 class="text-xl font-extrabold">Sienna Hawthorne</h4>
                      <span class="text-red-400 font-bold">Co-Founder of FlexPro Solutions</span>
                  </div>
                  <div x-ref="slide3" class="flex-shrink-0 w-full">
                      <h1 class="mb-12 text-2xl sm:text-3xl xl:text-4xl font-extrabold font-heading">Unlocking Freedom: The Ultimate Answer to Flexibility and Financial Stability.</h1>
                      <img class="block mb-6 mx-auto" src="nigodo-assets/testimonials/avatar-men.png" alt="">
                      <h4 class="text-xl font-extrabold">Oliver Tate</h4>
                      <span class="text-red-400 font-bold">Founder &amp; CEO of FlexEarn Technologies</span>
                  </div>
                </div>
            </div>
        </div>
        <div class="ml-auto self-end px-4 text-red-300 opacity-10">
          <svg class="h-10 sm:h-auto" width="75" height="64" viewBox="0 0 75 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.62939e-06 63.3689L1.87067 50.0404C5.61201 50.3522 8.65186 49.7286 10.9902 48.1697C13.3285 46.6888 14.9654 44.5063 15.9007 41.6224C16.7581 38.8164 16.914 35.5427 16.3684 31.8014H7.62939e-06V3.8147e-06H31.8014V31.8014C31.8014 43.0254 29.1902 51.5213 23.9679 57.2892C18.7457 63.1351 10.7564 65.1616 7.62939e-06 63.3689ZM42.3239 63.3689L44.1946 50.0404C47.9359 50.3522 50.9757 49.7286 53.3141 48.1697C55.6524 46.6888 57.2892 44.5063 58.2246 41.6224C59.082 38.8164 59.2378 35.5427 58.6922 31.8014H42.3239V3.8147e-06H74.1252V31.8014C74.1252 43.0254 71.5141 51.5213 66.2918 57.2892C61.0695 63.1351 53.0802 65.1616 42.3239 63.3689Z" fill="currentColor"></path>
          </svg>
        </div>
      </div>
    </div>
    <div class="flex justify-center items-center">
      <button x-on:click="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" class="inline-block w-4 h-4 mr-4 bg-red-500 rounded-full" :class="{ 'bg-red-100 hover:bg-red-200': activeSlide != 0, 'bg-red-500': activeSlide == 0 }"></button>
      <button x-on:click="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" class="inline-block w-4 h-4 mr-4 bg-red-100 hover:bg-red-200 rounded-full" :class="{ 'bg-red-100 hover:bg-red-200': activeSlide != 1, 'bg-red-500': activeSlide == 1 }"></button>
      <button x-on:click="activeSlide = 2, slideWidth = $refs['slide3'].offsetWidth * 2" class="inline-block w-4 h-4 bg-red-100 hover:bg-red-200 rounded-full" :class="{ 'bg-red-100 hover:bg-red-200': activeSlide != 2, 'bg-red-500': activeSlide == 2 }"></button>
    </div>
  </div>
</section>

<section x-data="{ current: 0 }">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="max-w-6xl p-4 flex flex-wrap justify-center items-center">
        <div class="mb-6 w-full lg:w-1/3 text-center">
          <img class="mb-6 mx-auto w-32 h-32 rounded-full object-cover" src="https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1055&amp;q=80" alt="">
          <h4 class="text-xl text-gray-50">Ian Brown</h4>
          <p class="text-green-600">Head of Development</p>
        </div>
        <div class="w-full lg:w-2/3">
          <svg class="mb-4 text-green-600 h-10" viewBox="0 0 32 28" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.2418 12.749C9.45369 12.522 8.66554 12.4069 7.89887 12.4069C6.71496 12.4069 5.72709 12.6775 4.96109 13.0088C5.69957 10.3053 7.47358 5.6405 11.0075 5.11517C11.3348 5.0665 11.603 4.82986 11.6923 4.51131L12.4646 1.74875C12.5298 1.51512 12.4912 1.26505 12.3579 1.06231C12.2246 0.859563 12.0105 0.724288 11.7705 0.691393C11.5097 0.655812 11.2438 0.637686 10.9803 0.637686C6.73846 0.637686 2.53756 5.06516 0.764895 11.4046C-0.275679 15.1238 -0.580802 20.7154 1.98237 24.2349C3.41668 26.2043 5.50924 27.2559 8.20198 27.361C8.21305 27.3613 8.2238 27.3616 8.23487 27.3616C11.5573 27.3616 14.5035 25.1241 15.3997 21.9208C15.9351 20.0058 15.6931 17.9975 14.7176 16.2644C13.7526 14.5508 12.1632 13.3018 10.2418 12.749Z" fill="currentColor"></path>
            <path d="M31.0396 16.2648C30.0746 14.5508 28.4852 13.3018 26.5638 12.749C25.7757 12.522 24.9875 12.4069 24.2212 12.4069C23.0373 12.4069 22.0491 12.6775 21.2831 13.0088C22.0215 10.3053 23.7955 5.6405 27.3298 5.11517C27.6571 5.0665 27.9249 4.82986 28.0146 4.51131L28.7869 1.74875C28.8521 1.51512 28.8135 1.26505 28.6802 1.06231C28.5473 0.859563 28.3331 0.724288 28.0928 0.691393C27.8323 0.655812 27.5664 0.637686 27.3026 0.637686C23.0608 0.637686 18.8599 5.06516 17.0869 11.4046C16.0466 15.1238 15.7415 20.7154 18.305 24.2356C19.739 26.2046 21.8319 27.2566 24.5243 27.3613C24.5354 27.3616 24.5461 27.362 24.5575 27.362C27.8796 27.362 30.8261 25.1244 31.7224 21.9211C32.2571 20.0061 32.0147 17.9975 31.0396 16.2648Z" fill="currentColor"></path>
          </svg>
          <h3 :class="{'block': current == 0, 'hidden': current != 0 }" class="mb-6 text-3xl lg:text-4xl font-bold font-heading text-gray-50">Maecenas nibh purus, pharetra ac felis sed, elementum molestie urna. Nunc at arcu non ipsum.</h3>
          <h3 :class="{'block': current == 1, 'hidden': current != 1 }" class="mb-6 text-3xl lg:text-4xl font-bold font-heading text-gray-50 hidden">Vivamus Tristique Est: Fusce Sodales Dolor Sit Amet, Consectetur Adipiscing Elit.</h3>
          <h3 :class="{'block': current == 2, 'hidden': current != 2 }" class="mb-6 text-3xl lg:text-4xl font-bold font-heading text-gray-50 hidden">Cras Tempus Mollis: Sed Imperdiet Magna at Nisl Rutrum, Aenean Euismod Ligula.</h3>
          <h3 :class="{'block': current == 3, 'hidden': current != 3 }" class="mb-6 text-3xl lg:text-4xl font-bold font-heading text-gray-50 hidden">Pellentesque Fringilla Ligula: Nullam Auctor Nisl at Diam Dapibus, Ut Condimentum Ante Feugiat.</h3>
          <div>
            <button class="mr-1 rounded-full p-1 bg-green-600" :class="{'bg-green-600': current == 0, 'bg-gray-800': current != 0 }" x-on:click="current=0"></button>
            <button class="mr-1 rounded-full p-1 bg-gray-800" :class="{'bg-green-600': current == 1, 'bg-gray-800': current != 1 }" x-on:click="current=1"></button>
            <button class="mr-1 rounded-full p-1 bg-gray-800" :class="{'bg-green-600': current == 2, 'bg-gray-800': current != 2 }" x-on:click="current=2"></button>
            <button class="rounded-full p-1 bg-gray-800" :class="{'bg-green-600': current == 3, 'bg-gray-800': current != 3 }" x-on:click="current=3"></button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="skew skew-bottom mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-bottom ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 10 10"></polygon>
    </svg>
  </div>
</section>

<section class="py-24 overflow-hidden relative" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4 }">
    <img class="absolute top-0 left-0" src="pstls-assets/images/testimonials/testimonial-1-shadow.png" alt="">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full md:w-1/2 lg:w-2/5 px-4 mb-20 lg:mb-0">
            <div class="max-w-md"><img class="block mb-6" src="pstls-assets/icons/testimonials-quote.svg" alt="">
                <div class="overflow-hidden">
                    <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-3">
                        <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                            <h2 class="text-3xl md:text-4xl font-heading mb-12" >Recently, the US Federal government banned online casinos from operating in America by making it illegal to transfer money to them through any US bank or payment system.</h2>
                            <h5 class="text-xl font-heading mb-2" >Sophie Kowalsky</h5><span class="text-gray-500" >CTO at Shuffle</span>
                        </div>
                        <div x-ref="slide2" class="flex-shrink-0 w-full p-3">
                            <h2 class="text-3xl md:text-4xl font-heading mb-12" >Dive into the burgeoning trend of cryptocurrency-based casinos as a response to US government regulations on online gambling. Explore the financial implications and potential for growth in this evolving sector.</h2>
                            <h5 class="text-xl font-heading mb-2" >Alex Thompson</h5><span class="text-gray-500" >Financial Analyst at CryptoGuru</span>
                        </div>
                        <div x-ref="slide3" class="flex-shrink-0 w-full p-3">
                            <h2 class="text-3xl md:text-4xl font-heading mb-12" >Gain insights into how Shuffle, a leading online gaming platform, navigates the recent ban on US operations. Learn about the company's strategic adjustments and its plans for maintaining market relevance in the face of regulatory challenges.</h2>
                            <h5 class="text-xl font-heading mb-2" >Marcus Chen</h5><span class="text-gray-500" >Business Development Manager at Shuffle</span>
                        </div>
                        <div x-ref="slide4" class="flex-shrink-0 w-full p-3">
                            <h2 class="text-3xl md:text-4xl font-heading mb-12" >Join legal expert Emily Rodriguez as she unpacks the complexities of the US government's crackdown on online casinos. Delve into the legal intricacies, potential loopholes, and broader implications.</h2>
                            <h5 class="text-xl font-heading mb-2" >Emily Rodriguez</h5><span class="text-gray-500" >Legal Counsel at GambleSafe</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-3/5 xl:w-7/12 px-4">
            <div class="relative pt-12 max-w-lg">
            <div class="absolute px-80 h-full top-0 left-1/2 xl:-ml-16" style="background-image: url('pstls-assets/images/testimonials/colors.png'); background-size: cover;" ></div>
            <img class="relative" src="pstls-assets/images/testimonials/woman.jpeg" alt="" style="z-index: 1" >
            <div class="relative flex justify-around xl:justify-start">
                <div class="xl:ml-4 mt-4">
                <ul class="flex">
                    <li class="mr-2"><a x-on:click.prevent="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" class="block w-2 h-2 bg-indigo-200 transform rotate-45" :class="{ 'bg-indigo-200': activeSlide == 0, 'bg-gray-100': activeSlide != 0 }" href="#"></a></li>
                    <li class="mr-2"><a x-on:click.prevent="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" class="block w-2 h-2 bg-gray-100 transform rotate-45" :class="{ 'bg-indigo-200': activeSlide == 1, 'bg-gray-100': activeSlide != 1 }" href="#"></a></li>
                    <li class="mr-2"><a x-on:click.prevent="activeSlide = 2, slideWidth = $refs['slide3'].offsetWidth * 2" class="block w-2 h-2 bg-gray-100 transform rotate-45" :class="{ 'bg-indigo-200': activeSlide == 2, 'bg-gray-100': activeSlide != 2 }" href="#"></a></li>
                    <li><a x-on:click.prevent="activeSlide = 3, slideWidth = $refs['slide4'].offsetWidth * 3" class="block w-2 h-2 bg-gray-100 transform rotate-45" :class="{ 'bg-indigo-200': activeSlide == 3, 'bg-gray-100': activeSlide != 3 }" href="#"></a></li>
                </ul>
                </div>
                <div class="xl:ml-44 inline-flex">
                    <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="flex items-center justify-center h-12 w-12 bg-indigo-200 hover:bg-indigo-400">
                        <img src="pstls-assets/icons/testimonials-arrow-left.svg" alt="">
                    </button>
                    <button x-on:click="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="flex items-center justify-center h-12 w-12 bg-indigo-300 hover:bg-indigo-400">
                        <img src="pstls-assets/icons/testimonials-arrow-right.svg" alt="">
                    </button>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
</section>

<section class="pt-20 bg-black overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4 }">
  <div class="relative container mx-auto px-4 mb-20">
    <img class="absolute top-1/2 left-0 -mt-8 ml-24 transform scale-125" src="boldui-assets/elements/shadow-team-light-blue.svg" alt="">
    <div class="relative z-10 flex flex-wrap justify-center items-center">
      <div class="flex-shrink-0 order-first">
        <div class="inline-flex items-center justify-center h-40 lg:h-52 w-40 lg:w-52" style="background-image: url('boldui-assets/elements/ellipse.svg'); background-size: contain; background-repeat: no-repeat;">
          <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null">
            <svg class="w-6 h-6 md:w-5 md:h-5" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99 3.13846H16V5.23077H3.99V8.36923L0 4.18462L3.99 0V3.13846Z" fill="#FFEC3E"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="w-full lg:max-w-xl text-center mx-auto">
        <span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
        <h2 class="mt-6 text-2xl text-white uppercase font-heading">EXECUTE PROVEN TACTICS TO ELEVATE YOUR BRAND'S STEADY PROFITS.</h2>
      </div>
      <div class="flex-shrink-0 order-first lg:order-last">
        <div class="inline-flex items-center justify-center h-40 lg:h-52 w-40 lg:w-52" style="background-image: url('boldui-assets/elements/ellipse.svg'); background-size: contain; background-repeat: no-repeat;">
          <button x-on:click="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1">
            <svg class="w-6 h-6 md:w-5 md:h-5" width="17" height="9" viewBox="0 0 17 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.9902 3.70731H0.980225V5.79962H12.9902V8.93808L16.9802 4.75346L12.9902 0.568848V3.70731Z" fill="#FFEC3E"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="overflow-hidden">
    <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
      <div x-ref="slide1" class="flex-shrink-0 w-full max-w-md">
        <div class="border-b border-t border-r">
          <div class="px-8 py-10 text-center">
            <span class="block mb-8">
              <svg class="mx-auto" width="39" height="26" viewBox="0 0 39 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M30.8203 25.7201C29.5781 25.7201 28.4297 25.5209 27.375 25.1224C26.3438 24.724 25.4531 24.1498 24.7031 23.3998C23.9531 22.6263 23.3672 21.7006 22.9453 20.6224C22.5234 19.5443 22.3125 18.3256 22.3125 16.9662C22.3125 13.8959 23.3555 10.9662 25.4414 8.17712C27.5508 5.36462 30.6094 2.86853 34.6172 0.688843L38.4844 6.20837C37.4297 6.77087 36.4922 7.32166 35.6719 7.86072C34.875 8.39978 34.1719 8.95056 33.5625 9.51306C32.9766 10.0756 32.4609 10.6615 32.0156 11.2709C31.5938 11.8568 31.207 12.4896 30.8555 13.1693C32.0039 13.1693 33.0352 13.3334 33.9492 13.6615C34.8867 13.9896 35.6836 14.4467 36.3398 15.0326C37.0195 15.5951 37.5352 16.2631 37.8867 17.0365C38.2617 17.7865 38.4492 18.5951 38.4492 19.4623C38.4492 20.3295 38.2617 21.1498 37.8867 21.9232C37.5352 22.6732 37.0195 23.3295 36.3398 23.892C35.6836 24.4545 34.8867 24.8998 33.9492 25.2279C33.0117 25.556 31.9688 25.7201 30.8203 25.7201ZM8.95312 25.7201C7.71094 25.7201 6.5625 25.5209 5.50781 25.1224C4.47656 24.724 3.58594 24.1498 2.83594 23.3998C2.08594 22.6263 1.5 21.7006 1.07812 20.6224C0.65625 19.5443 0.445312 18.3256 0.445312 16.9662C0.445312 13.8959 1.48828 10.9662 3.57422 8.17712C5.68359 5.36462 8.74219 2.86853 12.75 0.688843L16.6172 6.20837C15.5625 6.77087 14.625 7.32166 13.8047 7.86072C13.0078 8.39978 12.3047 8.95056 11.6953 9.51306C11.1094 10.0756 10.5938 10.6615 10.1484 11.2709C9.72656 11.8568 9.33984 12.4896 8.98828 13.1693C10.1367 13.1693 11.168 13.3334 12.082 13.6615C13.0195 13.9896 13.8164 14.4467 14.4727 15.0326C15.1523 15.5951 15.668 16.2631 16.0195 17.0365C16.3945 17.7865 16.582 18.5951 16.582 19.4623C16.582 20.3295 16.3945 21.1498 16.0195 21.9232C15.668 22.6732 15.1523 23.3295 14.4727 23.892C13.8164 24.4545 13.0195 24.8998 12.082 25.2279C11.1445 25.556 10.1016 25.7201 8.95312 25.7201Z" fill="#FFEC3E"></path>
              </svg>
            </span>
            <img class="h-64 mx-auto mb-4" src="boldui-assets/images/team-1.png" alt="">
            <h3 class="text-lg text-white font-heading mb-1">Tom Clarks</h3>
            <p class="mb-4 text-sm text-gray-500 uppercase font-semibold tracking-widest">Product Designer</p>
            <p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
          </div>
        </div>
      </div>
      <div x-ref="slide2" class="flex-shrink-0 w-full max-w-md">
        <div class="border-b border-t border-r">
          <div class="px-8 py-10 text-center">
            <span class="block mb-8">
              <svg class="mx-auto" width="39" height="26" viewBox="0 0 39 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M30.8203 25.7201C29.5781 25.7201 28.4297 25.5209 27.375 25.1224C26.3438 24.724 25.4531 24.1498 24.7031 23.3998C23.9531 22.6263 23.3672 21.7006 22.9453 20.6224C22.5234 19.5443 22.3125 18.3256 22.3125 16.9662C22.3125 13.8959 23.3555 10.9662 25.4414 8.17712C27.5508 5.36462 30.6094 2.86853 34.6172 0.688843L38.4844 6.20837C37.4297 6.77087 36.4922 7.32166 35.6719 7.86072C34.875 8.39978 34.1719 8.95056 33.5625 9.51306C32.9766 10.0756 32.4609 10.6615 32.0156 11.2709C31.5938 11.8568 31.207 12.4896 30.8555 13.1693C32.0039 13.1693 33.0352 13.3334 33.9492 13.6615C34.8867 13.9896 35.6836 14.4467 36.3398 15.0326C37.0195 15.5951 37.5352 16.2631 37.8867 17.0365C38.2617 17.7865 38.4492 18.5951 38.4492 19.4623C38.4492 20.3295 38.2617 21.1498 37.8867 21.9232C37.5352 22.6732 37.0195 23.3295 36.3398 23.892C35.6836 24.4545 34.8867 24.8998 33.9492 25.2279C33.0117 25.556 31.9688 25.7201 30.8203 25.7201ZM8.95312 25.7201C7.71094 25.7201 6.5625 25.5209 5.50781 25.1224C4.47656 24.724 3.58594 24.1498 2.83594 23.3998C2.08594 22.6263 1.5 21.7006 1.07812 20.6224C0.65625 19.5443 0.445312 18.3256 0.445312 16.9662C0.445312 13.8959 1.48828 10.9662 3.57422 8.17712C5.68359 5.36462 8.74219 2.86853 12.75 0.688843L16.6172 6.20837C15.5625 6.77087 14.625 7.32166 13.8047 7.86072C13.0078 8.39978 12.3047 8.95056 11.6953 9.51306C11.1094 10.0756 10.5938 10.6615 10.1484 11.2709C9.72656 11.8568 9.33984 12.4896 8.98828 13.1693C10.1367 13.1693 11.168 13.3334 12.082 13.6615C13.0195 13.9896 13.8164 14.4467 14.4727 15.0326C15.1523 15.5951 15.668 16.2631 16.0195 17.0365C16.3945 17.7865 16.582 18.5951 16.582 19.4623C16.582 20.3295 16.3945 21.1498 16.0195 21.9232C15.668 22.6732 15.1523 23.3295 14.4727 23.892C13.8164 24.4545 13.0195 24.8998 12.082 25.2279C11.1445 25.556 10.1016 25.7201 8.95312 25.7201Z" fill="#FFEC3E"></path>
              </svg>
            </span>
            <img class="h-64 mx-auto mb-4" src="boldui-assets/images/team-6.png" alt="">
            <h3 class="text-lg text-white font-heading mb-1">Kathy Ramsey</h3>
            <p class="mb-4 text-sm text-gray-500 uppercase font-semibold tracking-widest">Web Developer</p>
            <p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
          </div>
        </div>
      </div>
      <div x-ref="slide3" class="flex-shrink-0 w-full max-w-md">
        <div class="border-b border-t border-r">
          <div class="px-8 py-10 text-center">
            <span class="block mb-8">
              <svg class="mx-auto" width="39" height="26" viewBox="0 0 39 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M30.8203 25.7201C29.5781 25.7201 28.4297 25.5209 27.375 25.1224C26.3438 24.724 25.4531 24.1498 24.7031 23.3998C23.9531 22.6263 23.3672 21.7006 22.9453 20.6224C22.5234 19.5443 22.3125 18.3256 22.3125 16.9662C22.3125 13.8959 23.3555 10.9662 25.4414 8.17712C27.5508 5.36462 30.6094 2.86853 34.6172 0.688843L38.4844 6.20837C37.4297 6.77087 36.4922 7.32166 35.6719 7.86072C34.875 8.39978 34.1719 8.95056 33.5625 9.51306C32.9766 10.0756 32.4609 10.6615 32.0156 11.2709C31.5938 11.8568 31.207 12.4896 30.8555 13.1693C32.0039 13.1693 33.0352 13.3334 33.9492 13.6615C34.8867 13.9896 35.6836 14.4467 36.3398 15.0326C37.0195 15.5951 37.5352 16.2631 37.8867 17.0365C38.2617 17.7865 38.4492 18.5951 38.4492 19.4623C38.4492 20.3295 38.2617 21.1498 37.8867 21.9232C37.5352 22.6732 37.0195 23.3295 36.3398 23.892C35.6836 24.4545 34.8867 24.8998 33.9492 25.2279C33.0117 25.556 31.9688 25.7201 30.8203 25.7201ZM8.95312 25.7201C7.71094 25.7201 6.5625 25.5209 5.50781 25.1224C4.47656 24.724 3.58594 24.1498 2.83594 23.3998C2.08594 22.6263 1.5 21.7006 1.07812 20.6224C0.65625 19.5443 0.445312 18.3256 0.445312 16.9662C0.445312 13.8959 1.48828 10.9662 3.57422 8.17712C5.68359 5.36462 8.74219 2.86853 12.75 0.688843L16.6172 6.20837C15.5625 6.77087 14.625 7.32166 13.8047 7.86072C13.0078 8.39978 12.3047 8.95056 11.6953 9.51306C11.1094 10.0756 10.5938 10.6615 10.1484 11.2709C9.72656 11.8568 9.33984 12.4896 8.98828 13.1693C10.1367 13.1693 11.168 13.3334 12.082 13.6615C13.0195 13.9896 13.8164 14.4467 14.4727 15.0326C15.1523 15.5951 15.668 16.2631 16.0195 17.0365C16.3945 17.7865 16.582 18.5951 16.582 19.4623C16.582 20.3295 16.3945 21.1498 16.0195 21.9232C15.668 22.6732 15.1523 23.3295 14.4727 23.892C13.8164 24.4545 13.0195 24.8998 12.082 25.2279C11.1445 25.556 10.1016 25.7201 8.95312 25.7201Z" fill="#FFEC3E"></path>
              </svg>
            </span>
            <img class="h-64 mx-auto mb-4" src="boldui-assets/images/team-2.png" alt="">
            <h3 class="text-lg text-white font-heading mb-1">Craig Hoffmann</h3>
            <p class="mb-4 text-sm text-gray-500 uppercase font-semibold tracking-widest">UI Designer</p>
            <p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
          </div>
        </div>
      </div>
      <div x-ref="slide4" class="flex-shrink-0 w-full max-w-md">
        <div class="border-b border-t border-r">
          <div class="px-8 py-10 text-center">
            <span class="block mb-8">
              <svg class="mx-auto" width="39" height="26" viewBox="0 0 39 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M30.8203 25.7201C29.5781 25.7201 28.4297 25.5209 27.375 25.1224C26.3438 24.724 25.4531 24.1498 24.7031 23.3998C23.9531 22.6263 23.3672 21.7006 22.9453 20.6224C22.5234 19.5443 22.3125 18.3256 22.3125 16.9662C22.3125 13.8959 23.3555 10.9662 25.4414 8.17712C27.5508 5.36462 30.6094 2.86853 34.6172 0.688843L38.4844 6.20837C37.4297 6.77087 36.4922 7.32166 35.6719 7.86072C34.875 8.39978 34.1719 8.95056 33.5625 9.51306C32.9766 10.0756 32.4609 10.6615 32.0156 11.2709C31.5938 11.8568 31.207 12.4896 30.8555 13.1693C32.0039 13.1693 33.0352 13.3334 33.9492 13.6615C34.8867 13.9896 35.6836 14.4467 36.3398 15.0326C37.0195 15.5951 37.5352 16.2631 37.8867 17.0365C38.2617 17.7865 38.4492 18.5951 38.4492 19.4623C38.4492 20.3295 38.2617 21.1498 37.8867 21.9232C37.5352 22.6732 37.0195 23.3295 36.3398 23.892C35.6836 24.4545 34.8867 24.8998 33.9492 25.2279C33.0117 25.556 31.9688 25.7201 30.8203 25.7201ZM8.95312 25.7201C7.71094 25.7201 6.5625 25.5209 5.50781 25.1224C4.47656 24.724 3.58594 24.1498 2.83594 23.3998C2.08594 22.6263 1.5 21.7006 1.07812 20.6224C0.65625 19.5443 0.445312 18.3256 0.445312 16.9662C0.445312 13.8959 1.48828 10.9662 3.57422 8.17712C5.68359 5.36462 8.74219 2.86853 12.75 0.688843L16.6172 6.20837C15.5625 6.77087 14.625 7.32166 13.8047 7.86072C13.0078 8.39978 12.3047 8.95056 11.6953 9.51306C11.1094 10.0756 10.5938 10.6615 10.1484 11.2709C9.72656 11.8568 9.33984 12.4896 8.98828 13.1693C10.1367 13.1693 11.168 13.3334 12.082 13.6615C13.0195 13.9896 13.8164 14.4467 14.4727 15.0326C15.1523 15.5951 15.668 16.2631 16.0195 17.0365C16.3945 17.7865 16.582 18.5951 16.582 19.4623C16.582 20.3295 16.3945 21.1498 16.0195 21.9232C15.668 22.6732 15.1523 23.3295 14.4727 23.892C13.8164 24.4545 13.0195 24.8998 12.082 25.2279C11.1445 25.556 10.1016 25.7201 8.95312 25.7201Z" fill="#FFEC3E"></path>
              </svg>
            </span>
            <img class="h-64 mx-auto mb-4" src="boldui-assets/images/team-3.png" alt="">
            <h3 class="text-lg text-white font-heading mb-1">Eric Farrel</h3>
            <p class="mb-4 text-sm text-gray-500 uppercase font-semibold tracking-widest">Product Designer</p>
            <p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <img class="block w-full max-w-xl mx-auto rounded" src="acros-assets/images/testimonials/man-medium.jpg" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-xl mx-auto">
          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
          </svg>
          <h3 class="font-heading text-2xl md:text-3xl mt-2 mb-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
          <p class="max-w-md text-lg leading-8 mb-10">If you have ever wondered how to develop your brand, this is the place for you.</p>
          <div class="flex items-center">
            <img class="rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
            <div>
              <h4 class="font-heading font-medium mb-1">Denny Bailey</h4>
              <span class="text-gray-300">CEO &amp; Founder</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-40 pb-24 bg-blue-50">
  <div class="relative container px-4 mx-auto">
    <span class="absolute top-0 left-0 z-10 ml-12 lg:ml-32 -mt-20">
      <svg class="text-blue-300 h-32 w-32" viewBox="0 0 146 111" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M84.0714 110V110.5H84.5714H138.196H138.696V110V59.1949V58.7227L138.225 58.6957L118.758 57.5828L144.455 1.20738L144.777 0.5H144H124.036H123.756L123.609 0.73884L84.1451 65.1689L84.0714 65.2891V65.4301V110ZM0.5 110V110.5H1H54.625H55.125V110V59.1949V58.723L54.6539 58.6958L35.4185 57.5833L61.1157 1.20738L61.4381 0.5H60.6607H40.6964H40.4172L40.2707 0.737725L0.57431 65.1678L0.5 65.2884V65.4301V110Z" stroke="currentColor"></path>
      </svg>
    </span>
    <div class="relative flex flex-wrap items-center bg-white clip-path-right-top-sm -mx-3">
      <div class="w-full lg:w-3/5 px-3">
        <div class="max-w-sm mx-auto py-20 lg:py-0">
          <h3 class="mb-3 text-3xl font-bold text-blue-800">Lorem ipsum dolor sit amet, consectetur</h3>
          <p class="mb-10 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
          <div class="max-w-max ml-auto">
            <p class="mb-1 text-lg text-blue-500 font-semibold">Tom Harris</p>
            <p class="text-sm text-gray-500">UI Designer</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-2/5">
        <img class="w-full lg:w-auto h-96 object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
    </div>
  </div>
</section>

<section class="py-20 xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg mx-auto mb-12 text-center">
      <img class="mx-auto" src="metis-assets/icons/quote.svg" alt="">
      <h2 class="my-2 text-3xl md:text-4xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
    </div>
    <div class="flex flex-wrap max-w-5xl mx-auto mb-6">
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">John Bailey</p>
              <p class="text-blue-600">CEO</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">Julie Bailey</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">Julie Bailey</p>
              <p class="text-blue-600">Head of Operations</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">Tom Brown</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">Tom Brown</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">Julie Bailey</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">Tom Brown</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">Julie Bailey</p>
              <p class="text-blue-600">Head of Operations</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6 hidden" :class="{ 'hidden': !showContent }">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">Tom Brown</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6 hidden" :class="{ 'hidden': !showContent }">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">Julie Bailey</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6 hidden" :class="{ 'hidden': !showContent }">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">Tom Brown</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6 hidden" :class="{ 'hidden': !showContent }">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">Julie Bailey</p>
              <p class="text-blue-600">Head of Operations</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
    </div>
    <div class="text-center"><a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent }" class="inline-block py-4 px-8 text-xs text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Show more Testimonials</a></div>
  </div>
</section>

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-5/12 px-4 mb-12 lg:mb-0">
        <img class="mx-auto object-cover rounded-lg" src="mockup-assets/images/gray-500-square.png" alt="">
      </div>
      <div class="w-full lg:w-7/12 px-4">
        <div class="max-w-xl lg:ml-auto">
          <img class="mb-4" src="mockup-assets/images/quote.svg" alt="">
          <h2 class="mb-4 text-5xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="mb-9 text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <p class="text-2xl font-bold font-heading">Danny Bailey</p>
          <p class="text-lg text-gray-500">CEO &amp; Founder</p>
        </div>
      </div>
    </div>
  </div>
</section>