hero-banner

Summary

Full-bleed photographic hero with a teal-fade overlay, a centered serif headline ("We Are Experts In Legal Profession"), a one-paragraph kicker, and two CTAs: a solid amber "Contact Us" button and a circular ripple-animated play button that opens a YouTube modal. The section runs padding-bottom: 17rem so the next block can overlap upward.

HTML structure (minimal)

<div class="section position-relative"
     style="background-image: url(image/hero.jpg); padding-bottom: 17rem;">
  <div class="bg-overlay"></div>
  <div class="r-container h-100 gap-4 position-relative" style="z-index: 2;">
    <div class="d-flex flex-column gap-4 align-items-center text-white text-center mx-auto"
         style="max-width: 700px;">
      <h6 class="accent-color-2">Welcome to Pillar</h6>
      <h1>We Are Experts In Legal Profession</h1>
      <p>Smart approaches to legal solution with exceptional service…</p>
    </div>
    <div class="d-flex align-items-center justify-content-center gap-4">
      <a href="contact.html" class="btn btn-accent rounded-0 px-5 py-3">Contact Us</a>
      <button type="button" class="request-loader"
              data-bs-toggle="modal" data-bs-target="#videoModal">
        <i class="fa-solid fa-play ms-1"></i>
      </button>
    </div>
  </div>
</div>

Key SCSS tokens

.bg-overlay {
  background: linear-gradient(180deg, rgba(4,56,63,0.3) -29.83%, #04383F 100%);
  position: absolute; inset: 0;
}

h1 { font-size: 70px; font-family: var(--font-1); /* Cantata One */ }

.btn-accent {
  background: var(--accent-color-2);
  color: #fff;
  border: 1px solid transparent;
  text-transform: uppercase;
  transition: all .5s;
}
.btn-accent:hover {
  background: transparent;
  border-color: var(--accent-color-2);
  color: var(--accent-color-2);
}

Notable details

• The padding-bottom: 17rem on the hero is paired with margin-top: -17rem on the next section so the four feature cards float visually over the photograph — see feature-cards-overlap.
• The play button is the .request-loader ripple component — see video-modal and the highlight on the ripple animation.
• Heading uses Cantata One for a notably classical, almost wedding-invitation feel — uncommon for law sites and a big part of why Pillar reads premium.

Use when

• Any service-firm landing page that wants a single high-contrast hero image, a serious headline, and a "watch our story" video CTA.
• When you need a hero whose next section visually intrudes on the photo without absolute positioning.

Caveats

• Background image is set via inline style="background-image: url(...)" — to swap the asset you have to edit the HTML, not a CSS variable.
• No mobile background-position tuning: tall portrait crops can lose the subject on small screens.