360_Viewer_Component

<div class="flex items-center justify-center p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] focus-within:ring-4 focus-within:ring-stone-400 dark:focus-within:ring-stone-600 outline-none">
    <div class="relative pb-56 sm:pb-64 md:pb-72 lg:pb-80 xl:pb-96 overflow-hidden transform group cursor-grab active:cursor-grabbing animated-hover">
      <!-- Background image to simulate 360 viewer area -->
      <img src="https://picsum.photos/1200/800?random=1" alt="Product view" class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105 group-active:scale-100 rounded-t-lg" aria-label="360 degree product view area">

      <!-- Interactive Overlay -->
      <div class="absolute inset-0 flex flex-col items-center justify-center bg-stone-900/10 dark:bg-stone-700/20 transition-all duration-300 group-hover:bg-stone-900/20 dark:group-hover:bg-stone-700/30 group-active:bg-stone-900/5 dark:group-active:bg-stone-700/5 rounded-t-lg">
        <svg class="w-16 h-16 sm:w-20 sm:h-20 text-white opacity-90 transition-all duration-300 transform group-hover:scale-110 group-hover:opacity-100 group-active:scale-95 group-active:opacity-80" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path clip-rule="evenodd" fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75S17.385 21.75 12 21.75 2.25 17.385 2.25 12zm1.605 8.682a.75.75 0 10-1.24-.967 11.25 11.25 0 01-1.61-4.463 11.25 11.25 0 01-1.612-4.463.75.75 0 10-1.24-.967c-1.325 1.76-2.553 3.614-3.66 5.549a1.75 1.75 0 000 1.902c1.107 1.935 2.335 3.789 3.66 5.549zM12 4.125a.75.75 0 00-.75.75V11.25c0 .414.336.75.75.75h4.875a.75.75 0 000-1.5H12V4.875a.75.75 0 00-.75-.75z"></path>
        </svg>
        <p class="mt-2 text-sm sm:text-base text-white font-semibold transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">Click and drag to rotate</p>
      </div>
    </div>

    <div class="p-4 sm:p-6 md:p-8 bg-white dark:bg-stone-800">
      <h2 class="text-xl sm:text-2xl md:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-2 transition-colors duration-300">Premium Product Showcase</h2>
      <p class="text-sm sm:text-base text-stone-600 dark:text-stone-300 mb-4 leading-relaxed transition-colors duration-300">
        Experience every intricate detail of our craftsmanship. Use the interactive viewer above to explore the product from all angles.
      </p>
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Company representative" class="w-10 h-10 rounded-full object-cover shadow-md">
          <div>
            <p class="text-stone-700 dark:text-stone-200 font-medium text-sm sm:text-base">Acme Innovations Inc.</p>
            <p class="text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Leading the future since 1999</p>
          </div>
        </div>
        <button class="flex items-center px-4 py-2 bg-stone-700 hover:bg-stone-800 dark:bg-stone-600 dark:hover:bg-stone-700 text-white rounded-md font-medium text-sm sm:text-base transition-all duration-300 transform active:scale-95 shadow-lg focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          <svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
          </svg>
          View Product Video
        </button>
      </div>
    </div>
  </div>
</div>

<style>
/* Not strictly Tailwind but for the 'microinteraction' feel if JS was allowed */
/* This pseudo-class is for demonstration of where micro-interactions would be */
.animated-hover:hover {
  /* Example: add a subtle transform or shadow on hover. Tailwind handles this with utility classes. */
}

.group-active .group-hover\:opacity-100 {
    opacity: 0.8; /* Subtle change when active */
}

.group-active img {
    transform: scale(0.98); /* Simulating a 'push' effect on interaction */
}
</style>