<!-- Hero Section -->
<section class="hero-wrap">
  <div class="hero__center">
    
    <!-- Hero Banner -->
    <div class="hero__banner">
      <div class="hero__container">
          <div class="hero__inner">
            <h1 class="hero__text">Make Front do it.</h1>
            <p class="hero__lead">Start knowing what your attendees value, and win more business with Front template.</p>
          </div>
          <a class="button button-primary" href="...">Get Started</a>
      </div>
    </div>
    <!-- End Hero Banner -->

    <!-- Go to Arrow -->
    <div class="arrow">
      <a class="arrow__link" href="">
        <span class="arrow__text"></span>
      </a>
    </div>
    <!-- End Go to Arrow -->
  </div>

  <!-- SVG Background -->
  <figure class="hero__svg">
    <img class="hero__svg-img" src="..." alt="Image Description">
  </figure>
  <!-- End SVG Background Section -->
</div>
<!-- End Hero Section -->

.hero-wrap {
  ...
}

.hero-banner {
  ...
}

.hero__center {
  ...
}

.hero-container {
  ...
}

.hero__text {
  ...
}

.hero__lead {
  ...
}

.hero__svg {
  ...
}

.arrow {
  ...
}

.arrow__link {
  ...
}

.arrow__text {
  ...   
}

button {
  ...
}