Testimonials Slider with Horizontal Scroll & Controls

<section class="z-10 sm:p-8 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll bg-[#2a1f1d] w-full max-w-7xl border-amber-900/30 border rounded-3xl mt-24 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 relative shadow-2xl" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(2)">
      <div class="flex gap-6 sm:px-0 pr-1 pl-1 items-center">
        <h2 class="text-[44px] sm:text-6xl lg:text-7xl xl:text-8xl leading-[0.9] text-white font-sans tracking-tighter">
          Testimonials.
        </h2>
        <span aria-hidden="true" role="separator" aria-orientation="vertical" class="w-px bg-amber-900/30 h-10"></span>
        <p class="sm:text-base text-sm text-neutral-400 mt-1 font-sans tracking-tight">
          Real stories from our coffee community. Taste the difference quality
          makes.
        </p>
      </div>
      <div class="h-px bg-amber-900/30 mt-4"></div>

      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 sm:gap-10 sm:mt-8 mt-6 items-center">
        <div class="lg:col-span-12 relative">
          <div class="relative overflow-hidden h-[420px] rounded-3xl mt-6">
            <div aria-hidden="true" class="pointer-events-none absolute inset-y-0 left-0 w-24 bg-gradient-to-r from-[#2a1f1d] to-transparent z-10"></div>
            <div aria-hidden="true" class="pointer-events-none absolute inset-y-0 right-0 w-24 bg-gradient-to-l from-[#2a1f1d] to-transparent z-10"></div>

            <div class="flex gap-6 overflow-x-auto scroll-smooth pr-6 pl-6 absolute top-0 right-0 bottom-0 left-0 items-center" style="scrollbar-width: none; -ms-overflow-style: none;" id="testimonial-rail">
              <article class="min-w-[420px] sm:min-w-[520px] max-w-[640px] bg-[#1a1614] border border-amber-900/40 rounded-[24px] p-8 text-neutral-100 hover-lift backdrop-blur-sm snap-center -rotate-1 shadow-2xl">
                <p class="text-lg sm:text-xl md:text-2xl text-neutral-100 font-sans tracking-tight">
                  "This is the best coffee I've ever had. The Ethiopian blend
                  has notes I never knew existed. Worth every penny."
                </p>
                <div class="mt-8 flex items-center gap-3">
                  <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?q=80&amp;w=200&amp;h=200&amp;fit=crop&amp;crop=faces" alt="" class="w-10 h-10 rounded-xl object-cover">
                  <div>
                    <div class="text-sm font-sans tracking-tight">
                      Sarah Chen
                    </div>
                    <div class="text-xs text-neutral-400 font-sans tracking-tight">
                      Coffee Enthusiast, Seattle
                    </div>
                  </div>
                </div>
              </article>

              <article class="min-w-[420px] sm:min-w-[520px] max-w-[640px] bg-[#1a1614] border border-amber-900/40 rounded-[24px] p-8 text-neutral-100 hover-lift backdrop-blur-sm snap-center rotate-1 shadow-2xl">
                <p class="text-lg sm:text-xl md:text-2xl text-neutral-100 font-sans tracking-tight">
                  "As a café owner, I've tried dozens of roasters. Roasted Roots
                  is now our exclusive supplier. Our customers notice the
                  difference."
                </p>
                <div class="mt-8 flex items-center gap-3">
                  <img src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?q=80&amp;w=200&amp;h=200&amp;fit=crop&amp;crop=faces" alt="" class="w-10 h-10 rounded-xl object-cover">
                  <div>
                    <div class="text-sm font-sans tracking-tight">
                      Marcus Rodriguez
                    </div>
                    <div class="text-xs text-neutral-400 font-sans tracking-tight">
                      Café Owner, Portland
                    </div>
                  </div>
                </div>
              </article>

              <article class="min-w-[420px] sm:min-w-[520px] max-w-[640px] bg-[#1a1614] border border-amber-900/40 rounded-[24px] p-8 text-neutral-100 hover-lift backdrop-blur-sm snap-center -rotate-2 shadow-2xl">
                <p class="text-lg sm:text-xl md:text-2xl text-neutral-100 font-sans tracking-tight">
                  "The subscription service is brilliant. Fresh roasted beans
                  delivered every two weeks. My mornings have never been
                  better."
                </p>
                <div class="mt-8 flex items-center gap-3">
                  <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&amp;w=200&amp;h=200&amp;fit=crop&amp;crop=faces" alt="" class="w-10 h-10 rounded-xl object-cover">
                  <div>
                    <div class="text-sm font-sans tracking-tight">
                      Emma Thompson
                    </div>
                    <div class="text-xs text-neutral-400 font-sans tracking-tight">
                      Designer, San Francisco
                    </div>
                  </div>
                </div>
              </article>

              <article class="min-w-[420px] sm:min-w-[520px] max-w-[640px] bg-[#1a1614] border border-amber-900/40 rounded-[24px] p-8 text-neutral-100 hover-lift backdrop-blur-sm snap-center rotate-2 shadow-2xl">
                <p class="text-lg sm:text-xl md:text-2xl text-neutral-100 font-sans tracking-tight">
                  "Finally found a roastery that cares about sustainability and
                  flavor equally. The transparency is refreshing."
                </p>
                <div class="mt-8 flex items-center gap-3">
                  <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?q=80&amp;w=200&amp;h=200&amp;fit=crop&amp;crop=faces" alt="" class="w-10 h-10 rounded-xl object-cover">
                  <div>
                    <div class="text-sm font-sans tracking-tight">
                      Alex Morgan
                    </div>
                    <div class="text-xs text-neutral-400 font-sans tracking-tight">
                      Environmental Consultant
                    </div>
                  </div>
                </div>
              </article>

              <article class="min-w-[420px] sm:min-w-[520px] max-w-[640px] bg-[#1a1614] border border-amber-900/40 rounded-[24px] p-8 text-neutral-100 hover-lift backdrop-blur-sm snap-center -rotate-1 shadow-2xl">
                <p class="text-lg sm:text-xl md:text-2xl text-neutral-100 font-sans tracking-tight">
                  "The cold brew blend changed my life. Smooth, complex, and
                  perfect for summer mornings. Can't recommend enough."
                </p>
                <div class="mt-8 flex items-center gap-3">
                  <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&amp;w=200&amp;h=200&amp;fit=crop&amp;crop=faces" alt="" class="w-10 h-10 rounded-xl object-cover">
                  <div>
                    <div class="text-sm font-sans tracking-tight">
                      Priya Patel
                    </div>
                    <div class="text-xs text-neutral-400 font-sans tracking-tight">
                      Software Engineer, Austin
                    </div>
                  </div>
                </div>
              </article>
            </div>

            <div class="absolute bottom-6 right-6 z-20 flex items-center gap-3">
              <button aria-label="Previous" class="hover:bg-amber-900/40 transition-colors inline-flex text-neutral-100 bg-amber-950/40 w-10 h-10 border-amber-900/40 border rounded-full items-center justify-center" id="testimonial-prev" style="opacity: 0.5; pointer-events: none;">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                  <path d="m12 19-7-7 7-7" class=""></path>
                  <path d="M19 12H5" class=""></path>
                </svg>
              </button>
              <button aria-label="Next" class="w-10 h-10 rounded-full text-[#1a1614] bg-amber-400 hover:bg-amber-300 transition-colors inline-flex items-center justify-center" id="testimonial-next" style="opacity: 1; pointer-events: auto;">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                  <path d="M5 12h14" class=""></path>
                  <path d="m12 5 7 7-7 7" class=""></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>