Dark Theme Testimonials Grid with Animated CTA

<section class="sm:px-6 lg:px-8 sm:py-24 max-w-7xl mr-auto ml-auto pt-16 pr-4 pb-16 pl-4" id="pricing">
      <div class="border-gradient sm:p-8 rounded-3xl px-6 py-6">
        <div class="mb-12 relative">
          <div class="grid grid-cols-1 lg:grid-cols-12 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll gap-x-6 gap-y-6 items-start">
            <!-- Number + Eyebrow -->
            <div class="lg:col-span-2 flex items-center lg:justify-start justify-between">
              <span class="inline-flex items-center gap-2 rounded-full px-3 py-1 ring-1 ring-white/10 bg-white/[0.03]">
                <span class="text-[11px] font-medium tracking-widest text-zinc-300 font-geist">
                  02
                </span>
                <span class="h-3 w-px bg-white/10"></span>
                <span class="text-[11px] tracking-wide text-zinc-400 font-geist">
                  Testimonials
                </span>
              </span>
            </div>

            <!-- Title + Subtitle -->
            <div class="lg:col-span-7">
              <h2 class="text-4xl sm:text-5xl lg:text-6xl leading-[0.95] text-zinc-100 font-geist font-light tracking-tighter" style="">
                Loved by designers,
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 to-blue-400 font-geist font-light tracking-tighter" style="">
                  trusted by teams
                </span>
              </h2>
              <p class="mt-4 text-sm sm:text-base text-zinc-400 max-w-2xl font-geist">
                Real results from real teams — faster reviews, cleaner handoff,
                and a smoother path from idea to shipped UI.
              </p>
            </div>

            <!-- CTA Group -->
            <div class="lg:col-span-3 lg:justify-end flex flex-col sm:flex-row gap-2 sm:items-center gap-x-2 gap-y-2">
              <!-- Primary: your animated button -->
              <a href="#demo" class="group inline-flex min-w-[180px] cursor-pointer overflow-hidden transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:text-white text-base font-medium text-neutral-300 tracking-tight bg-white/5 h-[48px] border-white/15 border rounded-full pt-3 pr-6 pb-3 pl-6 relative items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40">
                <!-- Front Text -->
                <span class="relative z-10 transition-all duration-500 ease-out group-hover:translate-y-8 group-hover:opacity-0 group-hover:blur-md font-geist">
                  See More
                </span>
                <!-- Hover Text -->
                <span class="z-10 flex items-center justify-center transition-all duration-300 ease-in-out transform -translate-y-8 group-hover:translate-y-0 group-hover:opacity-100 group-hover:blur-none font-medium opacity-0 absolute inset-0 font-geist">
                  See More
                </span>
                <!-- Bottom Glow Line -->
                <span aria-hidden="true" class="absolute bottom-0 left-1/2 h-[1px] w-[70%] -translate-x-1/2 rounded-full bg-gradient-to-r from-transparent via-white/70 to-transparent transition-all duration-[1000ms] opacity-70 blur-[2px]"></span>
                <!-- Glass Gradient Overlay -->
                <span aria-hidden="true" class="absolute inset-0 rounded-full pointer-events-none bg-gradient-to-t from-white/15 via-white/10 to-transparent"></span>
              </a>

              <!-- Secondary: ghost CTA -->
            </div>
          </div>

          <!-- Social proof row -->
        </div>

        <div class="sm:mt-8 overflow-hidden sm:rounded-3xl bg-zinc-950 border-zinc-900 border rounded-2xl mt-8 relative" aria-labelledby="testimonials-heading">
          <div class="sm:px-8 sm:pt-0 pt-8 pr-6 pl-6"></div>

          <div class="sm:py-8 [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll pt-6 pr-6 pb-6 pl-6" style="mask-image: linear-gradient(270deg, transparent, black 25%, black 70%, transparent); -webkit-mask-image: linear-gradient(270deg, transparent, black 25%, black 70%, transparent);">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5">
              <!-- Card 1 -->
              <article class="rounded-2xl ring-1 ring-zinc-900 bg-zinc-900/50 p-6 sm:p-8 flex flex-col justify-between">
                <div class="flex items-start justify-between mb-6">
                  <span class="text-4xl sm:text-5xl text-zinc-700 leading-none font-geist font-light tracking-tighter" style="">
                    ”
                  </span>
                  <div class="w-14 h-14 rounded-xl ring-1 ring-white/10 overflow-hidden bg-neutral-800">
                    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c92852bb-a510-405a-85ab-ffa0fde136a4_1600w.jpg" alt="Client photo" class="w-full h-full object-cover grayscale">
                  </div>
                </div>
                <p class="text-neutral-300 text-base sm:text-lg leading-relaxed font-geist">
                  “As a digital artist, showcasing my work beautifully is
                  everything. DesignFlow’s dark UI and subtle neon accents make
                  my portfolio pop.”
                </p>
                <div class="mt-6">
                  <p class="text-xs text-neutral-500 font-geist">CEO of Capital Agency</p>
                  <p class="text-sm text-neutral-300 mt-1 font-geist">G. Alexander</p>
                </div>
              </article>

              <!-- Card 2 (featured) -->
              <article class="sm:p-8 flex flex-col justify-between rounded-2xl ring-1 ring-white/10 bg-gradient-to-b from-zinc-900/70 to-zinc-950 hover:-translate-y-1 transition-all duration-500">
                <div class="flex items-start justify-between mb-6">
                  <span class="text-4xl sm:text-5xl text-zinc-600 leading-none font-geist font-light tracking-tighter" style="">
                    ”
                  </span>
                  <div class="w-14 h-14 rounded-xl overflow-hidden ring-1 ring-white/10 bg-neutral-800">
                    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a34e7279-3582-477a-8b2b-d9e9789eb63c_1600w.jpg" alt="Client photo" class="w-full h-full object-cover">
                  </div>
                </div>

                <p class="text-neutral-100 text-lg sm:text-xl leading-relaxed font-geist">
                  “DesignFlow was exactly what our startup needed. We launched
                  our production website in days, not months — critical for
                  early market entry.”
                </p>

                <div class="mt-6">
                  <p class="text-xs text-neutral-400 font-geist">CEO of Orix Agency</p>
                  <p class="text-sm text-neutral-200 mt-1 font-geist">J. Amander</p>
                </div>
              </article>

              <!-- Card 3 -->
              <article class="rounded-2xl ring-1 ring-zinc-900 bg-zinc-900/50 p-6 sm:p-8 flex flex-col justify-between">
                <div class="flex items-start justify-between mb-6">
                  <span class="text-4xl sm:text-5xl text-zinc-700 leading-none font-geist font-light tracking-tighter" style="">
                    ”
                  </span>
                  <div class="w-14 h-14 rounded-xl ring-1 ring-white/10 overflow-hidden bg-neutral-800">
                    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2dadd731-6120-4637-ada0-dcaa8dbc507e_1600w.jpg" alt="Client photo" class="w-full h-full object-cover grayscale">
                  </div>
                </div>
                <p class="text-neutral-300 text-base sm:text-lg leading-relaxed font-geist">
                  “The perfect balance of stunning aesthetics and real-world
                  functionality. If you want high‑impact results without the
                  custom build hassle, this is it.”
                </p>
                <div class="mt-6">
                  <p class="text-xs text-neutral-500 font-geist">CEO of Creative Agency</p>
                  <p class="text-sm text-neutral-300 mt-1 font-geist">A. Levine</p>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div>
    </section>