Stacked Testimonial Cards Carousel

<div class="flex flex-col md:block md:h-[650px] group/container w-full max-w-[1200px] mx-auto px-4 py-12 relative perspective-distant" id="testimonials-container">
          <!-- Background Glow -->
          <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-3/4 h-3/4 bg-gradient-to-tr via-purple-50/40 to-blue-50/40 blur-[100px] rounded-full -z-10 pointer-events-none md:opacity-100 transition-opacity duration-700 from-indigo-100/40"></div>

          <!-- Navigation Arrows -->
          <div class="hidden md:flex absolute bottom-8 left-1/2 -translate-x-1/2 gap-6 z-40">
            <button onclick="handleTestimonialSwipe(-1)" class="w-14 h-14 rounded-full border flex items-center justify-center transition-all duration-300 bg-white shadow-sm hover:scale-105 active:scale-95 text-slate-600 hover:text-slate-900 hover:border-slate-300">
              <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="w-6 h-6">
                <path d="m15 18-6-6 6-6" class=""></path>
              </svg>
            </button>
            <button onclick="handleTestimonialSwipe(1)" class="w-14 h-14 rounded-full border border-orange-500/30 flex items-center justify-center hover:bg-orange-50 hover:border-orange-500 transition-all duration-300 bg-white shadow-sm hover:scale-105 active:scale-95 text-indigo-500 hover:text-orange-500">
              <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="w-6 h-6">
                <path d="m9 18 6-6-6-6" class=""></path>
              </svg>
            </button>
          </div>

          <!-- Card 1: Sarah (Initial Left) -->
          <div id="testimonial-card-1" class="transition-all duration-700 ease-out md:absolute md:top-1/2 md:left-1/2 w-full bg-white border border-slate-100 p-8 shadow-[rgba(255,_255,_255,_0.1)_0px_1px_1px_0px_inset,_rgba(50,_50,_93,_0.25)_0px_50px_100px_-20px,_rgba(0,_0,_0,_0.3)_0px_30px_60px_-30px] md:w-[400px] md:-translate-x-[125%] md:-translate-y-[60%] md:-rotate-[6deg] md:scale-[0.9] z-10 hover:z-20 rounded-[2rem] opacity-100 mb-6 md:mb-0">
            <div class="flex items-center gap-1 mb-6 text-slate-400">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-orange-400">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-orange-400">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-orange-400">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-orange-400">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-orange-400">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
              </svg>
            </div>
            <blockquote class="leading-relaxed text-lg text-slate-800 mb-8 font-sans font-medium">
              "Prism has completely transformed how we ship code. The visibility
              into our pipeline is unmatched."
            </blockquote>
            <div class="flex items-center gap-4 pt-4 border-t border-gray-50">
              <div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 text-sm ring-4 ring-white shadow-sm font-sans font-medium">
                SJ
              </div>
              <div>
                <div class="text-sm text-slate-900 font-sans font-medium">
                  Sarah Jenkins
                </div>
                <div class="text-xs text-slate-500 font-sans font-medium">
                  CTO at TechFlow
                </div>
              </div>
            </div>
          </div>

          <!-- Card 2: Michael (Initial Center) -->
          <div id="testimonial-card-2" class="transition-all duration-700 ease-out md:absolute md:top-1/2 md:left-1/2 w-full bg-white border border-gray-100 p-10 shadow-[rgba(255,_255,_255,_0.1)_0px_1px_1px_0px_inset,_rgba(50,_50,_93,_0.25)_0px_50px_100px_-20px,_rgba(0,_0,_0,_0.3)_0px_30px_60px_-30px] md:w-[460px] md:-translate-x-1/2 md:-translate-y-[65%] md:rotate-0 md:scale-100 z-30 rounded-[2.5rem] opacity-100 mb-6 md:mb-0">
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-indigo-400 to-transparent opacity-20"></div>
            <div class="flex items-center justify-between mb-8">
              <div class="flex items-center gap-1.5 text-orange-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 drop-shadow-sm">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 drop-shadow-sm">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 drop-shadow-sm">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 drop-shadow-sm">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 drop-shadow-sm">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
                </svg>
              </div>
              <span class="px-3 py-1 rounded-full bg-indigo-50 text-indigo-600 text-xs uppercase border border-indigo-100 font-sans font-medium">
                Featured
              </span>
            </div>
            <blockquote class="text-[1.35rem] text-slate-900 mb-10 leading-snug font-newsreader">
              "The feature flags integration is a game changer. We can test on
              production with zero anxiety."
            </blockquote>
            <div class="flex items-center gap-5 pt-6 border-t border-gray-100">
              <div class="relative">
                <div class="w-14 h-14 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 text-base ring-4 shadow-md font-sans font-medium">
                  MK
                </div>
                <div class="absolute -bottom-1 -right-1 bg-green-500 w-4 h-4 rounded-full border-[3px] border-white"></div>
              </div>
              <div>
                <div class="text-base text-slate-900 font-sans font-medium">
                  Michael Klein
                </div>
                <div class="text-sm text-slate-500 font-sans font-medium">
                  Lead Engineer at Vercel
                </div>
              </div>
              <div class="ml-auto md:opacity-100 opacity-0 transition-opacity">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-200">
                  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" class=""></path>
                  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" class=""></path>
                </svg>
              </div>
            </div>
          </div>

          <!-- Card 3: Emily (Initial Right) -->
          <div id="testimonial-card-3" class="transition-all duration-700 ease-out md:absolute md:top-1/2 md:left-1/2 w-full bg-white border border-slate-100 p-8 shadow-[rgba(255,_255,_255,_0.1)_0px_1px_1px_0px_inset,_rgba(50,_50,_93,_0.25)_0px_50px_100px_-20px,_rgba(0,_0,_0,_0.3)_0px_30px_60px_-30px] md:w-[400px] md:translate-x-[25%] md:-translate-y-[60%] md:rotate-[6deg] md:scale-[0.9] z-10 hover:z-20 rounded-[2rem] opacity-100 mb-6 md:mb-0">
            <div class="flex items-center gap-1 mb-6 text-indigo-400">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-orange-400">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-orange-400">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-orange-400">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-orange-400">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-orange-400">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
              </svg>
            </div>
            <blockquote class="leading-relaxed text-lg text-slate-800 mb-8 font-sans font-medium">
              "Simply the best tool for tracking velocity. It helped us identify
              bottlenecks we didn't know existed."
            </blockquote>
            <div class="flex items-center gap-4 pt-4 border-t border-gray-50">
              <div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 text-sm ring-4 ring-white shadow-sm font-sans font-medium">
                EL
              </div>
              <div>
                <div class="text-sm text-slate-900 font-sans font-medium">
                  Emily Liu
                </div>
                <div class="text-xs text-slate-500 font-sans font-medium">
                  VP Eng at Stripe
                </div>
              </div>
            </div>
          </div>
        </div>