Add to Cart Button 컴포넌트

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 font-sans p-4 sm:p-6 md:p-8">

  <!-- Component Container -->
  <div class="w-full max-w-sm md:max-w-md lg:max-w-xl mx-auto rounded-lg shadow-xl overflow-hidden
              bg-white dark:bg-gray-800
              border border-gray-200 dark:border-gray-700
              transition-colors duration-300 ease-in-out">

    <!-- Product Header -->
    <div class="p-4 sm:p-5 md:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-1
                 font-sans tracking-wide">
        MediKit Essential
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 font-light">
        Advanced Diagnostic & First Aid Kit
      </p>
    </div>

    <!-- Product Image and Details -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 p-4 sm:p-5 md:p-6">
      <!-- Product Image -->
      <div class="relative rounded-md overflow-hidden aspect-video sm:aspect-square flex items-center justify-center bg-gray-100 dark:bg-gray-700">
        <img src="https://picsum.photos/600/400?random=10" alt="MediKit Essential Product Image" class="w-full h-full object-cover" loading="lazy">
        <span class="absolute top-2 left-2 px-3 py-1 bg-amber-600/90 dark:bg-amber-700/90 text-white text-xs font-bold rounded-full shadow-md">
          <span class="hidden sm:inline">Limited </span>Stock
        </span>
      </div>

      <!-- Product Details -->
      <div class="flex flex-col justify-between">
        <div>
          <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-100 mb-2
             font-sans tracking-tight">
            <span class="line-through text-gray-400 dark:text-gray-500 mr-2 text-base sm:text-lg">$119.99</span>
            $99.99
          </p>
          <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1 mb-4">
            <li class="flex items-center">
              <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400" 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="M5 13l4 4L19 7"></path></svg>
              FDA Approved
            </li>
            <li class="flex items-center">
              <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2d00/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              CE Certified
            </li>
            <li class="flex items-center">
              <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400" 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="M5 13l4 4L19 7"></path></svg>
              2-Year Warranty
            </li>
          </ul>
        </div>

        <!-- Quantity Selector -->
        <div class="flex items-center justify-between mb-4 mt-auto">
          <label for="quantity" class="block text-sm font-medium text-gray-700 dark:text-gray-300 font-sans">Quantity:</label>
          <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md overflow-hidden">
            <button aria-label="Decrease quantity" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 ease-in-out">
              −
            </button>
            <input type="number" id="quantity" value="1" min="1" max="10" aria-live="polite"
                   class="w-12 text-center bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-medium
                          text-sm border-x border-gray-300 dark:border-gray-600 outline-none
                          focus:ring-0 appearance-none [-moz-appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
            <button aria-label="Increase quantity" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 ease-in-out">
              +
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="p-4 sm:p-5 md:p-6 border-t border-gray-200 dark:border-gray-700 grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">

      <button aria-label="Add to Cart" class="relative w-full py-3 px-4 rounded-md shadow-md
                  bg-green-700 dark:bg-green-600 text-white font-semibold text-base sm:text-lg
                  hover:bg-green-800 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 focus:ring-offset-2
                  focus:ring-offset-white dark:focus:ring-offset-gray-800
                  transition-all duration-300 flex items-center justify-center space-x-2
                  active:scale-[0.98]">
        <svg class="w-5 h-5 sm:w-6 sm: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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
        <span>Add to Cart</span>
        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs opacity-70 hidden md:block">
          ($99.99)
        </span>
      </button>

      <button aria-label="Buy Now" class="w-full py-3 px-4 rounded-md shadow-md
                  bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold text-base sm:text-lg
                  hover:bg-gray-200 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600
                  focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:ring-offset-2
                  focus:ring-offset-white dark:focus:ring-offset-gray-800
                  transition-all duration-300 flex items-center justify-center space-x-2
                  active:scale-[0.98]">
        <svg class="w-5 h-5 sm:w-6 sm: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="M9 7H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-2m-13-2l4 4m0 0l4-4m-4 4V3"></path></svg>
        <span>Buy Now</span>
      </button>

    </div>

    <!-- Information Section (Optional) -->
    <div class="p-4 sm:p-5 md:p-6 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
        <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400 flex-shrink-0" 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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.928 12c0 3.037 1.282 5.767 3.322 7.749L12 21.051l5.75-2.289C20.713 17.514 22 14.887 22 12c0-2.887-1.287-5.514-3.37-7.468z"></path></svg>
        <span>Secure Checkout Guaranteed. Orders ship within 24 hours.</span>
      </div>
    </div>

  </div>
</div>