Organic_Nature_Inspired_Food_Feedback_Component

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