Responsive Testimonials Slider with Tailwind

<section class="xl:pt-24 xl:pb-24 xl:gap-y-0 pt-24 pr-0 pb-24 pl-0 max-w-5xl w-full mx-auto px-6">
  <!-- 🪄 Heading Block (Left aligned) -->
  <div class="text-left mb-12">
    <h2
      class="sm:text-5xl md:text-6xl leading-[0.95] [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll text-4xl font-light text-white tracking-tight font-geist mb-2">
      Trusted by Creators Worldwide
    </h2>
    <p
      class="sm:text-base [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll text-sm text-neutral-300 font-geist max-w-none">
      Join a growing community of teams who rely on our library for
      quality, speed, and a premium experience.
    </p>
  </div>

  <!-- ✨ Testimonials Slider -->
  <div id="t-wrap"
    class="overflow-hidden [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll bg-neutral-900/60 ring-neutral-800 ring-1 rounded-2xl">
    <div class="grid grid-cols-1 lg:grid-cols-12 h-full">
      <!-- Slide -->
      <div class="lg:col-span-8 sm:p-8 md:p-12 flex flex-col pt-6 pr-6 pb-6 pl-6 relative justify-between"
        style="min-height: 500px;">
        <!-- Radial gradient backdrop -->
        <div class="absolute inset-0 pointer-events-none">
          <div
            class="absolute inset-0 bg-[radial-gradient(1200px_600px_at_-10%_-20%,rgba(255,255,255,0.06),transparent_50%)]">
          </div>
          <div
            class="absolute inset-0 bg-[radial-gradient(900px_500px_at_120%_120%,rgba(255,255,255,0.04),transparent_55%)]">
          </div>
        </div>

        <!-- Quote -->
        <blockquote id="t-quote"
          class="relative z-10 mt-8 text-white text-2xl sm:text-4xl md:text-5xl tracking-tight font-geist font-light leading-tight">
          "This library makes sourcing visuals effortless. Accurate search, fast downloads, and a sleek
          interface—exactly what my team needed."</blockquote>

        <!-- Footer -->
        <div class="z-10 flex mt-10 relative items-center justify-between">
          <!-- Left section: image + name/role -->
          <div class="flex items-center gap-4">
            <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&amp;w=200&amp;auto=format&amp;fit=crop" alt="Author avatar" class="w-12 h-12 object-cover ring-neutral-800 ring-1 rounded-full" id="t-avatar">
            <div class="">
              <p id="t-name" class="text-white text-lg font-semibold font-geist">Alex M.</p>
              <p id="t-role" class="text-neutral-400 text-sm font-geist">Design Lead at NovaStudio</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <div class="lg:col-span-4 lg:border-t-0 lg:border-l flex flex-col border-neutral-800 border-t"
        style="min-height: 500px;">
        <div
          class="flex-1 flex bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6663740f-b15d-4a86-bcad-0623f9660f7c_1600w.jpg)] bg-cover items-center justify-center">
        </div>
        <div class="flex lg:flex-row border-neutral-800 border-t border-b divide-x divide-neutral-800">
          <button id="t-prev" class="flex-1 inline-flex items-center gap-3 px-6 py-6 text-lg font-medium font-geist text-neutral-200 hover:text-white transition focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left w-[18px] h-[18px]">
              <path d="m15 18-6-6 6-6" class=""></path>
            </svg>
            Previous
          </button>

          <button id="t-next" class="flex-1 inline-flex gap-3 hover:text-white transition text-lg font-medium text-neutral-200 font-geist px-6 py-6 items-center justify-end focus:outline-none">
            Next
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right">
              <path d="m9 18 6-6-6-6" class=""></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    (function () {
      const root = document.currentScript.closest('section');
      const quoteEl = root.querySelector('#t-quote');
      const nameEl = root.querySelector('#t-name');
      const roleEl = root.querySelector('#t-role');
      const avatarEl = root.querySelector('#t-avatar');
      const countEl = root.querySelector('#t-count');
      const prevBtn = root.querySelector('#t-prev');
      const nextBtn = root.querySelector('#t-next');

      const slides = [
        {
          quote: '"This library makes sourcing visuals effortless. Accurate search, fast downloads, and a sleek interface—exactly what my team needed."',
          name: 'Alex M.',
          role: 'Design Lead at NovaStudio',
          avatar: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=200&auto=format&fit=crop'
        },
        {
          quote: '"We ship campaigns faster with consistent, high-quality images. Licensing is clear and saves us hours."',
          name: 'Priya K.',
          role: 'Marketing Manager at Lumos',
          avatar: 'https://images.unsplash.com/photo-1531123897727-8f129e1688ce?q=80&w=200&auto=format&fit=crop'
        },
        {
          quote: '"The curation is spot-on. Our product feels premium without breaking the budget."',
          name: 'Daniel R.',
          role: 'Founder at PixelForge',
          avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=200&auto=format&fit=crop'
        }
      ];

      let index = 0;

      function render(i) {
        const s = slides[i];
        quoteEl.textContent = s.quote;
        nameEl.textContent = s.name;
        roleEl.textContent = s.role;
        avatarEl.src = s.avatar;
        if (countEl) countEl.textContent = (i + 1) + '/' + slides.length;
      }

      prevBtn.addEventListener('click', () => {
        index = (index - 1 + slides.length) % slides.length;
        render(index);
      });

      nextBtn.addEventListener('click', () => {
        index = (index + 1) % slides.length;
        render(index);
      });

      root.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft') prevBtn.click();
        if (e.key === 'ArrowRight') nextBtn.click();
      });

      render(index);
    })();
  </script>
</section>