3D_Grayscale_Infographics_Component

<section class="py-12 sm:py-16 lg:py-20 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-center text-4xl sm:text-5xl lg:text-6xl font-extrabold text-gray-800 dark:text-gray-100 mb-12 sm:mb-16 tracking-tight leading-tight">
      <span class="relative inline-block">
        Key Insights
        <span class="block absolute -inset-1 -skew-y-3 bg-gray-300 dark:bg-gray-700"></span>
        <span class="relative text-gray-900 dark:text-gray-50">Unveiled</span>
      </span>
    </h2>

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

      <!-- Infographic Card 1 -->
      <div class="relative group perspective-1000">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform-style-3d group-hover:rotate-y-6 group-hover:scale-105 transition-all duration-500 ease-in-out border border-gray-200 dark:border-gray-700 p-6 flex flex-col items-center text-center relative z-10">
          <div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-white dark:from-gray-950 dark:to-gray-850 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl"></div>
          <div class="relative z-20 flex flex-col items-center p-4">
            <div class="flex items-center justify-center w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gray-200 dark:bg-gray-700 mb-6 shadow-inner-xl transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              <svg class="w-10 h-10 sm:w-12 sm:h-12 text-gray-600 dark:text-gray-300" 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.75 17L9 20l-1.25-3M15 17l.5 3L16 17m-6-10V4a1 1 0 011-1h2a1 1 0 011 1v3M9 16h6M8 8h8M5 12h14a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2z"></path></svg>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-4 transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              85% Growth
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg leading-relaxed transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              Our innovative strategies led to a significant 85% increase in market share over the last quarter.
            </p>
          </div>
        </div>
        <div class="absolute -bottom-4 right-4 w-4/5 h-4 bg-gray-300 dark:bg-gray-700 rounded-full blur-sm opacity-50 group-hover:opacity-75 transition-opacity duration-500 transform -translate-x-1/2 -rotate-3"></div>
      </div>

      <!-- Infographic Card 2 -->
      <div class="relative group perspective-1000">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform-style-3d group-hover:-rotate-y-6 group-hover:scale-105 transition-all duration-500 ease-in-out border border-gray-200 dark:border-gray-700 p-6 flex flex-col items-center text-center relative z-10">
          <div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-white dark:from-gray-950 dark:to-gray-850 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl"></div>
          <div class="relative z-20 flex flex-col items-center p-4">
            <div class="flex items-center justify-center w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gray-200 dark:bg-gray-700 mb-6 shadow-inner-xl transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              <svg class="w-10 h-10 sm:w-12 sm:h-12 text-gray-600 dark:text-gray-300" 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="M7 12l3-3m0 0l3 3m-3-3v8a7 7 0 0014 0v-.5M10 12l-3 3m0 0l-3-3m3 3V4a7 7 0 00-14 0v.5"></path></svg>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-4 transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              20% Efficiency
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg leading-relaxed transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              Optimized workflows resulted in a 20% increase in operational efficiency across all departments.
            </p>
          </div>
        </div>
        <div class="absolute -bottom-4 left-4 w-4/5 h-4 bg-gray-300 dark:bg-gray-700 rounded-full blur-sm opacity-50 group-hover:opacity-75 transition-opacity duration-500 transform translate-x-1/2 rotate-3"></div>
      </div>

      <!-- Infographic Card 3 -->
      <div class="relative group perspective-1000">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform-style-3d group-hover:rotate-y-6 group-hover:scale-105 transition-all duration-500 ease-in-out border border-gray-200 dark:border-gray-700 p-6 flex flex-col items-center text-center relative z-10">
          <div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-white dark:from-gray-950 dark:to-gray-850 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl"></div>
          <div class="relative z-20 flex flex-col items-center p-4">
            <div class="flex items-center justify-center w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gray-200 dark:bg-gray-700 mb-6 shadow-inner-xl transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              <svg class="w-10 h-10 sm:w-12 sm:h-12 text-gray-600 dark:text-gray-300" 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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0a2 2 0 01-2 2H6a2 2 0 01-2-2m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2M4 13L4 6a2 2 0 012-2h12a2 2 0 012 2v7"></path></svg>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-4 transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              95% Satisfaction
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg leading-relaxed transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              Customer feedback surveys show a consistent 95% satisfaction rate for our products and services.
            </p>
          </div>
        </div>
        <div class="absolute -bottom-4 right-4 w-4/5 h-4 bg-gray-300 dark:bg-gray-700 rounded-full blur-sm opacity-50 group-hover:opacity-75 transition-opacity duration-500 transform -translate-x-1/2 -rotate-3"></div>
      </div>

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

<style>
/* Define 3D Transform Utility Classes */
.perspective-1000 {
  perspective: 1000px;
}
.transform-style-3d {
  transform-style: preserve-3d;
}
.rotate-y-6 {
  transform: rotateY(6deg);
}
.-rotate-y-6 {
  transform: rotateY(-6deg);
}

/* Soft 3D shadow on hover for cards */
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.dark .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Inner shadow for circles */
.shadow-inner-xl {
  box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.15), inset 0px 0px 5px rgba(255, 255, 255, 0.5);
}
.dark .shadow-inner-xl {
  box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.6), inset 0px 0px 5px rgba(0, 0, 0, 0.3);
}
</style>