Componente Infografica

<div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 relative overflow-hidden">
    
    <!-- Retro/Vintage background elements -->
    <div class="absolute inset-0 z-0 opacity-10 pointer-events-none">
      <div class="w-32 h-32 bg-gray-300 dark:bg-gray-700 rounded-full absolute -top-8 -left-8"></div>
      <div class="w-24 h-24 bg-gray-300 dark:bg-gray-700 rounded-full absolute -bottom-8 -right-8"></div>
      <div class="w-48 h-12 bg-gray-200 dark:bg-gray-700 absolute top-1/4 -left-16 transform -rotate-45"></div>
      <div class="w-48 h-12 bg-gray-200 dark:bg-gray-700 absolute bottom-1/4 -right-16 transform rotate-45"></div>
    </div>

    <div class="relative z-10">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-wide uppercase">
        Our Company Milestones
      </h2>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        
        <!-- Milestone 1 -->
        <div class="flex flex-col items-center text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner transition-transform duration-300 hover:scale-105">
          <div class="text-5xl text-gray-600 dark:text-gray-300 mb-3 font-mono">1985</div>
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Founded</h3>
          <p class="text-gray-600 dark:text-gray-300">Started with a vision to innovate the industry.</p>
        </div>

        <!-- Milestone 2 -->
        <div class="flex flex-col items-center text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner transition-transform duration-300 hover:scale-105">
          <div class="text-5xl text-gray-600 dark:text-gray-300 mb-3 font-mono">2000</div>
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Global Expansion</h3>
          <p class="text-gray-600 dark:text-gray-300">Expanded our reach to international markets.</p>
        </div>

        <!-- Milestone 3 -->
        <div class="flex flex-col items-center text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner transition-transform duration-300 hover:scale-105">
          <div class="text-5xl text-gray-600 dark:text-gray-300 mb-3 font-mono">2023</div>
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Future Ready</h3>
          <p class="text-gray-600 dark:text-gray-300">Embracing new technologies for sustainable growth.</p>
        </div>
      </div>

      <div class="mt-8 text-center">
        <a href="#" class="inline-block bg-gray-700 dark:bg-gray-200 text-white dark:text-gray-900 py-3 px-8 rounded-full font-bold uppercase tracking-wider shadow-md hover:bg-gray-800 dark:hover:bg-gray-300 transition duration-300">
          Learn More About Our Journey
        </a>
      </div>
    </div>
  </div>
</div>