testimonial-slider-split

Summary

Section opens with a centered title, paragraph, and a row of 5 SVG star icons. Below, a Slick slider rotates testimonial cards split 7/5: the left column holds the customer logo and quote with author info, and the right column holds an oversized growth percentage and a "Read Case Study" arrow link.

HTML structure (minimal)

<div class="tp-testimonial__area pt-105 pb-200 fix">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-6">
        <div class="tp-testimonial__section-box text-center">
          <h3 class="tp-section-title">Word From Our Client</h3>
          <p>5 Stars Based on 4,700+ Real Users Reviews</p>
          <div class="tp-testimonial__rating">
            <span><svg>★</svg></span><span><svg>★</svg></span>
            <span><svg>★</svg></span><span><svg>★</svg></span>
            <span><svg>★</svg></span>
          </div>
        </div>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="tp-testimonial__slider-active wow tpfadeUp">
          <div class="tp-testimonial__wrapper-main">
            <div class="tp-testimonial__wrapper">
              <div class="row gx-0">
                <div class="col-xl-7">
                  <div class="tp-testimonial__left-item p-relative">
                    <div class="tp-testimonial__logo"><img src="testi-logo-up-3.png"></div>
                    <div class="tp-testimonial__content z-index">
                      <p>"Business growth is a point a business reaches where it expands…"</p>
                    </div>
                    <div class="tp-testimonial__author-info z-index">
                      <span>Benjamin Evalent</span><i>WP Developer</i>
                    </div>
                  </div>
                </div>
                <div class="col-xl-5">
                  <div class="tp-testimonial__right-item d-flex flex-column justify-content-between">
                    <div class="tp-testimonial__increase">
                      <span>94%</span>
                      <p>Increase in offline purchases versus control group.</p>
                    </div>
                    <div class="tp-testimonial__link"><a>Read Case Study <svg>→</svg></a></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 5+ more slides -->
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.tp-testimonial {
  &__rating { display: inline-flex; gap: 6px; margin-top: 20px; }
  &__wrapper {
    background: var(--tp-grey-7);
    border-radius: 20px;
    overflow: hidden;
  }
  &__left-item { padding: 50px; }
  &__right-item {
    background: var(--tp-common-black);
    color: #fff;
    padding: 50px 40px;
    height: 100%;
  }
  &__increase span {
    display: block; font-weight: 800;
    font-size: 96px; line-height: 1;
    background: linear-gradient(135deg, #FFA8B8, #6865FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

Animation logic

$('.tp-testimonial__slider-active').slick({
  slidesToShow: 1,
  arrows: true,
  asNavFor: '.tp-testimonial__img-active'
});
$('.tp-testimonial__img-active').slick({
  slidesToShow: 3,
  asNavFor: '.tp-testimonial__slider-active',
  centerMode: true,
  focusOnSelect: true
});

Notable details

• Two-column 7/5 split: light quote area + dark stat area inside one rounded container — communicates "soft testimonial + hard outcome" without forcing the reader to scroll.
• Big growth percentage uses a gradient text fill (pink → indigo) — the only place the template applies gradient text, making it a deliberate accent.
• Slick is configured with asNavFor to optionally pair with a thumbnail strip on other pages of the template.

Use when

• Case-study testimonial blocks where you want one prominent metric per quote.
• B2B SaaS pages that need the "social proof + result" pairing in a single visual unit.
• Designs that benefit from gradient-text statistics.

Caveats

• Slick requires jQuery; if you migrate off jQuery, swap to Swiper or Embla.
• The 96px stat font size hard-overflows on very narrow phones; rein in to clamp() if you change copy length.