Bulma Components in Bendis library

<div>
  <nav class="is-relative navbar py-2 has-background-primary">
    <div class="navbar-brand is-align-items-center">
      <a class="navbar-item" href="#">
        <span class="navbar-item px-0 title is-size-5 has-text-dark">
          <img src="bendis-assets/logos/bendis-light.svg" alt="" style="max-height: initial;">
        </span>
      </a>
      <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="2" fill="white"></rect><rect x="2" y="11" width="20" height="2" fill="white"></rect><rect x="2" y="16" width="20" height="2" fill="white"></rect></svg>
      </a>
    </div>
    <div class="is-hidden-mobile is-hidden-tablet-only is-absolute" style="top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);">
      <ul class="navbar-item">
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">About</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Company</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Services</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Testimonials</a></li>
      </ul>
    </div>
    <div class="navbar-menu is-hidden-mobile">
      <div class="navbar-end"><a class="navbar-item has-text-white" href="#">Sign In</a><a class="navbar-item has-text-white" href="#">Support</a></div>
    </div>
  </nav>
  <section class="is-relative section py-40-desktop is-overflow-hidden" style="background-image: url('bendis-assets/images/red-image.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
    <div class="is-absolute is-bottom-0 is-top-0 is-left-0 is-flex is-align-items-center is-justify-content-center">
      <h2 class="stroke" style="opacity: 80%;">BE BOLD</h2>
    </div>
    <div class="container">
      <div class="has-mw-4xl mx-auto has-text-centered">
        <span class="is-block is-size-5 has-text-white has-text-weight-semibold is-uppercase has-letter-space mb-2">Develop your skill</span>
        <h1 class="title is-size-3-mobile is-size-2-tablet is-size-1-desktop has-leading-1 has-text-white is-uppercase mb-8">Take care of your performance every day.</h1>
        <a class="button is-warning" href="#">Get Started Free</a>
      </div>
    </div>
  </section>
  <div class="is-relative has-background-white py-10">
    <div class="container">
      <div class="columns is-mobile is-multiline is-centered">
        <div class="column is-6-mobile">
          <img class="image is-block mx-auto" src="bendis-assets/logos/slack.svg" alt="">
        </div>
        <div class="column is-6-mobile">
          <img class="image is-block mx-auto" src="bendis-assets/logos/dropbox.svg" alt="">
        </div>
        <div class="column is-6-mobile">
          <img class="image is-block mx-auto" src="bendis-assets/logos/spotify.svg" alt="">
        </div>
        <div class="column is-6-mobile">
          <img class="image is-block mx-auto" src="bendis-assets/logos/stripe.svg" alt="">
        </div>
        <div class="column is-6-mobile">
          <img class="image is-block mx-auto" src="bendis-assets/logos/netflix.svg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="is-hidden navbar-side is-fixed is-top-0 is-bottom-0 is-left-0 has-mw-md" style="width: 75%; z-index: 9999;">
    <div class="navbar-backdrop is-fixed is-inset-0 has-background-dark" style="opacity: 75%; z-index: 50;"></div>
    <aside class="menu is-relative is-flex is-flex-direction-column py-8 px-10 has-background-white" style="width: 100%; height: 100%; z-index: 50; overflow-y: auto;">
      <a class="mb-20" href="#">
        <span class="navbar-item px-0 title is-5 has-text-dark">
          <img src="bendis-assets/logos/bendis-blue.svg" style="max-height: initial" alt="">
        </span>
      </a>
      <ul class="mb-40">
        <li><a class="button is-ghost has-text-left has-text-primary" href="#">About</a></li>
        <li><a class="button is-ghost has-text-left has-text-primary" href="#">Company</a></li>
        <li><a class="button is-ghost has-text-left has-text-primary" href="#">Services</a></li>
        <li><a class="button is-ghost has-text-left has-text-primary" href="#">Testimonials</a></li>
      </ul>
      <div class="mb-8"><a class="button is-ghost has-text-primary is-fullwidth" href="#">Sign In</a><a class="button is-outlined is-primary is-fullwidth" href="#">Sign up</a></div>
      <small class="has-text-centered has-text-primary">All rights reserved &copy; Wireframes Corporation 2022</small>
    </aside>
  </div>
</div>