<section class="relative bg-gray-50" x-data="{ mobileNavOpen: false }">
<img class="absolute top-0 left-0 w-full h-full" src="aurora-assets/headers/green-blur-bg-circle.png" alt="">
<nav class="relative bg-white">
<div class="container mx-auto px-4">
<div class="relative flex h-24 items-center">
<a class="inline-block" href="#">
<img class="h-10" src="aurora-assets/logos/aurora-logo.svg" alt="">
</a>
<button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto bg-gradient-to-b from-cyanGreen-800 to-cyan-800 rounded-lg">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center">
<a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">
<div class="flex items-center">
<span class="mr-3">Product</span>
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</a>
<a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">Features</a><a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">Pricing</a><a class="inline-block hover:text-yellowGreen-700" href="#">Resources</a>
</div>
<div class="hidden lg:block ml-auto"><a class="inline-flex items-center justify-center h-10 mr-4 px-4 text-center text-sm text-gray-700 hover:text-yellowGreen-700 font-semibold transition duration-200" href="#">Login</a><a class="inline-flex items-center justify-center h-10 px-4 text-center text-sm text-gray-700 hover:text-yellowGreen-700 font-semibold border border-gray-200 hover:border-yellowGreen-600 shadow-sm hover:shadow-none rounded-lg transition duration-200" href="#">Get Started</a></div>
</div>
</div>
</nav>
<div class="relative pt-24">
<div class="container px-4 mx-auto">
<div class="max-w-2xl mb-14 mx-auto text-center">
<a class="group relative inline-flex mb-6 items-center rounded-full shadow-md overflow-hidden" href="#">
<div class="animate-showLine absolute bottom-0 left-1/2 transform -translate-x-1/2 p-px mx-auto w-auto bg-gradient-to-r from-transparent via-yellowGreen-500 to-transparent group-hover:via-teal-600"></div>
<div class="flex flex-wrap sm:flex-nowrap items-center px-6 sm:px-4 py-4 sm:py-2 bg-white group-hover:bg-cyanGreen-50 transition duration-300 rounded-full">
<span class="text-sm">Get ahead of the game with insights from 1200+ top marketers.</span>
<div class="mt-1 sm:mt-0 mx-auto sm:mr-0 sm:ml-2 flex items-center">
<span class="mr-3 inline-block text-transparent bg-clip-text bg-gradient-to-b font-bold from-green-500 via-green-500 to-teal-400 group-hover:from-cyan-400 group-hover:via-cyan-700 group-hover:to-cyan-600">Read more</span>
<span class="group-hover:hidden">
<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.00004 5H9.33337M9.33337 5L5.33337 1M9.33337 5L5.33337 9" stroke="url(#paint0_linear_3112_14890)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<defs><linearGradient id="paint0_linear_3112_14890" x1="9.46358" y1="-1.5" x2="5.46163" y2="9.11123" gradientUnits="userSpaceOnUse"><stop stop-color="#ACE348"><stop offset="1" stop-color="#25ACA0"></stop></stop></linearGradient></defs>
</svg>
</span>
<span class="hidden group-hover:block">
<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.00004 5H9.33337M9.33337 5L5.33337 1M9.33337 5L5.33337 9" stroke="#25ACA0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>
</a>
<div class="max-w-lg sm:max-w-xl lg:max-w-none mx-auto">
<h1 class="font-heading tracking-tight text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">Your marketing assets, at your fingertips.</h1>
<p class="max-w-lg mx-auto text-lg text-gray-700 mb-10">Empowers marketing team to easily store, organize, and access valuable assets from anywhere.</p>
<a class="group relative flex xs:inline-flex items-center justify-center px-5 h-12 font-bold text-white bg-gradient-to-br from-cyanGreen-800 to-cyan-800 rounded-lg transition-all duration-300" href="#">
<div class="absolute top-0 left-0 w-full h-full rounded-lg ring-4 ring-green-300 animate-pulse group-hover:ring-0 transition duration-300"></div>
<span class="mr-3">Request Access</span>
<span class="transform group-hover:translate-x-1 transition duration-100">
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L6 6L1 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</a>
</div>
</div>
<img class="block mx-auto" src="aurora-assets/headers/header-center.png" alt="">
</div>
</div>
<div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-md z-50">
<div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-teal-800 opacity-70"></div>
<nav class="relative flex flex-col py-6 px-10 w-full h-full bg-white overflow-y-auto">
<div class="flex mb-auto items-center">
<a class="inline-block mr-auto" href="#">
<img class="h-10" src="aurora-assets/logos/aurora-logo.svg" alt="">
</a>
<button x-on:click="mobileNavOpen = !mobileNavOpen">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
<div class="py-12 mb-auto">
<ul class="flex-col">
<li class="mb-6"><a class="inline-block text-black" href="#">Product</a></li>
<li class="mb-6"><a class="inline-block text-black" href="#">Features</a></li>
<li class="mb-6"><a class="inline-block text-black" href="#">Pricing</a></li>
<li><a class="inline-block text-black" href="#">Resources</a></li>
</ul>
</div>
<div><a class="flex items-center justify-center h-12 mb-4 px-4 text-center text-base text-gray-700 font-semibold border border-gray-200 hover:bg-gray-100 shadow-lg rounded-lg transition duration-200" href="#">Login</a><a class="flex items-center justify-center h-12 px-4 text-center text-base text-white font-semibold bg-gradient-to-b from-cyanGreen-800 to-cyan-800 rounded-lg transition duration-200" href="#">Get Started</a></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
