Interactive Glassmorphism Testimonial Stack

<div class="relative sm:p-12 flex pt-10 pr-10 pb-10 pl-30 items-center justify-center">
  <div class="relative sm:h-96 w-full h-400 max-w-7xl max-h-full">
    <div class="container max-w-full" style="position: relative; display: flex; justify-content: center; align-items: center; height: 100%;">
      <!-- Back plates with glass morphism styling -->
      <div class="glass" style="position: relative; width: 340px; height: 340px; background: linear-gradient(rgba(255,255,255,0.1), transparent); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25); display: flex; justify-content: center; align-items: center; transition: 0.5s; border-radius: 1rem; margin: 0 -50px; backdrop-filter: blur(10px); transform: rotate(-10deg); --r: -32;">
        <div class="absolute inset-4 rounded-xl bg-white text-neutral-900 shadow-2xl ring-1 ring-black/5 overflow-hidden">
          <div class="p-6">
            <!-- Quote badge -->
            <div class="inline-flex items-center justify-center h-8 w-8 rounded-lg bg-neutral-100 ring-1 ring-black/5 mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-neutral-700">
                <path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" class=""></path>
                <path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" class=""></path>
              </svg>
            </div>

            <p class="text-sm leading-relaxed text-neutral-900 mb-4">
              "Working with Jeremi was a game‑changer. He translated our vision into a polished product and delivered beyond expectations — fast, reliable, and detail‑obsessed."
            </p>

            <!-- Author row -->
            <div class="pt-3 border-t border-neutral-200 flex items-center justify-between">
              <div class="flex items-center gap-2">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b868b942-246c-46ca-812c-31b49fd61a16_3840w.jpg" alt="Jordan Avery avatar" class="h-6 w-6 rounded-full object-cover">
                <div>
                  <div class="text-xs font-medium text-neutral-900">Jordan Avery</div>
                  <div class="text-xs text-neutral-500">Head of Product, Acme Co.</div>
                </div>
              </div>
              <div class="flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-amber-400">
                  <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path>
                </svg>
                <span class="text-xs font-medium">5.0</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="glass" style="position: relative; width: 340px; height: 340px; background: linear-gradient(rgba(255,255,255,0.08), transparent); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25); display: flex; justify-content: center; align-items: center; transition: 0.5s; border-radius: 1rem; margin: 0 -50px; backdrop-filter: blur(10px); transform: rotate(-6deg); --r: -6;">
        <div class="absolute inset-4 rounded-xl bg-white/90 text-neutral-900 shadow-xl ring-1 ring-black/5 backdrop-blur overflow-hidden">
          <div class="p-6">
            <!-- Quote badge -->
            <div class="inline-flex items-center justify-center h-8 w-8 rounded-lg bg-neutral-100 ring-1 ring-black/5 mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-neutral-700">
                <path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" class=""></path>
                <path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" class=""></path>
              </svg>
            </div>

            <p class="text-sm leading-relaxed text-neutral-900 mb-4">
              "The platform's AI‑powered insights have completely transformed how I approach trading. The real‑time analytics and seamless interface make complex decisions feel effortless."
            </p>

            <!-- Author row -->
            <div class="pt-3 border-t border-neutral-200 flex items-center justify-between">
              <div class="flex items-center gap-2">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/149e33ce-f3dc-40ee-b985-cb0735411ff5_3840w.jpg" alt="Sarah Chen avatar" class="h-6 w-6 rounded-full object-cover">
                <div class="">
                  <div class="text-xs font-medium text-neutral-900">Sarah Chen</div>
                  <div class="text-xs text-neutral-500">Senior Trader, FinTech Labs</div>
                </div>
              </div>
              <div class="flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-amber-400">
                  <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path>
                </svg>
                <span class="text-xs font-medium">5.0</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="glass" style="position: relative; width: 340px; height: 340px; background: linear-gradient(rgba(255,255,255,0.06), transparent); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25); display: flex; justify-content: center; align-items: center; transition: 0.5s; border-radius: 1rem; margin: 0 -50px; backdrop-filter: blur(10px); transform: rotate(0deg); --r: 0;">
        <div class="absolute inset-4 rounded-xl bg-white/80 text-neutral-900 shadow-lg ring-1 ring-black/5 backdrop-blur overflow-hidden">
          <div class="p-6">
            <!-- Quote badge -->
            <div class="inline-flex items-center justify-center h-8 w-8 rounded-lg bg-neutral-100 ring-1 ring-black/5 mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-neutral-700">
                <path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" class=""></path>
                <path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" class=""></path>
              </svg>
            </div>

            <p class="text-sm leading-relaxed text-neutral-900 mb-4">
              "Security was my biggest concern when choosing a crypto platform. Nebula's multi‑layer protection and transparent approach gave me the confidence to invest significantly."
            </p>

            <!-- Author row -->
            <div class="pt-3 border-t border-neutral-200 flex items-center justify-between">
              <div class="flex items-center gap-2">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/890b16bf-eac1-46aa-b8b5-b74ae7a0d51a_3840w.jpg" alt="Marcus Rodriguez avatar" class="h-6 w-6 rounded-full object-cover">
                <div class="">
                  <div class="text-xs font-medium text-neutral-900">Marcus Rodriguez</div>
                  <div class="text-xs text-neutral-500">Portfolio Manager, InvestCorp</div>
                </div>
              </div>
              <div class="flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-amber-400">
                  <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path>
                </svg>
                <span class="text-xs font-medium">5.0</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>
        .container:hover .glass {
          transform: rotate(0deg) !important;
          margin: 0 -30px !important;
        }
      </style>
    </div>
  </div>
</div>