<main class="flex h-screen w-full items-center justify-center px-2">
<!--👇 SHOP PROMOTION CARD 👇 -->
<div class="mx-auto max-w-lg">
<div class="rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-8 px-6 sm:p-8">
<div class="flex flex-col items-center gap-y-6 sm:flex-row sm:gap-4">
<div class="text-center sm:w-2/3 sm:text-left">
<div class="mb-1 text-sm font-medium text-gray-300">Flash Sale <span class="text-red-500">50% OFF</span></div>
<h3 class="mb-1 text-3xl font-black text-gray-50">Wireless HeadPhone</h3>
<div class="text-sm font-medium text-gray-300">Only until the end of this week</div>
<button class="mt-4">
<a class="group flex items-center gap-x-1 rounded-lg border-2 border-gray-50 px-3 py-2 text-sm font-medium text-gray-50">
<span>SHOP NOW</span>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-6 w-6 transition-all group-hover:translate-x-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
</svg>
</a>
</button>
</div>
<div class="w-2/3 sm:w-1/3">
<img width="600" height="600" class="aspect-square object-contain" src="https://ankitcodes.com/component-img/headphone-1.webp" alt="" />
</div>
</div>
</div>
</div>
<!--👆 -------------------- 👆-->
</main>
