Demo-video SaaS Modern

                <!--
@type: Demo Video
@industry: SaaS
@style: Modern
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->

<style>
  .gradient-text {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
  }
  @keyframes pulse-glow {
    0%,
    100% {
      box-shadow: 0 0 20px rgba(244, 63, 94, 0.3);
    }
    50% {
      box-shadow: 0 0 40px rgba(244, 63, 94, 0.6);
    }
  }
  .animate-ripple {
    animation: ripple 2s ease-out infinite;
  }
  @keyframes ripple {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }
</style>

<section class="bg-zinc-50 text-zinc-900 relative py-24 px-6 overflow-hidden">
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute top-20 left-10 w-96 h-96 bg-rose-500/5 rounded-full blur-3xl"></div>
    <div class="absolute bottom-20 right-10 w-96 h-96 bg-rose-600/5 rounded-full blur-3xl"
      style="animation-delay: 2s;"></div>
  </div>

  <div class="relative max-w-7xl mx-auto animate-fadeInUp">
    <div class="text-center mb-16">
      <div
        class="inline-flex items-center gap-2 px-4 py-2 mb-6 bg-white/50 backdrop-blur-sm border border-zinc-200 rounded-full">
        <svg class="w-4 h-4 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span class="text-sm font-semibold gradient-text">Watch Demo</span>
      </div>

      <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-zinc-900 mb-6">
        See Your Story<br>
        <span class="gradient-text">Come to Life</span>
      </h2>

      <p class="text-xl text-zinc-600 max-w-3xl mx-auto">
        Watch how DataStory transforms raw data into actionable insights in just 3 minutes.
        No signup required, just press play and discover the possibilities.
      </p>
    </div>

    <!-- Video Player -->
    <div class="max-w-5xl mx-auto">
      <div class="relative group">
        <!-- Glow Effect -->
        <div
          class="absolute -inset-4 bg-gradient-to-r from-rose-500 to-rose-600 rounded-3xl blur-3xl opacity-20 group-hover:opacity-30 transition-opacity duration-500">
        </div>

        <!-- Video Container -->
        <div class="relative bg-zinc-900 rounded-3xl border border-zinc-800 shadow-2xl overflow-hidden">
          <!-- Aspect Ratio Container -->
          <div class="aspect-video bg-zinc-800 relative">
            <!-- Placeholder Image/Thumbnail -->
            <div
              class="absolute inset-0 bg-gradient-to-br from-zinc-800 to-zinc-900 flex items-center justify-center">
              <div class="text-center">
                <!-- Play Button -->
                <button class="relative group/play" onclick="playVideo()">
                  <div
                    class="absolute inset-0 bg-rose-500 rounded-full blur-2xl opacity-50 group-hover/play:opacity-70 transition-opacity">
                  </div>
                  <div
                    class="relative md:w-24 md:h-24 w-16 h-16 bg-gradient-to-br from-rose-500 to-rose-600 rounded-full flex items-center justify-center shadow-2xl shadow-rose-500/50 hover:scale-110 transition-transform animate-pulse-glow">
                    <svg class="w-12 h-12 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M8 5v14l11-7z" />
                    </svg>
                  </div>
                  <!-- Ripple Effect -->
                  <div class="absolute inset-0 border-4 border-rose-500 rounded-full animate-ripple"></div>
                </button>

                <p class="text-white text-lg font-semibold md:mt-8 mt-4">Watch 3-Minute Demo</p>
                <p class="text-zinc-400 text-sm mt-2">See DataStory in action</p>
              </div>
            </div>

            <!-- Video Controls Overlay (shown on play) -->
            <div
              class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-zinc-900 to-transparent p-6 opacity-0 hover:opacity-100 transition-opacity"
              id="videoControls">
              <div class="flex items-center gap-4">
                <button
                  class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-colors">
                  <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M8 5v14l11-7z" />
                  </svg>
                </button>
                <div class="flex-1 h-1 bg-zinc-700 rounded-full overflow-hidden">
                  <div class="h-full bg-rose-500 rounded-full" style="width: 30%"></div>
                </div>
                <span class="text-white text-sm">0:45 / 3:00</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Video Stats -->
      <div class="grid grid-cols-3 gap-6 mt-12 text-center">
        <div>
          <div class="text-3xl font-bold gradient-text mb-2">50K+</div>
          <div class="text-sm text-zinc-600">Demo Views</div>
        </div>
        <div>
          <div class="text-3xl font-bold gradient-text mb-2">3 min</div>
          <div class="text-sm text-zinc-600">Average Watch Time</div>
        </div>
        <div>
          <div class="text-3xl font-bold gradient-text mb-2">98%</div>
          <div class="text-sm text-zinc-600">Viewer Satisfaction</div>
        </div>
      </div>
    </div>
  </div>
</section>