Infographics Component

<section class="py-12 md:py-24 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="container mx-auto px-4 max-w-7xl">
    <div class="text-center mb-16">
      <h2 class="text-5xl md:text-6xl font-extrabold text-blue-800 dark:text-blue-300 mb-4 tracking-[-0.03em] leading-tight drop-shadow-md">
        <span class="block">Unlock Your Learning Potential</span>
        <span class="hidden md:inline-block text-4xl mt-2 text-blue-700 dark:text-blue-400 drop-shadow-sm">Dive Deep into Key Concepts</span>
      </h2>
      <p class="text-lg md:text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
        Explore complex topics with our engaging, interactive infographics. Designed to make learning visual and memorable.
      </p>
    </div>

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

      <!-- Infographic Card 1 -->
      <div class="relative p-8 md:p-10 border-4 border-yellow-700 dark:border-yellow-600 rounded-3xl overflow-hidden shadow-2xl
                  transform transition-all duration-300 hover:-translate-y-2 hover:shadow-yellow-500/40
                  bg-yellow-50 dark:bg-yellow-950
                  group perspective-1000">
        <!-- 3D 'Pop-out' Effect Base -->
        <div class="absolute -inset-1 rounded-3xl bg-gradient-to-br from-yellow-100/50 to-yellow-200/50 dark:from-yellow-900/50 dark:to-yellow-800/50
                    transform -rotate-y-1 -rotate-x-1 translate-z-10 group-hover:rotate-y-0 group-hover:rotate-x-0 group-hover:translate-z-0 transition-transform duration-500"></div>

        <div class="relative z-10 text-center">
          <div class="w-24 h-24 mx-auto mb-6 bg-yellow-600 dark:bg-yellow-700 rounded-full flex items-center justify-center
                      shadow-inner border-4 border-yellow-400 dark:border-yellow-500
                      transform transition-transform duration-300 group-hover:scale-110">
            <svg class="w-12 h-12 text-yellow-50 dark:text-yellow-100" 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="1.5" d="M7 12l3 3 7-7m-6 4H3m0 0l3-3m-3 3l3 3m13-3H11m0 0l-3 3m3-3l-3-3"></path>
            </svg>
          </div>
          <h3 class="text-3xl font-bold text-yellow-800 dark:text-yellow-200 mb-3 drop-shadow-sm">Step 1: Understand</h3>
          <p class="text-yellow-700 dark:text-yellow-300 mb-6 text-lg leading-relaxed">
            Grasp foundational concepts with clear, concise explanations.
          </p>
          <img src="https://picsum.photos/400/250?random=1" alt="Concept understanding" class="w-full rounded-xl shadow-lg border-2 border-yellow-300 dark:border-yellow-600 mb-6 object-cover object-center aspect-video">
          <a href="#" class="inline-flex items-center px-6 py-3 bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-700 dark:hover:bg-yellow-600
                          text-white font-semibold rounded-full shadow-md transition-all duration-300
                          transform hover:scale-105 active:scale-95 group-hover:after:content-[''] group-hover:after:absolute
                          group-hover:after:inset-0 group-hover:after:rounded-full group-hover:after:bg-yellow-500/30 group-hover:after:animate-pulse">
            Learn More
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Infographic Card 2 -->
      <div class="relative p-8 md:p-10 border-4 border-teal-700 dark:border-teal-600 rounded-3xl overflow-hidden shadow-2xl
                  transform transition-all duration-300 hover:-translate-y-2 hover:shadow-teal-500/40
                  bg-teal-50 dark:bg-teal-950
                  group perspective-1000">
        <!-- 3D 'Pop-out' Effect Base -->
        <div class="absolute -inset-1 rounded-3xl bg-gradient-to-br from-teal-100/50 to-teal-200/50 dark:from-teal-900/50 dark:to-teal-800/50
                    transform -rotate-y-1 -rotate-x-1 translate-z-10 group-hover:rotate-y-0 group-hover:rotate-x-0 group-hover:translate-z-0 transition-transform duration-500"></div>

        <div class="relative z-10 text-center">
          <div class="w-24 h-24 mx-auto mb-6 bg-teal-600 dark:bg-teal-700 rounded-full flex items-center justify-center
                      shadow-inner border-4 border-teal-400 dark:border-teal-500
                      transform transition-transform duration-300 group-hover:scale-110">
            <svg class="w-12 h-12 text-teal-50 dark:text-teal-100" 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="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
            </svg>
          </div>
          <h3 class="text-3xl font-bold text-teal-800 dark:text-teal-200 mb-3 drop-shadow-sm">Step 2: Visualize</h3>
          <p class="text-teal-700 dark:text-teal-300 mb-6 text-lg leading-relaxed">
            See data and processes come alive with interactive charts and diagrams.
          </p>
          <img src="https://picsum.photos/400/250?random=2" alt="Data visualization" class="w-full rounded-xl shadow-lg border-2 border-teal-300 dark:border-teal-600 mb-6 object-cover object-center aspect-video">
          <a href="#" class="inline-flex items-center px-6 py-3 bg-teal-600 hover:bg-teal-700 dark:bg-teal-700 dark:hover:bg-teal-600
                          text-white font-semibold rounded-full shadow-md transition-all duration-300
                          transform hover:scale-105 active:scale-95 group-hover:after:content-[''] group-hover:after:absolute
                          group-hover:after:inset-0 group-hover:after:rounded-full group-hover:after:bg-teal-500/30 group-hover:after:animate-pulse">
            Explore Data
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Infographic Card 3 -->
      <div class="relative p-8 md:p-10 border-4 border-red-700 dark:border-red-600 rounded-3xl overflow-hidden shadow-2xl
                  transform transition-all duration-300 hover:-translate-y-2 hover:shadow-red-500/40
                  bg-red-50 dark:bg-red-950
                  group perspective-1000">
        <!-- 3D 'Pop-out' Effect Base -->
        <div class="absolute -inset-1 rounded-3xl bg-gradient-to-br from-red-100/50 to-red-200/50 dark:from-red-900/50 dark:to-red-800/50
                    transform -rotate-y-1 -rotate-x-1 translate-z-10 group-hover:rotate-y-0 group-hover:rotate-x-0 group-hover:translate-z-0 transition-transform duration-500"></div>

        <div class="relative z-10 text-center">
          <div class="w-24 h-24 mx-auto mb-6 bg-red-600 dark:bg-red-700 rounded-full flex items-center justify-center
                      shadow-inner border-4 border-red-400 dark:border-red-500
                      transform transition-transform duration-300 group-hover:scale-110">
            <svg class="w-12 h-12 text-red-50 dark:text-red-100" 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="1.5" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9H3m0 0l3 3m-3-3l3-3m0 0V3m0 3V3m0 3v12m0-3h6m0 0h6m-6 0l3 3m-3-3l3-3m-3 3v6m0 0v-6