Dark Testimonial Carousel Community Section

<div class="mx-auto max-w-7xl">
  <div
    class="flex flex-col gap-x-16 gap-y-16 rounded-3xl border border-[#ffffff]/10 bg-[#0A0A0C] mt-24 mb-24 px-8 pt-8 pb-16"
  >
  <!-- Header Section -->
  <div class="flex flex-col md:flex-row md:items-end gap-8 w-full gap-x-8 gap-y-8 justify-between">
    <div class="flex flex-col gap-6 max-w-3xl">
      <div class="flex gap-3 gap-x-3 gap-y-3 items-center scroll-item scroll-fade-up"
        style="animation-play-state: running;">
        <span class="flex items-center justify-center text-[11px] font-medium text-blue-400 font-mono bg-blue-500/10 w-7 h-7 border-blue-500/20 border rounded-lg shadow-[0_0_10px_rgba(59,130,246,0.2)]">
                  03
                </span>
        <span class="uppercase text-sm font-medium text-gray-500 tracking-widest font-sans">
                  Community
                </span>
      </div>
      <h2
        class="md:text-5xl lg:text-6xl leading-[1.1] text-4xl text-white font-oswald font-light tracking-tight scroll-item scroll-fade-up delay-100"
        style="animation-play-state: running;">
        Loved by builders.
        <span class="text-gray-600 font-oswald font-light tracking-tight">
                  Trusted by teams.
                </span>
      </h2>
      <p class="text-lg text-gray-400 font-light max-w-xl leading-relaxed font-sans scroll-item scroll-fade-up delay-200"
        style="animation-play-state: running;">
        Join thousands of developers and financial experts who are
        building the future of finance with our platform.
      </p>
    </div>
    <button class="group flex items-center gap-2 pl-6 pr-5 py-3 bg-white text-black rounded-full text-sm font-medium hover:bg-gray-200 transition-all duration-200 font-sans whitespace-nowrap">
              <span class="font-sans">Read Stories</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-4 h-4 transition-transform group-hover:translate-x-1">
                <path d="M5 12h14" class=""></path>
                <path d="m12 5 7 7-7 7" class=""></path>
              </svg>
            </button>
  </div>

  <!-- Testimonials Carousel -->
  <div
    class="overflow-hidden flex flex-col md:p-16 lg:flex-row lg:gap-20 lg:pt-4 lg:pb-4 lg:pl-4 lg:pr-8 bg-[#0A0A0C] w-full max-w-6xl border-white/10 border rounded-3xl mr-auto ml-auto pt-8 pr-8 pb-8 pl-8 relative shadow-2xl gap-x-12 gap-y-12 items-center scroll-item scroll-blur-in delay-300"
    style="animation-play-state: running;">
    <!-- Pricing Card Background -->
    <div
      class="pointer-events-none bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-[#1a1a2e] via-[#0A0A0C] to-[#0A0A0C] absolute top-0 right-0 bottom-0 left-0 z-0">
    </div>
    <div class="z-0 opacity-20 absolute top-0 right-0 bottom-0 left-0"
      style="background-image: radial-gradient(white 1px, transparent 1px); background-size: 40px 40px"></div>

    <!-- Image Section -->
    <div class="lg:w-[55%] flex min-h-[420px] md:min-h-[520px] w-full relative items-center justify-center z-10">
      <div
        class="z-10 md:w-[420px] md:h-[420px] lg:w-[480px] lg:h-[480px] group cursor-pointer overflow-hidden bg-white/5 w-80 h-80 border-0 rounded-[2.5rem] pt-1 pr-1 pb-1 pl-1 relative shadow-2xl">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/59c85ed7-9ae4-40eb-88bf-fa793ae1de22_1600w.webp" alt="User Profile" class="transform transition-transform duration-700 group-hover:scale-105 w-full h-full object-cover rounded-[2.2rem]" id="testimonial-img">
      </div>
    </div>

    <!-- Content Section -->
    <div class="lg:w-1/2 flex flex-col z-10 w-full relative">
      <div class="mb-6 text-indigo-500">
        <svg width="50" height="50" viewBox="0 0 24 24" fill="currentColor" class="">
          <path
            d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.01697 21L5.01697 18C5.01697 16.8954 5.9124 16 7.01697 16H10.017C10.5693 16 11.017 15.5523 11.017 15V9C11.017 8.44772 10.5693 8 10.017 8H6.01697C5.46468 8 5.01697 8.44772 5.01697 9V11C5.01697 11.5523 4.56925 12 4.01697 12H3.01697V5H13.017V15C13.017 18.3137 10.3307 21 7.01697 21H5.01697Z"
            class=""></path>
        </svg>
      </div>

      <blockquote
        class="leading-tight transition-opacity duration-300 md:text-5xl text-2xl font-light text-white font-oswald mb-8"
        id="testimonial-quote">
        "Seeing revenue trends, churn, and growth this clearly has made
        decision-making so much easier. I finally feel in control. "
      </blockquote>

      <div class="flex flex-row items-center justify-between gap-4 border-t border-white/10 pt-8">
        <div class="">
          <h4 class="leading-none text-xl font-semibold text-white" id="testimonial-name">
            Michelle Lim
          </h4>
          <p id="testimonial-role" class="text-sm md:text-base text-gray-500 mt-2 font-light">
            Software Engineer, Startech foundation
          </p>
        </div>

        <div class="flex items-center gap-3">
          <button onclick="window.prevTestimonial()" class="w-10 h-10 md:w-12 md:h-12 rounded-full border border-white/10 bg-white/5 flex items-center justify-center text-white hover:bg-indigo-600 transition-all duration-300">
                    <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="">
                      <path d="m15 18-6-6 6-6" class=""></path>
                    </svg>
                  </button>
          <button onclick="window.nextTestimonial()" class="w-10 h-10 md:w-12 md:h-12 rounded-full border border-white/10 bg-white/5 flex items-center justify-center text-white hover:bg-indigo-600 transition-all duration-300">
                    <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="">
                      <path d="m9 18 6-6-6-6" class=""></path>
                    </svg>
                  </button>
        </div>
      </div>
    </div>

    <script>
      (function() {
                const testimonials = [
                  {
                    quote: "Just wrapped another client project! Snagged the lifetime deal too. Massive shoutout to the creators—this app is incredible!",
                    name: "Denial Gorg",
                    role: "Software Engineer, Startech foundation",
                    img: "https://images.unsplash.com/photo-1522529599102-193c0d76b5b6?q=80&w=1000&auto=format&fit=crop"
                  },
                  {
                    quote: "The integration was seamless. We reduced our deployment time by 40% in the first week. The support team is also top-notch.",
                    name: "Sarah Chen",
                    role: "Product Manager, FinTech Global",
                    img: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1000&auto=format&fit=crop"
                  },
                  {
                    quote: "I've used many financial dashboards, but Finex stands out for its speed and design. It's built for serious professionals.",
                    name: "Alex Rivera",
                    role: "CTO, NextGen Systems",
                    img: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1000&auto=format&fit=crop"
                  }
                ];

                let currentIndex = 0;
                const imgEl = document.getElementById('testimonial-img');
                const quoteEl = document.getElementById('testimonial-quote');
                const nameEl = document.getElementById('testimonial-name');
                const roleEl = document.getElementById('testimonial-role');

                function update(index) {
                  const t = testimonials[index];
                  if(imgEl && quoteEl && nameEl && roleEl) {
                      imgEl.style.opacity = '0';
                      quoteEl.style.opacity = '0';

                      setTimeout(() => {
                          imgEl.src = t.img;
                          quoteEl.innerText = '"' + t.quote + '"';
                          nameEl.innerText = t.name;
                          roleEl.innerText = t.role;

                          imgEl.style.opacity = '1';
                          quoteEl.style.opacity = '1';
                      }, 300);
                  }
                }

                window.nextTestimonial = function() {
                  currentIndex = (currentIndex + 1) % testimonials.length;
                  update(currentIndex);
                };

                window.prevTestimonial = function() {
                  currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
                  update(currentIndex);
                };
              })();
    </script>
  </div>

  <script class="">
    (function() {
              const testimonials = [
                {
                  quote: "Just wrapped another client project! Snagged the lifetime deal too. Massive shoutout to the creators—this app is incredible!",
                  name: "Denial Gorg",
                  role: "Software Engineer, Startech foundation",
                  img: "https://images.unsplash.com/photo-1522529599102-193c0d76b5b6?q=80&w=1000&auto=format&fit=crop"
                },
                {
                  quote: "The integration was seamless. We reduced our deployment time by 40% in the first week. The support team is also top-notch.",
                  name: "Sarah Chen",
                  role: "Product Manager, FinTech Global",
                  img: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1000&auto=format&fit=crop"
                },
                {
                  quote: "I've used many financial dashboards, but Finex stands out for its speed and design. It's built for serious professionals.",
                  name: "Alex Rivera",
                  role: "CTO, NextGen Systems",
                  img: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1000&auto=format&fit=crop"
                }
              ];

              let currentIndex = 0;
              const imgEl = document.getElementById('testimonial-img');
              const quoteEl = document.getElementById('testimonial-quote');
              const nameEl = document.getElementById('testimonial-name');
              const roleEl = document.getElementById('testimonial-role');

              function update(index) {
                const t = testimonials[index];
                if(imgEl && quoteEl && nameEl && roleEl) {
                    imgEl.style.opacity = '0';
                    quoteEl.style.opacity = '0';

                    setTimeout(() => {
                        imgEl.src = t.img;
                        quoteEl.innerText = '"' + t.quote + '"';
                        nameEl.innerText = t.name;
                        roleEl.innerText = t.role;

                        imgEl.style.opacity = '1';
                        quoteEl.style.opacity = '1';
                    }, 300);
                }
              }

              window.nextTestimonial = function() {
                currentIndex = (currentIndex + 1) % testimonials.length;
                update(currentIndex);
              };

              window.prevTestimonial = function() {
                currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
                update(currentIndex);
              };
            })();
  </script>
</div>