<section class="relative pb-24 md:pb-52 bg-gray-900 overflow-hidden">
<div class="bg-white h-16">
<div class="absolute top-0 left-1/2">
<div class="w-px h-16 bg-gray-900"></div>
<div class="w-px h-24 bg-white"></div>
</div>
</div>
<div class="container px-4 mx-auto">
<div class="pt-40 sm:pt-64">
<h1 class="text-6xl xl:text-8xl 3xl:text-9xl text-white font-medium mb-20">
<span class="block leading-none">Turnover.</span>
<span class="block leading-none">Even more</span>
<span class="relative inline-block">
<span class="relative z-10 block leading-none">than you expect</span>
<div class="hidden lg:block absolute bottom-0 left-0 w-full h-px mb-1 xl:mb-3 3xl:mb-4 bg-white"></div>
</span>
</h1>
<div>
<a class="inline-flex mb-20 items-center text-white" href="#">
<span class="mr-4">Exploring the shift of today</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="currentColor"></path>
</svg>
</a>
</div>
<a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Get Started</a>
</div>
</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
