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.
<section id="hero" class="branding-primary-secondary-gradient heroWrapper text-light position--relative cmn-hero">
<div class="container position-relative">
<div class="container cmn-hero--wrapper">
<div class="row justify-content-center text-center m-b-30">
<div class="col-12"><span class="blueprint-icon icon-success text-light icon-6x"></span></div>
</div>
<div class="row">
<div class="m-auto col-12">
<h1 class="large-text-2 text-weight-semibold text-center col-xl-8 col-lg-10 col-md-8 m-auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
</div>
</div>
<div class="row justify-content-center text-sm-center feature-container"></div>
</div>
</div>
</section>
<section id="hero" class="branding-primary-secondary-gradient heroWrapper text-light position--relative cmn-hero">
<div class="container position-relative">
<div class="container cmn-hero--wrapper">
<div class="row justify-content-center text-center m-b-30">
<div class="col-12"><span class="blueprint-icon icon-success text-light icon-6x"></span></div>
</div>
<div class="row">
<div class="m-auto col-12">
<h1 class="large-text-2 text-weight-semibold text-center col-xl-8 col-lg-10 col-md-8 m-auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
</div>
</div>
<div class="row justify-content-center text-sm-center feature-container"></div>
</div>
<div class="cta-parent">
<div class="btn--container"><a href="#" rel="noreferrer" class="btn btn--large display--inline-block">Button</a></div>
</div>
</div>
</section>