<section>
<nav class="relative py-8 px-4 xl:px-10 bg-blue-800">
<div class="flex justify-between items-center">
<a class="text-xl text-white font-semibold" href="#">
<img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
</a>
<div class="lg:hidden">
<button class="navbar-burger flex items-center p-3 rounded">
<svg class="text-white 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-white font-semibold hover:text-blue-50" href="#">About</a></li>
<li><a class="text-white font-semibold hover:text-blue-50" href="#">Company</a></li>
<li><a class="text-white font-semibold hover:text-blue-50" href="#">Services</a></li>
<li><a class="text-white font-semibold hover:text-blue-50" href="#">Testimonials</a></li>
</ul>
<div class="hidden lg:block"><a class="inline-block px-8 text-white hover:text-blue-50 font-semibold" href="#">Sign in</a><a class="inline-block py-3 px-8 text-sm text-white hover:text-blue-50 uppercase font-semibold border-2 border-white" href="#">Sign up</a></div>
</div>
</nav>
<div class="relative py-32 text-center bg-cover overflow-hidden" style="background-image: url('bendis-assets/images/red-image.png');">
<div class="absolute top-0 bottom-0 -left-1/4 -right-1/4 flex items-center justify-center">
<h2 class="stroke opacity-75">BE BOLD</h2>
</div>
<div class="relative max-w-4xl mx-auto px-4">
<span class="text-lg text-white font-semibold uppercase">Develop your skill</span>
<h2 class="mt-8 mb-8 text-white text-4xl lg:text-6xl font-bold uppercase">Take care of your performance every day.</h2>
<a class="inline-block w-full md:w-auto px-8 py-5 text-sm font-bold uppercase bg-yellow-500 hover:bg-yellow-400 transition duration-200" href="#">Get started free</a>
</div>
</div>
<div class="container px-4 py-10 mx-auto">
<div class="flex flex-wrap items-center justify-center -mx-2 -mb-12">
<div class="w-1/2 md:w-1/3 lg:w-1/5 px-2 mb-12">
<img class="mx-auto h-6" src="bendis-assets/logos/slack.svg" alt="">
</div>
<div class="w-1/2 md:w-1/3 lg:w-1/5 px-2 mb-12">
<img class="mx-auto h-6" src="bendis-assets/logos/dropbox.svg" alt="">
</div>
<div class="w-1/2 md:w-1/3 lg:w-1/5 px-2 mb-12">
<img class="mx-auto h-6" src="bendis-assets/logos/spotify.svg" alt="">
</div>
<div class="w-1/2 md:w-1/3 lg:w-1/5 px-2 mb-12">
<img class="mx-auto h-6" src="bendis-assets/logos/stripe.svg" alt="">
</div>
<div class="w-1/2 md:w-1/3 lg:w-1/5 px-2 mb-12">
<img class="mx-auto h-6" src="bendis-assets/logos/netflix.svg" alt="">
</div>
</div>
</div>
<div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
<div class="navbar-backdrop 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>
<li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Company</a></li>
<li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Services</a></li>
<li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Testimonials</a></li>
</ul>
</div>
<div class="mt-auto px-10">
<div class="pt-6"><a class="block mb-2 py-4 text-center text-blue-800 font-semibold" href="#">Sign in</a><a class="block py-4 text-center text-blue-800 leading-normal uppercase border-2 border-blue-800 hover:bg-blue-50 font-semibold" href="#">Sign Up</a></div>
<p class="mt-6 mb-4 text-sm text-center text-blue-400">
<span>© 2021 All rights reserved © Wireframes Corporation 2021</span>
</p>
</div>
</nav>
</div>
</section>