about-counters

Summary

Two-column "about" block: tall portrait/photo on the left with a top-down image reveal, and a copy column on the right with a sub-title eyebrow, an H2 (Prata serif), descriptive paragraph, two animated counters ("Satisfied Clients" and "Service Categories") on a grey baseline, and a Read More CTA.

HTML structure (minimal)

<section class="about-section section-padding fix">
  <div class="container">
    <div class="about-wrapper">
      <div class="row g-4 align-items-center">
        <div class="col-lg-6">
          <div class="about-image">
            <img src="assets/img/about/01.jpg" class="wow img-custom-anim-top" data-wow-delay=".3s">
          </div>
        </div>
        <div class="col-lg-6">
          <div class="about-content">
            <div class="section-title">
              <span class="sub-title wow fadeInUp">WHAT ABOUT US</span>
              <h2 class="wow fadeInUp" data-wow-delay=".3s">Experienced Lawyers, <br>Ready to Help.</h2>
            </div>
            <p>It encompasses a wide range of principles ...</p>
            <div class="counter-items">
              <div class="content">
                <h5>Satisficed Clients</h5>
                <h2><span class="count">250</span>+</h2>
              </div>
              <div class="content">
                <h5>Service Categories</h5>
                <h2><span class="count">153</span>+</h2>
              </div>
            </div>
            <div class="about-button"><a href="about.html" class="theme-btn">Read More <i class="fa-solid fa-arrow-right"></i></a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.about-section { padding-block: 120px; }
.about-content {
  .sub-title {
    color: var(--theme);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 14px;
  }
  h2 { font-family: "Prata"; font-size: 48px; line-height: 1.15; }
}
.counter-items {
  display: flex;
  gap: 64px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 32px 0;
  .content h2 {
    font-family: "Prata";
    color: var(--theme);
    font-size: 48px;
  }
}

Animation logic

$(".count").counterUp({ delay: 15, time: 4000 });
// .img-custom-anim-top fires a clip-path / translate3d reveal via animate.css

Notable details

• Counter values are wrapped in <span class="count"> whose plain text is read by jquery.counterUp at scroll-in — easy to localize.
• The two counters sit between two horizontal hairlines (--border = #5656564D) — a typographic divider rather than a card.
• The eyebrow uses var(--theme) bronze and 0.18em tracking, mirroring magazine subheads.
• Note the typo "Satisficed" in source copy — replace with "Satisfied" when productionalizing.

Use when

• About sections where two stats are the headline social proof, not a five-tile statistics band.
• Editorial pages that need a serif H2 reveal next to a photographic column.

Caveats

• Counters re-animate on every scroll past on some browsers; counterUp does not have a "play once" flag in this build.