Animated Case Study Showcase with Stacked Glass Cards

<section class="sm:px-6 lg:px-8 md:py-20 w-full max-w-7xl mr-auto ml-auto pt-14 pr-4 pb-14 pl-4">
    <!-- Eyebrow -->
    <div class="flex items-center justify-center scroll-fade visible">
      <span class="inline-flex items-center gap-2 text-[11px] uppercase tracking-wide border rounded-full px-3 py-1 text-slate-300/80 bg-white/5 border-white/10" style="">
        <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="users" class="lucide lucide-users h-3.5 w-3.5 text-cyan-300"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
        Client Success Stories
      </span>
    </div>

    <!-- Heading -->
    <div class="max-w-3xl text-center mt-6 mr-auto ml-auto scroll-fade scroll-fade-delay visible">
      <h1 class="text-4xl md:text-6xl font-semibold tracking-tight text-slate-50" style="">
        Transformative Results That <span class="bg-clip-text italic font-['Playfair_Display'] bg-gradient-to-r from-slate-200 via-cyan-300 to-indigo-300" style="">Inspire</span>
      </h1>
      <p class="mt-4 text-base md:text-lg text-slate-400" style="">
        Discover how leading businesses achieve extraordinary results through intelligent automation
      </p>
    </div>

    <!-- Stacked browser cards -->
    <div class="relative group mt-12 scroll-fade scroll-fade-delay-2 visible">
      <!-- Back layers with floating animations -->
      <div class="pointer-events-none absolute inset-x-6 -top-24 h-[14rem] md:h-[16rem] shadow-[0_4px_20px_rgba(0,0,0,0.3)] transition-all duration-500 ease-out group-hover:-translate-y-2 group-hover:scale-[0.96] group-hover:blur-sm group-hover:brightness-50 ring-white/10 ring-1 bg-neutral-900/25 opacity-20 border-white/10 border rounded-2xl blur-none backdrop-blur-sm brightness-100" style="animation: float-gentle-back 6s ease-in-out infinite;">
        <div class="flex md:px-5 opacity-80 border-white/10 border-b pt-3 pr-4 pb-3 pl-4 items-center justify-between">
          <div class="inline-flex gap-2 text-slate-300 opacity-80 items-center">
            <div class="flex h-6 w-6 ring-1 rounded-lg items-center justify-center bg-black/40 ring-white/10">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="user" class="lucide lucide-user w-[14px] h-[14px] text-slate-300"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" class=""></path><circle cx="12" cy="7" r="4" class=""></circle></svg>
            </div>
          </div>
          <div class="flex items-center gap-1.5">
            <span class="h-2 w-2 rounded-full ring-1 bg-white/20 ring-white/10"></span>
            <span class="h-2 w-2 rounded-full ring-1 bg-white/20 ring-white/10"></span>
            <span class="h-2 w-2 rounded-full ring-1 bg-white/20 ring-white/10"></span>
          </div>
        </div>
      </div>
      
      <div class="pointer-events-none absolute inset-x-4 -top-16 h-[14.5rem] md:h-[17rem] shadow-[0_6px_25px_rgba(0,0,0,0.4)] transition-all duration-500 ease-out group-hover:-translate-y-4 group-hover:scale-[0.98] group-hover:blur-sm group-hover:brightness-50 ring-white/10 ring-1 bg-neutral-900/35 opacity-60 border-white/10 border rounded-2xl blur-none backdrop-blur-sm brightness-100" style="animation: float-gentle-middle 6s ease-in-out infinite 2s;">
        <div class="flex md:px-5 border-white/10 border-b pt-3 pr-4 pb-3 pl-4 items-center justify-between">
          <div class="inline-flex gap-2 text-slate-300 items-center">
            <div class="flex h-6 w-6 ring-1 rounded-lg items-center justify-center bg-black/40 ring-white/10">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="user" class="lucide lucide-user w-[14px] h-[14px] text-slate-300"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" class=""></path><circle cx="12" cy="7" r="4" class=""></circle></svg>
            </div>
          </div>
          <div class="flex items-center gap-1.5">
            <span class="h-2 w-2 rounded-full ring-1 bg-white/20 ring-white/10"></span>
            <span class="h-2 w-2 rounded-full ring-1 bg-white/20 ring-white/10"></span>
            <span class="h-2 w-2 rounded-full ring-1 bg-white/20 ring-white/10"></span>
          </div>
        </div>
      </div>

      <!-- Front card -->
      <div class="relative z-10 transition-all duration-500 ease-out group-hover:-translate-y-6 group-hover:scale-[1.03] group-hover:brightness-110 group-hover:shadow-[0_16px_40px_rgba(0,0,0,0.6)] bg-neutral-900/60 border-white/10 border ring-white/10 ring-1 rounded-2xl mt-40 mb-40 backdrop-blur-xl">
        <div class="flex md:px-5 border-white/10 border-b pt-3 pr-4 pb-3 pl-4 backdrop-blur-sm items-center justify-between">
          <div class="inline-flex gap-2 text-slate-300 items-center">
            <div class="flex h-6 w-6 bg-black/60 ring-white/20 ring-1 rounded-lg items-center justify-center backdrop-blur">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="building-2" class="lucide lucide-building-2 w-[14px] h-[14px] text-slate-300"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" class=""></path><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" class=""></path><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" class=""></path><path d="M10 6h4" class=""></path><path d="M10 10h4" class=""></path><path d="M10 14h4" class=""></path><path d="M10 18h4" class=""></path></svg>
            </div>
          </div>
          <div class="flex items-center gap-1.5">
            <span class="h-2 w-2 rounded-full ring-1 bg-emerald-400/80 ring-emerald-400/20"></span>
            <span class="h-2 w-2 rounded-full ring-1 bg-cyan-400/80 ring-cyan-400/20"></span>
            <span class="h-2 w-2 rounded-full ring-1 bg-blue-400/80 ring-blue-400/20"></span>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:p-8 bg-gradient-to-br from-white/[0.05] to-white/[0.02] pt-5 pr-5 pb-5 pl-5 backdrop-blur-md">
          <!-- Copy -->
          <div class="space-y-6">
            <h3 class="md:text-3xl text-2xl font-semibold tracking-tight text-slate-100" style="">TechCorp's Digital Transformation</h3>
            <p class="mt-2 text-sm md:text-base text-slate-400" style="">
              Sarah Chen, CTO at TechCorp, leveraged our AI automation platform to revolutionize their customer support operations. By implementing intelligent chatbots and predictive analytics, they reduced response times by 75% and increased customer satisfaction scores while cutting operational costs significantly.
            </p>

            <!-- Metrics -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6">
              <div class="rounded-xl border px-5 py-4 bg-white/10 border-white/20 hover:bg-white/15 hover:border-white/30 transition-all backdrop-blur-sm">
                <div class="md:text-3xl text-2xl font-semibold text-neutral-50 tracking-tight" style="">75%</div>
                <p class="mt-1 text-sm text-slate-400" style="">faster response times</p>
              </div>
              <div class="border rounded-xl pt-4 pr-5 pb-4 pl-5 bg-white/10 border-white/20 hover:bg-white/15 hover:border-white/30 transition-all backdrop-blur-sm">
                <div class="md:text-3xl text-2xl font-semibold text-neutral-50 tracking-tight" style="">60%</div>
                <p class="mt-1 text-sm text-slate-400" style="">cost reduction</p>
              </div>
            </div>

            <!-- Additional metrics row -->
            <div class="rounded-xl border px-5 py-4 bg-white/10 border-white/20 hover:bg-white/15 hover:border-white/30 transition-all backdrop-blur-sm">
              <div class="md:text-3xl text-2xl font-semibold text-neutral-50 tracking-tight" style="">4.8/5</div>
              <p class="mt-1 text-sm text-slate-400" style="">customer satisfaction score</p>
            </div>
          </div>

          <!-- Image -->
          <div class="flex items-center justify-center">
            <div class="w-full max-w-lg rounded-xl overflow-hidden border bg-white/10 border-white/20 hover:border-white/30 transition-all backdrop-blur-sm">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/be34e0e0-bfda-49c7-b231-b353206dd7a2_3840w.jpg" alt="Business professional using AI automation dashboard" class="w-full h-80 object-cover">
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>