TestimonialsDefault

代码示例

<template>
  <section class="py-20 mt-16" id="testimonials">
    <div class="max-w-7xl mx-auto px-4">
      <h2 class="text-3xl font-bold text-center mb-12 text-white">{{ $t('home.testimonials.title') }}</h2>
      <div class="grid md:grid-cols-3 gap-8">
        <div class="bg-gray-800 p-6 rounded-xl shadow">
          <div class="flex items-center gap-4 mb-4">
            <img src="xxxxx.jpg" alt="John Smith" class="w-12 h-12 rounded-full object-cover">
            <div>
              <h4 class="font-semibold text-white">John Smith</h4>
              <p class="text-gray-400">CEO at TechStart</p>
            </div>
          </div>
          <p class="text-gray-300">"This Boilerplate has completely transformed how we track our MRR. The insights are invaluable."</p>
        </div>
        <div class="bg-gray-800 p-6 rounded-xl shadow">
          <div class="flex items-center gap-4 mb-4">
            <img src="xxxxxx.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full object-cover">
            <div>
              <h4 class="font-semibold text-white">Sarah Johnson</h4>
              <p class="text-gray-400">CTO at CloudScale</p>
            </div>
          </div>
          <p class="text-gray-300">"The integration was seamless, and the insights we get are game-changing for our business."</p>
        </div>
        <div class="bg-gray-800 p-6 rounded-xl shadow">
          <div class="flex items-center gap-4 mb-4">
            <img src="xxxxxx.jpg" alt="Mike Chen" class="w-12 h-12 rounded-full object-cover">
            <div>
              <h4 class="font-semibold text-white">Mike Chen</h4>
              <p class="text-gray-400">Founder at DevTools</p>
            </div>
          </div>
          <p class="text-gray-300">"Best investment we've made for tracking our revenue metrics. Highly recommended!"</p>
        </div>
        <div class="bg-gray-800 p-6 rounded-xl shadow">
          <div class="flex items-center gap-4 mb-4">
            <img src="xxxxxx.jpg" alt="Alen Wu" class="w-12 h-12 rounded-full object-cover">
            <div>
              <h4 class="font-semibold text-white">Alen Wu</h4>
              <p class="text-gray-400">Programming enthusiast</p>
            </div>
          </div>
          <p class="text-gray-300">" Wow! NuxtPro is so user-friendly for a novice who has never used Nuxt! Easy to use, complete documentation, Kevin's service response is fast and thoughtful."</p>
        </div>
        <div class="bg-gray-800 p-6 rounded-xl shadow">
          <div class="flex items-center gap-4 mb-4">
            <img src="xxxxxx.jpg" alt="John Smith" class="w-12 h-12 rounded-full object-cover">
            <div>
              <h4 class="font-semibold text-white">John Smith</h4>
              <p class="text-gray-400">Web Developer</p>
            </div>
          </div>
          <p class="text-gray-300">"After using the NuxtPro Boilerplate, I saved at least 30% of my development time! Efficient and stable!"</p>
        </div>
        <div class="bg-gray-800 p-6 rounded-xl shadow">
          <div class="flex items-center gap-4 mb-4">
            <img src="xxxxx.jpg" alt="Tim Worker" class="w-12 h-12 rounded-full object-cover">
            <div>
              <h4 class="font-semibold text-white">Tim Worker</h4>
              <p class="text-gray-400">Product Manager</p>
            </div>
          </div>
          <p class="text-gray-300">"Great Boilerplate i have ever seen~"</p>
        </div>
      </div>
    </div>
  </section>
</template>