<section class="relative py-20 2xl:py-40 bg-gray-800 overflow-hidden">
<img class="hidden lg:block absolute top-0 right-0 h-128 w-128 -mt-52 -mr-52" src="zospace-assets/lines/circle.svg" alt="">
<img class="hidden lg:block absolute bottom-0 left-0 h-128 w-128 -mb-52" src="zospace-assets/lines/full-circle.svg" alt="">
<img class="block absolute bottom-0 left-0 h-24 md:h-32 lg:h-72 lg:ml-24 -mb-8" src="zospace-assets/images/five-stars.svg" alt="">
<img class="block absolute bottom-0 left-0 h-128 w-128 -mb-96 -ml-24" src="zospace-assets/lines/circle.svg" alt="">
<div class="container px-3 mx-auto">
<div class="max-w-3xl mx-auto text-center">
<span class="text-lg text-blue-400 font-bold">What's new at Shuffle</span>
<h2 class="my-10 text-5xl lg:text-6xl font-bold font-heading text-white">The quick brown fox jumps over the lazy dog.</h2>
<div class="max-w-md mx-auto">
<p class="mb-20 text-lg text-gray-200">A short message that will bring your customers into the world of your imagination.</p>
<a class="inline-block mb-4 sm:mb-0 sm:mr-4 py-5 px-12 text-white font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Join us now</a><a class="inline-block py-5 px-12 text-white font-bold border border-gray-300 hover:border-gray-200 rounded-full" href="#">Active demo</a>
</div>
</div>
</div>
</section>