<section x-data="{ mobileNavOpen: false }">
<nav class="py-4 bg-white">
<div class="container mx-auto px-4">
<div class="relative flex items-center justify-between">
<div class="w-auto">
<a class="inline-block" href="#">
<img src="acros-assets/logo/logo-acros-black.svg" alt="">
</a>
</div>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:block">
<ul class="flex items-center">
<li class="font-heading mr-12 text-base"><a class="hover:text-black" href="#">About</a></li>
<li class="font-heading mr-12 text-base"><a class="hover:text-black" href="#">Company</a></li>
<li class="font-heading mr-12 text-base"><a class="hover:text-black" href="#">Services</a></li>
<li class="font-heading mr-12 text-base"><a class="hover:text-black" href="#">Testimonials</a></li>
</ul>
</div>
<div class="w-auto hidden lg:block"><a class="inline-block py-4 px-8 font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Contact</a></div>
<div class="w-auto lg:hidden">
<button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-flex w-14 h-14 justify-center items-center bg-gray-500 hover:bg-gray-600 rounded-full">
<svg width="20" height="10" viewBox="0 0 20 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 9H1M19 1H1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
</div>
</div>
</nav>
<div class="pt-24 sm:pt-34 bg-cover" style="background-image: url('acros-assets/images/headers/header-4-bg.jpg');">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap items-center -mx-4 pb-24 sm:pb-34">
<div class="w-full lg:w-1/2 px-4 mb-6 lg:mb-0">
<div class="max-w-md lg:max-w-none">
<div class="text-sm mb-2 font-semibold text-white uppercase">
<span>Develop Your</span>
<span class="text-green-500">Skills</span>
</div>
<h1 class="font-heading text-4xl lg:text-5xl text-white">Take care of your performance every day</h1>
</div>
</div>
<div class="w-full lg:w-1/2 xl:w-auto ml-auto px-4">
<div class="max-w-lg">
<p class="text-lg leading-8 text-white">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
</div>
</div>
</div>
</div>
<div class="relative py-12">
<div class="absolute top-0 left-0 w-full h-full backdrop-blur backdrop-filter bg-gray-900 bg-opacity-50"></div>
<div class="relative container px-4 mx-auto">
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/3 px-4 mb-6 md:mb-0">
<div class="flex max-w-xxs sm:max-w-sm mx-auto">
<div class="flex-shrink-0 flex items-center justify-center w-14 lg:w-16 h-14 lg:h-16 mr-4 lg:mr-8 rounded-md text-green-500 bg-gray-200 bg-opacity-10">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9976 20.7529C16.5294 20.7529 20.6745 17.4945 23.0082 12.063C20.6745 6.63142 16.5294 3.37297 11.9976 3.37297H12.0023C7.47051 3.37297 3.32545 6.63142 0.991699 12.063C3.32545 17.4945 7.47051 20.7529 12.0023 20.7529H11.9976Z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7622 12.0632C15.7622 14.1411 14.077 15.825 11.9992 15.825C9.92127 15.825 8.2373 14.1411 8.2373 12.0632C8.2373 9.98412 9.92127 8.30016 11.9992 8.30016C14.077 8.30016 15.7622 9.98412 15.7622 12.0632Z" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-heading text-white mb-2">Quick review</h4>
<p class="text-white">We make sure you get feedback the same day.</p>
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4 mb-6 md:mb-0">
<div class="flex max-w-xxs sm:max-w-sm mx-auto">
<div class="flex-shrink-0 flex items-center justify-center w-14 lg:w-16 h-14 lg:h-16 mr-4 lg:mr-8 rounded-md text-green-500 bg-gray-200 bg-opacity-10">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.544 9.53998V10.7466C12.544 11.1299 12.6205 11.4514 12.7716 11.7019C12.9799 12.0476 13.322 12.2457 13.7103 12.2457C14.0908 12.2457 14.469 12.0604 14.8341 11.6953L18.8195 7.70984C19.6946 6.83478 19.6946 5.41095 18.8195 4.53589L14.8341 0.550415C14.469 0.18512 14.0908 0 13.7103 0C13.1297 0 12.544 0.463623 12.544 1.49908V2.59497C6.88564 2.92914 2.20144 7.27148 1.50527 12.9567C1.46627 13.2742 1.64681 13.5782 1.94436 13.6959C2.02859 13.7292 2.11629 13.7454 2.2029 13.7454C2.42226 13.7454 2.63503 13.6426 2.77053 13.4575C4.63784 10.9061 7.63601 9.38287 10.7905 9.38287C11.375 9.38287 11.9628 9.43561 12.544 9.53998Z" fill="currentColor"></path>
<path d="M22.043 10.304C21.7455 10.1861 21.406 10.2843 21.2169 10.5426C19.3497 13.0938 16.3516 14.6171 13.197 14.6171C12.6126 14.6171 12.0248 14.5643 11.4436 14.46V13.2533C11.4436 12.2178 10.8577 11.7542 10.2772 11.7542C9.89674 11.7542 9.51862 11.9395 9.15333 12.3048L5.16785 16.2901C4.29298 17.1652 4.29298 18.589 5.16804 19.4642L9.15333 23.4495C9.51862 23.8148 9.89674 24 10.2772 24C10.8577 24 11.4436 23.5363 11.4436 22.5009V21.405C17.1021 21.0708 21.7861 16.7285 22.4823 11.0434C22.5213 10.7257 22.3408 10.4218 22.043 10.304Z" fill="currentColor"></path>
<defs><rect width="24" height="24" fill="white"></rect></defs>
</svg>
</div>
<div>
<h4 class="text-lg font-heading text-white mb-2">Easy changes</h4>
<p class="text-white">Options settings for customers convenience.</p>
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="flex max-w-xxs sm:max-w-sm mx-auto">
<div class="flex-shrink-0 flex items-center justify-center w-14 lg:w-16 h-14 lg:h-16 mr-4 lg:mr-8 rounded-md text-green-500 bg-gray-200 bg-opacity-10">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.4446 14.7579C20.4446 18.336 18.336 20.4446 14.7579 20.4446H6.97173C3.38444 20.4446 1.27588 18.336 1.27588 14.7579V6.9626C1.27588 3.38444 2.59031 1.27588 6.16847 1.27588H8.16749C8.88576 1.27588 9.56212 1.61406 9.99308 2.18868L10.9059 3.40269C11.3378 3.97618 12.0135 4.31406 12.7315 4.31549H15.5611C19.1484 4.31549 20.472 6.14108 20.472 9.79227L20.4446 14.7579Z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.05908 13.4891H15.6526" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-heading text-white mb-2">Place storage</h4>
<p class="text-white">Store projects in easily accessible catalogs.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</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 backdrop-blur-xl backdrop-filter bg-gray-900 bg-opacity-80"></div>
<nav class="relative pt-7 pb-8 bg-white h-full overflow-y-auto">
<div class="flex flex-col px-6 h-full">
<a class="inline-block ml-4 mb-7" href="#">
<img src="acros-assets/logo/logo-acros-black.svg" alt="">
</a>
<ul class="w-full mb-auto pb-16">
<li><a class="font-heading block text-base font-medium py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Home</a></li>
<li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">About</a></li>
<li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Company</a></li>
<li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Services</a></li>
<li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Testimonials</a></li>
<li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Contact</a></li>
</ul>
<div class="w-full">
<a class="block w-full py-4 px-4 mb-4 text-center font-heading font-medium text-base hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-200" href="#">Log in</a><a class="block w-full py-4 px-4 mb-8 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Sign up</a>
<p class="pl-2 text-sm">2022 © Shuffle</p>
</div>
</div>
</nav>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
