<section class="relative bg-black overflow-hidden" x-data="{ mobileNavOpen: false }">
<div class="relative w-2/3 ml-auto">
<div class="absolute top-0 left-0 mt-20 lg:-ml-0 rounded-full h-20 lg:h-96 xl:h-160 w-80 md:w-96 lg:w-160">
<img class="object-contain transform scale-200" src="boldui-assets/elements/shadow-blue-full.svg" alt="">
</div>
<div class="absolute top-1/2 right-0 -mr-64 mt-40 lg:mt-20 rounded-full h-20 lg:h-96 xl:h-160 w-80 md:w-96 lg:w-160">
<img class="object-contain transform scale-200" src="boldui-assets/elements/shadow-light-7.svg" alt="">
</div>
<div class="absolute top-0 right-0 -mt-52 lg:-mt-0 -mr-64">
<div class="transform rotate-45 clip-path md:-mt-20">
<img class="mt-40 lg:mt-0 transform -rotate-45 h-full" src="boldui-assets/images/photo-women.png" alt="">
</div>
</div>
</div>
<nav class="relative flex px-16 justify-between bg-transparent border-b">
<div class="pr-14 py-8 lg:border-r">
<a class="inline-block text-xl text-white font-medium font-heading" href="#">
<img class="h-8" width="auto" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
</a>
</div>
<button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden self-center">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="6" width="24" height="2" fill="white"></rect><rect y="11" width="24" height="2" fill="white"></rect><rect y="16" width="24" height="2" fill="white"></rect></svg>
</button>
<div class="hidden lg:flex items-center pl-16 py-8 border-l">
<div class="flex items-center">
<a class="inline-block text-sm text-white hover:underline font-heading" href="#">Sign In</a>
<span class="mx-2 text-white">/</span>
<a class="inline-block text-sm text-white hover:underline font-heading" href="#">Support</a>
</div>
</div>
</nav>
<div class="relative container mx-auto px-4">
<div class="flex py-24 lg:pb-52">
<div class="w-full md:w-1/2 lg:mt-16">
<div class="max-w-sm">
<h2 class="mb-10 text-2xl sm:text-3xl md:text-5xl text-white uppercase font-heading">Take care of your performance every day</h2>
<a class="inline-flex items-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
<svg class="mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
</svg>
<span class="text-sm uppercase font-heading">Start for free</span>
</a>
</div>
</div>
</div>
</div>
<div class="relative border-t pb-8 lg:pb-6">
<div class="container mx-auto px-4">
<div class="flex flex-wrap py-10 -mb-6 lg:-mb-4 -mx-4">
<div class="w-1/2 lg:w-1/5 py-6 lg:py-4 px-4">
<img class="mx-auto h-8" src="boldui-assets/brands/slack.svg" alt="">
</div>
<div class="w-1/2 lg:w-1/5 py-6 lg:py-4 px-4">
<img class="mx-auto h-8" src="boldui-assets/brands/dropbox.svg" alt="">
</div>
<div class="w-1/2 lg:w-1/5 py-6 lg:py-4 px-4">
<img class="mx-auto h-8" src="boldui-assets/brands/spotify.svg" alt="">
</div>
<div class="w-1/2 lg:w-1/5 py-6 lg:py-4 px-4">
<img class="mx-auto h-8" src="boldui-assets/brands/stripe.svg" alt="">
</div>
<div class="w-1/2 lg:w-1/5 py-6 lg:py-4 px-4">
<img class="mx-auto h-8" src="boldui-assets/brands/netflix.svg" alt="">
</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 bg-gray-800 opacity-25"></div>
<nav class="relative flex flex-col py-8 px-10 w-full h-full bg-black border-r overflow-y-auto">
<a class="inline-block text-xl text-white font-medium font-heading mb-16 md:mb-32" href="#">
<img class="h-8" width="auto" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
</a>
<ul class="mb-32">
<li class="mb-10">
<a class="flex items-center" href="#">
<span class="mr-3 text-lg text-white">About</span>
<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
</svg>
</a>
</li>
<li class="mb-10">
<a class="flex items-center" href="#">
<span class="mr-3 text-lg text-white">Company</span>
<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
</svg>
</a>
</li>
<li class="mb-10">
<a class="flex items-center" href="#">
<span class="mr-3 text-lg text-white">Services</span>
<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
</svg>
</a>
</li>
<li>
<a class="flex items-center" href="#">
<span class="mr-3 text-lg text-white">Contact</span>
<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
</svg>
</a>
</li>
</ul>
<a class="flex mb-8 items-center justify-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
<svg class="mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
</svg>
<span class="text-sm font-medium uppercase tracking-wider">Sign Up</span>
</a>
<a class="flex mb-10 items-center text-white hover:underline" href="#">
<span class="mr-2 text-sm">Log In</span>
<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.01 3.95383H0V6.04614H12.01V9.1846L16 4.99998L12.01 0.815369V3.95383Z" fill="#FFEC3E"></path>
</svg>
</a>
<p class="text-sm text-gray-500">All rights reserved © BoldUI 2021</p>
</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
