360_viewer_component

<div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 flex items-center justify-center p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
  <div class="relative w-full max-w-4xl bg-gradient-to-br from-purple-300 via-pink-300 to-yellow-300 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-800 rounded-3xl shadow-2xl p-8 transform transition-all duration-300 hover:scale-[1.01] overflow-hidden border-2 border-purple-400 dark:border-purple-700">
    <!-- 'Glass' inset effect -->
    <div class="absolute inset-4 -m-2 rounded-2xl bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm shadow-inner-lg dark:bg-black dark:bg-opacity-20"></div>

    <div class="relative z-10 flex flex-col lg:flex-row gap-8">
      <!-- Product Image / 360 Viewer Area -->
      <div class="flex-1 lg:w-3/5 relative bg-white dark:bg-gray-700 rounded-2xl shadow-xl overflow-hidden p-4 group">
        <img src="https://picsum.photos/600/600?random=1" alt="360 Product View" class="w-full h-full object-contain rounded-xl transition-transform duration-500 group-hover:scale-105">
        <!-- 360 degree indicator disc -->
        <div class="absolute bottom-4 right-4 bg-purple-600 dark:bg-purple-900 rounded-full w-16 h-16 flex items-center justify-center shadow-lg transform group-hover:rotate-180 transition-transform duration-700">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M9.546 1.046a.5.5 0 01.908 0l2 3.5a.5.5 0 01-.454.704H7.992a.5.5 0 01-.454-.704l2-3.5zM12.93 16.924a.5.5 0 01.707 0l2 2a.5.5 0 01.011.707l-2 2a.5.5 0 01-.707-.011l-1.92-1.92-1.92 1.92A.5.5 0 018.069 20a.5.5 0 01-.011.707l-2-2a.5.5 0 01-.707-.011l-2-2a.5.5 0 01.707-.707L5 17.062V13.5a.5.5 0 011 0v3.562l1.93-1.93a.5.5 0 01.707 0l2 2z" clip-rule="evenodd"></path>
          </svg>
           <span class="absolute text-xs text-white -bottom-4">360°</span>
        </div>

        <!-- Skeuomorphic controls (dials/buttons) -->
        <div class="absolute bottom-4 left-4 flex space-x-2">
          <button class="w-12 h-12 bg-gradient-to-br from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 active:from-green-600 active:to-blue-700 text-white rounded-full flex items-center justify-center shadow-md border-2 border-green-300 dark:border-green-800 transform active:scale-95 transition-all duration-100">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
          </button>
          <button class="w-12 h-12 bg-gradient-to-br from-orange-400 to-red-500 hover:from-orange-500 hover:to-red-600 active:from-orange-600 active:to-red-700 text-white rounded-full flex items-center justify-center shadow-md border-2 border-orange-300 dark:border-orange-800 transform active:scale-95 transition-all duration-100">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 15.707a1 1 0 010-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

      <!-- Product Details & Options -->
      <div class="flex-1 lg:w-2/5 flex flex-col gap-6">
        <!-- Product Title & Price -->
        <div class="bg-white dark:bg-gray-700 rounded-2xl p-6 shadow-xl border-2 border-pink-400 dark:border-pink-700">
          <h2 class="text-4xl lg:text-5xl font-extrabold text-purple-800 dark:text-purple-300 mb-2 drop-shadow-md">Radiant Glow Elixir</h2>
          <p class="text-2xl font-bold text-pink-600 dark:text-pink-400">$99.00</p>
        </div>

        <!-- Color Options (Skeuomorphic buttons) -->
        <div class="bg-white dark:bg-gray-700 rounded-2xl p-6 shadow-xl border-2 border-yellow-400 dark:border-yellow-700">
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Choose Shade:</h3>
          <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
            <button class="w-14 h-14 bg-red-400 rounded-full shadow-md border-4 border-transparent hover:border-red-600 dark:hover:border-red-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
            <button class="w-14 h-14 bg-teal-400 rounded-full shadow-md border-4 border-transparent hover:border-teal-600 dark:hover:border-teal-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
            <button class="w-14 h-14 bg-blue-400 rounded-full shadow-md border-4 border-transparent hover:border-blue-600 dark:hover:border-blue-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
            <button class="w-14 h-14 bg-yellow-400 rounded-full shadow-md border-4 border-transparent hover:border-yellow-600 dark:hover:border-yellow-900 transform transition-all duration-200 active:scale-90 relative selected">
              <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
              <span class="absolute inset-0 ring-4 ring-yellow-500 dark:ring-yellow-400 rounded-full"></span>
            </button>
            <button class="w-14 h-14 bg-purple-400 rounded-full shadow-md border-4 border-transparent hover:border-purple-600 dark:hover:border-purple-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
          </div>
        </div>

        <!-- Add to Cart Button -->
        <button class="w-full bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 active:from-green-700 active:to-blue-800 text-white font-extrabold text-2xl py-4 rounded-full shadow-2xl skew-y-1 hover:skew-y-0 transform transition-all duration-300 border-4 border-green-400 dark:border-green-700 dark:text-blue-200">
          <span class="drop-shadow-md">ADD TO BAG</span>
        </button>
      </div>
    </div>

    <!-- Decorative light/shadow effects for skeuomorphism -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-white bg-opacity-30 rounded-full transform -translate-x-1/2 -translate-y-1/2 blur-2xl opacity-60 pointer-events-none dark:hidden"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-pink-400 bg-opacity-30 rounded-full transform translate-x-1/2 translate-y-1/2 blur-2xl opacity-60 pointer-events-none dark:hidden"></div>
  </div>
</div>