360_viewer_industrial_finance

<div class="p-4 sm:p-6 lg:p-8 bg-zinc-100 dark:bg-zinc-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl mx-auto rounded-xl overflow-hidden shadow-2xl transition-all duration-300 transform
              bg-gradient-to-br from-red-400 via-yellow-400 to-green-400
              dark:from-red-700 dark:via-purple-700 dark:to-blue-700
              p-0.5">
    <div class="bg-zinc-800 dark:bg-zinc-950 rounded-xl p-6 sm:p-8 lg:p-10 border-t border-b border-zinc-700 dark:border-zinc-800">
      <div class="flex flex-col md:flex-row items-center gap-6 sm:gap-8 lg:gap-10">
        <!-- Left Section: 360 Viewer Placeholder -->
        <div class="w-full md:w-2/3 relative aspect-video bg-zinc-700 dark:bg-zinc-800 rounded-lg overflow-hidden border border-zinc-600 dark:border-zinc-700 shadow-inner flex items-center justify-center">
          <img src="https://picsum.photos/800/450?random=1" alt="360-degree financial product view" class="absolute inset-0 w-full h-full object-cover opacity-70 filter grayscale brightness-75">
          <div class="absolute inset-0 bg-gradient-to-br from-red-500/30 via-yellow-500/30 to-green-500/30 dark:from-red-800/30 dark:via-purple-800/30 dark:to-blue-800/30 mix-blend-multiply"></div>
          <div class="relative z-10 text-white text-center flex flex-col items-center justify-center p-4">
            <svg class="w-12 h-12 sm:w-16 sm:h-16 text-zinc-300 dark:text-zinc-500 mb-2 animate-pulse" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <p class="text-lg sm:text-xl font-bold text-zinc-200 dark:text-zinc-400 drop-shadow-md">360° Product View</p>
            <p class="text-sm sm:text-base text-zinc-400 dark:text-zinc-600 mt-1">Drag to explore</p>
          </div>
          <div class="absolute bottom-3 right-3 flex space-x-2">
            <button class="p-2 bg-zinc-600/70 hover:bg-zinc-500/70 rounded-full text-white backdrop-blur-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-400">
              <svg class="w-5 h-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
            </button>
            <button class="p-2 bg-zinc-600/70 hover:bg-zinc-500/70 rounded-full text-white backdrop-blur-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-400">
              <svg class="w-5 h-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
            </button>
          </div>
        </div>

        <!-- Right Section: Product Details -->
        <div class="w-full md:w-1/3 flex flex-col justify-between text-zinc-300 dark:text-zinc-400">
          <div>
            <h2 class="text-xl sm:text-2xl lg:text-3xl font-extrabold mb-2 uppercase tracking-wide text-transparent bg-clip-text
                       bg-gradient-to-r from-red-400 via-yellow-400 to-green-400
                       dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
                       drop-shadow-lg">
              Investment Portfolio
            </h2>
            <p class="text-sm sm:text-base mb-4 text-zinc-400 dark:text-zinc-500 leading-relaxed">
              Explore the intricate details of your diversified financial assets.
              This interactive view provides a dynamic perspective.
            </p>
          </div>

          <div class="space-y-3 mt-4 text-sm sm:text-base font-mono">
            <p class="flex justify-between items-center">
              <span class="font-semibold text-zinc-200 dark:text-zinc-300">Current Value:</span>
              <span class="text-green-400 dark:text-lime-400 font-bold tracking-wider">$1,234,567.89</span>
            </p>
            <p class="flex justify-between items-center">
              <span class="font-semibold text-zinc-200 dark:text-zinc-300">Daily Change:</span>
              <span class="text-emerald-400 dark:text-teal-400">+1.23%</span>
            </p>
            <p class="flex justify-between items-center">
              <span class="font-semibold text-zinc-200 dark:text-zinc-300">Growth Rate (YTD):</span>
              <span class="text-blue-400 dark:text-sky-400">+18.75%</span>
            </p>
          </div>

          <button class="mt-6 w-full py-3 px-4 rounded-lg font-bold uppercase tracking-wider shadow-lg transform active:scale-95 transition-transform duration-200
                         text-zinc-900 dark:text-white
                         bg-gradient-to-r from-cyan-400 via-lightBlue-500 to-indigo-600
                         hover:from-cyan-500 hover:via-lightBlue-600 hover:to-indigo-700
                         dark:from-purple-500 dark:via-pink-500 dark:to-orange-500
                         dark:hover:from-purple-600 dark:hover:via-pink-600 dark:hover:to-orange-600
                         focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-400 dark:focus:ring-pink-400
                         border border-zinc-700 dark:border-zinc-800">
            View Full Report
          </button>
        </div>
      </div>
    </div>
  </div>
</div>