Componente infografica neumorfica per l'e-commerce

<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-800 font-sans antialiased text-gray-800 dark:text-gray-200 transition-colors duration-300">

  <div class="max-w-4xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- Infographic Card 1: Sales -->
    <div class="group p-6 rounded-3xl shadow-xl bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-gray-700 dark:to-gray-900 
                shadow-gray-300/60 dark:shadow-gray-900/60 
                dark:hover:shadow-indigo-700/50 
                hover:shadow-indigo-300/80 transition-all duration-300 transform 
                hover:-translate-y-1 hover:scale-105
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-600 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl"></div>
      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="w-16 h-16 rounded-full bg-indigo-200 dark:bg-indigo-600 flex items-center justify-center mb-4 
                    shadow-inner shadow-indigo-300/40 dark:shadow-indigo-900/40 
                    group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 transition-colors duration-300">
          <svg class="w-8 h-8 text-indigo-700 dark:text-indigo-200 group-hover:text-indigo-800 dark:group-hover:text-indigo-100" 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="M11 3.055A9.001 9.001 0 0119 12h-8V3.055z">
            </path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z">
            </path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-indigo-800 dark:text-indigo-200">+25% Sales Growth</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">Year-over-year increase in total sales volume. A strong indication of market expansion and product demand.</p>
      </div>
    </div>

    <!-- Infographic Card 2: Customers -->
    <div class="group p-6 rounded-3xl shadow-xl bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-900 
                shadow-gray-300/60 dark:shadow-gray-900/60 
                dark:hover:shadow-purple-700/50 
                hover:shadow-purple-300/80 transition-all duration-300 transform 
                hover:-translate-y-1 hover:scale-105
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-600 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl"></div>
      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="w-16 h-16 rounded-full bg-purple-200 dark:bg-purple-600 flex items-center justify-center mb-4 
                    shadow-inner shadow-purple-300/40 dark:shadow-purple-900/40 
                    group-hover:bg-purple-300 dark:group-hover:bg-purple-700 transition-colors duration-300">
          <svg class="w-8 h-8 text-purple-700 dark:text-purple-200 group-hover:text-purple-800 dark:group-hover:text-purple-100" 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-3-3H8a3 3 0 00-3 3v2h5m0-9a4 4 0 110-8 4 4 0 010 8zm-2 10l3-3m0 0l3 3m-3-3v8"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-purple-800 dark:text-purple-200">50k+ Happy Customers</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">Our growing community of satisfied buyers. Building trust and loyalty with exceptional service and products.</p>
      </div>
    </div>

    <!-- Infographic Card 3: Ratings -->
    <div class="group p-6 rounded-3xl shadow-xl bg-gradient-to-br from-pink-100 to-rose-100 dark:from-gray-700 dark:to-gray-900 
                shadow-gray-300/60 dark:shadow-gray-900/60 
                dark:hover:shadow-rose-700/50 
                hover:shadow-rose-300/80 transition-all duration-300 transform 
                hover:-translate-y-1 hover:scale-105
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-pink-50 to-rose-50 dark:from-gray-600 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl"></div>
      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="w-16 h-16 rounded-full bg-pink-200 dark:bg-pink-600 flex items-center justify-center mb-4 
                    shadow-inner shadow-pink-300/40 dark:shadow-pink-900/40 
                    group-hover:bg-pink-300 dark:group-hover:bg-pink-700 transition-colors duration-300">
          <svg class="w-8 h-8 text-pink-700 dark:text-pink-200 group-hover:text-pink-800 dark:group-hover:text-pink-100" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 2.5l2.69 5.5l6.09.88l-4.41 4.3l1.04 6.07L10 18.27l-5.41 2.85l1.04-6.07l-4.41-4.3l6.09-.88L10 2.5z" clip-rule="evenodd"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-pink-800 dark:text-pink-200">4.9/5 Average Rating</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">Consistently high product ratings from verified purchases. Reflecting superior quality and user satisfaction.</p>
      </div>
    </div>

  </div>

</div>