Testimonials / reviews

<!-- Quotation -->
<div class="card border-0 bg-secondary">
  <div class="card-body">
    <figure>
      <blockquote class="blockquote">
        <p>Ut pellentesque bibendum dignissim a molestie ultrices diam ut vel neque tincidunt eget sed ut quis sit semper nunc at etiam lacinia quam laoreet eget id sapien a pharetra, ornare diam dignissim  neque tincidunt ultrices.</p>
      </blockquote>
      <figcaption class="blockquote-footer">Darlene Robertson</figcaption>
    </figure>
  </div>
</div>

<!-- Testimonial style 1: Light card -->
<div class="card border-0">
  <div class="card-body">
    <div class="d-flex align-items-center mb-3">
      <img src="assets/img/avatar/22.jpg" class="rounded-circle" width="60" alt="Jane Cooper">
      <div class="ps-3">
        <div class="h6 mb-1">Jane Cooper</div>
        <div class="fs-sm text-body-secondary">Medical Assistant</div>
      </div>
    </div>
    <p class="card-text">Sit risus metus, vel neque eu lectus duis. Vulputate facilisi at feugiat mi aenean nunc enim faucibus arcu. Diam id accumsan sit semper nunc.</p>
  </div>
</div>

<!-- Testimonial style 1: Gray card -->
<div class="card border-0 bg-secondary">
  <div class="card-body">
    <div class="d-flex align-items-center mb-3">
      <img src="assets/img/avatar/23.jpg" class="rounded-circle" width="60" alt="Wade Warren">
      <div class="ps-3">
        <div class="h6 mb-1">Wade Warren</div>
        <div class="fs-sm text-body-secondary">President of Sales</div>
      </div>
    </div>
    <p class="card-text">Vitae tempor morbi tellus pulvinar. Ut iaculis sit tristique in turpis volutpat quam nec. Pretium eu nulla egestas ultrices. Donec in pulvinar ut fermentum a, nunc, aliquam.</p>
  </div>
</div>

<!-- Testimonial style 2: Info card example. Can be any color -->
<div class="card border-0 bg-info bg-opacity-10 h-100 text-center">
  <div class="polygon-avatar bg-info mx-auto translate-middle-y">
    <img src="assets/img/landing/mobile-app-showcase/testimonials/01.png" alt="Nick Williams">
  </div>
  <div class="card-body pt-0 mt-n4">
    <p class="card-text fs-xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis libero vitae sem ornare ornare. Aliquam ut sapien vitae quam blandit egestas. Quisque nulla elit, fermentum et tincidunt tempor, rutrum at leo. Curabitur massa quam, aliquam eu sapien sed.</p>
  </div>
  <div class="card-footer border-0 pt-0">
    <div class="h4 mb-1">Nick Williams</div>
    <span>Student</span>
  </div>
</div>

<!-- Testimonial style 2: Warning card example. Can be any color -->
<div class="card border-0 bg-warning bg-opacity-10 h-100 text-center">
  <div class="polygon-avatar bg-info mx-auto translate-middle-y">
    <img src="assets/img/landing/mobile-app-showcase/testimonials/02.png" alt="Lili Bocouse">
  </div>
  <div class="card-body pt-0 mt-n4">
    <p class="card-text fs-xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis libero vitae sem ornare ornare. Aliquam ut sapien vitae quam blandit egestas. Quisque nulla elit, fermentum et tincidunt tempor, rutrum at leo. Curabitur massa quam, aliquam eu sapien sed.</p>
  </div>
  <div class="card-footer border-0 pt-0">
    <div class="h4 mb-1">Lili Bocouse</div>
    <span>Student</span>
  </div>
</div>

<!-- Testimonial style 3 -->
<div class="d-flex align-items-center">
  <div class="bg-light rounded-circle flex-shrink-0 position-relative z-2 me-n5">
    <img src="assets/img/avatar/44.jpg" class="rounded-circle" width="80" alt="Avatar">
  </div>
  <div class="card bg-secondary border-0 rounded-4 py-3 ps-4 ps-sm-5 pe-3">
    <div class="card-body py-3 px-2 p-sm-4 ms-4 ms-sm-0">
      <p class="fs-xl">"Netus vel, amet placerat eget sit eleifend. Urna laoreet ultricies orci feugiat amet egestas semper praesent. Risus ut porttitor metus tortor quis eleifend."</p>
      <div class="h5 fw-bold mb-0">Eleanor Pena</div>
    </div>
  </div>
</div>

<!-- Testimonial style 4 -->
<div class="card border-0 bg-secondary p-1 p-sm-0 p-md-2">
  <img src="assets/img/landing/saas-4/integrations/magento-light.svg" class="d-block d-dark-mode-none mx-auto" width="165" alt="Magento">
  <img src="assets/img/landing/saas-4/integrations/magento-dark.svg" class="d-none d-dark-mode-block mx-auto" width="165" alt="Magento">
  <div class="card-body text-center pt-1">
    <p class="pb-3 mb-3">Differentiate your app from the competition with this SaaS platform's outstanding performance and exceptional API for implementing AI models into your application.</p>
    <img src="assets/img/avatar/51.jpg" class="d-inline-block rounded-circle" width="80" alt="Avatar">
    <div class="pt-2 mt-1">
      <h3 class="h5 mb-1">Christopher Davis</h3>
      <p class="fs-sm text-body-secondary mb-0">Network Administrator</p>
    </div>
  </div>
</div>

<!-- Review: Avatar + Name + Position -->
<div class="text-center p-3 p-sm-4">
  <div class="d-flex justify-content-center fs-lg mb-4">
    <i class="ai-star-filled text-warning mx-2"></i>
    <i class="ai-star-filled text-warning mx-2"></i>
    <i class="ai-star-filled text-warning mx-2"></i>
    <i class="ai-star-filled text-warning mx-2"></i>
    <i class="ai-star-filled text-warning mx-2"></i>
  </div>
  <p class="mb-3">"Tools are constantly improved and contain a lot of useful information."</p>
  <div class="d-flex align-items-center justify-content-center text-start pt-2">
    <img src="assets/img/avatar/31.jpg" class="rounded-circle" width="60" alt="James Hendrix">
    <div class="ps-3">
      <div class="h6 mb-1">James Hendrix</div>
      <div class="fs-sm text-body-secondary">Marketing specialist</div>
    </div>
  </div>
</div>

<!-- Review: Company logo -->
<div class="text-center p-3 p-sm-4">
  <div class="d-flex justify-content-center fs-lg mb-4">
    <i class="ai-star-filled text-warning mx-2"></i>
    <i class="ai-star-filled text-warning mx-2"></i>
    <i class="ai-star-filled text-warning mx-2"></i>
    <i class="ai-star-filled text-warning mx-2"></i>
    <i class="ai-star-filled text-body-secondary opacity-40 mx-2"></i>
  </div>
  <p class="mb-3">"We can easily analyze our big data quickly and efficiently all the time."</p>
  <img src="assets/img/landing/saas-1/brands/capterra.svg" class="d-inline-block" width="196" alt="Capterra">
</div>

<!-- Testimonials slider: Style 1 -->
<div class="card border-0 bg-secondary overflow-hidden">
  <div class="card-body position-relative z-2 px-lg-0 py-lg-5">
    <div class="row py-2 py-sm-1 py-md-3 py-lg-4 py-xl-5">
      <div class="col-md-4 col-lg-3 offset-lg-1 mb-3 mb-md-0">
      
        <!-- Binded items-->
        <div class="binded-content">

          <!-- Item-->
          <div class="binded-item active" id="author1"><img class="d-block rounded-circle mb-3" src="assets/img/avatar/21.jpg" width="86" alt="Lilianna Bocouse">
            <h4 class="mb-0">Lilianna Bocouse</h4>
            <p class="fs-lg text-body-secondary mb-0">Head of Marketing</p>
          </div>

          <!-- Item-->
          <div class="binded-item" id="author2"><img class="d-block rounded-circle mb-3" src="assets/img/avatar/33.jpg" width="86" alt="Darell Steward">
            <h4 class="mb-0">Darell Steward</h4>
            <p class="fs-lg text-body-secondary mb-0">Project Manager</p>
          </div>

          <!-- Item-->
          <div class="binded-item" id="author3"><img class="d-block rounded-circle mb-3" src="assets/img/avatar/34.jpg" width="86" alt="Annette Black">
            <h4 class="mb-0">Annette Black</h4>
            <p class="fs-lg text-body-secondary mb-0">Lead Designer</p>
          </div>
        </div>
      </div>

      <div class="col-md-8 col-lg-7">

        <!-- Swiper slider-->
        <div class="swiper" data-swiper-options='{
          "spaceBetween": 40,
          "loop": true,
          "autoHeight": true,
          "bindedContent": true,
          "pagination": {
            "el": "#testimonials-bullets",
            "clickable": true
          }
        }'>
          <div class="swiper-wrapper">

            <!-- Item-->
            <div class="swiper-slide" data-swiper-binded="#author1">
              <p class="text-dark lead mb-0">“Around provides us with the detailed and accurate data we need to make strategic decisions. All tools are constantly being improved and contain a lot of useful and interesting information. Thanks to Around, we can constantly analyze our big data quickly and efficiently.”</p>
            </div>

            <!-- Item-->
            <div class="swiper-slide" data-swiper-binded="#author2">
              <p class="text-dark lead mb-0">“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac pretium dui. Aliquam rutrum justo lorem, in efficitur odio efficitur vel. Integer mattis, neque malesuada sagittis porttitor, enim tortor ullamcorper diam, id eleifend sem mauris at turpis. Curabitur sed nisi nec ligula dictum maximus eu ut ante.”</p>
            </div>

            <!-- Item-->
            <div class="swiper-slide" data-swiper-binded="#author3">
              <p class="text-dark lead mb-0">“Quisque rutrum sit amet magna sit amet tristique. Vivamus rhoncus ac purus vitae convallis. Aliquam erat volutpat. Proin egestas, mauris ut semper semper, ipsum felis mattis ligula, et porttitor ante arcu nec ante. Aliquam congue est eu turpis sollicitudin, et ullamcorper tortor aliquam.”</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Swiper pagination (bullets)-->
<div class="swiper-pagination position-relative bottom-0 pt-4 mt-2 mt-md-3" id="testimonials-bullets"></div>

<!-- Testimonials slider: Style 2 -->
<div class="row">
  <div class="col-md-9 col-lg-7 order-md-2">

    <!-- Swiper slider-->
    <div class="swiper" data-swiper-options='{
      "spaceBetween": 40,
      "loop": true,
      "bindedContent": true,
      "autoHeight": true,
      "pagination": {
        "el": ".testimonials-count",
        "type": "fraction"
      },
      "navigation": {
        "prevEl": "#prev-testimonial",
        "nextEl": "#next-testimonial"
      }
    }'>
      <div class="swiper-wrapper">

        <!-- Item-->
        <div class="swiper-slide" data-swiper-binded="#testimonial-1">
          <div class="d-flex d-md-none pt-3 mb-3"><i class="ai-quotes d-md-none text-primary display-3 mt-n2"></i>
            <div class="ps-3">
              <h3 class="h5 mb-0">Lilia Bocouse</h3>
              <p class="text-body-secondary mb-0">Head of Marketing</p>
            </div>
          </div>
          <h2 class="mb-lg-4">Awesome experience with a professional team. Thank you :)</h2>
          <p class="lead mb-0">Suspendisse mauris elit, pellentesque nec purus sed, finibus finibus ipsum. Proin posuere, metus sed porttitor pellentesque, ante magna tincidunt mi, nec fermentum dui ligula vel massa. Praesent ultrices iaculis arcu iaculis ultrices. Maecenas vitae nulla odio. In laoreet, lectus in tempus ultricies.  </p>
        </div>

        <!-- Item-->
        <div class="swiper-slide" data-swiper-binded="#testimonial-2">
          <div class="d-flex d-md-none pt-3 mb-3"><i class="ai-quotes d-md-none text-primary display-3 mt-n2"></i>
            <div class="ps-3">
              <h3 class="h5 mb-0">Robert Fox</h3>
              <p class="text-body-secondary mb-0">Marketing Coordinator</p>
            </div>
          </div>
          <h2 class="mb-lg-4">Thanks to your talented team for the banding we dreamed about</h2>
          <p class="lead mb-0">Leo vitae sem eget eget at in vivamus placerat sodales tristique risusiis senectusic quisque faucibus est justo egetert lobortis ultrices eu dignissim etiamier turpis tincidunt eget placerat feugiat senectusic quisque faucibus placerat sodales vitae tempor morbi tellus pulvinar tristique in turpis.  </p>
        </div>

        <!-- Item-->
        <div class="swiper-slide" data-swiper-binded="#testimonial-3">
          <div class="d-flex d-md-none pt-3 mb-3"><i class="ai-quotes d-md-none text-primary display-3 mt-n2"></i>
            <div class="ps-3">
              <h3 class="h5 mb-0">Jenny Wilson</h3>
              <p class="text-body-secondary mb-0">CEO, Co-Founder</p>
            </div>
          </div>
          <h2 class="mb-lg-4">Thanks to you, we have created a unique branding that is our pride!</h2>
          <p class="lead mb-0">Duis sapien velit, rutrum ac rutrum dapibus, auctor ut lacus. Aenean sit amet erat augue. Aenean finibus, nibh sed malesuada maximus, nisi tellus iaculis quam, eget egestas mi felis eu urna. Quisque id nisl commodo, egestas eros ac, cursus odio. Ut nec rutrum magna, vel tempor erat. Vivamus nec tempus purus.  </p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 offset-lg-1 order-md-1 mt-n3">
    <i class="ai-quotes d-none d-md-block text-primary ms-n2 mb-1" style="font-size: 150px;"></i>

    <!-- Contnetn binded to slider (on screens > 768px)-->
    <div class="binded-content h-auto d-none d-md-block">
      <div class="binded-item h-auto active" id="testimonial-1">
        <h3 class="h5 mb-1">Lilia Bocouse</h3>
        <p class="text-body-secondary mb-0">Head of Marketing</p>
      </div>
      <div class="binded-item h-auto" id="testimonial-2">
        <h3 class="h5 mb-1">Robert Fox</h3>
        <p class="text-body-secondary mb-0">Marketing Coordinator</p>
      </div>
      <div class="binded-item h-auto" id="testimonial-3">
        <h3 class="h5 mb-1">Jenny Wilson</h3>
        <p class="text-body-secondary mb-0">CEO, Co-Founder</p>
      </div>
    </div>

    <!-- Swiper controls-->
    <div class="d-flex align-items-center pb-2 pb-md-0 pt-4 mt-3">
      <button class="btn btn-icon btn-sm btn-outline-primary rounded-circle me-3" type="button" id="prev-testimonial" aria-label="Prev">
        <i class="ai-arrow-left"></i>
      </button>
      <div class="testimonials-count fw-medium flex-shrink-0 text-center" style="width: 2.5rem;"></div>
      <button class="btn btn-icon btn-sm btn-outline-primary rounded-circle ms-3" type="button" id="next-testimonial" aria-label="Next">
        <i class="ai-arrow-right"></i>
      </button>
    </div>
  </div>
</div>