Componente de infografías - Estadísticas heredadas de juegos

<section class="font-sans bg-gray-100 text-gray-800 py-12 px-4 dark:bg-gray-900 dark:text-gray-200">
  <div class="container mx-auto px-4 max-w-4xl">
    <h2 class="text-4xl md:text-5xl font-bold text-center mb-10 text-rose-800 dark:text-rose-400 leading-tight tracking-tight">
      <span class="block">Gaming Legacy</span>
      <span class="block text-2xl md:text-3xl font-medium text-amber-900 dark:text-amber-500 mt-2">Player Milestones</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">

      <!-- Statistic 1: Kills -->
      <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border-2 border-rose-200 dark:border-rose-700 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="text-5xl md:text-6xl font-extrabold text-rose-600 dark:text-rose-500 mb-2">
          <span class="animate-pulse">3,456</span>
        </div>
        <p class="text-xl md:text-2xl font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">Total Kills</p>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Achieved across all campaigns</p>
      </div>

      <!-- Statistic 2: Wins -->
      <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border-2 border-amber-200 dark:border-amber-700 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="text-5xl md:text-6xl font-extrabold text-amber-600 dark:text-amber-500 mb-2">
          <span class="animate-pulse">187</span>
        </div>
        <p class="text-xl md:text-2xl font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">Victories</p>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Tournament &amp; Ranked Matches</p>
      </div>

      <!-- Statistic 3: Playtime -->
      <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border-2 border-green-200 dark:border-green-700 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="text-5xl md:text-6xl font-extrabold text-green-600 dark:text-green-500 mb-2">
          <span class="animate-pulse">789h</span>
        </div>
        <p class="text-xl md:text-2xl font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">Hours Played</p>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Dedicated game time logged</p>
      </div>

    </div>

    <div class="mt-12 text-center">
      <a href="#" class="inline-block bg-rose-700 hover:bg-rose-800 dark:bg-rose-500 dark:hover:bg-rose-600 text-white font-bold py-3 px-8 rounded-full text-lg uppercase tracking-wide transition-colors duration-300 shadow-lg hover:shadow-xl">
        View Full Player Profile
      </a>
    </div>
  </div>
</section>