Testimonials UI Components – Mirga Library

<section x-data="{ activeSlide: 1, slideCount: 3 }" class="py-16 bg-neutral-50">
  <div class="container mx-auto px-4">
    <div class="p-12 max-w-2xl ml-auto bg-white rounded-4xl">
      <h6 class="mb-10 text-5xl font-medium tracking-tight font-heading">Testimonials</h6>
      <div class="mb-10">
        <div class="py-16 border border-neutral-100 overflow-hidden rounded-4xl">
          <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
            <div class="px-10 inline-block w-full whitespace-normal">
              <p class="text-2xl text-neutral-600 text-center font-semibold max-w-sm mx-auto">“Working with Migra has been a game-changer for our business. Their digital marketing strategies increased our online visibility and drove significant growth in traffic and conversions. Highly recommended!"</p>
            </div>
            <div class="visibility-item px-10 inline-block w-full whitespace-normal">
              <p class="text-2xl text-neutral-600 text-center font-semibold max-w-sm mx-auto">"Collaborating with Mirga has revolutionized our business landscape. Their innovative approach to digital marketing has not only elevated our online presence but also spurred remarkable surges in both website traffic and conversions."</p>
            </div>
            <div class="visibility-item px-10 inline-block w-full whitespace-normal">
              <p class="text-2xl text-neutral-600 text-center font-semibold max-w-sm mx-auto">"Partnering with Mirga has truly transformed our business dynamics. Their unparalleled digital marketing strategies have not only amplified our online visibility but also resulted in substantial boosts in website traffic and conversions."</p>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap justify-between -m-4">
        <div class="w-auto p-4">
          <div class="flex flex-wrap items-center -m-3">
            <div class="w-auto p-3">
              <div class="w-16 h-16 overflow-hidden rounded-full">

<section class="position-relative py-16 bg-light bg-opacity-25 overflow-hidden">
  <div class="container mw-8xl">
    <div class="mw-2xl ms-auto px-6 px-sm-12 py-12 bg-white rounded-5">
      <h3 class="font-heading fs-2 fw-medium mb-10">Testimonials</h3>
      <div class="px-6 px-sm-20 pt-16 pb-20 mb-10 rounded-5 border">
        <div class="text-center">
          <p class="fs-5 fw-bold">“Working with Migra has been a game-changer for our business. Their digital marketing strategies increased our online visibility and drove significant growth in traffic and conversions. Highly recommended!"</p>
        </div>
      </div>
      <div class="d-sm-flex align-items-center justify-content-between">
        <div class="d-flex mb-6 mb-sm-0 align-items-center">
          <img class="img-fluid d-block me-4" src="mirga-assets/images/testimonials/avatar.png" alt="">
          <div>
            <span class="d-block fs-5 fw-bold text-dark">Savia Ellianson</span>
            <span class="fw-medium">Pink Ox</span>
          </div>
        </div>
        <div>
          <a class="btn me-1 py-5 px-4 btn-light-dark" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9 18L10.2915 16.7463L3.4452 9.9L18 9.9L18 8.1L3.4452 8.1L10.2726 1.2726L9 3.02789e-06L7.86805e-07 9L9 18Z" fill="white"></path>
            </svg>
          </a>
          <a class="btn py-5 px-4 btn-primary" href="#">