Add to Cart Button Component

<div class="flex flex-col items-center justify-center space-y-4 p-4 bg-white dark:bg-gray-800 border-2 border-black dark:border-white rounded-lg shadow-md">
    <img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-lg">
    <div class="flex flex-col items-center text-center">
        <h2 class="text-lg font-bold text-black dark:text-white">Product Name</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300">This is a brief description of the product that gives the user an idea of what they're adding to their cart.</p>
        <button class="mt-4 px-6 py-3 bg-yellow-500 text-white font-bold text-sm uppercase rounded-md transition-all duration-300 transform hover:bg-yellow-600 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-400 dark:text-black dark:hover:bg-yellow-500">
            Add to Cart
        </button>
    </div>
</div>