Demo-video E-commerce Modern

                <!--
@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>