Heat Maps 구성 요소

<div class="p-4 sm:p-6 lg:p-8 bg-blue-50 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-900 dark:text-blue-100 mb-4 sm:mb-6 lg:mb-8 text-center">
      Today's Hottest Topics
    </h2>
    <p class="text-lg text-blue-700 dark:text-blue-300 mb-8 sm:mb-10 lg:mb-12 text-center max-w-2xl mx-auto">
      Explore the most engaging and talked-about stories right now. The bigger the bubble, the more buzz it's generating!
    </p>

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

      <!-- Heat Map Item 1 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-500 dark:bg-blue-600 scale-125 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-5xl sm:text-6xl font-bold text-blue-800 dark:text-blue-200">95%</span>
          </div>
          <h3 class="text-2xl sm:text-3xl font-bold text-blue-900 dark:text-blue-100 mb-2">Climate Solutions</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">New report highlights renewable energy breakthroughs.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>

      <!-- Heat Map Item 2 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-400 dark:bg-blue-500 scale-105 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-24 h-24 sm:w-32 sm:h-32 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-4xl sm:text-5xl font-bold text-blue-800 dark:text-blue-200">78%</span>
          </div>
          <h3 class="text-2xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Global Economy Shift</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">Markets react to emerging trade policies.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>

      <!-- Heat Map Item 3 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-300 dark:bg-blue-400 scale-95 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-20 h-20 sm:w-28 sm:h-28 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-3xl sm:text-4xl font-bold text-blue-800 dark:text-blue-200">62%</span>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Tech Innovation Boom</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">AI advancements reshape daily life.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>

      <!-- Heat Map Item 4 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-200 dark:bg-blue-300 scale-90 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-16 h-16 sm:w-24 sm:h-24 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-2xl sm:text-3xl font-bold text-blue-800 dark:text-blue-200">45%</span>
          </div>
          <h3 class="text-xl sm:text-xl font-bold text-blue-900 dark:text-blue-100 mb-2">Health & Wellness</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">New trends in mental health.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>

      <!-- Heat Map Item 5 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-100 dark:bg-blue-200 scale-85 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-12 h-12 sm:w-20 sm:h-20 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200">28%</span>
          </div>
          <h3 class="text-lg sm:text-xl font-bold text-blue-900 dark:text-blue-100 mb-2">Space Exploration</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">New missions planned for Mars.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>

      <!-- Heat Map Item 6 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-50 dark:bg-blue-100 scale-80 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-8 h-8 sm:w-16 sm:h-16 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-lg sm:text-xl font-bold text-blue-800 dark:text-blue-200">15%</span>
          </div>
          <h3 class="text-lg sm:text-xl font-bold text-blue-900 dark:text-blue-100 mb-2">Cultural Trends</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">Popular music genres evolving.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>

    </div>

    <div class="mt-12 sm:mt-16 lg:mt-20 text-center">
      <a href="#" class="px-8 py-3 rounded-full bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out dark:from-blue-700 dark:to-blue-800">
        Explore All Topics
      </a>
    </div>
  </div>
</div>

<style>
  /* This is a simple animation for the circles, typically done via JS for dynamic content, 
     but for a static HTML component, CSS animation can simulate a 'pulse' or 'grow' effect. */
  @keyframes scalePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }

  .scale-animation {
    animation: scalePulse 2s infinite ease-in-out;
  }
</style>