Componente Infografica

<div class="p-4 sm:p-6 lg:p-8 bg-gray-900 dark:bg-gray-950 text-emerald-100 font-sans">
  <div class="max-w-7xl mx-auto py-8 sm:py-12 md:py-16 px-4 sm:px-6 lg:px-8 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-xl border border-emerald-700 dark:border-emerald-900">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-center text-emerald-100 mb-8 sm:mb-12 leading-tight">
      Blockchain Network Overview
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
      <!-- Metric Card 1: Total Transactions -->
      <div class="flex flex-col items-center p-6 rounded-lg bg-gray-700 dark:bg-gray-800 shadow-lg border border-emerald-600 dark:border-emerald-800 transform transition duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="text-5xl sm:text-6xl font-bold text-emerald-400 mb-3">
          <svg class="w-16 h-16 sm:w-20 sm:h-20 text-emerald-500 mb-4" 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 17L12 21.75M12 21.75V19.5M12 21.75L14.25 17M17.25 10.5V7.5C17.25 6.94772 16.8023 6.5 16.25 6.5H7.75C7.19772 6.5 6.75 6.94772 6.75 7.5V10.5M17.25 10.5H6.75M17.25 10.5V13.5C17.25 14.0523 16.8023 14.5 16.25 14.5H7.75C7.19772 14.5 6.75 14.0523 6.75 13.5V10.5M17.25 10.5H19.5C20.0523 10.5 20.5 10.0523 20.5 9.5V8.25M6.75 10.5H4.5C3.94772 10.5 3.5 10.0523 3.5 9.5V8.25M12.5 17.5H11.5C10.9477 17.5 10.5 17.0523 10.5 16.5V15.5C10.5 14.9477 10.9477 14.5 11.5 14.5H12.5C13.0523 14.5 13.5 14.9477 13.5 15.5V16.5C13.5 17.0523 13.0523 17.5 12.5 17.5Z"></path>
          </svg>
          240M+
        </div>
        <p class="text-lg sm:text-xl font-semibold text-emerald-200 text-center uppercase tracking-wide">Total Transactions</p>
        <p class="text-sm text-gray-400 mt-2">Since Inception</p>
      </div>

      <!-- Metric Card 2: Daily Transaction Volume -->
      <div class="flex flex-col items-center p-6 rounded-lg bg-gray-700 dark:bg-gray-800 shadow-lg border border-emerald-600 dark:border-emerald-800 transform transition duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="text-5xl sm:text-6xl font-bold text-emerald-400 mb-3">
          <svg class="w-16 h-16 sm:w-20 sm:h-20 text-emerald-500 mb-4" 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="M17 9l-4 4m0 0l-4-4m4 4V3m5 0h-1.5a2.5 2.5 0 01-2.5-2.5V3m5 0a2.5 2.5 0 012.5 2.5V3m0 0h1.5a2.5 2.5 0 012.5 2.5V9m-11 5V3m0 0L8.5 7.5M8.5 7.5L5 9m3.5-1.5L5 9m0 0l-4 4m4-4l-4 4m0 0L3 17m-2 2l-1 1m0 0V21m0 0L3 19m-2-2l-1 1m0 0a2 2 0 00-2-2V9m0 0l-4-4m-4 4L7 9m-4 4l-4-4m-4 4l-4 4M5 9l-4 4m0 0l-4 4M21 21v-4m0 4l-4-4m4 4l4-4"></path>

          
          
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 3m0 0l3-3m-3 3V3M21 6l-3 3m0 0l-3-3m3 3V3M3 18l3-3m0 0l3 3m-3-3v3M21 18l-3-3m0 0l-3 3m3-3v3"></path>
          </svg>
          $1.5B+
        </div>
        <p class="text-lg sm:text-xl font-semibold text-emerald-200 text-center uppercase tracking-wide">Daily Volume</p>
        <p class="text-sm text-gray-400 mt-2">Last 24 Hours</p>
      </div>

      <!-- Metric Card 3: Active Wallets -->
      <div class="flex flex-col items-center p-6 rounded-lg bg-gray-700 dark:bg-gray-800 shadow-lg border border-emerald-600 dark:border-emerald-800 transform transition duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="text-5xl sm:text-6xl font-bold text-emerald-400 mb-3">
          <svg class="w-16 h-16 sm:w-20 sm:h-20 text-emerald-500 mb-4" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2m20 0h-2M13 18v-1a6.002 6.002 0 00-4-5.659V7a6 6 0 0112 0v3.341M4 14h6m-6 0h6m-6 0v6m6-6v6m-3 6h6m-6 0h6m-6 0h6m-6 0v6m6-6v6"></path>
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354V6m0 0V4.354m0 1.646V4.354m0 0H9m3 0H15m0 0H12m0 0V4.354m0 0V6m0-1.646l-4.707 4.707C6.67 10.492 6 11.666 6 13c0 2.761 2.239 5 5 5h2c2.761 0 5-2.239 5-5 0-1.334-.67-2.508-1.707-3.293L12 4.354zM12 4.354V12m0 0V4.354m0 1.646V4.354m0 0H9m3 0H15m0 0H12m0 0V4.354m0 0V6m0-1.646l-4.707 4.707C6.67 10.492 6 11.666 6 13c0 2.761 2.239 5 5 5h2c2.761 0 5-2.239 5-5 0-1.334-.67-2.508-1.707-3.293L12 4.354z"></path>
          </svg>
          500K+
        </div>
        <p class="text-lg sm:text-xl font-semibold text-emerald-200 text-center uppercase tracking-wide">Active Users</p>
        <p class="text-sm text-gray-400 mt-2">Weekly Unique</p>
      </div>
    </div>

    <div class="mt-12 text-center">
      <p class="text-md sm:text-lg text-emerald-300 font-medium">
        <span class="block">"Securing the future, one block at a time."</span>
        <span class="block text-sm text-gray-400 mt-2">Data updated every 5 minutes.</span>
      </p>
    </div>
  </div>
</div>