Memphis_Content_Display_Component

<div class="font-sans p-4 sm:p-6 lg:p-8 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-50">

  <!-- Component Title (Optional) -->
  <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-gray-50 mb-8 sm:mb-12 text-center">
    <span class="relative inline-block">
      <span class="relative z-10">Today's Hot Picks</span>
      <span class="absolute inset-x-0 bottom-0 h-3 sm:h-4 lg:h-5 bg-fuchsia-500 transform -skew-x-12"></span>
    </span>
  </h2>

  <!-- Main Grid Container -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 lg:gap-10">

    <!-- Featured Card 1 (Larger, more prominent) -->
    <div class="md:col-span-2 lg:col-span-2 xl:col-span-2 relative overflow-hidden rounded-xl shadow-xl dark:shadow-2xl group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <div class="absolute top-4 left-4 p-2 bg-fuchsia-500 text-white text-xs font-bold rounded-br-lg transform -rotate-6 z-20">TRENDING</div>

      <img src="https://picsum.photos/800/450?random=1" alt="Featured Content Image" class="relative w-full h-64 sm:h-80 md:h-96 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">

      <div class="relative p-5 sm:p-6 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-xl sm:text-2xl font-bold mb-2 text-gray-900 dark:text-gray-50">The Midnight Chronicles</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">Unravel the secrets of a forgotten city in this gripping new sci-fi epic. Prepare for mind-bending twists!</p>

        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <span class="mr-2">4.8</span> (1.2K Reviews)
          <span class="mx-2">•</span>
          <span>Action, Sci-Fi</span>
        </div>

        <button class="relative flex items-center justify-center px-6 py-2 rounded-lg bg-fuchsia-500 text-white font-bold overflow-hidden group hover:bg-fuchsia-600 transition-all duration-300 ease-in-out transform hover:scale-105">
          <span class="absolute w-0 h-0 transition-all duration-300 ease-out bg-black rounded-full group-hover:w-32 group-hover:h-32 opacity-10"></span>
          <span class="relative z-10">Watch Now</span>
          <svg class="w-5 h-5 ml-2 -mr-1 relative z-10" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>

    <!-- Content Cards (Smaller, repeatable) -->
    <!-- Card 1 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=2" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Echoes of the Past</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A chilling mystery unfolds in a secluded mountain town. Can they uncover the truth?</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.5
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=3" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Cosmic Voyage</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">Journey through distant galaxies in this visually stunning animated series.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.9
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=4" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">The Last Pixel</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A classic console game comes to life, but something is wrong with the code...</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.6
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 4 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=5" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Rhythm City Beats</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">Follow the rise of a street dance crew in this vibrant musical drama.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.7
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 5 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=6" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">The Quantum Leap</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A scientist invents a device that changes reality, with unexpected consequences.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.4
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 6 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=7" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Arcade Aces</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A group of friends discovers a magical arcade machine that transports them.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.2
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

  </div>

  <!-- Section for More Content/Navigation (e.g., categories or pagination) -->
  <div class="mt-12 text-center">
    <button class="relative flex items-center justify-center mx-auto px-8 py-3 text-lg rounded-full bg-black text-white font-bold overflow-hidden group hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 transition-all duration-300 ease-in-out transform hover:scale-105">
      <span class="absolute w-0 h-0 transition-all duration-300 ease-out bg-fuchsia-500 rounded-full group-hover:w-full group-hover:h-full opacity-20"></span>
      <span class="relative z-10">Discover More Titles</span>
      <svg class="w-5 h-5 ml-2 relative z-10" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

</div>