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>

// Quotation
.card.border-0.bg-secondary
  .card-body
    figure
      blockquote.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.
      figcaption.blockquote-footer Darlene Robertson

<!-- 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-muted">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-muted">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 1: Light card
.card.border-0
  .card-body
    .d-flex.align-items-center.mb-3
      img(src="assets/img/avatar/22.jpg", width="60", alt="Jane Cooper").rounded-circle
      .ps-3
        .h6.mb-1 Jane Cooper
        .fs-sm.text-muted Medical Assistant
    p.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.

// Testimonial style 1: Gray card
.card.border-0.bg-secondary
  .card-body
    .d-flex.align-items-center.mb-3
      img(src="assets/img/avatar/23.jpg", width="60", alt="Wade Warren").rounded-circle
      .ps-3
        .h6.mb-1 Wade Warren
        .fs-sm.text-muted President of Sales
    p.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.

<!-- Testimonial style 2: Info card example. Can be any color -->
<div class="card border-0 bg-faded-info 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-faded-warning 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 2: Info card example. Can be any color
.card.border-0.bg-faded-info.h-100.text-center
  .polygon-avatar.bg-info.mx-auto.translate-middle-y
    img(src="assets/img/landing/mobile-app-showcase/testimonials/01.png", alt="Nick Williams")
  .card-body.pt-0.mt-n4
    p.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.
  .card-footer.border-0.pt-0
    .h4.mb-1 Nick Williams
    span Student

// Testimonial style 2: Warning card example. Can be any color
.card.border-0.bg-faded-warning.h-100.text-center
  .polygon-avatar.bg-warning.mx-auto.translate-middle-y
    img(src="assets/img/landing/mobile-app-showcase/testimonials/02.png", alt="Lili Bocouse")
  .card-body.pt-0.mt-n4
    p.card-text.fs-xl Proin interdum purus non quam convallis, quis dignissim leo cursus. Praesent finibus elit nisl, sed ultrices elit lobortis in. Donec laoreet sit amet nulla quis hendrerit. Praesent venenatis mattis ante. Praesent justo elit, suscipit a libero sit amet, luctus posuere mi.
  .card-footer.border-0.pt-0
    .h4.mb-1 Lili Bocouse
    span Student

<!-- Review: Avatar + Name + Position -->
<div class="text-center p-3 p-sm-4 m-lg-2">
  <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-muted">Marketing specialist</div>
    </div>
  </div>
</div>

<!-- Review: Company logo -->
<div class="text-center p-3 p-sm-4 m-lg-2">
  <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-muted 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>

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

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

<!-- Testimonials slider: Style 1 -->
<div class="card border-0 bg-secondary overflow-hidden">
  <div class="card-body position-relative zindex-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-muted 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-muted 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-muted 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 1
.card.border-0.bg-secondary.overflow-hidden
  .card-body.position-relative.zindex-2.px-lg-0.py-lg-5
    .row.py-2.py-sm-1.py-md-3.py-lg-4.py-xl-5
      .col-md-4.col-lg-3.offset-lg-1.mb-3.mb-md-0

        // Binded items
        .binded-content

          // Item
          #author1.binded-item.active
            img(src="assets/img/avatar/21.jpg", width="86", alt="Lilianna Bocouse").d-block.rounded-circle.mb-3
            h4.mb-0 Lilianna Bocouse
            p.fs-lg.text-muted.mb-0 Head of Marketing

          // Item
          #author2.binded-item
            img(src="assets/img/avatar/33.jpg", width="86", alt="Darell Steward").d-block.rounded-circle.mb-3
            h4.mb-0 Darell Steward
            p.fs-lg.text-muted.mb-0 Project Manager

          // Item
          #author3.binded-item
            img(src="assets/img/avatar/34.jpg", width="86", alt="Annette Black").d-block.rounded-circle.mb-3
            h4.mb-0 Annette Black
            p.fs-lg.text-muted.mb-0 Lead Designer

      .col-md-8.col-lg-7

        // Swiper slider
        .swiper(
          data-swiper-options=`{
            "spaceBetween": 40,
            "loop": true,
            "autoHeight": true,
            "bindedContent": true,
            "pagination": {
              "el": "#testimonials-bullets",
              "clickable": true
            }
          }`
        )
          .swiper-wrapper
          
            // Item
            .swiper-slide(data-swiper-binded="#author1")
              p.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.”
          
            // Item
            .swiper-slide(data-swiper-binded="#author2")
              p.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.”
          
            // Item
            .swiper-slide(data-swiper-binded="#author3")
              p.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.”

// Swiper pagination (bullets)
#testimonials-bullets.swiper-pagination.position-relative.bottom-0.pt-4.mt-2.mt-md-3

<!-- 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-muted 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-muted 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-muted 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-muted 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-muted 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-muted 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">
        <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">
        <i class="ai-arrow-right"></i>
      </button>
    </div>
  </div>
</div>

// Testimonials slider: Style 2
.row
  .col-md-9.col-lg-7.order-md-2

    // Swiper slider
    .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"
        }
      }`
    )
      .swiper-wrapper

        // Item
        .swiper-slide(data-swiper-binded="#testimonial-1")
          .d-flex.d-md-none.pt-3.mb-3
            i.ai-quotes.d-md-none.text-primary.display-3.mt-n2
            .ps-3
              h3.h5.mb-0 Lilia Bocouse
              p.text-muted.mb-0 Head of Marketing
          h2.mb-lg-4 Awesome experience with a professional team. Thank you :)
          p.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.  

        // Item
        .swiper-slide(data-swiper-binded="#testimonial-2")
          .d-flex.d-md-none.pt-3.mb-3
            i.ai-quotes.d-md-none.text-primary.display-3.mt-n2
            .ps-3
              h3.h5.mb-0 Robert Fox
              p.text-muted.mb-0 Marketing Coordinator
          h2.mb-lg-4 Thanks to your talented team for the banding we dreamed about
          p.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.  

        // Item
        .swiper-slide(data-swiper-binded="#testimonial-3")
          .d-flex.d-md-none.pt-3.mb-3
            i.ai-quotes.d-md-none.text-primary.display-3.mt-n2
            .ps-3
              h3.h5.mb-0 Jenny Wilson
              p.text-muted.mb-0 CEO, Co-Founder
          h2.mb-lg-4 Thanks to you, we have created a unique branding that is our pride!
          p.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.  

  .col-md-3.offset-lg-1.order-md-1.mt-n3
    i.ai-quotes.d-none.d-md-block.text-primary.ms-n2.mb-1(style="font-size: 150px;")

    // Contnetn binded to slider (on screens > 768px)
    .binded-content.h-auto.d-none.d-md-block
      #testimonial-1.binded-item.h-auto.active
        h3.h5.mb-1 Lilia Bocouse
        p.text-muted.mb-0 Head of Marketing
      #testimonial-2.binded-item.h-auto
        h3.h5.mb-1 Robert Fox
        p.text-muted.mb-0 Marketing Coordinator
      #testimonial-3.binded-item.h-auto
        h3.h5.mb-1 Jenny Wilson
        p.text-muted.mb-0 CEO, Co-Founder
  
    // Swiper controls
    .d-flex.align-items-center.pb-2.pb-md-0.pt-4.mt-3
      button(type="button")#prev-testimonial.btn.btn-icon.btn-sm.btn-outline-primary.rounded-circle.me-3
        i.ai-arrow-left
      .testimonials-count.fw-medium.flex-shrink-0.text-center(style="width: 2.5rem;")
      button(type="button")#next-testimonial.btn.btn-icon.btn-sm.btn-outline-primary.rounded-circle.ms-3
        i.ai-arrow-right