Industrial_AddToCartButton

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

  <!-- Component Wrapper -->
  <div class="w-full max-w-sm rounded-lg overflow-hidden bg-white dark:bg-gray-800 shadow-xl border border-blue-200 dark:border-blue-900 transition-colors duration-300">
    <div class="p-6 space-y-4">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 text-center uppercase tracking-wide border-b-2 border-blue-500 dark:border-blue-700 pb-2">
        Service Procurement
      </h2>

      <!-- Product/Service Card Example -->
      <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-850 p-4 rounded-md shadow-inner border border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/100/100?random=1" alt="Service Image" class="w-24 h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-4 border-2 border-blue-400 dark:border-blue-600 flex-shrink-0">
        <div class="flex-grow text-center md:text-left">
          <p class="text-lg font-semibold text-blue-800 dark:text-blue-300">Environmental Impact Assessment</p>
          <p class="text-sm text-gray-700 dark:text-gray-400">Comprehensive analysis for sustainable urban planning.</p>
          <p class="text-xl font-bold text-gray-900 dark:text-gray-100 mt-2">$1,200.00</p>
        </div>
      </div>

      <!-- Quantity Selector (Industrial Style) -->
      <div class="flex items-center justify-between mt-4">
        <label for="quantity" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mr-2">Quantity:</label>
        <div class="relative flex items-center bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm">
          <button type="button" class="flex-shrink-0 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 hover:bg-gray-400 dark:hover:bg-gray-500 p-2 rounded-l-md transition-colors duration-200 border-r border-gray-400 dark:border-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75" aria-label="Decrease quantity">
            <svg class="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="M20 12H4"></path></svg>
          </button>
          <input type="number" id="quantity" name="quantity" value="1" min="1" class="w-16 text-center bg-transparent text-gray-900 dark:text-gray-100 font-semibold focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" aria-label="Service quantity">
          <button type="button" class="flex-shrink-0 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 hover:bg-gray-400 dark:hover:bg-gray-500 p-2 rounded-r-md transition-colors duration-200 border-l border-gray-400 dark:border-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75" aria-label="Increase quantity">
            <svg class="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="M12 4v16m8-8H4"></path></svg>
          </button>
        </div>
      </div>

      <!-- Add to Cart Button -->
      <button type="button"
        class="w-full flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white 
               bg-gradient-to-r from-blue-700 to-blue-900 
               hover:from-blue-800 hover:to-blue-950 
               focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 
               dark:from-blue-600 dark:to-blue-800 
               dark:hover:from-blue-700 dark:hover:to-blue-900 
               dark:focus:ring-blue-400 
               transition-all duration-300 ease-in-out 
               transform active:scale-95 
               uppercase tracking-wider 
               relative overflow-hidden group"
      >
        <!-- Left Gear Icon -->
        <svg class="w-5 h-5 mr-3 rotate-0 group-hover:rotate-12 transition-transform duration-300" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.942 3.333.903 2.28 2.479a1.724 1.724 0 00.009 2.504c1.053 1.577-.746 3.422-2.28 2.479a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.942-3.333-.903-2.28-2.479a1.724 1.724 0 00-.009-2.504c-1.053-1.577.746-3.422 2.28-2.479a1.724 1.724 0 002.573-1.066z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        <span class="relative z-10">Add to Procurement List</span>
        <!-- Right Cart Icon -->
        <svg class="w-5 h-5 ml-3 scale-100 group-hover:scale-110 transition-transform duration-300" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.769.707 1.769H17m0 0A2 2 0 1020 18a2 2 0 00-4 0m0 0H5.4m7 0a2 2 0 102 2 2 2 0 00-2-2z"></path>
        </svg>

        <!-- Industrial Bolt/Rivets Visual Effect -->
        <span class="absolute top-1 left-1 w-2 h-2 bg-blue-900 rounded-full dark:bg-blue-300"></span>
        <span class="absolute top-1 right-1 w-2 h-2 bg-blue-900 rounded-full dark:bg-blue-300"></span>
        <span class="absolute bottom-1 left-1 w-2 h-2 bg-blue-900 rounded-full dark:bg-blue-300"></span>
        <span class="absolute bottom-1 right-1 w-2 h-2 bg-blue-900 rounded-full dark:bg-blue-300"></span>
      </button>

      <p class="text-xs text-gray-500 dark:text-gray-400 text-center mt-4">Secure and transparent procurement process.</p>
    </div>
  </div>
</div>