360_viewer_component

<div class="min-h-screen bg-gray-950 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans dark:bg-gray-950">
  <div class="w-full max-w-6xl bg-gray-900 rounded-xl shadow-2xl overflow-hidden border border-gray-800 dark:bg-gray-900 dark:border-gray-800">
    <div class="p-6 sm:p-8 lg:p-10">
      <div class="flex flex-col md:flex-row items-start justify-between mb-8">
        <div class="mb-6 md:mb-0">
          <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-2">
            <span class="bg-gradient-to-r from-purple-500 via-pink-500 to-blue-500 text-transparent bg-clip-text">Product </span>
            <span class="bg-gradient-to-r from-blue-400 to-cyan-400 text-transparent bg-clip-text">Overview</span>
          </h2>
          <p class="text-gray-400 text-md sm:text-lg lg:text-xl">Explore every angle of our cutting-edge solution.</p>
        </div>
        <div class="flex flex-wrap gap-3">
          <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-purple-600 to-pink-500 shadow-lg shadow-purple-900/50 hover:from-purple-700 hover:to-pink-600 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900">
            <svg class="inline-block w-4 h-4 mr-2 -ml-1 text-white" 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.552-3.282A1 1 0 0121 7.618v8.764a1 1 0 01-1.448.894L15 14m-5 4v-4a4 4 0 014-4h2a4 4 0 014 4v4a4 4 0 01-4 4h-2a4 4 0 01-4-4z"></path></svg>
            View Demo
          </button>
          <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-blue-600 to-cyan-500 shadow-lg shadow-blue-900/50 hover:from-blue-700 hover:to-cyan-600 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900">
            <svg class="inline-block w-4 h-4 mr-2 -ml-1 text-white" 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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
            Download Specs
          </button>
        </div>
      </div>

      <div class="relative aspect-video w-full rounded-lg overflow-hidden border-2 border-gray-700 shadow-xl shadow-gray-900/50 mb-8">
        <!-- Placeholder for 360 viewer. In a real application, this would be a JS-powered viewer. -->
        <img src="https://picsum.photos/1200/675?random=1" alt="360 Product View Placeholder" class="w-full h-full object-cover object-center animate-pulse-glow border-2 border-indigo-500/50 rounded-lg">
        <div class="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-60 backdrop-blur-sm text-white text-lg font-bold p-4 text-center rounded-lg border border-indigo-600/70">
          <p class="bg-gradient-to-r from-lime-400 to-green-400 text-transparent bg-clip-text text-xl sm:text-2xl lg:text-3xl font-extrabold">360° Interactive Viewer Coming Soon!</p>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
          <h3 class="text-xl font-bold text-white mb-3 flex items-center">
            <span class="inline-block w-3 h-3 rounded-full bg-cyan-400 mr-3 animate-ping-slow"></span>
            Key Feature 1
          </h3>
          <p class="text-gray-400 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
          <h3 class="text-xl font-bold text-white mb-3 flex items-center">
            <span class="inline-block w-3 h-3 rounded-full bg-purple-400 mr-3 animate-ping-slow"></span>
            Key Feature 2
          </h3>
          <p class="text-gray-400 text-sm">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
          <h3 class="text-xl font-bold text-white mb-3 flex items-center">
            <span class="inline-block w-3 h-3 rounded-full bg-pink-400 mr-3 animate-ping-slow"></span>
            Key Feature 3
          </h3>
          <p class="text-gray-400 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </div>

      <div class="text-center">
        <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-gray-900 bg-gradient-to-r from-lime-400 to-green-400 hover:from-lime-500 hover:to-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 focus:ring-offset-gray-900 transition duration-300 ease-in-out transform hover:scale-105">
          <svg class="-ml-1 mr-3 h-5 w-5 text-gray-900" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M7 4a1 1 0 011 1v4a1 1 0 01-2 0V5a1 1 0 011-1zm6 0a1 1 0 011 1v4a1 1 0 01-2 0V5a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
          Get a Free Consultation
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes ping-slow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
  }
  .animate-ping-slow {
    animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.5), 0 0 10px rgba(99, 102, 241, 0.3); border-color: rgba(99, 102, 241, 0.5); }
    50% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.8), 0 0 25px rgba(99, 102, 241, 0.5); border-color: rgba(99, 102, 241, 0.8); }
  }
  .animate-pulse-glow {
    animation: pulse-glow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>