image-tabs-about

Summary

About-the-firm split layout: a tall jarallax photo with a floating frosted-glass stat card on the left, and a Mission/Vision/Values tab switcher on the right; below sits a row of phone, hours and email contact tiles.

HTML structure (minimal)

<section class="bg-light">
  <div class="container">
    <div class="row g-4 gx-5 align-items-center">
      <div class="col-lg-6">
        <div class="jarallax h-100 rounded-1 relative overflow-hidden mh-400 wow fadeInUp">
          <img src="images/misc/s1.webp" class="jarallax-img" alt="">
          <div class="abs bottom-0 w-100 p-30 sm-hide">
            <div class="bg-blur text-light p-4 rounded-1 wow flipInX" data-wow-delay=".4s">
              <div class="row g-4 align-items-center">
                <div class="col-lg-5 text-center">
                  <div class="de_count fs-15">
                    <h2 class="fs-60 mb-0 lh-1">
                      <span class="timer fs-60" data-to="90" data-speed="3000">0</span>+
                    </h2>
                    Successful Cases
                  </div>
                </div>
                <div class="col-lg-7">
                  <p class="no-bottom">Delivering consistent results through strategic advocacy...</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="subtitle wow fadeInUp">About Our Firm</div>
        <h2 class="wow fadeInUp" data-wow-delay=".2s">Our Legal Team Delivering Trusted Client Protection</h2>
        <div class="de-tab wow fadeInUp" data-wow-delay=".4s">
          <ul class="d-tab-nav mb-4 border-bottom pb-4 d-flex">
            <li class="active-tab">Our Mission</li>
            <li>Our Vision</li>
            <li>Our Values</li>
          </ul>
          <ul class="d-tab-content">
            <li>Our legal professionals are dedicated to delivering reliable counsel...</li>
            <li>Our vision is to become a trusted legal partner...</li>
            <li>We uphold transparency, accountability, and professionalism...</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.bg-blur {
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.de_count h2 .timer { font-weight: 700; }
.de-tab .d-tab-nav { list-style: none; padding: 0; }
.de-tab .d-tab-nav li {
  cursor: pointer;
  padding-bottom: .5rem;
  margin-right: 2rem;
  position: relative;
  color: #999;
}
.de-tab .d-tab-nav li.active-tab {
  color: var(--primary-color);
  font-weight: 600;
}
.de-tab .d-tab-content > li { display: none; }
.de-tab .d-tab-content > li:first-child { display: block; }
.mh-400 { min-height: 400px; }

Animation logic

// Tab switching — designesia.js
$('.de-tab').each(function () {
  const $tab = $(this);
  $tab.find('.d-tab-nav li').on('click', function () {
    const idx = $(this).index();
    $tab.find('.d-tab-nav li').removeClass('active-tab');
    $(this).addClass('active-tab');
    $tab.find('.d-tab-content > li').hide().eq(idx).fadeIn(200);
  });
});

// Counter — animated from 0 to data-to over data-speed ms when scrolled in
$('.timer').each(function () {
  const $el = $(this);
  $({ count: 0 }).animate({ count: +$el.data('to') }, {
    duration: +$el.data('speed'),
    step(now) { $el.text(Math.floor(now)); }
  });
});

Notable details

• The stat card is a bg-blur (backdrop-filter) panel layered on the jarallax photo, so the parallax image shows through — feels embedded rather than overlaid.
• wow flipInX with data-wow-delay=".4s" on the stat card delivers a 3D flip entrance distinct from surrounding fadeInUp, drawing the eye to the number.
• Tab switching is a plain index-based jQuery toggle — no Bootstrap tab plugin required, no IDs to wire up.

Use when

• About / company-overview sections where you need to expose multiple framing statements (mission/vision/values) without three separate sections.
• Any place where a single key metric should feel anchored to imagery.

Caveats

• .bg-blur requires backdrop-filter support — Firefox <103 and older Safari render only the rgba background fallback.
• Counter only animates once when scrolled into view; if the section is above-the-fold the animation may finish before the user looks at it.