Bulma Components in Acros library

<div>
  <nav class="navbar py-1 has-background-white">
    <div class="container px-8-mobile">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-4 has-text-dark">
            <img src="acros-assets/logo/logo-acros-black.svg" alt="" width="auto" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start ml-auto mr-0">
          <ul class="navbar-item pl-0">
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>
        <div class="navbar-end">
          <div class="navbar-item is-hidden-mobile">
            <div class="buttons"><a class="button is-primary" href="#">Contact</a></div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <section class="section" style="background-image: url('acros-assets/images/headers/header-1-bg.jpg'); background-size: cover; background-position: center;">
    <div class="container">
      <div class="columns">
        <div class="column pt-8-tablet mb-12 mb-0-tablet">
          <small class="is-block has-text-white has-text-weight-semibold is-uppercase mb-2">
            <span>Develop your</span>
            <span class="has-text-success">skills</span>
          </small>
          <h1 class="has-text-white has-mw-xl title is-size-1">Take care of your performance every day.</h1>
          <p class="has-mw-md subtitle has-text-white mb-10">Take care to develop resources continually and integrity them with previous projects.</p>
          <div class="buttons"><a class="button is-primary mr-4" href="#">Track your performance</a><a class="button is-white is-outlined" href="#">Learn more</a></div>
        </div>
        <div class="column">
          <img class="image mx-auto" src="acros-assets/images/headers/header-1-woman.png" alt="">
        </div>
      </div>
    </div>
  </section>
  <div class="has-background-white -mt-36-widescreen py-12">
    <div class="container">
      <a class="is-inline-block" href="#">
        <img class="image" src="acros-assets/icons/headers/arrow-down.svg" alt="">
      </a>
    </div>
  </div>
  <div class="navbar-side is-hidden is-fixed is-top-0 is-left-0 has-background-blur" style="z-index: 50; width:100%; height: 100%;">
    <div class="is-absolute" style="z-index: -1;"></div>
    <div class="container is-relative">
      <a class="navbar-close is-absolute is-right-0 mt-6 mr-6" href="#">
        <img src="acros-assets/icons/mobile-decline.svg" alt="">
      </a>
    </div>
    <aside class="py-6 px-6 pb-8 has-background-white is-flex is-flex-direction-column is-justify-content-space-between" style="height: 100%; width: 288px; overflow-y: auto">
      <div>
        <a class="navbar-item title is-size-4 has-text-dark pl-4 mb-5" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" width="auto" style="max-height: initial" alt="">
        </a>
        <ul class="menu-list title is-size-6">
          <li><a class="py-4 px-6" href="#">Home</a></li>
          <li><a class="py-4 px-6" href="#">About</a></li>
          <li><a class="py-4 px-6" href="#">Company</a></li>
          <li><a class="py-4 px-6" href="#">Services</a></li>
          <li><a class="py-4 px-6" href="#">Testimonials</a></li>
          <li><a class="py-4 px-6" href="#">Contact</a></li>
        </ul>
      </div>
      <div>
        <div class="buttons mb-8"><a class="button is-dark is-outlined is-fullwidth mb-4" href="#">Log In</a><a class="button is-primary is-fullwidth" href="#">Sign up</a></div>
        <small class="ml-6">2021 &copy; Shuffle</small>
      </div>
    </aside>
  </div>
</div>