Entertainment Grid Layout 组件

<div class="bg-white dark:bg-gray-900 py-8 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="container mx-auto">
    <div class="mb-8 text-center">
      <h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 dark:text-white mb-2">
        Featured Entertainment
      </h2>
      <p class="mt-2 text-lg leading-8 text-gray-600 dark:text-gray-300">
        Explore our curated selection of movies, shows, and more.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Item 1 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-orange-500 bg-opacity-10 dark:bg-orange-900 dark:bg-opacity-20 border border-orange-500 border-opacity-20 dark:border-orange-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=1" alt="Movie Still 1" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-orange-700 dark:text-orange-300 mb-1">The Grand Adventure</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A captivating journey through uncharted territories. (2023)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-orange-600 dark:text-orange-400">⭐ 4.8</span>
            <a href="#" class="text-sm font-medium text-orange-700 dark:text-orange-300 hover:text-orange-900 dark:hover:text-orange-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-green-500 bg-opacity-10 dark:bg-green-900 dark:bg-opacity-20 border border-green-500 border-opacity-20 dark:border-green-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=2" alt="Movie Still 2" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-green-700 dark:text-green-300 mb-1">City of Echoes</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A thrilling mystery unfolding in a futuristic cityscape. (2022)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-green-600 dark:text-green-400">⭐ 4.5</span>
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 3 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-purple-500 bg-opacity-10 dark:bg-purple-900 dark:bg-opacity-20 border border-purple-500 border-opacity-20 dark:border-purple-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=3" alt="Movie Still 3" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-1">Quantum Leap Series</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">Science fiction drama exploring alternate dimensions. (Series)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-purple-600 dark:text-purple-400">⭐ 4.9</span>
            <a href="#" class="text-sm font-medium text-purple-700 dark:text-purple-300 hover:text-purple-900 dark:hover:text-purple-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 4 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-orange-500 bg-opacity-10 dark:bg-orange-900 dark:bg-opacity-20 border border-orange-500 border-opacity-20 dark:border-orange-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=4" alt="Movie Still 4" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-orange-700 dark:text-orange-300 mb-1">The Whispering Woods</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">An eerie tale of supernatural events in a secluded forest. (2023)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-orange-600 dark:text-orange-400">⭐ 4.3</span>
            <a href="#" class="text-sm font-medium text-orange-700 dark:text-orange-300 hover:text-orange-900 dark:hover:text-orange-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 5 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-green-500 bg-opacity-10 dark:bg-green-900 dark:bg-opacity-20 border border-green-500 border-opacity-20 dark:border-green-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=5" alt="Movie Still 5" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-green-700 dark:text-green-300 mb-1">Cosmic Symphony</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A documentary exploring the mysteries of the universe. (2021)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-green-600 dark:text-green-400">⭐ 4.7</span>
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 6 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-purple-500 bg-opacity-10 dark:bg-purple-900 dark:bg-opacity-20 border border-purple-500 border-opacity-20 dark:border-purple-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=6" alt="Movie Still 6" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-1">The Last Code</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A cyberpunk thriller set in a dystopian future. (2024)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-purple-600 dark:text-purple-400">⭐ 4.6</span>
            <a href="#" class="text-sm font-medium text-purple-700 dark:text-purple-300 hover:text-purple-900 dark:hover:text-purple-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>