Stats E-commerce Modern

                <!--
@type: Stats
@industry: E-commerce
@style: Modern
@category: Page Section, Social Proof
@framework: Tailwind
@license: Free
-->

<section class="w-full py-12 md:py-24 bg-white">
  <div class="max-w-7xl mx-auto px-4 text-center">
    <div class="max-w-4xl mx-auto space-y-6">
      <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl md:text-5xl">Our Impact in Numbers</h2>
      <p class="text-lg text-gray-600 md:text-xl">See how StyleHub is making a difference for shoppers around the world.</p>
    </div>
    <div class="mt-12 border-2 border-orange-300 rounded-xl p-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
      <div
        class="p-6 rounded-xl flex flex-col items-center text-center transition-all duration-300 border border-white hover:border-orange-200 hover:bg-orange-50 hover:scale-[1.02]">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="lucide lucide-users h-12 w-12 text-orange-500 mb-4">
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
          <circle cx="9" cy="7" r="4"></circle>
          <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
          <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
        </svg>
        <div class="text-4xl font-bold text-gray-900 mb-2">250K+</div>
        <h3 class="text-xl font-semibold text-gray-900 mb-2">Happy Customers</h3>
        <p class="text-gray-600">Our growing community of satisfied shoppers worldwide.</p>
      </div>
      <div
        class="p-6 rounded-xl flex flex-col items-center text-center transition-all duration-300 border border-white hover:border-orange-200 hover:bg-orange-50 hover:scale-[1.02]">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="lucide lucide-package h-12 w-12 text-orange-500 mb-4">
          <path d="m7.5 4.27 9 5.15"></path>
          <path
            d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z">
          </path>
          <path d="m3.3 7 8.7 5 8.7-5"></path>
          <path d="M12 22V12"></path>
        </svg>
        <div class="text-4xl font-bold text-gray-900 mb-2">5000+</div>
        <h3 class="text-xl font-semibold text-gray-900 mb-2">Unique Products</h3>
        <p class="text-gray-600">A diverse and curated selection across all categories.</p>
      </div>
      <div
        class="p-6 rounded-xl flex flex-col items-center text-center transition-all duration-300 border border-white hover:border-orange-200 hover:bg-orange-50 hover:scale-[1.02]">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="lucide lucide-star h-12 w-12 text-orange-500 mb-4">
          <polygon
            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
          </polygon>
        </svg>
        <div class="text-4xl font-bold text-gray-900 mb-2">4.9/5</div>
        <h3 class="text-xl font-semibold text-gray-900 mb-2">Average Rating</h3>
        <p class="text-gray-600">Consistently high ratings from verified purchases.</p>
      </div>
      <div
        class="p-6 rounded-xl flex flex-col items-center text-center transition-all duration-300 border border-white hover:border-orange-200 hover:bg-orange-50 hover:scale-[1.02]">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="lucide lucide-globe h-12 w-12 text-orange-500 mb-2">
          <circle cx="12" cy="12" r="10"></circle>
          <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
          <path d="M2 12h20"></path>
        </svg>
        <div class="text-4xl font-bold text-gray-900 mb-2">100+</div>
        <h3 class="text-xl font-semibold text-gray-900 mb-2">Countries Served</h3>
        <p class="text-gray-600">Delivering quality products to every corner of the globe.</p>
      </div>
    </div>
    <div class="mt-12">
      <button
        class="inline-flex items-center justify-center gap-2 px-6 py-3 border border-transparent rounded-lg text-lg font-semibold text-white bg-orange-500 hover:bg-orange-600 transition duration-150 ease-in-out cursor-pointer hover:shadow-lg">
        Learn More About Us
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="lucide lucide-arrow-right h-6 w-6">
          <path d="M5 12h14"></path>
          <path d="M12 5l7 7-7 7"></path>
        </svg>
      </button>
    </div>
  </div>
</section>