<!--
@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>
