360_viewer_component

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-6xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="grid grid-cols-1 lg:grid-cols-2 min-h-[400px]">

      <!-- Left Section: 360 Viewer Area -->
      <div class="relative bg-gradient-to-br from-purple-100 to-indigo-200 dark:from-purple-900 dark:to-indigo-950 flex items-center justify-center p-4 min-h-[300px]">
        <div class="absolute inset-0 bg-contain bg-center bg-no-repeat opacity-20 dark:opacity-10" style="background-image: url('https://www.svgrepo.com/show/511397/sphere-3d-rotate.svg');"></div>

        <!-- Main 360 Image Placeholder -->
        <div class="relative w-full max-w-lg aspect-square bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden border border-purple-300 dark:border-purple-600 shadow-lg group">
          <img src="https://picsum.photos/600/600?random=1" alt="360 Product View" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">

          <!-- Interactive Overlay - Mimics Rotation -->
          <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-30 dark:bg-opacity-50">
            <p class="text-white text-lg sm:text-xl font-bold tracking-wide animate-pulse">Rotate 360°</p>
          </div>

          <!-- Rotation Indicator -->
          <div class="absolute right-2 bottom-2 text-white bg-purple-600 dark:bg-purple-800 px-2 py-1 rounded-full text-xs opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300">
            Drag to spin
          </div>
        </div>

        <!-- Controls Placeholder -->
        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
          <button aria-label="Previous View" class="p-2 rounded-full bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 text-white shadow-md transition-all duration-200 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-purple-400">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
          </button>
          <button aria-label="Next View" class="p-2 rounded-full bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 text-white shadow-md transition-all duration-200 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-purple-400">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

      <!-- Right Section: Details & Interaction -->
      <div class="p-6 sm:p-8 lg:p-10 flex flex-col justify-between">
        <div>
          <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-3 leading-tight">
            Quantum 5000
          </h2>
          <p class="text-purple-600 dark:text-purple-400 font-semibold text-lg sm:text-xl mb-4">
            Next-Gen Interstellar Hub
          </p>
          <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-6">
            Explore the future with the Quantum 5000. Its innovative design and advanced features provide an unparalleled experience for any corporate venture. Precision engineering meets limitless possibilities.
          </p>

          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Key Features:</h3>
            <ul class="space-y-2 text-gray-600 dark:text-gray-400 text-sm sm:text-base">
              <li class="flex items-center group">
                <svg class="w-5 h-5 mr-2 text-purple-500 dark:text-purple-400 transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                <span class="transition-colors duration-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">Enhanced Modular Design</span>
              </li>
              <li class="flex items-center group">
                <svg class="w-5 h-5 mr-2 text-purple-500 dark:text-purple-400 transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                <span class="transition-colors duration-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">AI-Powered Decision Matrix</span>
              </li>
              <li class="flex items-center group">
                <svg class="w-5 h-5 mr-2 text-purple-500 dark:text-purple-400 transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                <span class="transition-colors duration-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">Galactic Connectivity Protocol</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- Call to Action / Pricing -->
        <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between mt-6 gap-4">
          <div class="sm:text-right text-gray-900 dark:text-white">
            <p class="text-sm text-gray-500 dark:text-gray-400">Starting from</p>
            <p class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400">$7,999<span class="text-xl font-normal">/unit</span></p>
          </div>
          <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-800">
            <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 15.422 4.26 16 5 16h11a1 1 0 100-2H5l1-1h10a1 1 0 00.894-.553l3-6A1 1 0 0019 4H9.68L8.174 1.67A1 1 0 007.05 1H3zM6 17a2 2 0 11-4 0 2 2 0 014 0zM16 17a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            Request a Demo
          </a>
        </div>
      </div>
    </div>
  </div>
</div>