Floating Glass Card Hero Section with Glow

<div class="relative mt-16 sm:mt-24 blur-in blur-in-delay-1 perspective-container" id="app-preview-container"
  style="opacity: 1; transform: translateY(0px);">
  <!-- Enhanced Glow Effect -->
  <div
    class="absolute inset-0 -top-10 mx-auto h-64 max-w-6xl rounded-3xl bg-gradient-to-r from-blue-500/20 via-purple-500/15 to-cyan-500/20 blur-3xl">
  </div>
  <div
    class="absolute inset-0 mx-auto h-32 max-w-4xl rounded-3xl bg-gradient-to-r from-blue-400/30 via-purple-400/20 to-cyan-400/30 blur-2xl">
  </div>

  <!-- Floating Glass Cards -->
  <!-- Top Left Floating Card -->
  <div class="absolute -top-12 -left-4 sm:-left-16 z-20 fade-in fade-in-delay-4 float" id="floating-card-1"
    style="opacity: 1; transform: translateY(0px) scale(1); animation-delay: 0s;">
    <div class="relative">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-600/20 rounded-2xl blur-xl"></div>
      <div class="glass-card rounded-2xl pt-4 pr-4 pb-4 pl-4 shadow-2xl">
        <div class="flex items-center gap-3">
          <div
            class="h-10 w-10 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
            <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" data-lucide="brain"
              class="lucide lucide-brain h-5 w-5 text-white" style="stroke-width: 1.5;">
              <path d="M12 18V5"></path>
              <path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"></path>
              <path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"></path>
              <path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"></path>
              <path d="M18 18a4 4 0 0 0 2-7.464"></path>
              <path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"></path>
              <path d="M6 18a4 4 0 0 1-2-7.464"></path>
              <path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"></path>
            </svg>
          </div>
          <div class="min-w-0">
            <p class="text-sm font-semibold text-white">AI Insights</p>
            <p class="text-xs text-zinc-300">3 new connections found</p>
          </div>
        </div>
        <div class="mt-3 pt-3 border-t border-white/10">
          <div class="flex items-center gap-2">
            <div class="h-1.5 w-1.5 rounded-full bg-green-400 animate-pulse"></div>
            <span class="text-xs text-zinc-400">Learning from your notes...</span>
          </div>
        </div>
      </div>
    </div>
  </div>