<!--
@type: Demo Video
@industry: E-commerce
@style: Modern
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="w-full py-12 md:py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 text-center">
<div class="max-w-4xl mx-auto space-y-6">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl md:text-5xl">See StyleHub in Action</h2>
<p class="text-lg text-gray-600 md:text-xl">Watch our quick demo video to discover how easy and enjoyable your shopping experience can be.</p>
</div>
<div class="mt-12 relative w-full max-w-4xl mx-auto aspect-video rounded-xl overflow-hidden shadow-2xl group">
<img alt="E-commerce Demo Video Thumbnail" loading="lazy" width="1280" height="720" decoding="async" data-nimg="1"
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
src="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1620x1080.webp">
<div
class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 group-hover:bg-opacity-50 transition-all duration-300">
<button
aria-label="Play video"
class="inline-flex items-center justify-center gap-2 p-1 border border-transparent rounded-full text-md font-semibold text-white transition duration-150 ease-in-out cursor-pointer hover:text-orange-500 hover:bg-white/50">
<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-circle-play w-20 h-20">
<circle cx="12" cy="12" r="10"></circle>
<polygon points="10 8 16 12 10 16 10 8"></polygon>
</svg>
</button>
</div>
</div>
<div class="mt-12">
<button
class="inline-flex items-center justify-center gap-2 px-6 py-3 border border-transparent rounded-lg text-lg font-semibold text-white bg-orange-500 hover:bg-orange-600 transition duration-150 ease-in-out cursor-pointer hover:shadow-lg">
Start Your Shopping Journey
<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-4 w-4">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
</div>
</section>
