Neon_Glow_Feedback_Component

<section class="min-h-screen bg-gradient-to-br from-purple-50 via-indigo-50 to-blue-50 py-16 dark:from-gray-900 dark:via-purple-950 dark:to-blue-950">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto bg-white/70 backdrop-blur-sm rounded-3xl shadow-xl dark:bg-gray-800/70 p-8 md:p-12 border border-purple-200 dark:border-purple-700 relative overflow-hidden">
      <!-- Glow Effect 1 -->
      <div class="absolute -top-10 -left-10 w-40 h-40 bg-purple-400 opacity-30 rounded-full blur-xl animate-pulse-slow dark:bg-purple-600"></div>
      <!-- Glow Effect 2 -->
      <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-blue-300 opacity-30 rounded-full blur-xl animate-pulse-slow dark:bg-blue-600"></div>

      <h2 class="text-4xl md:text-5xl font-extrabold text-center mb-6 text-purple-900 dark:text-purple-300 relative z-10 select-none drop-shadow-md">
        What Our Clients Say
        <span class="block w-24 h-1 bg-gradient-to-r from-purple-500 to-blue-500 mx-auto mt-3 rounded-full opacity-70 animate-glow-line"></span>
      </h2>
      <p class="text-center text-lg text-gray-700 dark:text-gray-300 mb-12 relative z-10">
        Hear directly from those who have experienced our exceptional consulting services.
      </p>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
        <!-- Feedback Card 1 -->
        <div class="group bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out p-6 dark:bg-gray-900 border border-transparent hover:border-purple-400 dark:hover:border-purple-600 relative overflow-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-200/30 to-blue-200/30 dark:from-purple-800/30 dark:to-blue-800/30 transform scale-0 group-hover:scale-100 transition-transform duration-500 ease-out rounded-xl opacity-0 group-hover:opacity-100"></div>
          <div class="relative z-10">
            <div class="flex items-center mb-4">
              <img class="w-16 h-16 rounded-full border-4 border-purple-400 dark:border-purple-600 object-cover mr-4 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar">
              <div>
                <p class="text-xl font-bold text-gray-900 dark:text-white">Michael Chen</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">CEO, Tech Solutions Inc.</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-6">
              "Our partnership with [Your Company Name] revolutionized our strategy. Their insights were precise, actionable, and led to significant growth. Truly exceptional consulting!"
            </p>
            <div class="flex justify-end">
              <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium flex items-center">
                Read Full Story
                <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
              </a>
            </div>
          </div>
        </div>

        <!-- Feedback Card 2 -->
        <div class="group bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out p-6 dark:bg-gray-900 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 relative overflow-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-200/30 to-purple-200/30 dark:from-blue-800/30 dark:to-purple-800/30 transform scale-0 group-hover:scale-100 transition-transform duration-500 ease-out rounded-xl opacity-0 group-hover:opacity-100"></div>
          <div class="relative z-10">
            <div class="flex items-center mb-4">
              <img class="w-16 h-16 rounded-full border-4 border-blue-400 dark:border-blue-600 object-cover mr-4 shadow-md" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Client Avatar">
              <div>
                <p class="text-xl font-bold text-gray-900 dark:text-white">Sarah Jenkins</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Marketing Director, Creative Hub</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-6">
              "The team at [Your Company Name] provided clarity and strategic direction exactly when we needed it. Their expertise is unmatched, and they genuinely care about client success."
            </p>
            <div class="flex justify-end">
              <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium flex items-center">
                Read Full Story
                <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-16 text-center relative z-10">
        <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-full group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 shadow-lg shadow-purple-500/50 dark:shadow-purple-800/80 transform hover:scale-105 transition-transform duration-300 ease-out">
          <span class="relative px-8 py-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-full group-hover:bg-opacity-0">
            Explore More Testimonials
          </span>
        </button>
      </div>
    </div>
  </div>
  <style>
    @keyframes pulse-slow {
      0%, 100% { transform: scale(1); opacity: 0.3; }
      50% { transform: scale(1.1); opacity: 0.45; }
    }
    .animate-pulse-slow {
      animation: pulse-slow 6s infinite ease-in-out;
    }
    @keyframes glow-line {
      0%, 100% { transform: scaleX(0); opacity: 0.7; }
      50% { transform: scaleX(1); opacity: 1; }
    }
    .animate-glow-line {
      animation: glow-line 3s infinite alternate ease-in-out;
    }
  </style>
</section>