360° Viewer Component

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="relative w-full max-w-lg rounded-lg shadow-lg overflow-hidden">
        <!-- 360 Viewer Wrapper -->
        <div class="aspect-w-16 aspect-h-9">
            <img class="rounded-lg object-cover" src="https://picsum.photos/800/600" alt="360° Product View" />
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white dark:bg-gray-800 rounded-full p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
                <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" />
            </div>
        </div>
    </div>

    <div class="mt-4 text-center">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Product Name</h2>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the product showcasing its features and benefits.</p>
    </div>

    <div class="flex justify-center mt-4 space-x-4">
        <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">View Details</button>
        <button class="bg-green-500 dark:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">Buy Now</button>
    </div>
</div>