360_Viewer_Component_Watercolor_Corporate_Blues

<div class="relative min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4 dark:from-gray-900 dark:to-gray-800 font-sans">

  <!-- Top Header Section (For Booking/Reservation context) -->
  <div class="max-w-7xl mx-auto mb-6 p-4 bg-white/70 backdrop-blur-sm rounded-lg shadow-xl dark:bg-gray-800/70 border border-blue-200 dark:border-gray-700">
    <div class="flex flex-col md:flex-row justify-between items-center">
      <h1 class="text-3xl font-extrabold text-blue-800 dark:text-blue-300 mb-2 md:mb-0">Explore Our Space in 360°</h1>
      <div class="flex items-center space-x-4">
        <div class="relative group">
          <button class="px-6 py-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition duration-300 ease-in-out shadow-lg transform hover:scale-105">
            Book Now
          </button>
          <div class="absolute hidden group-hover:block whitespace-nowrap bg-blue-700 text-white text-xs rounded py-1 px-2 right-0 bottom-full mb-2 origin-bottom scale-0 group-hover:scale-100 transition-transform duration-200 ease-out">
            Start Your Reservation
          </div>
        </div>
        <button class="p-2 text-blue-600 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-100 rounded-full hover:bg-blue-100 dark:hover:bg-gray-700 transition duration-300 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
          <span class="sr-only">Add to Calendar</span>
        </button>
      </div>
    </div>
  </div>

  <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Left Panel: 360 Viewer Placeholder -->
    <div class="lg:col-span-2 relative aspect-video bg-white/80 dark:bg-gray-800/80 rounded-xl shadow-xl overflow-hidden border border-blue-200 dark:border-gray-700 group">
      <img class="w-full h-full object-cover" src="https://picsum.photos/1200/800?random=1" alt="360 Degree View Placeholder">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100/50 via-blue-200/50 to-indigo-200/50 dark:from-gray-700/50 dark:via-gray-800/50 dark:to-gray-900/50 opacity-90"></div>

      <!-- Artistic Overlay -->
      <div class="absolute inset-0 pointer-events-none opacity-50 dark:opacity-30" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\' preserveAspectRatio=\'none\'><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' fill=\'none\'/><path d=\'M0,50 C25,25 75,75 100,50 L100,0 L0,0 Z\' fill=\'%23add8e6\'/><path d=\'M0,50 C25,75 75,25 100,50 L100,100 L0,100 Z\' fill=\'%2387cefa\'/></svg>'); background-size: 100% 100%;"></div>

      <div class="absolute inset-0 flex flex-col items-center justify-center p-4">
        <h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-blue-900 dark:text-blue-100 drop-shadow-lg text-center leading-snug tracking-tight mb-4 group-hover:scale-105 transition duration-300 ease-out">
          Immersive 360° Tour
        </h2>
        <p class="text-xl md:text-2xl text-blue-800 dark:text-blue-200 text-center max-w-lg mb-8 drop-shadow-md group-hover:translate-y-1 transition duration-300 ease-out">
          Click to activate the interactive experience.
        </p>
        <button class="relative px-8 py-3 bg-blue-700 text-white text-lg font-semibold rounded-full shadow-2xl hover:bg-blue-800 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 overflow-hidden group">
          <span class="absolute inset-0 bg-gradient-to-r from-blue-500 to-indigo-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <span class="relative z-10 flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
            </svg>
            Launch 360° Viewer
          </span>
        </button>
      </div>
    </div>

    <!-- Right Panel: Controls & Information -->
    <div class="flex flex-col space-y-6">

      <!-- Hotspot Navigation -->
      <div class="bg-white/80 dark:bg-gray-800/80 p-6 rounded-xl shadow-lg border border-blue-200 dark:border-gray-700">
        <h3 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4">Navigate Hotspots</h3>
        <div class="grid grid-cols-2 lg:grid-cols-3 gap-3">
          <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-gray-700 dark:text-blue-200 dark:hover:bg-gray-900 transition duration-200 ease-in-out text-sm font-medium shadow-sm hover:shadow-md">
            Lobby
          </button>
          <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-gray-700 dark:text-blue-200 dark:hover:bg-gray-900 transition duration-200 ease-in-out text-sm font-medium shadow-sm hover:shadow-md">
            Conference Room
          </button>
          <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-gray-700 dark:text-blue-200 dark:hover:bg-gray-900 transition duration-200 ease-in-out text-sm font-medium shadow-sm hover:shadow-md">
            Office Desk Area
          </button>
          <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-gray-700 dark:text-blue-200 dark:hover:bg-gray-900 transition duration-200 ease-in-out text-sm font-medium shadow-sm hover:shadow-md">
            Breakroom
          </button>
          <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-gray-700 dark:text-blue-200 dark:hover:bg-gray-900 transition duration-200 ease-in-out text-sm font-medium shadow-sm hover:shadow-md">
            Reception
          </button>
        </div>
      </div>

      <!-- Interactive Controls -->
      <div class="bg-white/80 dark:bg-gray-800/80 p-6 rounded-xl shadow-lg border border-blue-200 dark:border-gray-700">
        <h3 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4">Viewer Controls</h3>
        <div class="grid grid-cols-2 gap-4">
          <button class="flex items-center justify-center px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 ease-in-out shadow-md focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
            </svg>
            Zoom In
          </button>
          <button class="flex items-center justify-center px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 ease-in-out shadow-md focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7" />
            </svg>
            Zoom Out
          </button>
          <button class="flex items-center justify-center px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 ease-in-out shadow-md focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 0h-4m4 0l-5-5" />
            </svg>
            Full Screen
          </button>
          <button class="flex items-center justify-center px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 ease-in-out shadow-md focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            Reset View
          </button>
        </div>
      </div>

      <!-- Additional Info/Testimonial -->
      <div class="bg-white/80 dark:bg-gray-800/80 p-6 rounded-xl shadow-lg border border-blue-200 dark:border-gray-700">
        <h3 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4">What Our Clients Say</h3>
        <div class="flex items-start">
          <img class="w-16 h-16 rounded-full mr-4 object-cover border-2 border-blue-300 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Client Avatar">
          <div>
            <p class="text-blue-900 dark:text-blue-100 italic mb-2">"The 360° tour was incredibly helpful in visualizing the space before my booking. Highly recommend!"</p>
            <p class="text-blue-700 dark:text-blue-300 font-semibold">Jane Doe, satisfied client</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>