Componente Infografica

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 rounded-lg shadow-xl">
  <h2 class="text-center text-2xl sm:text-3xl font-extrabold text-purple-900 dark:text-purple-200 mb-6 sm:mb-8">Marketplace Highlights</h2>

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

    <!-- Stat Card 1 -->
    <div class="group relative overflow-hidden bg-white dark:bg-gray-850 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <div class="p-6 sm:p-7 flex flex-col items-center text-center">
        <div class="text-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 text-5xl sm:text-6xl font-extrabold mb-3 transition-colors duration-300">
          500K+
        </div>
        <p class="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-2">Active Users</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Growing daily with new sign-ups.</p>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-transparent to-purple-600 opacity-0 group-hover:opacity-10 dark:to-purple-800 transition-opacity duration-300"></div>
    </div>

    <!-- Stat Card 2 -->
    <div class="group relative overflow-hidden bg-white dark:bg-gray-850 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <div class="p-6 sm:p-7 flex flex-col items-center text-center">
        <div class="text-gradient-to-r from-indigo-600 to-violet-600 dark:from-indigo-400 dark:to-violet-400 text-5xl sm:text-6xl font-extrabold mb-3 transition-colors duration-300">
          10K+
        </div>
        <p class="text-lg font-semibold text-indigo-800 dark:text-indigo-200 mb-2">Verified Vendors</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Carefully vetted for quality and trust.</p>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-transparent to-indigo-600 opacity-0 group-hover:opacity-10 dark:to-indigo-800 transition-opacity duration-300"></div>
    </div>

    <!-- Stat Card 3 -->
    <div class="group relative overflow-hidden bg-white dark:bg-gray-850 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <div class="p-6 sm:p-7 flex flex-col items-center text-center">
        <div class="text-gradient-to-r from-violet-600 to-fuchsia-600 dark:from-violet-400 dark:to-fuchsia-400 text-5xl sm:text-6xl font-extrabold mb-3 transition-colors duration-300">
          98%
        </div>
        <p class="text-lg font-semibold text-violet-800 dark:text-violet-200 mb-2">Customer Satisfaction</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Our top priority is your happiness.</p>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-transparent to-violet-600 opacity-0 group-hover:opacity-10 dark:to-violet-800 transition-opacity duration-300"></div>
    </div>

  </div>

  <style>
    /* Custom utility for gradient text */
    .text-gradient-to-r {
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .from-purple-600 {
      background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to, #a78bfa));
    }
    .to-indigo-600 {
      --tw-gradient-to: #4f46e5;
    }
    .from-indigo-600 {
      background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to, #818cf8));
    }
    .to-violet-600 {
      --tw-gradient-to: #7c3aed;
    }
    .from-violet-600 {
      background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to, #a78bfa));
    }
    .to-fuchsia-600 {
      --tw-gradient-to: #c026d3;
    }

    /* Dark mode adjustments for gradient text */
    .dark .from-purple-400 {
      background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to, #c4b5fd));
    }
    .dark .to-indigo-400 {
      --tw-gradient-to: #818cf8;
    }
    .dark .from-indigo-400 {
      background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to, #add8e6)); /* Light blue for contrast */
    }
    .dark .to-violet-400 {
      --tw-gradient-to: #a78bfa;
    }
    .dark .from-violet-400 {
      background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to, #d8b4fe));
    }
    .dark .to-fuchsia-400 {
      --tw-gradient-to: #e879f9;
    }

    /* Dark mode background for white cards */
    .dark .bg-gray-850 {
        background-color: #1f2937; /* A slightly lighter gray than gray-900 */
    }
  </style>
</div>