Microinteractions Badges Component

<div class="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 min-h-screen p-8 sm:p-12 font-sans text-gray-800 dark:text-gray-200 transition-colors duration-300">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-6 sm:mb-8 text-purple-800 dark:text-purple-300">
      Our Expertise
    </h2>
    <p class="text-lg sm:text-xl text-center mb-12 max-w-2xl mx-auto text-gray-600 dark:text-gray-400">
      Explore the diverse areas where our strategic advice can elevate your business. Hover to learn more.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center">

      <!-- Badge 1: Strategic Planning -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-purple-200 dark:border-purple-800 focus-within:ring-4 focus-within:ring-purple-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-purple-100 dark:bg-purple-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-purple-600 dark:text-purple-400" 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"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-purple-700 dark:text-purple-300">
            Strategic Planning
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Crafting tailored roadmaps for sustainable growth and market leadership.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Strategic Planning"></a>
      </div>

      <!-- Badge 2: Digital Transformation -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-blue-200 dark:border-blue-800 focus-within:ring-4 focus-within:ring-blue-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-blue-100 dark:bg-blue-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v10c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zM10 4h4v2h-4V4zm4 14H6V8h8v10z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-blue-700 dark:text-blue-300">
            Digital Transformation
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Guiding your business through technological evolution for efficiency and innovation.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Digital Transformation"></a>
      </div>

      <!-- Badge 3: Operational Excellence -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-green-200 dark:border-green-800 focus-within:ring-4 focus-within:ring-green-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-green-100 dark:bg-green-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-green-600 dark:text-green-400" 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 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-green-700 dark:text-green-300">
            Operational Excellence
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Streamlining processes and optimizing workflows for peak performance and reduced costs.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Operational Excellence"></a>
      </div>

      <!-- Badge 4: Market Research & Analytics -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-yellow-200 dark:border-yellow-800 focus-within:ring-4 focus-within:ring-yellow-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-yellow-100 dark:bg-yellow-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.5 10H15v2h-1.5zM10.5 10h1.5v2h-1.5zM12 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-3-11h1.5v4H9v-4zm-3 0h1.5v4H6v-4z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-yellow-700 dark:text-yellow-300">
            Market Research
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Providing deep insights into market trends and customer behavior for informed decisions.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Market Research & Analytics"></a>
      </div>

      <!-- Badge 5: Financial Advisory -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-red-200 dark:border-red-800 focus-within:ring-4 focus-within:ring-red-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-red-100 dark:bg-red-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-red-600 dark:text-red-400" 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-14h2c1.38 0 2.5 1.12 2.5 2.5a2.5 2.5 0 01-5 0c0-1.38 1.12-2.5 2.5-2.5zm0 9.5c0 .83-.67 1.5-1.5 1.5S9 12.33 9 11.5 9.67 10 10.5 10s1.5.67 1.5 1.5zM13.5 13.5c0 .83-.67 1.5-1.5 1.5S11 14.33 11 13.5 11.67 12 12.5 12s1.5.67 1.5 1.5z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-red-700 dark:text-red-300">
            Financial Advisory
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Expert guidance on capital management, investments, and fiscal health.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Financial Advisory"></a>
      </div>

      <!-- Badge 6: Human Capital Management -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-orange-200 dark:border-orange-800 focus-within:ring-4 focus-within:ring-orange-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-orange-100 dark:bg-orange-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-orange-600 dark:text-orange-400" 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 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.83 6-3.83s5.97 1.84 6 3.83c-1.29 1.94-3.5 3.22-6 3.22z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-orange-700 dark:text-orange-300">
            Human Capital
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Developing and retaining top talent to fuel your organization's success.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Human Capital Management"></a>
      </div>

    </div>
  </div>
</div>