OrganicoNaturaIspiratoFeedbackComponente

<section class="relative py-16 sm:py-20 lg:py-24 overflow-hidden bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-black">
  <!-- Organic Blob 1 -->
  <div class="absolute top-0 left-0 w-64 h-64 sm:w-80 sm:h-80 lg:w-96 lg:h-96 bg-accent-light dark:bg-accent-dark rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob ease-in-out duration-1000 -translate-x-1/2 -translate-y-1/2"></div>
  <!-- Organic Blob 2 -->
  <div class="absolute bottom-0 right-0 w-64 h-64 sm:w-80 sm:h-80 lg:w-96 lg:h-96 bg-gray-300 dark:bg-gray-700 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000 ease-in-out duration-1000 translate-x-1/2 translate-y-1/2"></div>

  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="text-center mb-12 sm:mb-16 lg:mb-20">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-gray-900 dark:text-white leading-tight mb-4">
        What Our Readers Say
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
        Dive into authentic feedback from our community. Their insights help us grow and deliver impactful journalism.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10">
      <!-- Testimonial Card 1 -->
      <div class="relative p-6 sm:p-8 rounded-3xl bg-white dark:bg-gray-800 shadow-xl border border-gray-100 dark:border-gray-700 transform hover:scale-[1.02] transition-transform duration-300 ease-out group">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-transparent via-transparent to-accent-light dark:to-accent-dark opacity-0 group-hover:opacity-10 transition-opacity duration-300 rounded-3xl"></div>
        <blockquote class="relative z-10">
          <p class="text-lg sm:text-xl text-gray-800 dark:text-gray-200 leading-relaxed italic mb-6">
            "This news outlet consistently delivers well-researched and unbiased articles. It's my go-to source for reliable information."
          </p>
          <div class="flex items-center">
            <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full border-2 border-accent-light dark:border-accent-dark mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reader Avatar">
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-base sm:text-lg">John Doe</p>
              <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Journalism Student</p>
            </div>
          </div>
        </blockquote>
      </div>

      <!-- Testimonial Card 2 -->
      <div class="relative p-6 sm:p-8 rounded-3xl bg-white dark:bg-gray-800 shadow-xl border border-gray-100 dark:border-gray-700 transform hover:scale-[1.02] transition-transform duration-300 ease-out group">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-transparent via-transparent to-accent-light dark:to-accent-dark opacity-0 group-hover:opacity-10 transition-opacity duration-300 rounded-3xl"></div>
        <blockquote class="relative z-10">
          <p class="text-lg sm:text-xl text-gray-800 dark:text-gray-200 leading-relaxed italic mb-6">
            "I appreciate the deep dives into complex topics. The analytical approach truly sets this platform apart from others."
          </p>
          <div class="flex items-center">
            <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full border-2 border-accent-light dark:border-accent-dark mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reader Avatar">
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-base sm:text-lg">Jane Smith</p>
              <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Data Scientist</p>
            </div>
          </div>
        </blockquote>
      </div>

      <!-- Testimonial Card 3 -->
      <div class="relative p-6 sm:p-8 rounded-3xl bg-white dark:bg-gray-800 shadow-xl border border-gray-100 dark:border-gray-700 transform hover:scale-[1.02] transition-transform duration-300 ease-out group">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-transparent via-transparent to-accent-light dark:to-accent-dark opacity-0 group-hover:opacity-10 transition-opacity duration-300 rounded-3xl"></div>
        <blockquote class="relative z-10">
          <p class="text-lg sm:text-xl text-gray-800 dark:text-gray-200 leading-relaxed italic mb-6">
            "The commitment to factual reporting and diverse perspectives is commendable. It's a news source I can trust."
          </p>
          <div class="flex items-center">
            <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full border-2 border-accent-light dark:border-accent-dark mr-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Reader Avatar">
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-base sm:text-lg">Michael Brown</p>
              <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Retired Educator</p>
            </div>
          </div>
        </blockquote>
      </div>
    </div>

    <!-- Call to Action / Feedback Invitation -->
    <div class="mt-16 sm:mt-20 lg:mt-24 text-center">
      <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-6">
        Your Voice Matters
      </h3>
      <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 max-w-xl mx-auto mb-8">
        We value your thoughts and suggestions. Share your experience to help us improve and serve you better.
      </p>
      <a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white bg-accent-dark hover:bg-accent-light dark:bg-accent-light dark:hover:bg-accent-dark transition-colors duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-dark dark:focus:ring-offset-gray-900">
        Provide Feedback
        <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </a>
    </div>
  </div>
</section>

<style>
  /* Define accent colors for easy modification */
  .bg-accent-light { background-color: #A7F3D0; /* Light green/teal */ }
  .dark\:bg-accent-light { background-color: #10B981; /* Dark mode light green */ }
  .bg-accent-dark { background-color: #10B981; /* Dark green/teal */ }
  .dark\:bg-accent-dark { background-color: #059669; /* Dark mode even darker green */ }
  .border-accent-light { border-color: #A7F3D0; }
  .dark\:border-accent-light { border-color: #10B981; }
  .focus\:ring-accent-dark { --tw-ring-color: #10B981; }

  @keyframes blob {
    0% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0, 0) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }
</style>