360_viewer_marketplace_component

<div class="font-sans antialiased bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-50 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="flex flex-col lg:flex-row max-w-7xl w-full bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01] border border-gray-100 dark:border-gray-700">

    <!-- Image Viewer Section -->
    <div class="lg:w-3/5 p-4 sm:p-6 relative overflow-hidden flex flex-col items-center justify-center bg-gradient-to-br from-purple-50 dark:from-gray-700 to-white dark:to-gray-800 group">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/white-prism.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-fish-skin.png')] opacity-10 rounded-3xl"></div>

      <div class="relative w-full aspect-video md:aspect-[16/10] lg:aspect-[16/9] max-w-xl group-hover:scale-[1.02] transform transition-transform duration-500 ease-out">
        <img src="https://picsum.photos/id/401/800/600" alt="Product 360 View" class="w-full h-full object-contain rounded-2xl shadow-lg border border-gray-200 dark:border-gray-600 animate-fade-in" loading="lazy">
        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <button class="flex items-center justify-center p-3 rounded-full bg-white/80 dark:bg-gray-700/80 backdrop-blur-sm text-gray-800 dark:text-gray-200 shadow-xl hover:scale-110 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-accent-400/50 dark:focus:ring-accent-600/50" aria-label="Rotate 360 degrees">
            <svg class="w-8 h-8 md:w-10 md:h-10 text-rose-500 dark:text-rose-400" 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="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 13V4m7 14.054V21.5M10 19.5h2M12 2.5v16.054m-2 0H14m1.966-2.502L18 16.5m-3-12l3-2.5m-5.466 2.502L6 16.5m3-12L6 4.5m10 8l-2 2h-4c-1.105 0-2 .895-2 2v-.5c0-1.657 1.343-3 3-3h3a2 2 0 110 4h-3a2 2 0 100 4h3a2 2 0 100 4h-3a2 2 0 100 4H10c-1.105 0-2 .895-2 2z"></path>
            </svg>
          </button>
        </div>
      </div>

      <div class="flex justify-center mt-4 space-x-1 sm:mt-6">
        <button class="w-16 h-12 sm:w-20 sm:h-16 border-2 border-rose-500 dark:border-rose-400 rounded-lg overflow-hidden shadow-md transform scale-110 ring-2 ring-rose-300 dark:ring-rose-600 relative after:content-[''] after:absolute after:inset-0 after:opacity-20 after:bg-rose-500 dark:after:bg-rose-400" aria-label="View 1">
          <img src="https://picsum.photos/id/401/100/75" alt="Thumbnail 1" class="w-full h-full object-cover" loading="lazy">
        </button>
        <button class="w-16 h-12 sm:w-20 sm:h-16 border-2 border-gray-200 dark:border-gray-600 hover:border-rose-300 dark:hover:border-rose-500 rounded-lg overflow-hidden transition-all duration-200 shadow-sm relative after:content-[''] after:absolute after:inset-0 after:opacity-0 hover:after:opacity-5 after:bg-gray-900 dark:after:bg-white" aria-label="View 2">
          <img src="https://picsum.photos/id/402/100/75" alt="Thumbnail 2" class="w-full h-full object-cover" loading="lazy">
        </button>
        <button class="w-16 h-12 sm:w-20 sm:h-16 border-2 border-gray-200 dark:border-gray-600 hover:border-rose-300 dark:hover:border-rose-500 rounded-lg overflow-hidden transition-all duration-200 shadow-sm relative after:content-[''] after:absolute after:inset-0 after:opacity-0 hover:after:opacity-5 after:bg-gray-900 dark:after:bg-white" aria-label="View 3">
          <img src="https://picsum.photos/id/403/100/75" alt="Thumbnail 3" class="w-full h-full object-cover" loading="lazy">
        </button>
        <button class="hidden sm:inline-block w-16 h-12 sm:w-20 sm:h-16 border-2 border-gray-200 dark:border-gray-600 hover:border-rose-300 dark:hover:border-rose-500 rounded-lg overflow-hidden transition-all duration-200 shadow-sm relative after:content-[''] after:absolute after:inset-0 after:opacity-0 hover:after:opacity-5 after:bg-gray-900 dark:after:bg-white" aria-label="View 4">
          <img src="https://picsum.photos/id/404/100/75" alt="Thumbnail 4" class="w-full h-full object-cover" loading="lazy">
        </button>
      </div>
    </div>

    <!-- Product Details Section -->
    <div class="lg:w-2/5 p-6 sm:p-8 lg:p-10 flex flex-col justify-between relative bg-white dark:bg-gray-800">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/grunge-wall.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-geometric-pattern.png')] opacity-5 rounded-3xl"></div>
      <div class="relative z-10">
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-2 leading-tight text-gray-900 dark:text-gray-50 animate-fade-down">
          Artisanal Ceramic Vase
        </h1>
        <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 mb-6 font-medium animate-fade-down animation-delay-200">
          Hand-painted masterpiece for your home.
        </p>

        <div class="flex items-baseline mb-6 space-x-3">
          <span class="text-4xl sm:text-5xl font-bold text-rose-600 dark:text-rose-400 animate-fade-in animation-delay-400">$89.99</span>
          <span class="text-xl sm:text-2xl text-gray-400 dark:text-gray-500 line-through animate-fade-in animation-delay-500">$120.00</span>
          <span class="text-base text-green-600 dark:text-green-400 font-semibold animate-fade-in animation-delay-600">(25% OFF)</span>
        </div>

        <p class="text-sm sm:text-base text-gray-700 dark:text-gray-200 mb-6 leading-relaxed">
          Each vase is uniquely crafted by local artisans, featuring intricate watercolor-inspired patterns and a smooth, matte finish. Perfect for adding a touch of elegance to any room. Limited edition. Measures 10" high, 6" diameter.
        </p>

        <div class="mb-6 flex flex-wrap gap-3">
          <span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium shadow-sm border border-gray-200 dark:border-gray-600">Handmade</span>
          <span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium shadow-sm border border-gray-200 dark:border-gray-600">Unique Piece</span>
          <span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium shadow-sm border border-gray-200 dark:border-gray-600">Home Decor</span>
        </div>

        <div class="mb-6 flex flex-col sm:flex-row gap-4">
          <button class="flex-1 w-full sm:w-auto px-6 py-3 bg-rose-600 dark:bg-rose-500 text-white font-semibold rounded-xl shadow-lg hover:bg-rose-700 dark:hover:bg-rose-600 transition duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-700 animate-fade-up animation-delay-700">
            Add to Cart
          </button>
          <button class="flex-1 w-full sm:w-auto px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700 font-semibold rounded-xl shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 animate-fade-up animation-delay-800">
            <svg class="w-5 h-5 inline-block mr-2 -mt-0.5" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
            </svg>
            Wishlist
          </button>
        </div>

        <div class="mt-8 flex items-center justify-between text-gray-600 dark:text-gray-300 text-sm">
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Vendor Avatar" class="w-10 h-10 rounded-full border-2 border-rose-300 dark:border-rose-600 shadow-md" loading="lazy">
            <div>
              <p class="font-medium text-gray-800 dark:text-gray-100">Sold by <a href="#" class="text-rose-600 dark:text-rose-400 hover:underline">Artisan Crafts Co.</a></p>
              <p class="text-xs">Est. 2018 | 4.9 <span class="text-yellow-500">★</span></p>
            </div>
          </div>
          <div>
            <a href="#" class="flex items-center text-rose-600 dark:text-rose-400 hover:underline text-sm">
              View Store 
              <svg class="w-4 h-4 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Custom animations for a smoother feel */
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fade-down {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fade-up {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in { animation: fade-in 0.6s ease-out forwards; }
    .animate-fade-down { animation: fade-down 0.6s ease-out forwards; }
    .animate-fade-up { animation: fade-up 0.6s ease-out forwards; }

    /* Staggered animations */
    .animation-delay-100 { animation-delay: 0.1s; }
    .animation-delay-200 { animation-delay: 0.2s; }
    .animation-delay-300 { animation-delay: 0.3s; }
    .animation-delay-400 { animation-delay: 0.4s; }
    .animation-delay-500 { animation-delay: 0.5s; }
    .animation-delay-600 { animation-delay: 0.6s; }
    .animation-delay-700 { animation-delay: 0.7s; }
    .animation-delay-800 { animation-delay: 0.8s; }

    /* This is a placeholder for actual 360 viewer functionality */
    /* In a real application, this would be handled by JavaScript */
    /* For this HTML/CSS only component, clicking the 360 button
       or thumbnails wouldn't change the image, but the hover effects
       and visual cues are in place to suggest interactivity. */
  </style>
</div>