Component:

Stats Product Light

Name: Stats Product Light
Availability: InStock

Free

Tags: Stats Page Section Social Proof Product Light

Colors:

Description:

This carefully crafted Stats component is perfect for Product landing pages, featuring a Light design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@type: Stats
@industry: Product
@style: Light
@category: Page Section, Social Proof
@framework: HTML/CSS
@license: Free
-->

<style>
:root {
  /* Colors */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-200: #e5e7eb;
  --color-gray-600: #4b5563;
  --color-gray-800: #1f2937;
  --color-blue-50: #eff6ff;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;

  /* Container */
  --container-max-width: 80rem;
  --content-max-width: 48rem;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base Styles */
body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
}

/* Component Styles */
.stats-section {
  background-color: var(--color-gray-50);
  padding: var(--spacing-16) 0;
}

.stats-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

.stats-header {
  max-width: var(--content-max-width);
  margin: 0 auto;
  text-align: center;
  margin-bottom: var(--spacing-12);
}

.stats-title {
  font-size: 1.875rem;
  font-weight: 500;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-4);
}

.stats-description {
  font-size: 1.125rem;
  color: var(--color-gray-600);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
}

.stat-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 1rem;
  padding: var(--spacing-8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: box-shadow 0.3s ease;
}

.stat-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.stat-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background-color: var(--color-blue-50);
  color: var(--color-blue-600);
  margin-bottom: var(--spacing-5);
}

.stat-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.stat-number {
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-2);
}

.stat-label {
  color: var(--color-gray-600);
}

.trusted-section {
  margin-top: var(--spacing-16);
}

.trusted-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 1rem;
  padding: var(--spacing-8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.trusted-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
  align-items: center;
}

.trusted-content h3 {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-4);
}

.trusted-content p {
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
}

.stats-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

.primary-button {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-800);
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.primary-button:hover {
  background-color: var(--color-gray-50);
}

.primary-button svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: var(--spacing-2);
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  color: var(--color-blue-600);
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.secondary-button:hover {
  background-color: var(--color-blue-50);
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-4);
}

.logo-image {
  height: 2rem;
  object-fit: contain;
  margin: 0 auto;
}

.case-studies-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-blue-600);
  font-weight: 500;
  text-decoration: none;
  margin-top: var(--spacing-16);
  transition: color 0.3s ease;
}

.case-studies-link:hover {
  color: var(--color-blue-700);
}

.case-studies-link svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: var(--spacing-1);
}

.text-center {
  text-align: center;
}

/* Responsive Breakpoints */
@media (min-width: 768px) {
  .stats-section {
    padding: var(--spacing-24) 0;
  }

  .stats-container {
    padding: 0 var(--spacing-8);
  }

  .stats-header {
    margin-bottom: var(--spacing-16);
  }

  .stats-title {
    font-size: 2.25rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-8);
  }

  .trusted-card {
    padding: var(--spacing-10);
  }

  .trusted-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trusted-content h3 {
    font-size: 1.875rem;
  }
}

@media (min-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .logo-grid {
    gap: var(--spacing-6);
  }
}
</style>

<section class="stats-section">
  <div class="stats-container">
    <div class="stats-header">
      <h2 class="stats-title">Trusted by thousands of product teams worldwide</h2>
      <p class="stats-description">Our platform helps teams deliver better products faster with data-driven insights and powerful collaboration tools.</p>
    </div>
    
    <div class="stats-grid">
      <!-- Stat Card 1 -->
      <div class="stat-card">
        <div class="stat-icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" class="stat-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
          </svg>
        </div>
        <h3 class="stat-number" id="stat-customers" aria-label="20,000 plus customers">20,000+</h3>
        <p class="stat-label">Active customers</p>
      </div>
      
      <!-- Stat Card 2 -->
      <div class="stat-card">
        <div class="stat-icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" class="stat-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <h3 class="stat-number" id="stat-projects" aria-label="99 percent satisfaction rate">99%</h3>
        <p class="stat-label">Customer satisfaction</p>
      </div>
      
      <!-- Stat Card 3 -->
      <div class="stat-card">
        <div class="stat-icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" class="stat-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <h3 class="stat-number" id="stat-performance" aria-label="40 percent performance increase">+40%</h3>
        <p class="stat-label">Performance increase</p>
      </div>
      
      <!-- Stat Card 4 -->
      <div class="stat-card">
        <div class="stat-icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" class="stat-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <h3 class="stat-number" id="stat-time" aria-label="5 times faster development">5x</h3>
        <p class="stat-label">Faster development</p>
      </div>
    </div>
    
    <div class="trusted-section">
      <div class="trusted-card">
        <div class="trusted-grid">
          <div class="trusted-content">
            <h3>Trusted by industry leaders</h3>
            <p>Join thousands of innovative companies that are transforming their product development with our platform.</p>
            <div class="stats-button-group">
              <a href="#" class="primary-button">
                <span>See customer stories</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
              </a>
              <a href="#" class="secondary-button">
                <span>Contact sales</span>
              </a>
            </div>
          </div>
          <div class="logo-grid">
            <!-- Logo 1 -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack logo" class="logo-image" />
            
            <!-- Logo 2 -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify logo" class="logo-image" />
            
            <!-- Logo 3 -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google logo" class="logo-image" />
            
            <!-- Logo 4 -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox logo" class="logo-image" />
            
            <!-- Logo 5 -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" alt="Stripe logo" class="logo-image" />
            
            <!-- Logo 6 -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" alt="Product Hunt logo" class="logo-image" />
          </div>
        </div>
      </div>
    </div>
    
    <div class="text-center">
      <a href="#" class="case-studies-link">
        <span>View all case studies</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</section>

<script>
  // Simple animation for stats numbers
  document.addEventListener('DOMContentLoaded', () => {
    const animateStats = (elementId, endValue, duration = 2000, prefix = '', suffix = '') => {
      const element = document.getElementById(elementId);
      if (!element) return;
      
      const startValue = 0;
      const increment = endValue > 100 ? 50 : 1;
      const stepTime = Math.abs(Math.floor(duration / (endValue - startValue)));
      
      let current = startValue;
      
      const timer = setInterval(() => {
        current += increment;
        
        if (current >= endValue) {
          element.textContent = prefix + endValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + suffix;
          clearInterval(timer);
        } else {
          element.textContent = prefix + current.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + suffix;
        }
      }, stepTime);
    };
    
    // Animate stats when they come into view
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // Start animations
          animateStats('stat-customers', 20000, 2000, '', '+');
          animateStats('stat-projects', 99, 1500, '', '%');
          animateStats('stat-performance', 40, 1500, '+', '%');
          animateStats('stat-time', 5, 1000, '', 'x');
          
          // Disconnect observer after animation starts
          observer.disconnect();
        }
      });
    }, { threshold: 0.1 });
    
    // Observe the first stat element
    const firstStat = document.getElementById('stat-customers');
    if (firstStat) {
      observer.observe(firstStat);
    }
  });
</script>


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

<section class="bg-gray-50 py-16 md:py-24">
  <div class="container mx-auto px-4 md:px-8">
    <div class="max-w-3xl mx-auto text-center mb-12 md:mb-16">
      <h2 class="text-3xl md:text-4xl font-medium text-gray-800 mb-4">Trusted by thousands of product teams worldwide</h2>
      <p class="text-lg text-gray-600">Our platform helps teams deliver better products faster with data-driven insights and powerful collaboration tools.</p>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
      <!-- Stat Card 1 -->
      <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm text-center hover:shadow-md transition-shadow duration-300">
        <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-blue-50 text-blue-600 mb-5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
          </svg>
        </div>
        <h3 class="text-4xl font-medium text-gray-800 mb-2" id="stat-customers" aria-label="20,000 plus customers">20,000+</h3>
        <p class="text-gray-600">Active customers</p>
      </div>
      
      <!-- Stat Card 2 -->
      <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm text-center hover:shadow-md transition-shadow duration-300">
        <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-blue-50 text-blue-600 mb-5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <h3 class="text-4xl font-medium text-gray-800 mb-2" id="stat-projects" aria-label="99 percent satisfaction rate">99%</h3>
        <p class="text-gray-600">Customer satisfaction</p>
      </div>
      
      <!-- Stat Card 3 -->
      <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm text-center hover:shadow-md transition-shadow duration-300">
        <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-blue-50 text-blue-600 mb-5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <h3 class="text-4xl font-medium text-gray-800 mb-2" id="stat-performance" aria-label="40 percent performance increase">+40%</h3>
        <p class="text-gray-600">Performance increase</p>
      </div>
      
      <!-- Stat Card 4 -->
      <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm text-center hover:shadow-md transition-shadow duration-300">
        <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-blue-50 text-blue-600 mb-5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <h3 class="text-4xl font-medium text-gray-800 mb-2" id="stat-time" aria-label="5 times faster development">5x</h3>
        <p class="text-gray-600">Faster development</p>
      </div>
    </div>
    
    <div class="mt-16 md:mt-20">
      <div class="bg-white border border-gray-200 rounded-2xl p-8 md:p-10 shadow-sm">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
          <div>
            <h3 class="text-2xl md:text-3xl font-normal text-gray-800 mb-4">Trusted by industry leaders</h3>
            <p class="text-gray-600 mb-6">Join thousands of innovative companies that are transforming their product development with our platform.</p>
            <div class="flex flex-wrap gap-3">
              <a href="#" class="bg-white border border-gray-200 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm inline-flex items-center transition-colors duration-300">
                <span>See customer stories</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
              </a>
              <a href="#" class="text-blue-600 px-6 py-3 rounded-lg hover:bg-blue-50 inline-flex items-center transition-colors duration-300">
                <span>Contact sales</span>
              </a>
            </div>
          </div>
          <div class="grid grid-cols-3 gap-4 md:gap-6">
            <!-- Logo 1 -->
            <!-- Slack image by Slack -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack logo" class="h-8 object-contain mx-auto" />
            
            <!-- Logo 2 -->
            <!-- Shopify image by Shopify -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify logo" class="h-8 object-contain mx-auto" />
            
            <!-- Logo 3 -->
            <!-- Google image by Google -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google logo" class="h-8 object-contain mx-auto" />
            
            <!-- Logo 4 -->
            <!-- Dropbox image by Dropbox -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox logo" class="h-8 object-contain mx-auto" />
            
            <!-- Logo 5 -->
            <!-- Stripe image by Stripe -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" alt="Stripe logo" class="h-8 object-contain mx-auto" />
            
            <!-- Logo 6 -->
            <!-- Product Hunt image by Product Hunt -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" alt="Product Hunt logo" class="h-8 object-contain mx-auto" />
          </div>
        </div>
      </div>
    </div>
    
    <div class="mt-16 text-center">
      <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium">
        <span>View all case studies</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</section>

<script>
  // Simple animation for stats numbers
  document.addEventListener('DOMContentLoaded', () => {
    const animateStats = (elementId, endValue, duration = 2000, prefix = '', suffix = '') => {
      const element = document.getElementById(elementId);
      if (!element) return;
      
      const startValue = 0;
      const increment = endValue > 100 ? 50 : 1;
      const stepTime = Math.abs(Math.floor(duration / (endValue - startValue)));
      
      let current = startValue;
      
      const timer = setInterval(() => {
        current += increment;
        
        if (current >= endValue) {
          element.textContent = prefix + endValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + suffix;
          clearInterval(timer);
        } else {
          element.textContent = prefix + current.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + suffix;
        }
      }, stepTime);
    };
    
    // Animate stats when they come into view
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // Start animations
          animateStats('stat-customers', 20000, 2000, '', '+');
          animateStats('stat-projects', 99, 1500, '', '%');
          animateStats('stat-performance', 40, 1500, '+', '%');
          animateStats('stat-time', 5, 1000, '', 'x');
          
          // Disconnect observer after animation starts
          observer.disconnect();
        }
      });
    }, { threshold: 0.1 });
    
    // Observe the first stat element
    const firstStat = document.getElementById('stat-customers');
    if (firstStat) {
      observer.observe(firstStat);
    }
  });
</script>

Stats Product Light

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions