Composants de rétroaction

                <div class="font-sans text-blue-100 bg-gradient-to-br from-blue-950 via-blue-900 to-blue-800 min-h-screen p-4 sm:p-8 md:p-12 dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 transition-colors duration-500">
  <div class="max-w-7xl mx-auto backdrop-blur-sm bg-blue-900/40 border border-blue-700/50 rounded-2xl shadow-2xl overflow-hidden animate-fade-in-up dark:bg-gray-800/40 dark:border-gray-700/50">
    <div class="p-6 sm:p-8 md:p-10 border-b border-blue-700/50 flex flex-col sm:flex-row items-start sm:items-center justify-between">
      <h2 class="text-3xl sm:text-4xl font-bold text-blue-200 tracking-tight glow-text-blue dark:text-gray-200">
        <span class="text-blue-400">//</span> Feedback Nexus
      </h2>
      <div class="flex items-center space-x-4 mt-4 sm:mt-0">
        <button class="relative group text-blue-300 hover:text-blue-100 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-900 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
          </svg>
          <span class="absolute -top-1 -right-1 flex h-3 w-3">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
          </span>
        </button>
        <img src="https://randomuser.me/api/portraits/men/84.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500 shadow-md transform hover:scale-110 transition duration-300">
      </div>
    </div>

    <div class="flex flex-col md:flex-row">
      <div class="w-full md:w-1/4 p-4 sm:p-6 border-b md:border-b-0 md:border-r border-blue-700/50">
        <nav class="flex flex-col space-y-2">
          <a href="#" class="flex items-center p-3 rounded-md text-blue-200 bg-blue-700/60 hover:bg-blue-600/80 transition duration-300 dark:bg-gray-700/60 dark:hover:bg-gray-600/80 border border-blue-600 dark:border-gray-600 shadow-lg">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
            </svg>
            <span class="font-medium">Overview</span>
          </a>
          <a href="#" class="flex items-center p-3 rounded-md text-blue-300 hover:bg-blue-800/50 transition duration-300 dark:hover:bg-gray-800/50">
            <svg class="w-5 h-5 mr-3" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
            </svg>
            <span class="font-medium">Feedback List</span>
          </a>
          <a href="#" class="flex items-center p-3 rounded-md text-blue-300 hover:bg-blue-800/50 transition duration-300 dark:hover:bg-gray-800/50">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z" clip-rule="evenodd"></path>
            </svg>
            <span class="font-medium">New Submission</span>
          </a>
          <a href="#" class="flex items-center p-3 rounded-md text-blue-300 hover:bg-blue-800/50 transition duration-300 dark:hover:bg-gray-800/50">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M11.49 3.17c-.381-.433-.622-.433-.872 0l-5.46 7.64C4.33 11.21 4 11.66 4 12.1v2.5a1.5 1.5 0 001.5 1.5h.5a.5.5 0 00.5-.5V14a.5.5 0 00-.5-.5h-1V12h8v.5h-1a.5.5 0 00-.5.5v2.5a.5.5 0 00.5.5h.5a1.5 1.5 0 001.5-1.5V12.1c0-.44-.33-.89-.66-1.39l-5.46-7.64z" clip-rule="evenodd"></path>
            </svg>
            <span class="font-medium">Analytics</span>
          </a>
        </nav>
      </div>

      <div class="w-full md:w-3/4 p-4 sm:p-6 md:p-8 space-y-8">
        <!-- Overview Section -->
        <section class="bg-blue-800/30 rounded-lg p-6 border border-blue-700/50 shadow-inner-xl dark:bg-gray-700/30 dark:border-gray-700/50">
          <h3 class="text-2xl font-bold text-blue-200 mb-6 glow-text-blue dark:text-gray-200">Feedback Overview</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
              <div class="text-4xl font-bold text-blue-300 glow-text-blue dark:text-gray-300">1,234</div>
              <p class="text-blue-200 text-sm mt-1">Total Received</p>
            </div>
            <div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
              <div class="text-4xl font-bold text-green-400 glow-text-green dark:text-green-400">89%</div>
              <p class="text-blue-200 text-sm mt-1">Positive Sentiment</p>
            </div>
            <div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
              <div class="text-4xl font-bold text-yellow-400 glow-text-yellow dark:text-yellow-400">127</div>
              <p class="text-blue-200 text-sm mt-1">Open Issues</p>
            </div>
            <div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
              <div class="text-4xl font-bold text-purple-400 glow-text-purple dark:text-purple-400">4.7</div>
              <p class="text-blue-200 text-sm mt-1">Average Rating</p>
            </div>
          </div>
        </section>

        <!-- Recent Feedback Section -->
        <section class="bg-blue-800/30 rounded-lg p-6 border border-blue-700/50 shadow-inner-xl dark:bg-gray-700/30 dark:border-gray-700/50">
          <h3 class="text-2xl font-bold text-blue-200 mb-6 glow-text-blue dark:text-gray-200">Recent Feedback</h3>
          <div class="space-y-4">
            <!-- Feedback Item 1 -->
            <div class="p-4 bg-blue-700/40 rounded-lg border border-blue-600 flex items-start space-x-4 animate-fade-in dark:bg-gray-700/40 dark:border-gray-600">
              <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md">
              <div class="flex-1">
                <div class="flex justify-between items-center mb-1">
                  <h4 class="font-semibold text-lg text-blue-200">Sarah J. - <span class="text-yellow-300">⭐ 5</span></h4>
                  <span class="text-sm text-blue-400">2 hours ago</span>
                </div>
                <p class="text-blue-100 text-sm mb-2">"The new dashboard is incredibly intuitive! It has significantly streamlined our reporting process. Excellent work!"</p>
                <div class="flex space-x-2">
                  <span class="px-2 py-1 bg-green-600/70 text-green-100 text-xs rounded-full border border-green-500">Feature Request</span>
                  <span class="px-2 py-1 bg-purple-600/70 text-purple-100 text-xs rounded-full border border-purple-500">UX/UI</span>
                </div>
              </div>
            </div>
            <!-- Feedback Item 2 -->
            <div class="p-4 bg-blue-700/40 rounded-lg border border-blue-600 flex items-start space-x-4 animate-fade-in animation-delay-100 dark:bg-gray-700/40 dark:border-gray-600">
              <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md">
              <div class="flex-1">
                <div class="flex justify-between items-center mb-1">
                  <h4 class="font-semibold text-lg text-blue-200">Michael T. - <span class="text-orange-300">⭐ 3</span></h4>
                  <span class="text-sm text-blue-400">1 day ago</span>
                </div>
                <p class="text-blue-100 text-sm mb-2">"Experiencing occasional lags when loading large datasets in the analytics module. Otherwise, great tool!"</p>
                <div class="flex space-x-2">
                  <span class="px-2 py-1 bg-red-600/70 text-red-100 text-xs rounded-full border border-red-500">Bug Report</span>
                  <span class="px-2 py-1 bg-blue-600/70 text-blue-100 text-xs rounded-full border border-blue-500">Performance</span>
                </div>
              </div>
            </div>
            <!-- Feedback Item 3 -->
            <div class="p-4 bg-blue-700/40 rounded-lg border border-blue-600 flex items-start space-x-4 animate-fade-in animation-delay-200 dark:bg-gray-700/40 dark:border-gray-600">
              <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md">
              <div class="flex-1">
                <div class="flex justify-between items-center mb-1">
                  <h4 class="font-semibold text-lg text-blue-200">Emily R. - <span class="text-yellow-300">⭐ 4</span></h4>
                  <span class="text-sm text-blue-400">3 days ago</span>
                </div>
                <p class="text-blue-100 text-sm mb-2">"Would be great to have an export to PDF option for custom reports. Current functionality is good though."</p>
                <div class="flex space-x-2">
                  <span class="px-2 py-1 bg-green-600/70 text-green-100 text-xs rounded-full border border-green-500">Enhancement</span>
                  <span class="px-2 py-1 bg-cyan-600/70 text-cyan-100 text-xs rounded-full border border-cyan-500">Reporting</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- Submit Feedback Form Section -->
        <section class="bg-blue-800/30 rounded-lg p-6 border border-blue-700/50 shadow-inner-xl dark:bg-gray-700/30 dark:border-gray-700/50">
          <h3 class="text-2xl font-bold text-blue-200 mb-6 glow-text-blue dark:text-gray-200">Submit New Feedback</h3>
          <form class="space-y-4">
            <div>
              <label for="feedback-type" class="block text-blue-200 text-sm font-medium mb-1">
                Feedback Type <span class="text-red-400">*</span>
              </label>
              <select id="feedback-type" name="feedback-type" required
                class="w-full p-3 rounded-md bg-blue-900/60 border border-blue-700 text-blue-100 placeholder-blue-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-custom-inner transition-all duration-300 dark:bg-gray-900/60 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-500">
                <option value="">Select a type</option>
                <option value="bug">Bug Report</option>
                <option value="feature">Feature Request</option>
                <option value="enhancement">Enhancement</option>
                <option value="general">General Comment</option>
                <option value="other">Other</option>
              </select>
            </div>
            <div>
              <label for="subject" class="block text-blue-200 text-sm font-medium mb-1">
                Subject <span class="text-red-400">*</span>
              </label>
              <input type="text" id="subject" name="subject" required placeholder="Summarize your feedback" 
                class="w-full p-3 rounded-md bg-blue-900/60 border border-blue-700 text-blue-100 placeholder-blue-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-custom-inner transition-all duration-300 dark:bg-gray-900/60 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-500">
            </div>
            <div>
              <label for="details" class="block text-blue-200 text-sm font-medium mb-1">
                Details <span class="text-red-400">*</span>
              </label>
              <textarea id="details" name="details" rows="5" required placeholder="Provide detailed information about your feedback..."
                class="w-full p-3 rounded-md bg-blue-900/60 border border-blue-700 text-blue-100 placeholder-blue-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-custom-inner resize-y transition-all duration-300 dark:bg-gray-900/60 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-500"></textarea>
            </div>
            <div>
              <label for="screenshot" class="block text-blue-200 text-sm font-medium mb-1">
                Attach Screenshot / File (Optional)
              </label>
              <input type="file" id="screenshot" name="screenshot" accept="image/*,application/pdf" 
                class="block w-full text-sm text-blue-300 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0
                file:text-sm file:font-semibold file:bg-blue-600/70 file:text-blue-100 hover:file:bg-blue-500/70 transition duration-300
                dark:file:bg-gray-600/70 dark:file:text-gray-100 dark:hover:file:bg-gray-500/70">
            </div>
            <div class="pt-4">
              <button type="submit" 
                class="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-lg 
                text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transform hover:scale-105 transition-all duration-300 
                glow-on-hover-blue dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-500">
                Submit Feedback <span class="ml-2">&rarr;</span>
              </button>
            </div>
          </form>
        </section>
      </div>
    </div>
  </div>
</div>

<style>
/* Define a custom glow effect for text and buttons */
.glow-text-blue {
  text-shadow: 0 0 5px rgba(59, 130, 246, 0.6), 0 0 10px rgba(59, 130, 246, 0.4), 0 0 15px rgba(59, 130, 246, 0.2);
}

.glow-text-green {
  text-shadow: 0 0 5px rgba(34, 197, 94, 0.6), 0 0 10px rgba(34, 197, 94, 0.4), 0 0 15px rgba(34, 197, 94, 0.2);
}

.glow-text-yellow {
  text-shadow: 0 0 5px rgba(234, 179, 8, 0.6), 0 0 10px rgba(234, 179, 8, 0.4), 0 0 15px rgba(234, 179, 8, 0.2);
}

.glow-text-purple {
  text-shadow: 0 0 5px rgba(168, 85, 247, 0.6), 0 0 10px rgba(168, 85, 247, 0.4), 0 0 15px rgba(168, 85, 247, 0.2);
}

.glow-on-hover-blue {
  box-shadow: 0 0 5px rgba(59, 130, 246, 0.7), 0 0 15px rgba(59, 130, 246, 0.5);
}

.glow-on-hover-blue:hover {
  box-shadow: 0 0 10px rgba(59, 130, 246, 1), 0 0 25px rgba(59, 130, 246, 0.8);
}

/* Custom inner shadow for inputs */
.shadow-custom-inner {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark .shadow-custom-inner {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.shadow-inner-xl {
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2);
}

.dark .shadow-inner-xl {
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.4);
}

/* Custom keyframes for animations */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out forwards;
}

.animation-delay-100 {
  animation-delay: 0.1s;
}

.animation-delay-200 {
  animation-delay: 0.2s;
}
</style>
              

                <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>
              

                <div class="font-sans bg-gradient-to-br from-gray-100 to-blue-50 dark:from-gray-900 dark:to-blue-950 min-h-screen p-4 sm:p-8 flex items-center justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out scale-95 md:scale-100 group" style="box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);">
    <!-- Organic Top Border -->
    <div class="h-4 sm:h-6 bg-gradient-to-r from-blue-300 to-blue-400 dark:from-blue-600 dark:to-blue-700 relative overflow-hidden">
      <svg class="absolute w-full h-full" viewBox="0 0 100 10" preserveAspectRatio="none">
        <path d="M0,5 Q25,0 50,5 T100,5" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-200 dark:text-blue-800"></path>
        <path d="M0,6 Q25,1 50,6 T100,6" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-100 dark:text-blue-700"></path>
      </svg>
    </div>

    <div class="p-6 sm:p-10">
      <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-8 pb-6 border-b border-gray-200 dark:border-gray-700">
        <div>
          <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white leading-tight mb-2">
            Your Game, Your Voice
          </h2>
          <p class="text-gray-600 dark:text-gray-400 text-lg sm:text-xl font-light">
            Help us shape the future of our game universe.
          </p>
        </div>
        <button class="mt-6 md:mt-0 px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-full shadow-lg transform transition-all duration-300 ease-in-out hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800">
          Submit Feedback
        </button>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
        <!-- Interactive Rating Section -->
        <div class="bg-gray-50 dark:bg-gray-850 p-6 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-inner overflow-hidden relative">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
            <svg class="w-6 h-6 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.536 4.736h4.982c.969 0 1.371 1.246.588 1.81l-4.04 2.936 1.536 4.736c.3.921-.755 1.688-1.536 1.12L12 16.03l-4.04 2.936c-.78.568-1.835-.199-1.536-1.12l1.536-4.736-4.04-2.936c-.782-.564-.38-1.81.588-1.81h4.982L11.049 2.927z"></path></svg>
            Overall Satisfaction
          </h3>
          <div class="flex justify-center sm:justify-start space-x-2 sm:space-x-4 mb-4 select-none">
            <button class="rating-btn p-3 sm:p-4 rounded-full bg-transparent hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
              <span class="text-3xl sm:text-4xl">😒</span>
            </button>
            <button class="rating-btn p-3 sm:p-4 rounded-full bg-transparent hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
              <span class="text-3xl sm:text-4xl">😐</span>
            </button>
            <button class="rating-btn p-3 sm:p-4 rounded-full bg-transparent hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
              <span class="text-3xl sm:text-4xl">😊</span>
            </button>
            <button class="rating-btn p-3 sm:p-4 rounded-full bg-blue-100 dark:bg-blue-700 text-blue-600 dark:text-blue-200 ring-2 ring-blue-300 dark:ring-blue-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
              <span class="text-3xl sm:text-4xl">😍</span>
            </button>
          </div>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 text-center sm:text-left">Click to select your experience.</p>

          <!-- Organic Shape (SVG) as background element -->
          <svg class="absolute bottom-0 right-0 w-32 h-32 opacity-10 blur-sm transform translate-x-1/4 translate-y-1/4 -rotate-12 pointer-events-none" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M50 0C68.45 0 83.21 17.55 79.9 35.85C77.41 49.33 65.65 60 50 60C34.35 60 22.59 49.33 20.1 35.85C16.79 17.55 31.55 0 50 0Z" fill="url(#paint0_linear_organic)" />
            <defs>
              <linearGradient id="paint0_linear_organic" x1="50" y1="0" x2="50" y2="60" gradientUnits="userSpaceOnUse">
                <stop stop-color="#8DCBF7"/>
                <stop offset="1" stop-color="#428DFF"/>
              </linearGradient>
            </defs>
          </svg>
        </div>

        <!-- Feature Feedback Tabs -->
        <div class="bg-gray-50 dark:bg-gray-850 p-6 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-inner">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
            <svg class="w-6 h-6 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            Specific Areas
          </h3>
          <div class="flex flex-wrap gap-2 text-sm">
            <button class="px-4 py-2 rounded-full border border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-200 transition-colors duration-200 hover:bg-blue-100 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
              Gameplay Mechanics
            </button>
            <button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
              Graphics & Art
            </button>
            <button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
              User Interface
            </button>
            <button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
              Story & Lore
            </button>
            <button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
              Performance
            </button>
          </div>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Select areas you want to provide feedback on.</p>
        </div>
      </div>

      <!-- Detailed Feedback Section -->
      <div class="mb-8">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
          <svg class="w-6 h-6 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10M7 16h10M14 6H10a2 2 0 00-2 2v6L5 21l3-3h11a2 2 0 002-2V8a2 2 0 00-2-2z"></path></svg>
          Your Thoughts
        </h3>
        <textarea class="w-full p-4 rounded-xl border border-gray-200 dark:border-gray-600 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 transition-all duration-200 leading-relaxed resize-y" rows="6" placeholder="Tell us what you love, what could be better, or any new ideas..."></textarea>
      </div>

      <!-- User Info & Consent -->
      <div class="flex flex-col sm:flex-row items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
        <div class="flex items-center mb-4 sm:mb-0">
          <img class="w-12 h-12 rounded-full border-2 border-blue-300 dark:border-blue-600 mr-4 shadow-md" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-medium">Player 'Phoenix'</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Connected via GameID #123456</p>
          </div>
        </div>
        <div class="flex items-center">
          <input type="checkbox" id="consent" class="h-5 w-5 rounded form-checkbox text-blue-600 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 transition-colors duration-200">
          <label for="consent" class="ml-2 text-gray-700 dark:text-gray-300 select-none text-sm">
            Allow us to contact you for clarification.
          </label>
        </div>
      </div>
    </div>

    <!-- Organic Bottom Border -->
    <div class="h-4 sm:h-6 bg-gradient-to-r from-blue-400 to-blue-300 dark:from-blue-700 dark:to-blue-600 relative overflow-hidden">
      <svg class="absolute w-full h-full" viewBox="0 0 100 10" preserveAspectRatio="none">
        <path d="M0,5 Q25,10 50,5 T100,5" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-100 dark:text-blue-700"></path>
        <path d="M0,4 Q25,9 50,4 T100,4" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-200 dark:text-blue-800"></path>
      </svg>
    </div>
  </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-950 p-4">
  <div class="w-full max-w-sm rounded-lg shadow-xl p-6 bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-indigo-950 dark:to-purple-950 text-white animate-fade-in">
    <div class="text-center mb-6">
      <svg class="mx-auto mb-4 h-12 w-12 text-pink-400 dark:text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.5 13.5l-3.5 3.5-3.5-3.5M12 21V6m0 0l4-4m-4 4L8 2z" />
      </svg>
      <h2 class="text-3xl font-extrabold text-white mb-2 dark:text-gray-50">We'd Love Your Feedback!</h2>
      <p class="text-sm text-indigo-200 dark:text-purple-200">Help us improve your experience on our platform.</p>
    </div>
    <div class="space-y-4">
      <textarea placeholder="Share your thoughts..." class="w-full p-3 rounded-md bg-indigo-800 dark:bg-purple-800 border border-indigo-700 dark:border-purple-700 text-white placeholder-indigo-300 focus:ring-2 focus:ring-pink-500 focus:border-transparent transition duration-300 ease-in-out text-sm h-24 resize-none"></textarea>
      <div class="flex flex-col sm:flex-row gap-4">
        <input type="email" placeholder="Your email (optional)" class="flex-1 p-3 rounded-md bg-indigo-800 dark:bg-purple-800 border border-indigo-700 dark:border-purple-700 text-white placeholder-indigo-300 focus:ring-2 focus:ring-pink-500 focus:border-transparent transition duration-300 ease-in-out text-sm">
        <select class="flex-1 p-3 rounded-md bg-indigo-800 dark:bg-purple-800 border border-indigo-700 dark:border-purple-700 text-white focus:ring-2 focus:ring-pink-500 focus:border-transparent transition duration-300 ease-in-out text-sm">
          <option value="">Select Category (optional)</option>
          <option value="bug">Bug Report</option>
          <option value="feature">Feature Request</option>
          <option value="general">General Feedback</option>
          <option value="content">Content Suggestion</option>
        </select>
      </div>
    </div>
    <button class="mt-6 w-full py-3 px-4 rounded-md bg-pink-600 dark:bg-pink-700 hover:bg-pink-700 dark:hover:bg-pink-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 focus:ring-offset-indigo-900 dark:focus:ring-offset-purple-950 transition duration-300 ease-in-out text-lg font-semibold text-white shadow-lg transform hover:scale-105 active:scale-95">
      Submit Feedback
    </button>
  </div>
</div>

<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
  }
</style>
              

                <div class="p-4 md:p-6 lg:p-8 bg-amber-50 dark:bg-gray-800 rounded-lg shadow-md max-w-sm mx-auto font-sans relative overflow-hidden">

  <!-- Memphis-style geometric elements -->
  <div class="absolute top-0 left-0 w-24 h-24 bg-amber-200 dark:bg-gray-700 transform -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-lg opacity-70"></div>
  <div class="absolute bottom-0 right-0 w-16 h-16 bg-red-200 dark:bg-gray-600 transform translate-x-1/3 translate-y-1/3 rounded-full opacity-70"></div>
  <div class="absolute top-1/4 right-0 w-12 h-12 bg-emerald-200 dark:bg-gray-700 transform translate-x-1/2 rounded-md opacity-70"></div>

  <div class="relative z-10 flex items-center justify-between text-gray-800 dark:text-gray-200">
    <!-- Like Button -->
    <button class="flex items-center space-x-2 p-2 rounded-full transition-all duration-300 transform active:scale-95
                   bg-red-300 dark:bg-red-700 hover:bg-red-400 dark:hover:bg-red-600
                   text-white dark:text-gray-100 shadow-sm">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
      </svg>
      <span class="font-medium text-sm">Like</span>
    </button>

    <!-- Comment Count -->
    <div class="flex items-center space-x-2 text-gray-600 dark:text-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7l-7-7V3a1 1 0 011-1h10a1 1 0 011 1v7zm-5-.05A3.001 3.001 0 0010 7a3.001 3.001 0 00-3 3c0 .828.324 1.572.85 2.12L7 14h6l.15-1.15A3.001 3.001 0 0013 9.95z" clip-rule="evenodd" />
      </svg>
      <span class="font-medium text-sm">12 Comments</span>
    </div>
  </div>
</div>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans antialiased">

  <!-- Feedback Card Container -->
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden mb-8">

    <!-- Header Section -->
    <div class="bg-indigo-600 dark:bg-indigo-900 p-4 sm:p-6 text-white flex items-center justify-between">
      <div>
        <h2 class="text-2xl sm:text-3xl font-bold mb-1">Community Feedback</h2>
        <p class="text-indigo-100 text-sm sm:text-base">Help us improve by sharing your thoughts.</p>
      </div>
      <span class="material-icons-outlined text-white text-3xl sm:text-4xl">feedback</span>
    </div>

    <!-- Feedback Type/Category Selection -->
    <div class="border-b border-gray-200 dark:border-gray-700 px-4 sm:px-6 py-4">
      <div class="flex flex-wrap gap-2 text-sm sm:text-base">
        <button class="px-4 py-2 rounded-full font-medium text-indigo-700 bg-indigo-100 dark:bg-indigo-700 dark:text-indigo-100 shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
          Suggestion
        </button>
        <button class="px-4 py-2 rounded-full font-medium text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
          Bug Report
        </button>
        <button class="px-4 py-2 rounded-full font-medium text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
          Question
        </button>
        <button class="px-4 py-2 rounded-full font-medium text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
          Other
        </button>
      </div>
    </div>

    <!-- Main Feedback Form -->
    <div class="p-4 sm:p-6">
      <form>
        <div class="mb-4">
          <label for="feedback-title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Title <span class="text-red-500">*</span></label>
          <input type="text" id="feedback-title" placeholder="e.g., Improve search functionality" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-gray-50 transition duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500" required>
        </div>

        <div class="mb-4">
          <label for="feedback-description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description <span class="text-red-500">*</span></label>
          <textarea id="feedback-description" rows="6" placeholder="Provide a detailed description of your feedback, including steps to reproduce bugs if applicable." class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-gray-50 resize-y transition duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500" required></textarea>
        </div>

        <div class="mb-4">
          <label for="attachment" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Attachments (Optional)</label>
          <div class="flex items-center space-x-4">
            <label class="cursor-pointer bg-indigo-500 hover:bg-indigo-600 text-white font-semibold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
              Upload File
              <input type="file" id="attachment" class="hidden">
            </label>
            <span class="text-sm text-gray-500 dark:text-gray-400" id="file-name">No file chosen</span>
          </div>
        </div>

        <div class="mb-6 flex items-center justify-between">
          <label for="email-notification" class="inline-flex items-center cursor-pointer">
            <input type="checkbox" id="email-notification" class="form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500 transition duration-150 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-indigo-600">
            <span class="ml-2 text-sm text-gray-900 dark:text-gray-300">Notify me of updates</span>
          </label>
          <div class="group relative inline-block">
            <spa class="material-icons-outlined text-gray-400 dark:text-gray-500 text-lg sm:text-xl cursor-help">info</span>
            <div class="absolute hidden group-hover:block bg-gray-700 dark:bg-gray-600 text-white text-xs rounded py-1 px-2 right-0 bottom-full mb-2 w-48 shadow-lg z-10 transition duration-300 ease-in-out opacity-0 group-hover:opacity-100 pointer-events-none">
              We'll send you email updates on the status of your feedback.
              <div class="absolute left-1/2 -ml-1 bottom-0 transform translate-y-full border-solid border-8 border-transparent border-t-gray-700 dark:border-t-gray-600"></div>
            </div>
          </div>
        </div>

        <div class="flex justify-end space-x-3">
          <button type="button" class="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg">
            Cancel
          </button>
          <button type="submit" class="px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg">
            Submit Feedback
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- Recently Submitted Feedback Section (Example) -->
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="bg-emerald-600 dark:bg-emerald-900 p-4 sm:p-6 text-white flex items-center justify-between">
      <div>
        <h3 class="text-xl sm:text-2xl font-bold mb-1">Recent Submissions</h3>
        <p class="text-emerald-100 text-sm sm:text-base">See what others are suggesting.</p>
      </div>
      <span class="material-icons-outlined text-white text-3xl sm:text-4xl">forum</span>
    </div>
    <div class="p-4 sm:p-6 space-y-4">

      <!-- Feedback Item 1 -->
      <div class="flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">John Doe <span class="text-indigo-600 dark:text-indigo-400 ml-2">• Suggestion</span></p>
          <p class="text-base font-medium text-gray-900 dark:text-gray-100">Add dark mode to the forum</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">It would be great to have a dark mode option to reduce eye strain, especially during late-night browsing. The current light theme is a bit too bright.</p>
          <div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
            <span>2 days ago</span>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">thumb_up</span>
              <span>15</span>
            </div>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">comment</span>
              <span>3</span>
            </div>
          </div>
          <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Status: <span class="font-semibold text-green-600 dark:text-green-400">In Progress</span></p>
          </div>
        </div>
      </div>

      <!-- Feedback Item 2 -->
      <div class="flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Jane Smith <span class="text-emerald-600 dark:text-emerald-400 ml-2">• Bug Report</span></p>
          <p class="text-base font-medium text-gray-900 dark:text-gray-100">Profile picture not updating</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">When I try to upload a new profile picture, it appears to upload successfully but the old picture remains visible after refreshing the page. Tried multiple browsers.</p>
          <div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
            <span>5 hours ago</span>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">thumb_up</span>
              <span>7</span>
            </div>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">comment</span>
              <span>1</span>
            </div>
          </div>
          <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Status: <span class="font-semibold text-orange-600 dark:text-orange-400">Investigating</span></p>
          </div>
        </div>
      </div>

      <!-- Feedback Item 3 -->
      <div class="flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Peter Jones <span class="text-purple-600 dark:text-purple-400 ml-2">• Question</span></p>
          <p class="text-base font-medium text-gray-900 dark:text-gray-100">How to embed videos in posts?</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">I'm trying to share a YouTube video in my post but the embed code doesn't seem to work. Is there a specific way to do this or is it not supported?</p>
          <div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
            <span>1 day ago</span>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">thumb_up</span>
              <span>8</span>
            </div>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">comment</span>
              <span>5</span>
            </div>
          </div>
          <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Status: <span class="font-semibold text-blue-600 dark:text-blue-400">Answered</span></p>
          </div>
        </div>
      </div>

    </div>
    <div class="p-4 sm:p-6 text-center border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm font-medium">View All Feedback</a>
    </div>
  </div>

  <!-- Required for Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

  <!-- Dummy JS for file input label and tooltip (not part of the JSON output requirements, but for live demo functionality) -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const fileInput = document.getElementById('attachment');
      const fileNameSpan = document.getElementById('file-name');
      if (fileInput) {
        fileInput.addEventListener('change', (event) => {
          const fileName = event.target.files[0] ? event.target.files[0].name : 'No file chosen';
          fileNameSpan.textContent = fileName;
        });
      }
    });
  </script>

</div>
              

                <div class="font-sans antialiased text-gray-800 bg-gradient-to-br from-lime-50 through-green-50 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden
    transform transition-all duration-300 ease-in-out
    border border-lime-200 dark:border-gray-700
    hover:shadow-2xl hover:-translate-y-1">

    <div class="p-6 sm:p-8 lg:p-10">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-lime-800 dark:text-lime-400 text-center
        font-serif tracking-tight leading-tight">
        Tell Us About Your Experience
      </h2>
      <p class="text-lg sm:text-xl text-center text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto">
        Your feedback helps us grow the freshest experiences for you.
      </p>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
        <!-- Left Section: Overall Rating and Image -->
        <div class="flex flex-col items-center justify-center p-4">
          <img src="https://picsum.photos/id/1080/600/400" alt="Fresh Food" class="rounded-2xl shadow-lg mb-6 w-full object-cover max-h-[250px] sm:max-h-[300px]
            border-4 border-lime-100 dark:border-gray-700">
          <h3 class="text-xl sm:text-2xl font-semibold text-center text-gray-700 dark:text-gray-300 mb-4">How was your meal?</h3>
          <div class="flex space-x-2 sm:space-x-4">
            <!-- Star Rating (Interactive-like without JS) -->
            <label for="rating1" class="cursor-pointer text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 transition-colors duration-200 hover:text-amber-400 focus-within:text-amber-400">
              &#9733;
              <input type="radio" name="rating" id="rating1" value="1" class="sr-only">
            </label>
            <label for="rating2" class="cursor-pointer text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 transition-colors duration-200 hover:text-amber-400 focus-within:text-amber-400">
              &#9733;
              <input type="radio" name="rating" id="rating2" value="2" class="sr-only">
            </label>
            <label for="rating3" class="cursor-pointer text-4xl sm:text-5xl text-amber-400 dark:text-amber-500 transition-colors duration-200 hover:text-amber-400 focus-within:text-amber-400">
              &#9733;
              <input type="radio" name="rating" id="rating3" value="3" class="sr-only" checked>
            </label>
            <label for="rating4" class="cursor-pointer text-4xl sm:text-5xl text-amber-400 dark:text-amber-500 transition-colors duration-200 hover:text-amber-400 focus-within:text-amber-400">
              &#9733;
              <input type="radio" name="rating" id="rating4" value="4" class="sr-only">
            </label>
            <label for="rating5" class="cursor-pointer text-4xl sm:text-5xl text-amber-400 dark:text-amber-500 transition-colors duration-200 hover:text-amber-400 focus-within:text-amber-400">
              &#9733;
              <input type="radio" name="rating" id="rating5" value="5" class="sr-only">
            </label>
          </div>
        </div>

        <!-- Right Section: Feedback Form -->
        <div>
          <form class="space-y-6">
            <div>
              <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Your Name <span class="text-red-500">*</span></label>
              <input type="text" id="name" name="name" autocomplete="name" required
                class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm
                bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200
                focus:ring-lime-500 focus:border-lime-500 sm:text-base transition-colors duration-200
                placeholder-gray-400 dark:placeholder-gray-500 ">
            </div>

            <div>
              <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
              <input type="email" id="email" name="email" autocomplete="email"
                class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm
                bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200
                focus:ring-lime-500 focus:border-lime-500 sm:text-base transition-colors duration-200
                placeholder-gray-400 dark:placeholder-gray-500 ">
            </div>

            <div>
              <label for="comments" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Comments <span class="text-red-500">*</span></label>
              <textarea id="comments" name="comments" rows="5" required
                class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm
                bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200
                focus:ring-lime-500 focus:border-lime-500 sm:text-base resize-y transition-colors duration-200
                placeholder-gray-400 dark:placeholder-gray-500 "></textarea>
            </div>

            <div class="flex items-center space-x-3 mb-4">
                <input type="checkbox" id="newsletter" name="newsletter" class="h-5 w-5 text-lime-600 dark:text-lime-500 rounded border-gray-300 dark:border-gray-600 focus:ring-lime-500">
                <label for="newsletter" class="text-sm text-gray-700 dark:text-gray-300">Sign up for Fresh Updates!</label>
            </div>

            <div class="dark:border-t dark:border-gray-700 pt-6 mt-6">
              <button type="submit" class="w-full flex justify-center py-3 px-6 border border-transparent rounded-full shadow-lg text-lg font-medium text-white
                bg-gradient-to-r from-lime-600 to-green-600 dark:from-lime-700 dark:to-green-700
                hover:from-lime-700 hover:to-green-700 dark:hover:from-lime-800 dark:hover:to-green-800
                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800
                transform transition-all duration-300 ease-in-out scale-100 hover:scale-105">
                Submit Feedback
                <svg class="ml-2 -mr-1 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                </svg>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- Testimonial / Featured Feedback (as a static element) -->
    <div class="relative bg-lime-50 dark:bg-gray-900 p-6 sm:p-8 lg:p-10 mt-8 rounded-b-3xl
      border-t border-lime-200 dark:border-gray-700
      before:content-[''] before:absolute before:left-0 before:top-0 before:h-full before:w-1/2 before:bg-gradient-to-br before:from-lime-100 before:to-lime-50 dark:before:from-gray-800 dark:before:to-gray-900 before:rounded-bl-3xl before:opacity-50 before:-z-10
      after:content-[''] after:absolute after:right-0 after:top-0 after:h-full after:w-1/2 after:bg-gradient-to-tl after:from-green-100 after:to-lime-50 dark:after:from-gray-800 dark:after:to-gray-900 after:rounded-br-3xl after:opacity-50 after:-z-10">

      <blockquote class="relative z-10 text-center">
        <p class="text-xl sm:text-2xl font-serif italic text-gray-700 dark:text-gray-300 mb-4 leading-relaxed ">
          "The flavors were as fresh as a spring morning! Truly a delightful experience."
        </p>
        <div class="flex items-center justify-center space-x-3">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Customer Avatar" class="w-14 h-14 rounded-full border-2 border-lime-300 dark:border-gray-600 shadow-md">
          <cite class="text-lg font-medium text-lime-800 dark:text-lime-400 not-italic">John Doe</cite>
          <span class="text-gray-500 dark:text-gray-400">- Food Enthusiast</span>
        </div>
      </blockquote>
    </div>

  </div>
</div>
              

                <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>
              

                <div class="font-sans antialiased text-gray-900 bg-white dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="p-6 sm:p-8 space-y-6">
      <h2 class="text-2xl sm:text-3xl font-bold text-center text-indigo-700 dark:text-indigo-400 mb-4 tracking-tight">
        We Value Your Feedback!
      </h2>
      <p class="text-center text-gray-600 dark:text-gray-300 leading-relaxed">
        Help us improve our services by sharing your thoughts.
      </p>

      <form class="space-y-6">
        <div>
          <label for="feedback-type" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            What type of feedback is this?
          </label>
          <div class="relative">
            <select id="feedback-type" name="feedback-type" class="block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none transition-colors duration-200">
              <option value="general">General Feedback</option>
              <option value="suggestion">Suggestion</option>
              <option value="bug">Bug Report</option>
              <option value="compliment">Compliment</option>
              <option value="other">Other</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
              <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
        </div>

        <div>
          <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            Your Message
          </label>
          <textarea id="message" name="message" rows="4" class="block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500 sm:text-sm transition-colors duration-200 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Tell us what's on your mind..."></textarea>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">How would you rate your experience?</label>
          <div class="flex justify-center space-x-2">
            <button type="button" class="rating-btn group flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
              <span class="text-2xl lg:text-3xl transition-transform duration-200 group-hover:-translate-y-1 group-active:translate-y-0">😡</span>
              <span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400 mt-1">Poor</span>
            </button>
            <button type="button" class="rating-btn group flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
              <span class="text-2xl lg:text-3xl transition-transform duration-200 group-hover:-translate-y-1 group-active:translate-y-0">😐</span>
              <span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400 mt-1">Okay</span>
            </button>
            <button type="button" class="rating-btn group flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
              <span class="text-2xl lg:text-3xl transition-transform duration-200 group-hover:-translate-y-1 group-active:translate-y-0">😊</span>
              <span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400 mt-1">Good</span>
            </button>
          </div>
        </div>

        <button type="submit" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-all duration-200 transform hover:-translate-y-0.5 active:translate-y-0 active:scale-98">
          <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
          </svg>
          Submit Feedback
        </button>
      </form>
    </div>
  </div>
</div>
              

                <section class="py-12 bg-white dark:bg-gray-900 font-sans">
  <div class="container mx-auto px-4 max-w-2xl">
    <h2 class="text-4xl md:text-5xl font-extrabold text-center text-rose-600 dark:text-rose-400 mb-6 tracking-tight leading-tight">
      What Our Guests Say
    </h2>
    <p class="text-center text-lg text-gray-700 dark:text-gray-300 mb-12 max-w-xl mx-auto">
      Hear from those who've savored our culinary delights and experienced our exceptional service.
    </p>

    <div class="bg-gradient-to-br from-rose-100 to-rose-200 dark:from-rose-900 dark:to-rose-800 p-8 md:p-12 rounded-3xl shadow-xl border border-rose-300 dark:border-rose-700 transform hover:scale-105 transition duration-300 ease-in-out">
      <div class="flex items-center justify-center mb-6">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar" class="w-24 h-24 rounded-full border-4 border-rose-500 dark:border-rose-400 object-cover shadow-lg">
      </div>
      <p class="text-center text-xl md:text-2xl italic text-rose-900 dark:text-rose-100 leading-relaxed mb-6">
        "The ambiance was exquisite, and the pasta dish I had was simply divine. A true culinary masterpiece! I've never tasted anything quite like it. Highly recommend for a special occasion."
      </p>
      <div class="flex justify-center items-center gap-1 mb-6">
        <svg class="w-6 h-6 text-rose-500 dark:text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-6 h-6 text-rose-500 dark:text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-6 h-6 text-rose-500 dark:text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-6 h-6 text-rose-500 dark:text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-6 h-6 text-rose-500 dark:text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
      </div>
      <p class="text-center text-lg font-semibold text-rose-700 dark:text-rose-200">Sophia M.</p>
      <p class="text-center text-md text-rose-600 dark:text-rose-300">Frequent Guest</p>
    </div>

  </div>
</section>