
<section class="max-w-7xl mx-auto px-6">
  <div class="text-center mb-16" data-aos="fade-up">
    <h2
      class="text-2xl md:text-3xl font-bold text-[#1F2937]"
      style="font-family: Inter, sans-serif"
    >
      {{ sections.testimonials.title }}
    </h2>
  </div>

  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
    {% for item in sections.testimonials.items %}
    <div
      class="bg-white border border-gray-100 p-6 rounded-xl shadow-sm text-center space-y-4"
      data-aos="fade-up"
      data-aos-delay="{{ loop.index * 100 }}"
    >
      <img
        src="{{ item.avatar }}"
        alt="{{ item.author }}"
        class="w-12 h-12 rounded-full object-cover mx-auto border border-gray-200"
      />

      <p class="text-sm italic text-gray-600 leading-snug">
        “{{ item.quote }}”
      </p>

      <div>
        <p class="text-sm font-semibold text-[#1F2937]">{{ item.author }}</p>
        <p class="text-xs text-gray-400">{{ item.role }}</p>
      </div>
    </div>
    {% endfor %}
  </div>
</section>
