Animated Testimonials Section with Star Ratings

<section class="bg-neutral-900/30 pt-20 pb-20 relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(4)">
      <div class="mx-auto max-w-7xl px-6">
        <div class="mx-auto max-w-3xl text-center mb-16">
          <h2 class="text-3xl sm:text-4xl tracking-tight text-white animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.1s_both] font-instrument-serif font-normal">
            What Our Travelers Say
          </h2>
          <p class="mt-4 text-white/80 animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.2s_both] font-sans">
            Hear from those who've experienced the journey of a lifetime
          </p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="relative overflow-hidden rounded-2xl bg-white/5 border border-white/10 p-8 backdrop-blur animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.1s_both]">
            <div class="flex items-center gap-1 mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-yellow-500">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-yellow-500">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-yellow-500">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-yellow-500">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-yellow-500">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
              </svg>
            </div>
            <p class="text-white/80 text-sm leading-relaxed mb-6 font-sans">
              "The orbital experience exceeded every expectation. Seeing Earth
              from space is truly life-changing. The crew was professional, the
              training was thorough, and every moment was unforgettable."
            </p>
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-full bg-white/10 border border-white/10 flex items-center justify-center">
                <span class="text-sm font-medium text-white font-sans">SK</span>
              </div>
              <div>
                <div class="text-sm font-medium text-white font-sans">
                  Sarah Kim
                </div>
                <div class="text-xs text-white/60 font-sans">
                  Orbital Flight, June 2024
                </div>
              </div>
            </div>
          </div>
          <div class="relative overflow-hidden rounded-2xl bg-white/5 border border-white/10 p-8 backdrop-blur animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.2s_both]">
            <div class="flex items-center gap-1 mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-yellow-500">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-yellow-500">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-yellow-500">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-yellow-500">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-yellow-500">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
              </svg>
            </div>
            <p class="text-white/80 text-sm leading-relaxed mb-6 font-sans">
              "Our lunar mission was absolutely spectacular. The accommodations
              were luxurious, the views were breathtaking, and the entire
              experience felt safe and well-organized. Worth every penny."
            </p>
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-full bg-white/10 border border-white/10 flex items-center justify-center">
                <span class="text-sm font-medium text-white font-sans">MJ</span>
              </div>
              <div>
                <div class="text-sm font-medium text-white font-sans">
                  Marcus Johnson
                </div>
                <div class="text-xs text-white/60 font-sans">
                  Lunar Gateway, August 2024
                </div>
              </div>
            </div>
          </div>
          <div class="relative overflow-hidden rounded-2xl bg-white/5 border border-white/10 p-8 backdrop-blur animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.3s_both]">
            <div class="flex items-center gap-1 mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-yellow-500">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-yellow-500">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-yellow-500">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-yellow-500">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-yellow-500">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" class=""></polygon>
              </svg>
            </div>
            <p class="text-white/80 text-sm leading-relaxed mb-6 font-sans">
              "An experience that redefined what's possible. The training
              prepared us perfectly, and the crew's expertise made us feel
              secure throughout. I'll cherish these memories forever."
            </p>
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-full bg-white/10 border border-white/10 flex items-center justify-center">
                <span class="text-sm font-medium text-white font-sans">EP</span>
              </div>
              <div>
                <div class="text-sm font-medium text-white font-sans">
                  Elena Petrov
                </div>
                <div class="text-xs text-white/60 font-sans">
                  Orbital Flight, September 2024
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>