Component:
Cta E-commerce Modern
Pro version coming soon!
<!--
@type: Call To Action (CTA)
@industry: E-commerce
@style: Modern
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Pro
-->
<section class="w-full py-12 md:py-24 bg-white">
<div class="max-w-7xl mx-auto px-4">
<div class="relative bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-3xl p-8 md:p-12 lg:p-16 overflow-hidden shadow-2xl">
<div class="absolute inset-0 opacity-10">
<img alt="Background Pattern" loading="lazy" width="1200" height="800"
decoding="async" data-nimg="1" class="w-full h-full object-cover"
src="https://landinggo.com/assets/img/stock/hero/marketing-unsplash-1920x1080.webp" style="color: transparent;">
</div>
<div class="relative z-10 flex flex-col lg:flex-row items-center justify-between text-center lg:text-left gap-8">
<div class="space-y-6 max-w-3xl">
<span class="inline-flex items-center rounded-full bg-white px-3 py-1 text-sm font-medium text-orange-700">
✅ New Collection
</span>
<h2 class="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">Ready to Elevate Your Style?</h2>
<p class="text-xl md:text-2xl leading-relaxed">
Don't miss out on the latest trends and exclusive collections. Your perfect wardrobe awaits.
</p>
</div>
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-4 sm:flex-row">
<button data-slot="button"
class="inline-flex items-center whitespace-nowrap justify-center px-6 py-3 border border-transparent rounded-lg text-lg font-semibold bg-white text-orange-600 hover:bg-transparent hover:text-white transition duration-150 ease-in-out cursor-pointer">
Shop the Collection
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-6 w-6">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</button>
<button data-slot="button"
class="inline-flex items-center whitespace-nowrap justify-center px-6 py-3 border-2 border-gray-200 rounded-lg text-lg font-semibold text-white hover:bg-white hover:text-orange-600 transition duration-150 ease-in-out cursor-pointer">
Explore Deals
</button>
</div>
<div class="flex items-center gap-4 max-w-4xl py-4">
<div class="flex items-center">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp"
class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3" alt="Profile">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp"
class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3" alt="Profile">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp"
class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3" alt="Profile">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-11.webp"
class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3" alt="Profile">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-9.webp"
class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3" alt="Profile">
</div>
<div class="text-sm"><span class='font-semibold'>5/5</span> <span>(1200 customers)</span></div>
</div>
</div>
</div>
<div class="absolute -top-2 -left-8 -mt-5 w-24 h-24 bg-orange-200 rounded-full opacity-50 hidden lg:block"></div>
<div class="absolute top-16 -left-4 -mt-4 w-12 h-12 bg-orange-200 rounded-full opacity-50 hidden lg:block"></div>
<div class="absolute -bottom-2 right-0 -mt-5 -mr-5 w-28 h-28 bg-orange-200 rounded-full opacity-50 hidden lg:block"></div>
<div class="absolute -bottom-4 right-20 -mr-4 w-12 h-12 bg-orange-200 rounded-full opacity-50 hidden lg:block"></div>
</div>
</section>