360_viewer_component

<div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-black flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out border-2 border-transparent dark:border-transparent dark:hover:border-electric-blue-500 relative group">
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-electric-blue-500 to-lime-green-500 opacity-20 dark:from-hot-pink-500 dark:to-electric-blue-500 dark:opacity-10 rounded-lg group-hover:opacity-30 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
    <div class="relative p-6 sm:p-8 md:p-10 z-10">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4 sm:mb-6 leading-tight tracking-tighter text-center sm:text-left">
        <span class="text-electric-blue-500 dark:text-hot-pink-500">360°</span> <span class="text-lime-green-500 dark:text-electric-blue-500">Explorer</span>
      </h2>

      <div class="relative w-full h-48 sm:h-64 md:h-80 lg:h-96 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden mb-6 sm:mb-8 flex items-center justify-center border-4 border-electric-blue-400 dark:border-hot-pink-400 transform hover:scale-[1.01] transition-transform duration-300">
        <!-- Placeholder for 360 image (could be an actual 360 viewer library in a real app) -->
        <img src="https://picsum.photos/800/600?random=1" alt="360-degree view placeholder" class="w-full h-full object-cover select-none filter group-hover:blur-sm transition-all duration-300">
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 dark:bg-opacity-60 text-white text-base sm:text-lg font-bold opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          Drag to rotate (Simulated)
        </div>
      </div>

      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 sm:mb-8 leading-relaxed">
        Immerse yourself in a comprehensive, interactive 360-degree view of complex structures and environments. Ideal for <span class="font-semibold text-electric-blue-600 dark:text-hot-pink-400">detailed study</span> and <span class="font-semibold text-lime-green-600 dark:text-electric-blue-400">enhanced visualization</span>.
      </p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
        <div class="flex items-center space-x-3">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 text-lime-green-500 dark:text-electric-blue-500 flex-shrink-0" 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 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9v-c1.333-3.333-2.667-6.667-7-10"></path></svg>
          <span class="text-base sm:text-lg font-medium text-gray-800 dark:text-gray-200">Interactive Exploration</span>
        </div>
        <div class="flex items-center space-x-3">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 text-electric-blue-500 dark:text-hot-pink-500 flex-shrink-0" 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="M9 3v2m6-2v2M9 19v2m6-2v2M5 7h14a2 2 0 012 2v7a2 2 0 01-2 2H5a2 2 0 01-2-2V9a2 2 0 012-2zm0 0a2 2 0 012-2h4a2 2 0 012 2m0 0a2 2 0 012 2v4m-4-2a2 2 0 01-2 2h-4a2 2 0  01-2-2v-4a2 2 0 012-2h4a2 2 0 012 2z"></path></svg>
          <span class="text-base sm:text-lg font-medium text-gray-800 dark:text-gray-200">Enhanced Learning</span>
        </div>
      </div>

      <div class="mt-8 sm:mt-10 text-center">
        <button class="inline-flex items-center justify-center px-8 py-3 rounded-full text-lg sm:text-xl font-bold bg-electric-blue-500 dark:bg-hot-pink-500 text-white shadow-xl hover:shadow-electric-blue-400/50 dark:hover:shadow-hot-pink-400/50 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-electric-blue-300 dark:focus:ring-hot-pink-300 group relative overflow-hidden">
          <span class="absolute inset-0 bg-gradient-to-r from-lime-green-400 to-electric-blue-600 dark:from-electric-blue-400 dark:to-hot-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-pulse-light"></span>
          <span class="relative z-10">Explore Now</span>
          <svg class="ml-2 w-5 h-5 sm:w-6 sm:h-6 relative z-10" 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>
        </button>
      </div>
    </div>
  </div>

  <style>
    /* Custom colors for neon/electric theme */
    .text-electric-blue-500 {
      color: #00eeff; /* Brighter electric blue */
    }
    .dark .text-electric-blue-500 {
      color: #00eeff;
    }
    .text-hot-pink-500 {
      color: #ff0077; /* Hotter pink */
    }
    .dark .text-hot-pink-500 {
      color: #ff0077;
    }
    .text-lime-green-500 {
      color: #aeff00; /* Vibrant lime green */
    }
    .dark .text-lime-green-500 {
      color: #aeff00;
    }
    .border-electric-blue-400 {
      border-color: #00c0e0;
    }
    .dark .border-hot-pink-400 {
      border-color: #e00060;
    }

    .bg-electric-blue-500 {
      background-color: #00eeff;
    }
    .dark .bg-hot-pink-500 {
      background-color: #ff0077;
    }

    .from-electric-blue-500 {
      --tw-gradient-from: #00eeff var(--tw-gradient-from-position);
      --tw-gradient-to: rgba(0, 238, 255, 0) var(--tw-gradient-to-position);
    }
    .to-lime-green-500 {
      --tw-gradient-to: #aeff00 var(--tw-gradient-to-position);
    }
    .dark .from-hot-pink-500 {
      --tw-gradient-from: #ff0077 var(--tw-gradient-from-position);
      --tw-gradient-to: rgba(255, 0, 119, 0) var(--tw-gradient-to-position);
    }
    .dark .to-electric-blue-500 {
      --tw-gradient-to: #00eeff var(--tw-gradient-to-position);
    }

    .hover\:shadow-electric-blue-400\/50:hover {
      box-shadow: 0 10px 15px -3px rgba(0, 192, 224, 0.5), 0 4px 6px -2px rgba(0, 192, 224, 0.05);
    }
    .dark .hover\:shadow-hot-pink-400\/50:hover {
      box-shadow: 0 10px 15px -3px rgba(224, 0, 96, 0.5), 0 4px 6px -2px rgba(224, 0, 96, 0.05);
    }

    @keyframes pulse-light {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 0.8;
      }
      100% {
        opacity: 0;
      }
    }

    .animate-pulse-light {
      animation: pulse-light 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
  </style>
</div>