Bootstrap 5 Hero Image Section Example

<!-- Hero 1 - Bootstrap Brain Component -->
<section class="px-5 py-8 py-xxl-20 background-position-center background-size-cover bsb-overlay bsb-hover-pull" style="background-image: url('./assets/img/hero-img-1.jpg');">
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-12 col-md-11 col-lg-9 col-xl-7 col-xxl-6 text-center text-white">
        <h1 class="display-3 fw-bold mb-3">Art of Design</h1>
        <p class="lead mb-5">Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.</p>
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
          <button type="button" class="btn btn-light btn-lg px-4 gap-3">Free Consultation</button>
          <button type="button" class="btn btn-outline-light btn-lg px-4">Buy Credits</button>
        </div>
      </div>
    </div>
  </div>
</section>