Bulma Components in Metis library

<section class="is-background-contain is-background-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg'); background-position: top;">
  <nav class="navbar is-relative is-transparent py-3" aria-label="main navigation">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="#">
          <img src="metis-assets/logos/metis/metis.svg" alt="" width="auto" style="min-height: 40px;">
        </a>
        <a class="navbar-burger" role="button" type="button" data-toggle="side-menu" data-target="#sideMenuHeaders01" aria-controls="sideMenuHeaders01" aria-expanded="false" aria-label="Toggle navigation">
          <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 is-centered-absolute"><a class="navbar-item" href="#">Product</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">About Us</a><a class="navbar-item" href="#">Features</a></div>
        <div class="navbar-end">
          <div class="navbar-item">
            <div class="buttons"><a class="button is-primary is-outlined" href="#">Log In</a><a class="button is-primary" href="#">Sign Up</a></div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="section">
    <div class="container">
      <div class="is-max-w-lg mx-auto has-text-centered mb-6">
        <h2 class="title is-spaced">
          <span>The quick</span>
          <span class="has-text-primary">brown fox</span>
          <span>jumps over the lazy dog.</span>
        </h2>
        <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
        <div class="buttons is-centered"><a class="button is-primary" href="#">Check Now</a><a class="button is-dark is-outlined" href="#">Documentation</a></div>
      </div>
      <div class="is-relative is-max-w-3xl mx-auto mb-6">
        <img src="metis-assets/elements/pattern-small.png" alt="">
        <div style="position:absolute; top: 3%; left: 9%; width: 82%; height: 90%;">
          <img style="object-fit: contain; width: 100%; height: 100%" src="metis-assets/elements/app-mockup.png" alt="">
        </div>
      </div>
      <div class="columns is-mobile is-multiline is-centered has-text-centered">
        <div class="mb-4 column is-6-mobile is-4-tablet is-2-desktop">
          <img src="metis-assets/logos/brands/tesla.svg" alt="">
        </div>
        <div class="mb-4 column is-6-mobile is-4-tablet is-2-desktop">
          <img src="metis-assets/logos/brands/facebook.svg" alt="">
        </div>
        <div class="mb-4 column is-6-mobile is-4-tablet is-2-desktop">
          <img src="metis-assets/logos/brands/marvel.svg" alt="">
        </div>
        <div class="mb-4 column is-6-mobile is-4-tablet is-2-desktop">
          <img src="metis-assets/logos/brands/nike.svg" alt="">
        </div>
        <div class="mb-4 column is-hidden-mobile is-4-tablet is-2-desktop">
          <img src="metis-assets/logos/brands/airbnb.svg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="is-hidden navbar-side is-fixed" style="top: 0; left: 0; bottom: 0; width: 80%; height: 100%; z-index: 9999;" id="sideMenuHeaders01">
    <div class="navbar-backdrop is-fixed is-top is-right is-fullsize has-background-grey" style="opacity: 75%; z-index: 50;"></div>
    <nav class="navbar is-relative is-flex is-flex-direction-column pt-4 px-4" style="width: 100%; height: 100%; z-index: 50; overflow-y: auto;">
      <div class="mb-5 navbar-brand is-flex is-justify-content-space-between">
        <a class="navbar-item" href="#">
          <img style="min-height: 35px;" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
        </a>
        <a class="navbar-item" data-toggle="side-menu" data-target="#sideMenuHeaders01" aria-controls="sideMenuHeaders01" aria-label="Close">
          <svg class="image is-24x24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </a>
      </div>
      <div>
        <nav class="navbar mb-5">
          <div class="is-fullwidth"><a class="navbar-item" href="#">Product</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">About Us</a><a class="navbar-item" href="#">Features</a></div>
        </nav>
        <div class="mb-6 pt-5 has-border-top"><a class="button is-block is-primary is-outlined mb-2" href="#">Log In</a><a class="button is-block is-primary" href="#">Sign Up</a></div>
      </div>
      <div class="pl-4 pb-4 mt-auto">
        <p class="mb-5 is-size-7">
          <span>Get in Touch</span>
          <a href="#">[email protected]</a>
        </p>
        <a href="#">
          <img src="metis-assets/icons/facebook-blue.svg" alt="">
        </a>
        <a href="#">
          <img src="metis-assets/icons/twitter-blue.svg" alt="">
        </a>
        <a href="#">
          <img src="metis-assets/icons/instagram-blue.svg" alt="">
        </a>
      </div>
    </nav>
  </div>
</section>