UI Components – Bendis Library

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 md:mb-16 lg:mb-0">
        <div class="max-w-md">
          <h2 class="mb-5 text-3xl font-bold font-heading text-blue-800">Lorem ipsum dolor sit amet consectutar</h2>
          <p class="text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap -m-4">
          <div class="w-1/2 md:w-1/3 p-4">
            <div class="bg-blue-50 py-12">
              <img class="h-6 mx-auto" src="bendis-assets/logos/slack-color.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 md:w-1/3 p-4">
            <div class="bg-blue-50 py-12">
              <img class="h-6 mx-auto" src="bendis-assets/logos/dropbox-color.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 md:w-1/3 p-4">
            <div class="bg-blue-50 py-12">
              <img class="h-6 mx-auto" src="bendis-assets/logos/spotify-color.svg" alt="">

<section class="py-8 px-4 lg:px-10 bg-white" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="relative">
      <div class="flex justify-between items-center">
        <a class="text-xl text-blue-800 font-semibold" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-blue-800">
          <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="currentColor"></rect><rect x="2" y="11" width="20" height="2" fill="currentColor"></rect><rect x="2" y="16" width="20" height="2" fill="currentColor"></rect></svg>
        </button>
      </div>
    </nav>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-16 mr-auto text-xl text-blue-800 font-semibold leading-none" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">About</a></li>

<section class="py-8 px-4 lg:px-10 bg-white" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="relative">
      <div class="flex justify-between items-center">
        <a class="text-xl text-blue-800 font-semibold" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-blue-800 lg:hidden">
          <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="6" width="20" height="2" fill="currentColor"></rect><rect x="2.5" y="11" width="20" height="2" fill="currentColor"></rect><rect x="2.5" y="16" width="20" height="2" fill="currentColor"></rect></svg>
        </button>
        <div class="hidden lg:block"><a class="inline-block px-4 text-blue-800 hover:text-blue-700 font-semibold" href="#">Sign in</a><a class="inline-block px-4 text-blue-800 hover:text-blue-700 font-semibold" href="#">Support</a></div>
      </div>
    </nav>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-16 mr-auto text-xl text-blue-800 font-semibold leading-none" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>

<section class="py-8 px-4 lg:px-10 bg-white" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="relative">
      <div class="flex justify-between items-center">
        <a class="text-xl text-blue-800 font-semibold" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
        <div class="lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 rounded">
            <svg class="block text-blue-800 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <title>Mobile menu</title>
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
            </svg>
          </button>
        </div>
        <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:items-center lg:w-auto lg:space-x-10">
          <li><a class="text-blue-800 font-semibold hover:text-blue-700" href="#">About</a></li>
          <li><a class="text-blue-800 font-semibold hover:text-blue-700" href="#">Company</a></li>
          <li><a class="text-blue-800 font-semibold hover:text-blue-700" href="#">Services</a></li>
          <li><a class="text-blue-800 font-semibold hover:text-blue-700" href="#">Testimonials</a></li>
        </ul>
        <div class="hidden lg:inline-flex">
          <input class="hidden lg:inline-block pl-6 py-3 bg-blue-50 text-blue-400 text-sm placeholder-blue-400" placeholder="Search">
          <button class="px-4 bg-blue-50">

<section class="py-8 px-4 lg:px-10 bg-white" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="relative">
      <div class="flex justify-between items-center">
        <button class="text-blue-800">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M22.7973 21.0328L17.4361 15.4697C19.7112 11.9316 19.2607 7.2297 16.3549 4.22699C14.7105 2.55107 12.548 1.62 10.2278 1.62C7.90764 1.62 5.74515 2.55107 4.12329 4.22699C0.766928 7.71851 0.766928 13.3748 4.12329 16.843C7.02913 19.8457 11.5794 20.3112 15.0033 17.9836L20.387 23.5467C20.6348 23.8028 21.0628 23.8028 21.3106 23.5467L22.7973 22.0104C23.0676 21.7311 23.0676 21.2889 22.7973 21.0328ZM14.3726 14.8179C12.0975 17.1689 8.38069 17.1689 6.08304 14.8179C3.80793 12.467 3.80793 8.6263 6.08304 6.25207C8.35816 3.90112 12.0749 3.90112 14.3726 6.25207C16.6477 8.6263 16.6477 12.467 14.3726 14.8179Z" fill="currentColor"></path>
          </svg>
        </button>
        <a class="text-xl text-blue-800 font-semibold" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
        <div>
          <button x-on:click="mobileNavOpen = !mobileNavOpen">
            <svg class="inline-block text-blue-800 w-6 h-6" 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="currentColor"></rect><rect x="2" y="11" width="20" height="2" fill="currentColor"></rect><rect x="2" y="16" width="20" height="2" fill="currentColor"></rect></svg>
          </button>
        </div>
      </div>
    </nav>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">

<section class="py-8 px-4 lg:px-10 bg-white" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="relative">
      <div class="flex justify-between items-center">
        <a class="text-xl text-blue-800 font-semibold" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
        <div class="lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 rounded">
            <svg class="text-blue-800 block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
              <title>Mobile menu</title>
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
            </svg>
          </button>
        </div>
        <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:w-auto lg:space-x-10">
          <li><a class="text-blue-800 font-semibold hover:text-blue-700" href="#">About</a></li>
          <li><a class="text-blue-800 font-semibold hover:text-blue-700" href="#">Company</a></li>
          <li><a class="text-blue-800 font-semibold hover:text-blue-700" href="#">Services</a></li>
          <li><a class="text-blue-800 font-semibold hover:text-blue-700" href="#">Testimonials</a></li>
        </ul>
        <div class="hidden lg:block"><a class="inline-block px-8 text-blue-800 hover:text-blue-700 font-semibold" href="#">Sign in</a><a class="inline-block py-3 px-8 text-sm text-blue-800 hover:text-blue-700 leading-normal uppercase font-semibold border-2 border-blue-800" href="#">Sign up</a></div>
      </div>
    </nav>

<section class="py-8 px-4 lg:px-10 bg-white" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="relative">
      <div class="flex justify-between items-center">
        <a class="text-xl text-blue-800 font-semibold" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
        <div class="lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 rounded">
            <svg class="text-blue-800 block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
              <title>Mobile menu</title>
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
            </svg>
          </button>
        </div>
        <ul class="hidden lg:flex lg:ml-auto lg:mr-10 lg:items-center lg:w-auto lg:space-x-10">
          <li><a class="text-blue-800 font-semibold hover:text-blue-700" href="#">About</a></li>
          <li><a class="text-blue-800 font-semibold hover:text-blue-700" href="#">Company</a></li>
          <li><a class="text-blue-800 font-semibold hover:text-blue-700" href="#">Services</a></li>
          <li><a class="text-blue-800 font-semibold hover:text-blue-700" href="#">Testimonials</a></li>
        </ul>
        <div class="hidden lg:block"><a class="inline-block py-3 px-8 text-sm text-blue-800 hover:text-blue-700 leading-normal uppercase font-semibold border-2 border-blue-800" href="#">Sign up</a></div>
      </div>
    </nav>

<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>

<div>
  <div class="is-relative has-background-primary is-overflow-hidden">
    <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>

<div class="is-relative has-background-primary">
  <nav class="navbar py-2 has-background-transparent">
    <div class="container-fluid is-flex is-justify-content-space-between" style="width: 100%;">
      <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>
      </div>
      <div class="navbar-end">
        <div class="navbar-item">
          <button class="navbar-menu-open button is-ghost">
            <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>
          </button>
        </div>
      </div>
    </div>
  </nav>
  <section class="is-relative section pt-32 pb-52" style="z-index: 2;">
    <div class="container">
      <p class="is-size-5 has-leading-5 has-text-white has-mw-sm mb-6">Take care to develop resources continually and integrity them with previous projects.</p>
      <h1 class="has-mw-4xl title is-size-2-mobile is-size-1 has-leading-2 has-text-white is-uppercase mb-8">Take care of your performance every day.</h1>
      <div class="field has-addons has-mw-md">

<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>

<div class="has-background-primary">
  <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>

<div class="has-background-primary">
  <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>

<div>
  <div class="is-relative has-background-primary is-overflow-hidden">
    <nav class="is-relative navbar py-2 has-background-transparent">
      <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>

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="columns is-multiline -mb-16">
      <div class="column is-6-tablet is-4-widescreen mb-16">
        <div class="is-flex has-mw-xs mx-auto">
          <div class="is-flex-shrink-0">
            <svg width="38" height="38" viewbox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 -0.0633545L0 18.6833L19 37.43L38 18.6833L19 -0.0633545ZM4.47782 18.6833L19 4.35477L25.1417 10.4146L22.9026 12.6239L19 8.77429L8.95708 18.6833L12.8582 22.5339L10.6191 24.7432L4.47782 18.6833ZM24.5665 18.6833L19 24.177L13.4349 18.6833L19 13.1924L24.5665 18.6833ZM12.8582 26.9525L15.0974 24.7432L19 28.5923L29.0444 18.6833L25.1417 14.8327L27.3809 12.6235L33.5222 18.6833L19 33.0119L12.8582 26.9525Z" fill="#3C74F9"></path>
            </svg>
          </div>
          <div class="ml-7">
            <h3 class="is-size-5 has-text-primary has-text-weight-bold is-uppercase mb-4">Spectacular team plan</h3>
            <p class="has-text-grey has-leading-6">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="column is-6-tablet is-4-widescreen mb-16">
        <div class="is-flex has-mw-xs mx-auto">
          <div class="is-flex-shrink-0">
            <svg width="38" height="38" viewbox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.5832 0V3.13632C28.5869 3.92368 34.8332 10.612 34.8332 18.7467C34.8332 26.8799 28.5869 33.5678 20.5832 34.3551V37.4933C30.3354 36.6957 38 28.613 38 18.7467C38 8.87889 30.3354 0.799545 20.5832 0Z" fill="#3C74F9"></path>
              <path d="M17.4168 34.3551C9.4164 33.5678 3.16683 26.8799 3.16683 18.7467C3.16683 10.6125 9.4164 3.92368 17.4168 3.13632V0C7.6665 0.799545 0 8.87889 0 18.7467C0 28.613 7.6665 36.6957 17.4168 37.4933V34.3551Z" fill="#3C74F9"></path>
              <path d="M9.6425 17.1846C10.3968 12.7524 14.2932 9.37332 19 9.37332C23.7068 9.37332 27.6032 12.7524 28.3575 17.1846H31.5566C30.7776 11.0212 25.4605 6.24872 19 6.24872C12.5429 6.24872 7.2238 11.0212 6.4429 17.1846H9.6425Z" fill="#3C74F9"></path>
              <path d="M28.3575 20.3087C27.6032 24.739 23.7068 28.12 19 28.12C14.2932 28.12 10.3968 24.739 9.6425 20.3087H6.44337C7.2238 26.4722 12.5428 31.2446 19 31.2446C25.4605 31.2446 30.7776 26.4722 31.5571 20.3087H28.3575Z" fill="#3C74F9"></path>

<section class="section py-24 has-background-primary">
  <div class="container">
    <div class="has-mw-2xl mx-auto has-text-centered mb-16">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">Lorem ipsum</span>
      <h1 class="title is-size-3 has-leading-3 has-text-white">Take quick action that increases your brand&apos;s regular profit.</h1>
      <p class="subtitle is-size-5 has-leading-4 has-text-white mt-6 mb-10">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div class="buttons is-centered"><a class="button py-3 is-size-6 is-white" href="#">Monthly</a><a class="button py-3 is-size-6 is-dark" href="#">Yearly</a></div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-12 is-4-widescreen">
        <div class="is-relative has-mw-md mx-auto is-fullheight pt-20 pb-10 px-10 has-background-dark">
          <div class="is-absolute is-top-0 is-left-0 is-inline-flex pl-12 pr-6 py-3 is-align-items-center has-background-info-dark has-text-weight-semibold is-uppercase clip-path-right-top-sm" style="width: 190px;">
            <span class="is-size-7 has-letter-space has-text-white">Starter</span>
          </div>
          <div class="is-flex is-flex-wrap-wrap is-align-items-end mb-8">
            <h3 class="is-flex is-align-items-start has-text-white has-text-weight-semibold">
              <span class="is-size-1">$34</span>
              <span class="is-size-3">99</span>
            </h3>
            <small class="pl-4 pb-3 has-text-info">/per month</small>
          </div>
          <ul class="mb-6">
            <li class="mb-4">
              <span class="mr-4 has-text-info">

<section class="section py-24 has-background-primary">
  <div class="container">
    <div class="columns mb-10 pb-10 border-b-primary-light">
      <div class="column is-4 mb-12 mb-0-desktop">
        <a class="is-inline-block mb-3 title is-5 has-text-dark mb-6" href="#">
          <img src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
        </a>
        <p class="has-mw-xs has-text-primary-light mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="buttons">
          <a class="button p-0 is-light has-text-warning has-background-primary-dark w-12 h-12" href="#">
            <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63469 17.7274V9.76612H9.35806L9.76664 6.66255H6.63469V4.68138C6.63469 3.78311 6.88796 3.17095 8.20273 3.17095L9.87687 3.17027V0.394337C9.58735 0.357434 8.59354 0.272827 7.43684 0.272827C5.02146 0.272827 3.36785 1.71891 3.36785 4.37401V6.66255H0.63623V9.76612H3.36785V17.7274H6.63469Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="button p-0 is-light has-text-warning has-background-primary-dark w-12 h-12" href="#">
            <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14598C18.1356 2.44844 17.4032 2.65356 16.6336 2.74513C17.4194 2.27462 18.0208 1.52831 18.3059 0.641769C17.5689 1.0775 16.7553 1.39389 15.8885 1.56541C15.1943 0.82489 14.2069 0.363647 13.1118 0.363647C11.0108 0.363647 9.30722 2.06719 9.30722 4.16707C9.30722 4.46489 9.34083 4.75577 9.40573 5.03392C6.24434 4.87513 3.44104 3.3605 1.56483 1.05895C1.23686 1.61986 1.05028 2.27344 1.05028 2.9711C1.05028 4.29107 1.72243 5.45574 2.74225 6.13713C2.11877 6.11629 1.53237 5.94477 1.01901 5.65968V5.70719C1.01901 7.5498 2.33086 9.08762 4.07031 9.43762C3.75161 9.52338 3.41555 9.57089 3.06789 9.57089C2.82222 9.57089 2.58464 9.54656 2.3517 9.5002C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1623 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4279 6.10416 15.4279C13.1026 15.4279 16.928 9.63117 16.928 4.60398L16.9153 4.11147C17.6627 3.57835 18.3094 2.90853 18.8181 2.14598Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="button p-0 is-light has-text-warning has-background-primary-dark w-12 h-12" href="#">
            <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.4 15.8H5.9V15.3V7.2V6.7H5.4H2.7H2.2V7.2V15.3V15.8H2.7H5.4ZM15.3 15.8H15.8V15.3V10.17C15.8 8.18386 14.1361 6.52 12.15 6.52C11.6417 6.52 11.1085 6.68661 10.6472 6.94292C10.5635 6.98941 10.4809 7.03957 10.4 7.09321V6.7H9.9H7.2H6.7V7.2V15.3V15.8H7.2H9.9H10.4V15.3V10.53C10.4 10.0862 10.8062 9.68 11.25 9.68C11.6938 9.68 12.1 10.0862 12.1 10.53V15.3V15.8H12.6H15.3ZM1.8 0.5H16.2C16.9139 0.5 17.5 1.08614 17.5 1.8V16.2C17.5 16.9139 16.9139 17.5 16.2 17.5H1.8C1.08614 17.5 0.5 16.9139 0.5 16.2V1.8C0.5 1.08614 1.08614 0.5 1.8 0.5ZM1.93 4.05C1.93 5.22614 2.87386 6.17 4.05 6.17C5.22614 6.17 6.17 5.22614 6.17 4.05C6.17 2.87386 5.22614 1.93 4.05 1.93C2.87386 1.93 1.93 2.87386 1.93 4.05Z" fill="currentColor" stroke="currentColor"></path>
            </svg>
          </a>

<section class="is-relative section py-24 has-background-primary">
  <img class="is-absolute is-top-0 is-right-0" src="bendis-assets/images/frame-line-light.svg" alt="">
  <div class="container">
    <div class="has-mw-md mb-10">
      <h2 class="title is-size-3 has-leading-3 has-text-white">Lorem ipsum dolor sit amet consectetur</h2>
    </div>
    <div class="is-relative has-background-primary-dark overflow-hidden mb-2" style="min-height: 295px;">
      <div class="is-absolute is-top-0 is-left-0 p-10 is-fullheight is-flex-desk is-align-items-center">
        <svg style="max-height: 100%;" width="83" height="213" viewbox="0 0 83 213" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path opacity="0.15" d="M1.776 47.552H0.776V48.552H1.776V47.552ZM1.776 1.75999V0.759995H0.776V1.75999H1.776ZM81.552 1.75999H82.552V0.759995H81.552V1.75999ZM81.552 212V213H82.552V212H81.552ZM30.288 212H29.288V213H30.288V212ZM30.288 47.552H31.288V46.552H30.288V47.552ZM2.776 47.552V1.75999H0.776V47.552H2.776ZM1.776 2.75999H81.552V0.759995H1.776V2.75999ZM80.552 1.75999V212H82.552V1.75999H80.552ZM81.552 211H30.288V213H81.552V211ZM31.288 212V47.552H29.288V212H31.288ZM30.288 46.552H1.776V48.552H30.288V46.552Z" fill="white"></path>
        </svg>
      </div>
      <div class="py-20 px-8 p-20-tablet has-mw-md has-mw-lg-desktop">
        <h3 class="title is-size-5 has-text-weight-semibold has-leading-4 has-text-white">Making changes simple and easy</h3>
        <p class="subtitle has-leading-6 has-text-white">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
      </div>
      <img class="is-hidden-tablet is-fullwidth image clip-path-left-top" style="height: 294px; object-fit: cover;" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      <img class="is-hidden-mobile is-absolute is-top-0 is-right-0 is-fullheight is-fullwidth has-mw-sm-tablet has-mw-md-desktop has-mw-2xl-widescreen image clip-path-left-top" style="object-fit: cover;" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
    </div>
    <div class="is-relative has-background-primary-dark overflow-hidden mb-2" style="min-height: 295px;">
      <div class="is-absolute is-top-0 is-right-0 p-10 is-fullheight is-flex-desk is-align-items-center">
        <svg style="max-height: 100%;" width="148" height="215" viewbox="0 0 148 215" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path opacity="0.15" d="M2.232 176.544L1.61012 175.761L1.232 176.061V176.544H2.232ZM11.16 169.344L10.5229 168.573L11.7147 170.176L11.16 169.344ZM55.512 131.04L54.838 130.301L54.8316 130.307L55.512 131.04ZM88.92 49.248L88.149 49.8849L88.92 49.248ZM55.224 50.976L54.4273 50.3716L54.424 50.376L55.224 50.976ZM49.176 74.016V75.016H50.176V74.016H49.176ZM1.656 74.016L0.656277 73.9925L0.632194 75.016H1.656V74.016ZM12.024 33.12L11.1718 32.5967L11.1652 32.6077L12.024 33.12ZM38.232 8.92799L37.8039 8.02423L37.7977 8.02722L38.232 8.92799ZM126.072 18.72L125.359 19.4212L125.365 19.4271L126.072 18.72ZM122.616 121.824L123.396 122.45L123.399 122.446L122.616 121.824ZM69.048 173.088L68.438 172.296L66.1099 174.088H69.048V173.088ZM146.808 173.088H147.808V172.088H146.808V173.088ZM146.808 213.12V214.12H147.808V213.12H146.808ZM2.232 213.12H1.232V214.12H2.232V213.12ZM2.85388 177.327C6.11812 174.735 8.49662 172.837 9.98775 171.634C10.7317 171.034 11.2607 170.603 11.5692 170.344C11.7095 170.226 11.8406 170.114 11.9166 170.038C11.9201 170.034 11.9985 169.959 12.066 169.856C12.0855 169.826 12.1316 169.752 12.1692 169.65C12.1918 169.588 12.3023 169.283 12.1546 168.924C11.9601 168.452 11.5303 168.329 11.3264 168.309C11.1449 168.291 11.0048 168.329 10.9633 168.34C10.8598 168.368 10.7832 168.407 10.766 168.416C10.735 168.432 10.7095 168.447 10.6934 168.456C10.6606 168.476 10.6295 168.496 10.6053 168.512L11.7147 170.176C11.7265 170.168 11.7245 170.17 11.7138 170.176C11.7088 170.179 11.6926 170.189 11.6692 170.201C11.6596 170.205 11.5888 170.242 11.4895 170.269C11.4501 170.28 11.3116 170.317 11.1313 170.3C10.9285 170.28 10.4995 170.157 10.3053 169.686C10.158 169.328 10.2683 169.024 10.2904 168.964C10.3274 168.862 10.3726 168.791 10.3907 168.763C10.4307 168.702 10.468 168.66 10.4758 168.652C10.4894 168.636 10.4995 168.626 10.5024 168.623C10.5089 168.617 10.4978 168.628 10.4517 168.668C10.4111 168.704 10.3553 168.751 10.2828 168.812C9.99129 169.057 9.47631 169.478 8.73225 170.078C7.24738 171.275 4.87388 173.169 1.61012 175.761L2.85388 177.327ZM11.7971 170.115C30.6196 154.557 45.4202 141.776 56.1925 131.773L54.8316 130.307C44.0998 140.272 29.3324 153.027 10.5229 168.573L11.7971 170.115ZM56.186 131.779C67.1804 121.749 76.449 111.227 83.9853 100.213L82.3347 99.0833C74.895 109.957 65.7316 120.363 54.838 130.301L56.186 131.779ZM83.9853 100.213C91.5555 89.1486 95.392 78.2991 95.392 67.68H93.392C93.392 77.7969 89.7405 88.2594 82.3347 99.0833L83.9853 100.213ZM95.392 67.68C95.392 59.662 93.5341 53.2633 89.691 48.6111L88.149 49.8849C91.6019 54.0647 93.392 59.9539 93.392 67.68H95.392ZM89.691 48.6111C85.803 43.9047 80.0098 41.624 72.504 41.624V43.624C79.5902 43.624 84.741 45.7593 88.149 49.8849L89.691 48.6111ZM72.504 41.624C64.9112 41.624 58.8499 44.5419 54.4273 50.3716L56.0207 51.5804C60.0461 46.2741 65.5048 43.624 72.504 43.624V41.624ZM54.424 50.376C50.2127 55.991 48.176 63.9159 48.176 74.016H50.176C50.176 64.1481 52.1713 56.713 56.024 51.576L54.424 50.376ZM49.176 73.016H1.656V75.016H49.176V73.016ZM2.65572 74.0395C3.03678 57.8445 6.46459 44.3922 12.8828 33.6323L11.1652 32.6077C4.52741 43.7357 1.04322 57.5475 0.656277 73.9925L2.65572 74.0395ZM12.8762 33.6432C19.5039 22.8496 28.1001 14.9232 38.6663 9.82876L37.7977 8.02722C26.8599 13.3008 17.9841 21.5024 11.1718 32.5967L12.8762 33.6432ZM38.6601 9.83173C49.4581 4.71688 61.406 2.15199 74.52 2.15199V0.151985C61.138 0.151985 48.8939 2.7711 37.8039 8.02425L38.6601 9.83173ZM74.52 2.15199C97.2068 2.15199 114.091 7.96503 125.359 19.4212L126.785 18.0187C115.013 6.05094 97.5292 0.151985 74.52 0.151985V2.15199ZM125.365 19.4271C136.863 30.9255 142.64 45.922 142.64 64.512H144.64C144.64 45.47 138.705 29.9385 126.779 18.0129L125.365 19.4271ZM142.64 64.512C142.64 84.8079 135.723 103.697 121.833 121.202L123.399 122.446C137.541 104.623 144.64 85.3041 144.64 64.512H142.64ZM121.836 121.198C107.879 138.596 90.0843 155.63 68.438 172.296L69.6581 173.88C91.4037 157.138 109.321 139.996 123.396 122.45L121.836 121.198ZM69.048 174.088H146.808V172.088H69.048V174.088ZM145.808 173.088V213.12H147.808V173.088H145.808ZM146.808 212.12H2.232V214.12H146.808V212.12ZM3.232 213.12V176.544H1.232V213.12H3.232Z" fill="white"></path>
        </svg>

<section class="section py-12">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/slack-color.svg" alt="">
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/dropbox-color.svg" alt="">
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/spotify-color.svg" alt="">
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/stripe-color.svg" alt="">
        </div>
      </div>
    </div>

<section class="section py-24">
  <div class="container">
    <div class="has-mw-2xl mx-auto has-text-centered mb-16">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-5">Lorem ipsum</span>
      <h1 class="title is-size-3 has-leading-3 has-text-primary">Lorem ipsum dolor sit amet consectutar</h1>
      <p class="subtitle is-size-5 has-leading-4 mt-5">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="columns is-multiline -mb-20">
      <div class="column is-8 mb-20">
        <div class="is-relative">
          <img class="image is-fullwidth mb-8" style="height: 411px; object-fit: cover;" src="https://images.unsplash.com/photo-1581279219053-6c0ef420e10b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          <div class="is-absolute is-bottom-0 is-right-0 is-flex is-align-items-center is-justify-content-end pl-2 pr-8 py-2 has-background-info-light clip-path-left-top" style="width: 206px;">
            <span class="is-size-7 has-text-grey">10 jun 2022 | 19:40</span>
          </div>
        </div>
        <div class="has-mw-lg has-mw-xl-desktop">
          <h2 class="is-size-4 has-text-primary has-text-weight-semibold mb-3">Quick problem-solving contact</h2>
          <p class="has-text-grey has-leading-6 mb-4">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          <a class="is-inline-flex is-align-items-center is-size-7 has-text-primary is-uppercase has-text-weight-bold" href="#">
            <span class="mr-2">Read more</span>
            <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z" fill="#3C74F9"></path>
            </svg>
          </a>