360_viewer_component_sports_grayscale

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-50 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans min-h-screen flex items-center justify-center">
  <div class="relative w-full max-w-4xl bg-white dark:bg-gray-700 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-600 transform transition-all duration-300 hover:scale-105 p-6 sm:p-8 md:p-10">
    <!-- Artistic Overlay Elements -->
    <div class="absolute inset-0 pointer-events-none opacity-20 dark:opacity-10">
      <div class="absolute top-0 left-0 w-2/3 h-2/3 bg-gray-400 dark:bg-gray-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 transform -translate-x-1/4 -translate-y-1/4"></div>
      <div class="absolute bottom-0 right-0 w-1/2 h-1/2 bg-gray-300 dark:bg-gray-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 transform translate-x-1/4 translate-y-1/4"></div>
    </div>

    <div class="relative z-10 text-center">
      <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-4 text-gray-800 dark:text-gray-100 leading-tight">
        <span class="block">Athlete 360° View</span>
        <span class="block text-base sm:text-lg font-medium text-gray-600 dark:text-gray-300">Deep Dive into Performance</span>
      </h2>
      <p class="mb-8 text-gray-600 dark:text-gray-300 text-sm sm:text-base max-w-2xl mx-auto">
        Explore every angle of their technique and form. Pinch, drag, and zoom for an immersive experience.
      </p>

      <div class="relative w-full aspect-video bg-gray-100 dark:bg-gray-800 rounded-md overflow-hidden shadow-inner border border-gray-300 dark:border-gray-600 mb-6 group">
        <img src="https://picsum.photos/800/450?random=1" alt="360 view placeholder" class="w-full h-full object-cover transition-opacity duration-500 group-hover:opacity-80">
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="bg-white dark:bg-gray-900 bg-opacity-80 dark:bg-opacity-80 p-4 rounded-full shadow-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm">
            <svg class="h-10 w-10 text-gray-700 dark:text-gray-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
              <path fill="none" d="M0 0h24v24H0z"/>
            </svg>
          </div>
        </div>
      </div>

      <div class="flex flex-wrap justify-center gap-4 text-sm">
        <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-400 dark:border-gray-600 rounded-full shadow-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 6h2v8h-2zm0 10h2v2h-2z"/>
          </svg>
          More Details
        </a>
        <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-400 dark:border-gray-600 rounded-full shadow-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
          </svg>
          View Analysis
        </a>
      </div>
    </div>
  </div>
</div>