hero-attorney

Summary

Split hero with a serif H1, a paragraph lede, a CTA button paired with an inline counter ("5+ Years of Experiences"), a portrait photograph on the right, and a fixed circular video play trigger in the bottom-left. Background is a tiled photo set via inline style.

HTML structure (minimal)

<section class="hero-section hero-1 fix bg-cover" style="background-image: url(assets/img/hero/bg.jpg);">
  <div class="hero-video">
    <div class="watch-btn">
      <a href="https://www.youtube.com/watch?v=..." class="video-btn ripple video-popup">
        <i class="fa-duotone fa-play"></i>
      </a>
    </div>
    <h6>Play Intro</h6>
  </div>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6">
        <div class="hero-content">
          <h1 class="wow fadeInUp" data-wow-delay=".3s">
            Proven Result <br> Partners In <br> Legal Success
          </h1>
          <p class="wow fadeInUp" data-wow-delay=".5s">Maecenas tempus, tellus eget condimentum...</p>
          <div class="hero-button">
            <a href="contact.html" class="theme-btn">Practice Areas <i class="fa-solid fa-arrow-right-long"></i></a>
            <div class="counter-content">
              <h2><span class="count">5</span>+</h2>
              <p>YEARS OF <br> EXPERIENCES</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="hero-image wow img-custom-anim-left">
          <img src="assets/img/hero/01.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.hero-section.hero-1 {
  position: relative;
  padding: 180px 0 120px;
  background-size: cover;
  background-position: center;

  h1 {
    font-family: "Prata", sans-serif;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.1;
    color: var(--header);
    margin-bottom: 24px;
  }

  .hero-button {
    display: flex;
    align-items: center;
    gap: 32px;
    .counter-content {
      h2 { font-family: "Prata"; font-size: 56px; color: var(--theme); }
      p { font-size: 12px; letter-spacing: 0.18em; }
    }
  }
}
.hero-video {
  position: absolute;
  bottom: 80px;
  left: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.video-btn.ripple {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: var(--theme);
  color: var(--white);
  display: grid; place-items: center;
  &::before, &::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 50%; border: 1px solid var(--theme);
    animation: ripple 2s infinite;
  }
  &::after { animation-delay: 1s; }
}
@keyframes ripple { to { transform: scale(2.2); opacity: 0; } }

Animation logic

// Counter — counts 0 → target when scrolled into view
$(".count").counterUp({ delay: 15, time: 4000 });

// Video popup
$(".video-popup").magnificPopup({ type: "iframe" });

// Image reveal direction comes from `.img-custom-anim-left` class which
// WOW.js triggers on scroll-in; keyframes live in assets/css/animate.css.

Notable details

• The counter sits on the same row as the primary CTA, not in a stats band — a single-stat "we've been around" pattern.
• The play button uses two layered ::before / ::after rings with staggered ripple keyframes for a CSS-only sonar effect.
• The H1 line breaks are hard-coded with <br>, which works because Prata at this size needs typographic control. Watch out on translations.
• Background image is set inline so each home variant can swap photos without touching SCSS.

Use when

• Lawyer / consultant / agency landing where you need a face + stat + CTA in the first viewport.
• Sites with a brand intro video that should be reachable but not dominate the hero.
• A subdued, editorial alternative to gradient or blob heroes.

Caveats

• Uses Bootstrap 5 grid (col-lg-6); below lg the portrait stacks under the text and the floating play button can collide with the image — adjust .hero-video position for narrow viewports.
• Counter only animates when scrolled into view; on tall viewports where the counter is already visible at first paint, jquery.counterup still triggers via Waypoints.