Add to Cart Button 컴포넌트

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="max-w-md w-full bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-3xl shadow-[inset_0_4px_8px_rgba(255,255,255,0.4),inset_0_-4px_8px_rgba(0,0,0,0.2),0_10px_20px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_4px_8px_rgba(255,255,255,0.1),inset_0_-4px_8px_rgba(0,0,0,0.5),0_10px_20px_rgba(0,0,0,0.5)] p-6 sm:p-8 border-t border-l border-gray-100 dark:border-gray-600">
    <div class="flex flex-col sm:flex-row items-center sm:items-start gap-6 mb-8">
      <div class="w-32 h-32 flex-shrink-0 rounded-2xl overflow-hidden shadow-[inset_0_2px_4px_rgba(0,0,0,0.2)] dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)] border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800">
        <img src="https://picsum.photos/id/11/300/300" alt="Game Cover" class="w-full h-full object-cover" />
      </div>
      <div class="flex-grow text-center sm:text-left">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 leading-tight drop-shadow-sm">
          Cyberpunk Vanguard
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">
          Ultimate Edition 2077
        </p>
        <span class="text-3xl sm:text-4xl font-bold text-green-700 dark:text-green-400 drop-shadow-md">
          $59.99
        </span>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
      <div class="bg-gradient-to-br from-gray-300 to-gray-100 dark:from-gray-800 dark:to-gray-700 p-4 rounded-xl shadow-[inset_0_2px_4px_rgba(0,0,0,0.1),0_2px_4px_rgba(255,255,255,0.5)] dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),0_2px_4px_rgba(0,0,0,0.5)] border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <h3 class="text-md font-semibold text-gray-700 dark:text-gray-200 mb-1">Platform</h3>
        <p class="text-lg font-bold text-gray-900 dark:text-gray-50">PC</p>
        <div class="absolute -top-4 -right-4 w-12 h-12 bg-blue-400 group-hover:bg-blue-500 rounded-full blur-md opacity-20 transition-all duration-300"></div>
      </div>
      <div class="bg-gradient-to-br from-gray-300 to-gray-100 dark:from-gray-800 dark:to-gray-700 p-4 rounded-xl shadow-[inset_0_2px_4px_rgba(0,0,0,0.1),0_2px_4px_rgba(255,255,255,0.5)] dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),0_2px_4px_rgba(0,0,0,0.5)] border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <h3 class="text-md font-semibold text-gray-700 dark:text-gray-200 mb-1">Release Date</h3>
        <p class="text-lg font-bold text-gray-900 dark:text-gray-50">12/10/2077</p>
        <div class="absolute -bottom-4 -left-4 w-12 h-12 bg-purple-400 group-hover:bg-purple-500 rounded-full blur-md opacity-20 transition-all duration-300"></div>
      </div>
    </div>

    <div class="relative flex items-center justify-center p-2 rounded-2xl bg-gradient-to-br from-yellow-300 to-orange-400 dark:from-yellow-600 dark:to-orange-700 
                shadow-[inset_0_2px_4px_rgba(255,200,0,0.8),inset_0_-2px_4px_rgba(100,50,0,0.6),0_6px_12px_rgba(0,0,0,0.4)] dark:shadow-[inset_0_2px_4px_rgba(255,200,0,0.2),inset_0_-2px_4px_rgba(50,25,0,0.4),0_6px_12px_rgba(0,0,0,0.6)] group">
      
      <!-- Inner Bevel/Highlight -->
      <div class="absolute inset-0 rounded-2xl border-2 border-yellow-200 dark:border-yellow-700 opacity-80 group-hover:opacity-100 transition-opacity duration-200"></div>

      <!-- Main Button Content -->
      <button class="relative z-10 w-full px-6 py-4 flex items-center justify-center gap-3 
                     font-extrabold text-white text-xl sm:text-2xl tracking-wide uppercase 
                     bg-gradient-to-br from-orange-500 to-yellow-600 dark:from-orange-800 dark:to-yellow-900 
                     rounded-xl shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_2px_4px_rgba(255,255,255,0.4)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.5),inset_0_2px_4px_rgba(255,255,255,0.1)] 
                     transform active:scale-[0.98] transition-all duration-150 
                     cursor-pointer outline-none focus:outline-none 
                     ring-4 ring-yellow-400 dark:ring-yellow-600 ring-offset-4 ring-offset-orange-300 dark:ring-offset-orange-800 
                     hover:from-orange-600 hover:to-yellow-700 dark:hover:from-orange-900 dark:hover:to-yellow-950 
                     text-shadow-[0_2px_4px_rgba(0,0,0,0.5)]">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white drop-shadow-md animate-pulse" fill="currentColor" viewBox="0 0 24 24">
          <path d="M20.71,7.04A2.083,2.083,0,0,0,19.23,6.72L17.7,5.2A2.083,2.083,0,0,0,16.17,4.88L14.7,6.34,17.66,9.3ZM12.04,7.72,3.32,16.44a.439.439,0,0,0-.11.23L2,21.68a.448.448,0,0,0,.54.54l5.01-1.21a.439.439,0,0,0,.23-.11L16.28,11.96Z" />
          <path d="M17.66,9.3,14.7,6.34,12.04,7.72,14.9,10.6 Z" class="fill-current text-white"/>
          <path d="M20,11a1,1,0,0,0-1,1v6a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V5A1,1,0,0,1,4,4H10a1,1,0,0,0,0-2H4A3,3,0,0,0,1,5V18a3,3,0,0,0,3,3H18a3,3,0,0,0,3-3V12A1,1,0,0,0,20,11Z" />
        </svg>
        <span>Add to Cart</span>
      </button>

      <!-- Subtle background glow -->
      <div class="absolute inset-[10%] rounded-full bg-yellow-300 dark:hidden opacity-30 blur-xl group-hover:opacity-50 transition-opacity duration-300"></div>
      <div class="absolute inset-[10%] rounded-full bg-yellow-800 hidden dark:block opacity-30 blur-xl group-hover:opacity-50 transition-opacity duration-300"></div>

      <!-- Corner light flares -->
      <div class="absolute top-0 left-0 w-8 h-8 rounded-full bg-white opacity-20 blur-md group-hover:opacity-40 transition-opacity duration-300"></div>
      <div class="absolute bottom-0 right-0 w-8 h-8 rounded-full bg-orange-200 opacity-20 blur-md group-hover:opacity-40 transition-opacity duration-300"></div>
    </div>
  </div>
</div>