Vector background divider hero example

    <!--::Start Hero BG Shape Divider::-->
    <section class="position-relative bg-primary text-white jarallax" data-speed=".2">
      <!--Hero parallax image-->
      <img src="assets/img/backgrounds/bg1.jpg" alt="" class="jarallax-img opacity-25">
  
      <!--Hero:divider-->
      <svg class="position-absolute start-0 bottom-0 mb-n1" style="color:var(--bs-body-bg);" preserveAspectRatio="none" width="100%" height="120"
          viewBox="0 0 1200 120" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M0 96L1200 0V120H0V96Z" fill="currentColor" />
      </svg>
  
      <div class="container position-relative py-12 py-lg-15">
          <div class="row pb-9">
              <div class="col-lg-10 mx-auto text-center">
                  <!--:Heading:-->
                  <h1 class="display-1 mb-4">Vector background divider hero example</h1>
                  <!--Subheading:-->
                  <p class="lead mb-5">Build a stunning website that attract visitors</p>
                  <!--:Action button:-->
                  <a href="#!" class="btn btn-white px-4 px-lg-5 btn-lg rounded-pill btn-hover-arrow">
                      <span class="btn-rise-text">Get started</span>
                  </a>
              </div>
          </div>
      </div>
  </section>
  <!--::Start Hero BG Shape Divider::-->