Luxury_Premium_Heatmap_Component

<div class="font-sans antialiased bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
  <div class="container mx-auto max-w-7xl bg-white dark:bg-gray-850 shadow-xl rounded-xl overflow-hidden">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-3xl sm:text-4xl font-semibold mb-2 text-gray-900 dark:text-gray-100 tracking-tight leading-tight">
        Top Stories Heatmap
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl">
        Explore the most engaging articles and popular topics at a glance. Darker shades indicate higher engagement.
      </p>
    </div>

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

      <!-- Heatmap Item 1 -->
      <div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg"
        style="background: linear-gradient(to bottom right, #FFD700, #DAA520);">
        <div class="absolute inset-0 bg-black bg-opacity-10 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <span class="text-xs font-bold uppercase text-gray-900 dark:text-gray-800 tracking-wider mb-1 block">High Engagement</span>
            <h3 class="font-bold text-xl sm:text-2xl text-gray-800 dark:text-gray-900 leading-snug mb-2">
              <a href="#" class="hover:underline">Global Markets Brace for Economic Shift</a>
            </h3>
            <p class="text-sm text-gray-700 dark:text-gray-900 leading-relaxed mb-4">
              Analysts forecast significant changes in financial landscapes following recent policy announcements...
            </p>
          </div>
          <div class="flex items-center text-sm font-medium text-gray-800 dark:text-gray-900">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-gray-600 dark:border-gray-800">
            <span>By John Doe</span>
          </div>
        </div>
      </div>

      <!-- Heatmap Item 2 -->
      <div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg"
        style="background: linear-gradient(to bottom right, #6A5ACD, #483D8B);">
        <div class="absolute inset-0 bg-black bg-opacity-20 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <span class="text-xs font-bold uppercase text-gray-100 tracking-wider mb-1 block">Moderate Engagement</span>
            <h3 class="font-bold text-xl sm:text-2xl text-gray-50 leading-snug mb-2">
              <a href="#" class="hover:underline">Innovations in Sustainable Urban Planning</a>
            </h3>
            <p class="text-sm text-gray-200 leading-relaxed mb-4">
              Cities worldwide are adopting new eco-friendly strategies to enhance livability...
            </p>
          </div>
          <div class="flex items-center text-sm font-medium text-gray-100">
            <img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-gray-300"]
            ><span>By Jane Smith</span>
          </div>
        </div>
      </div>

      <!-- Heatmap Item 3 -->
      <div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg"
        style="background: linear-gradient(to bottom right, #A0522D, #8B4513);">
        <div class="absolute inset-0 bg-black bg-opacity-30 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <span class="text-xs font-bold uppercase text-pink-100 tracking-wider mb-1 block">Emerging Topic</span>
            <h3 class="font-bold text-xl sm:text-2xl text-pink-50 leading-snug mb-2">
              <a href="#" class="hover:underline">The Revival of Artisanal Craftsmanship</a>
            </h3>
            <p class="text-sm text-pink-100 leading-relaxed mb-4">
              A new generation embraces traditional skills, bringing handmade goods back into vogue...
            </p>
          </div>
          <div class="flex items-center text-sm font-medium text-pink-100">
            <img src="https://randomuser.me/api/portraits/men/8.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-pink-300">
            <span>By David Lee</span>
          </div>
        </div>
      </div>

      <!-- Heatmap Item 4 -->
      <div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg hidden xl:block"
        style="background: linear-gradient(to bottom right, #FF8C00, #CD6600);">
        <div class="absolute inset-0 bg-black bg-opacity-15 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <span class="text-xs font-bold uppercase text-amber-900 tracking-wider mb-1 block">High Engagement</span>
            <h3 class="font-bold text-xl sm:text-2xl text-amber-800 leading-snug mb-2">
              <a href="#" class="hover:underline">Breakthroughs in AI Ethics and Governance</a>
            </h3>
            <p class="text-sm text-amber-700 leading-relaxed mb-4">
              New frameworks are emerging to guide the responsible development of artificial intelligence...
            </p>
          </div>
          <div class="flex items-center text-sm font-medium text-amber-800">
            <img src="https://randomuser.me/api/portraits/women/9.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-amber-600">
            <span>By Sarah Chen</span>
          </div>
        </div>
      </div>

      <!-- Heatmap Item 5 -->
      <div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg hidden md:block"
        style="background: linear-gradient(to bottom right, #8A2BE2, #6A0DAD);">
        <div class="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <span class="text-xs font-bold uppercase text-purple-100 tracking-wider mb-1 block">Moderate Engagement</span>
            <h3 class="font-bold text-xl sm:text-2xl text-purple-50 leading-snug mb-2">
              <a href="#" class="hover:underline">The Future of Remote Work and Collaboration</a>
            </h3>
            <p class="text-sm text-purple-100 leading-relaxed mb-4">
              Companies are reimagining office dynamics with advanced tools and flexible policies...
            </p>
          </div>
          <div class="flex items-center text-sm font-medium text-purple-100">
            <img src="%3A%2F%2Frandomuser.me%2Fapi%2Fportraits%2Fmen%2F12.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-purple-300">
            <span>By Mark Johnson</span>
          </div>
        </div>
      </div>

      <!-- Heatmap Item 6 -->
      <div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg hidden lg:block"
        style="background: linear-gradient(to bottom right, #5F9EA0, #2F4F4F);">
        <div class="absolute inset-0 bg-black bg-opacity-35 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <span class="text-xs font-bold uppercase text-teal-100 tracking-wider mb-1 block">New Discovery</span>
            <h3 class="font-bold text-xl sm:text-2xl text-teal-50 leading-snug mb-2">
              <a href="#" class="hover:underline">Unveiling Ancient Civilizations: New Archeological Finds</a>
            </h3>
            <p class="text-sm text-teal-100 leading-relaxed mb-4">
              Recent excavations shed light on previously unknown aspects of ancient history...
            </p>
          </div>
          <div class="flex items-center text-sm font-medium text-teal-100">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-teal-300">
            <span>By Emily White</span>
          </div>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 lg:p-10 border-t border-gray-200 dark:border-gray-700 text-center">
      <p class="text-sm text-gray-500 dark:text-gray-400">
        Data updated hourly. For more details, visit our <a href="#" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-200 font-medium">analytics dashboard</a>.
      </p>
    </div>
  </div>
</div>