<section class="xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');">
<div class="container px-4 mx-auto">
<nav class="flex justify-between items-center py-6">
<a class="text-3xl font-semibold leading-none" href="#">
<img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
</a>
<div class="lg:hidden">
<button class="navbar-burger flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
<svg class="fill-current h-4 w-4" 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 lg:flex lg:items-center lg:w-auto lg:space-x-12">
<li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
<li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
<li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
<li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
</ul>
<div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
</nav>
<div class="py-12 text-center">
<div class="max-w-lg mx-auto mb-8">
<h2 class="text-3xl md:text-4xl mb-4 font-bold font-heading">
<span>The quick</span>
<span class="text-blue-600">brown fox</span>
<span>jumps over the lazy dog.</span>
</h2>
<p class="text-blueGray-400 leading-relaxed">The quick brown fox jumps over the lazy dog.</p>
</div>
<div><a class="block sm:inline-block py-4 px-8 mb-4 sm:mb-0 sm:mr-3 text-xs text-white text-center font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Check Now</a><a class="block sm:inline-block py-4 px-8 text-xs text-blueGray-500 hover:text-blueGray-600 text-center font-semibold leading-none bg-white rounded" href="#">Documentation</a></div>
</div>
<div class="relative max-w-3xl mt-6 mb-8 mx-auto">
<img src="metis-assets/elements/pattern-small.png" alt="">
<div class="absolute" style="top: 3%; left: 9%; width: 82%; height: 90%;">
<img class="object-contain w-full h-full" src="metis-assets/elements/app-mockup.png" alt="">
</div>
</div>
<div class="flex flex-wrap items-center justify-center max-w-4xl mx-auto pt-8 pb-12">
<div class="w-1/2 md:w-1/3 lg:w-1/5 px-3 mb-8">
<img class="mx-auto" src="metis-assets/logos/brands/tesla.svg" alt="">
</div>
<div class="w-1/2 md:w-1/3 lg:w-1/5 px-3 mb-8">
<img class="mx-auto" src="metis-assets/logos/brands/facebook.svg" alt="">
</div>
<div class="w-1/2 md:w-1/3 lg:w-1/5 px-3 mb-8">
<img class="mx-auto" src="metis-assets/logos/brands/marvel.svg" alt="">
</div>
<div class="w-1/2 md:w-1/3 lg:w-1/5 px-3 mb-8">
<img class="mx-auto" src="metis-assets/logos/brands/nike.svg" alt="">
</div>
<div class="hidden md:block w-1/2 md:w-1/3 lg:w-1/5 px-3 mb-8">
<img class="mx-auto" src="metis-assets/logos/brands/airbnb.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-blueGray-800 opacity-25"></div>
<nav class="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
<div class="flex items-center mb-8">
<a class="mr-auto text-3xl font-semibold leading-none" href="#">
<img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
</a>
<button class="navbar-close">
<svg class="h-6 w-6 text-blueGray-400 cursor-pointer hover:text-blueGray-500" 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>
</button>
</div>
<div>
<ul>
<li class="mb-1"><a class="block p-4 text-sm text-blueGray-500 hover:bg-blue-50 hover:text-blue-600" href="#">Product</a></li>
<li class="mb-1"><a class="block p-4 text-sm text-blueGray-500 hover:bg-blue-50 hover:text-blue-600" href="#">Company</a></li>
<li class="mb-1"><a class="block p-4 text-sm text-blueGray-500 hover:bg-blue-50 hover:text-blue-600" href="#">About Us</a></li>
<li class="mb-1"><a class="block p-4 text-sm text-blueGray-500 hover:bg-blue-50 hover:text-blue-600" href="#">Features</a></li>
</ul>
<div class="mt-4 pt-6 border-t border-blueGray-100"><a class="block px-4 py-3 mb-3 text-xs text-center font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a><a class="block px-4 py-3 mb-2 text-xs text-center text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a></div>
</div>
<div class="mt-auto">
<p class="my-4 text-xs text-blueGray-400">
<span>Get in Touch</span>
<a class="text-blue-600 hover:text-blue-600 underline" href="#">[email protected]</a>
</p>
<a class="inline-block px-1" href="#">
<img src="metis-assets/icons/facebook-blue.svg" alt="">
</a>
<a class="inline-block px-1" href="#">
<img src="metis-assets/icons/twitter-blue.svg" alt="">
</a>
<a class="inline-block px-1" href="#">
<img src="metis-assets/icons/instagram-blue.svg" alt="">
</a>
</div>
</nav>
</div>
</section>