A Hero Section is the first thing users see on a webpage. It typically includes a headline, subheading, call-to-action (CTA) button, and an eye-catching background or image.

Referral Primary Hero Section

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Sub-headline: Lorem Ipsum is simply dummy text of the printing and typesetting industry.

<section id="hero" class="bg-primary heroWrapper">
  <div class="container referral-wrapper">
    <div class="row m-0 align-items-center">
      <div class="col-12 content-wrapper">
        <h1 class="large-text-1 referral-heading"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h1>
        <h3 class="large-text-3 referral-sub-heading"> Sub-headline: Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h3>
          <div class="referral-form">
            <form>
              <input type="email" placeholder="Enter your email" class="form--text--input referral-input" />
              <button type="button" class="btn btn--mid btn--reverse referral-button" aria-label="Button"> Button </button>
            </form>
          </div>
        </div>
      </div>
    </div>
</section>