Brutalist_Infographics_Component_Earth_Tones

<section class="bg-stone-200 dark:bg-stone-900 py-16 md:py-24 font-mono text-stone-800 dark:text-stone-300">
  <div class="container mx-auto px-6 max-w-7xl">
    <h1 class="text-4xl sm:text-5xl md:text-6xl uppercase font-extrabold mb-8 md:mb-12 text-center transform -skew-x-6 inline-block bg-stone-700 text-stone-100 dark:bg-stone-300 dark:text-stone-900 p-2 leading-none mx-auto block w-fit shadow-lg">
      Our <span class="text-amber-400 dark:text-lime-700">Impact</span>
    </h1>

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

      <!-- Infographic Card 1 -->
      <div class="bg-stone-100 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 flex flex-col items-start shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] transition-all duration-300 hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_rgba(255,255,255,1)]">
        <div class="text-6xl md:text-7xl font-black text-amber-500 dark:text-lime-600 mb-4 tracking-tight leading-none">
          +25%
        </div>
        <h3 class="text-2xl font-bold uppercase mb-3 border-b-4 border-amber-500 dark:border-lime-600 pb-2 leading-tight">
          Revenue Growth
        </h3>
        <p class="text-sm text-stone-700 dark:text-stone-400 mb-4 flex-grow">
          Achieved significant year-over-year revenue growth through strategic market expansion.
        </p>
        <a href="#" class="mt-auto text-amber-600 dark:text-lime-500 font-bold uppercase text-sm border-b-2 border-amber-600 dark:border-lime-500 hover:text-amber-800 dark:hover:text-lime-300 transition-colors duration-200">
          See Details →
        </a>
      </div>

      <!-- Infographic Card 2 -->
      <div class="bg-stone-100 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 flex flex-col items-start shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] transition-all duration-300 hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_rgba(255,255,255,1)]">
        <div class="text-6xl md:text-7xl font-black text-amber-500 dark:text-lime-600 mb-4 tracking-tight leading-none">
          420k+
        </div>
        <h3 class="text-2xl font-bold uppercase mb-3 border-b-4 border-amber-500 dark:border-lime-600 pb-2 leading-tight">
          Users Engaged
        </h3>
        <p class="text-sm text-stone-700 dark:text-stone-400 mb-4 flex-grow">
          Expanded our user base with innovative features and compelling content.
        </p>
        <a href="#" class="mt-auto text-amber-600 dark:text-lime-500 font-bold uppercase text-sm border-b-2 border-amber-600 dark:border-lime-500 hover:text-amber-800 dark:hover:text-lime-300 transition-colors duration-200">
          Explore Community →
        </a>
      </div>

      <!-- Infographic Card 3 -->
      <div class="bg-stone-100 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 flex flex-col items-start shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] transition-all duration-300 hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_rgba(255,255,255,1)]">
        <div class="text-6xl md:text-7xl font-black text-amber-500 dark:text-lime-600 mb-4 tracking-tight leading-none">
          85%+ 
        </div>
        <h3 class="text-2xl font-bold uppercase mb-3 border-b-4 border-amber-500 dark:border-lime-600 pb-2 leading-tight">
          Customer Sat.
        </h3>
        <p class="text-sm text-stone-700 dark:text-stone-400 mb-4 flex-grow">
          Maintained high customer satisfaction scores through dedicated support.
        </p>
        <a href="#" class="mt-auto text-amber-600 dark:text-lime-500 font-bold uppercase text-sm border-b-2 border-amber-600 dark:border-lime-500 hover:text-amber-800 dark:hover:text-lime-300 transition-colors duration-200">
          Read Testimonials →
        </a>
      </div>

      <!-- Infographic Card 4 -->
      <div class="bg-stone-100 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 flex flex-col items-start shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] transition-all duration-300 hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_rgba(255,255,255,1)]">
        <div class="text-6xl md:text-7xl font-black text-amber-500 dark:text-lime-600 mb-4 tracking-tight leading-none">
          Globally
        </div>
        <h3 class="text-2xl font-bold uppercase mb-3 border-b-4 border-amber-500 dark:border-lime-600 pb-2 leading-tight">
          Present in 12+
        </h3>
        <p class="text-sm text-stone-700 dark:text-stone-400 mb-4 flex-grow">
          Expanded our reach across multiple continents with localized solutions.
        </p>
        <a href="#" class="mt-auto text-amber-600 dark:text-lime-500 font-bold uppercase text-sm border-b-2 border-amber-600 dark:border-lime-500 hover:text-amber-800 dark:hover:text-lime-300 transition-colors duration-200">
          View Locations →
        </a>
      </div>

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