购物车组件 - Nature Inspired

<div class="font-sans antialiased text-gray-800 bg-gradient-to-br from-green-50 to-teal-100 dark:from-green-950 dark:to-teal-900 min-h-screen p-4 sm:p-6 lg:p-8">

  <!-- Global Container -->
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-3xl overflow-hidden animate-fade-in-up transition-colors duration-500">

    <!-- Header -->
    <div class="bg-gradient-to-r from-green-500 to-teal-600 dark:from-green-700 dark:to-teal-800 p-6 sm:p-8 lg:p-10 text-white flex justify-between items-center rounded-t-3xl">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight drop-shadow-lg font-['Playfair_Display']">Your Growth Basket</h1>
      <span class="text-lg sm:text-xl font-semibold opacity-90">3 Items</span>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 p-6 sm:p-8 lg:p-10">

      <!-- Cart Items Section -->
      <div class="lg:col-span-2 space-y-6 sm:space-y-8">

        <!-- Cart Item 1 -->
        <div class="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-700 rounded-2xl p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-green-200 dark:border-green-800">
          <img src="https://picsum.photos/seed/sports-gear-1/150/150" alt="Ergonomic Training Bar" class="w-32 h-32 sm:w-40 sm:h-40 rounded-xl object-cover ring-2 ring-green-400 dark:ring-green-600 flex-shrink-0">
          <div class="flex-grow mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left">
            <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2 font-['Montserrat']">Ergonomic Training Bar</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-3">Designed for peak performance and natural grip.</p>
            <div class="flex items-center justify-center sm:justify-start space-x-4 mb-3">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
                <span class="px-4 py-1 text-lg font-semibold text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
              </div>
              <strong class="text-xl font-bold text-green-600 dark:text-green-400">$89.99</strong>
            </div>
            <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-600 transition duration-300 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md py-1 px-2">Remove</button>
          </div>
        </div>

        <!-- Cart Item 2 -->
        <div class="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-700 rounded-2xl p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-green-200 dark:border-green-800">
          <img src="https://picsum.photos/seed/yoga-mat-2/150/150" alt="Eco-Friendly Yoga Mat" class="w-32 h-32 sm:w-40 sm:h-40 rounded-xl object-cover ring-2 ring-green-400 dark:ring-green-600 flex-shrink-0">
          <div class="flex-grow mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left">
            <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2 font-['Montserrat']">Eco-Friendly Yoga Mat</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-3">Sustainable and grippy for all your poses.</p>
            <div class="flex items-center justify-center sm:justify-start space-x-4 mb-3">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
                <span class="px-4 py-1 text-lg font-semibold text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
              </div>
              <strong class="text-xl font-bold text-green-600 dark:text-green-400">$49.50</strong>
            </div>
            <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-600 transition duration-300 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md py-1 px-2">Remove</button>
          </div>
        </div>

        <!-- Cart Item 3 -->
        <div class="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-700 rounded-2xl p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-green-200 dark:border-green-800">
          <img src="https://picsum.photos/seed/resistance-bands-3/150/150" alt="Premium Resistance Bands Set" class="w-32 h-32 sm:w-40 sm:h-40 rounded-xl object-cover ring-2 ring-green-400 dark:ring-green-600 flex-shrink-0">
          <div class="flex-grow mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left">
            <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2 font-['Montserrat']">Premium Resistance Bands Set</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-3">Versatile for strength, flexibility, and recovery.</p>
            <div class="flex items-center justify-center sm:justify-start space-x-4 mb-3">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
                <span class="px-4 py-1 text-lg font-semibold text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
              </div>
              <strong class="text-xl font-bold text-green-600 dark:text-green-400">$29.99</strong>
            </div>
            <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-600 transition duration-300 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md py-1 px-2">Remove</button>
          </div>
        </div>

        <!-- Continue Shopping Button -->
        <div class="pt-6 border-t border-green-200 dark:border-green-700 text-center">
          <button class="inline-flex items-center px-6 py-3 bg-teal-500 hover:bg-teal-600 dark:bg-teal-700 dark:hover:bg-teal-600 text-white font-semibold rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
            </svg>
            Continue Evolving
          </button>
        </div>

      </div>

      <!-- Summary Section -->
      <div class="lg:col-span-1 bg-gradient-to-br from-green-50 to-teal-50 dark:from-green-900 dark:to-teal-900 rounded-2xl p-6 sm:p-8 shadow-lg border border-teal-200 dark:border-teal-700 flex flex-col justify-between">

        <div>
          <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-6 border-b pb-4 border-teal-300 dark:border-teal-600 font-['Playfair_Display']">Order Harmony</h2>

          <div class="mb-4">
            <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-600">
              <span class="text-gray-600 dark:text-gray-300">Subtotal</span>
              <span class="text-gray-900 dark:text-gray-100 font-medium">$169.48</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-600">
              <span class="text-gray-600 dark:text-gray-300">Shipping</span>
              <span class="text-gray-900 dark:text-gray-100 font-medium">$7.50</span>
            </div>
            <div class="flex justify-between items-center py-2">
              <span class="text-gray-600 dark:text-gray-300">Tax (8.25%)</span>
              <span class="text-gray-900 dark:text-gray-100 font-medium">$13.98</span>
            </div>
          </div>

          <div class="bg-teal-100 dark:bg-teal-800 rounded-xl p-4 mb-6 shadow-inner border border-teal-300 dark:border-teal-600">
            <div class="flex justify-between items-center text-xl sm:text-2xl font-bold text-green-700 dark:text-green-300">
              <span>Total</span>
              <span>$190.96</span>
            </div>
          </div>


          <div class="space-y-4">
            <label for="coupon" class="block text-lg font-semibold text-gray-900 dark:text-gray-100">Nurture your discount: </label>
            <div class="flex rounded-lg shadow-sm overflow-hidden border border-green-300 dark:border-green-600">
                <input type="text" id="coupon" placeholder="Enter code" class="flex-grow p-3 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 rounded-l-lg">
                <button class="px-5 py-3 bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold transform hover:scale-101 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-green-400 rounded-r-lg">
                  Apply
                </button>
            </div>
          </div>

        </div>

        <button class="w-full mt-8 py-4 bg-green-600 hover:bg-green-700 dark:bg-green-800 dark:hover:bg-green-700 text-white text-xl font-bold rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-green-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 animate-pulse-fade-in">
          Proceed to Thriving
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block ml-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

    </div>

  </div>
</div>

<style>
  /* Custom animations for a more 'organic' feel */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

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

  @keyframes pulse-fade-in {
    0% {
      opacity: 0.7;
      transform: scale(1);
      box-shadow: 0 0 0 rgba(16, 185, 129, 0.4); /* green-500 */
    }
    50% {
      opacity: 1;
      transform: scale(1.02);
      box-shadow: 0 0 15px rgba(16, 185, 129, 0.8);
    }
    100% {
      opacity: 0.7;
      transform: scale(1);
      box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
    }
  }

  .animate-pulse-fade-in {
    animation: pulse-fade-in 2s infinite ease-in-out;
  }

  /* Custom font styles, if loaded externally. For this example, assuming they are available or fallback. */
  /* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@700&display=swap'); */
</style>