<!--
@type: Stats
@industry: SaaS
@style: Minimal
@category: Page Section, Social Proof
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
--spacing-32: 8rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component styles */
.stats-section {
background-color: var(--color-white);
padding: var(--spacing-24) 0;
}
.container {
max-width: 80rem; /* max-w-7xl */
margin: 0 auto;
padding: 0 var(--spacing-6);
}
.content-wrapper {
margin: 0 auto;
max-width: 42rem; /* max-w-2xl */
width: 100%;
}
.header {
text-align: center;
}
.title {
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: 1rem;
}
.subtitle {
margin-top: var(--spacing-4);
font-size: 1.125rem;
line-height: 1.75rem;
color: var(--color-gray-600);
}
.stats-grid {
margin-top: var(--spacing-16);
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
width: 100%;
}
.stat-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
border: 1px solid var(--color-gray-200);
border-radius: 0.5rem;
padding: var(--spacing-8);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
transition: box-shadow 0.2s ease-in-out;
}
.stat-card:hover {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.stat-label {
font-size: 1rem;
line-height: 1.75rem;
color: var(--color-gray-600);
}
.stat-value {
order: -1;
font-size: 1.875rem;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
.stat-detail {
font-size: 0.875rem;
color: var(--color-gray-500);
}
.cta-wrapper {
margin-top: var(--spacing-16);
display: flex;
justify-content: center;
}
.cta-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.375rem;
background-color: var(--color-white);
padding: var(--spacing-3) var(--spacing-6);
font-size: 1rem;
font-weight: 600;
color: var(--color-gray-900);
border: 1px solid var(--color-gray-300);
text-decoration: none;
}
.cta-button:hover {
background-color: #f9fafb;
}
.cta-button:focus {
outline: none;
ring: 2px solid var(--color-blue-500);
ring-offset: 2px;
}
.cta-icon {
height: 1.25rem;
width: 1.25rem;
}
.logo-section {
margin-top: var(--spacing-16);
padding-top: var(--spacing-8);
border-top: 1px solid var(--color-gray-200);
}
.logo-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-8);
}
.logo-image {
height: 2rem;
width: 100%;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.75;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.stats-section {
padding: var(--spacing-32) 0;
}
.title {
font-size: 2.25rem;
line-height: 2.5rem;
}
.stats-grid {
margin-top: var(--spacing-20);
grid-template-columns: repeat(2, 1fr);
}
.stat-value {
font-size: 3rem;
line-height: 1;
}
}
@media (min-width: 768px) {
.logo-grid {
grid-template-columns: repeat(6, 1fr);
}
}
@media (min-width: 1024px) {
.container {
padding: 0 var(--spacing-8);
}
.content-wrapper {
max-width: none;
}
.stats-grid {
grid-template-columns: repeat(4, 1fr);
}
.logo-grid {
grid-template-columns: repeat(7, 1fr);
}
}
</style>
<section class="stats-section">
<div class="container">
<div class="content-wrapper">
<div class="header">
<h2 class="title">Trusted by innovative teams worldwide</h2>
<p class="subtitle">Join thousands of companies that have transformed their operations with our platform</p>
</div>
<dl class="stats-grid">
<div class="stat-card">
<dt class="stat-label">Active Users</dt>
<dd class="stat-value">100K+</dd>
<div class="stat-detail">↑ 24% from last year</div>
</div>
<div class="stat-card">
<dt class="stat-label">Data Processed</dt>
<dd class="stat-value">500TB</dd>
<div class="stat-detail">Daily average</div>
</div>
<div class="stat-card">
<dt class="stat-label">Customer Rating</dt>
<dd class="stat-value">4.9/5</dd>
<div class="stat-detail">Based on 10K+ reviews</div>
</div>
<div class="stat-card">
<dt class="stat-label">Global Reach</dt>
<dd class="stat-value">150+</dd>
<div class="stat-detail">Countries served</div>
</div>
</dl>
<div class="cta-wrapper">
<a href="#" class="cta-button" aria-label="View detailed analytics">
View detailed analytics
<svg class="cta-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</a>
</div>
<div class="logo-section">
<div class="logo-grid">
<!-- Dropbox logo -->
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox" width="200" height="39">
<!-- Google logo -->
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google" width="200" height="83">
<!-- Notion logo -->
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" alt="Notion" width="200" height="70">
<!-- Product Hunt logo -->
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" alt="Product Hunt" width="200" height="72">
<!-- Shopify logo -->
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify" width="200" height="63">
<!-- Slack logo -->
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack" width="200" height="51">
<!-- Stripe logo -->
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" alt="Stripe" width="200" height="93">
</div>
</div>
</div>
</div>
</section>
<!--
@type: Stats
@industry: SaaS
@style: Minimal
@category: Page Section, Social Proof
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center">
<h2 class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">Trusted by innovative teams worldwide</h2>
<p class="mt-4 text-lg leading-8 text-gray-600">Join thousands of companies that have transformed their operations with our platform</p>
</div>
<dl class="mt-16 grid grid-cols-1 gap-8 sm:mt-20 sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-col items-center gap-y-3 border border-gray-200 rounded-lg p-8 shadow-sm hover:shadow-md transition-shadow">
<dt class="text-base leading-7 text-gray-600">Active Users</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">100K+</dd>
<div class="text-sm text-gray-500">↑ 24% from last year</div>
</div>
<div class="flex flex-col items-center gap-y-3 border border-gray-200 rounded-lg p-8 shadow-sm hover:shadow-md transition-shadow">
<dt class="text-base leading-7 text-gray-600">Data Processed</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">500TB</dd>
<div class="text-sm text-gray-500">Daily average</div>
</div>
<div class="flex flex-col items-center gap-y-3 border border-gray-200 rounded-lg p-8 shadow-sm hover:shadow-md transition-shadow">
<dt class="text-base leading-7 text-gray-600">Customer Rating</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">4.9/5</dd>
<div class="text-sm text-gray-500">Based on 10K+ reviews</div>
</div>
<div class="flex flex-col items-center gap-y-3 border border-gray-200 rounded-lg p-8 shadow-sm hover:shadow-md transition-shadow">
<dt class="text-base leading-7 text-gray-600">Global Reach</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">150+</dd>
<div class="text-sm text-gray-500">Countries served</div>
</div>
</dl>
<div class="mt-16 flex justify-center">
<a href="#" class="inline-flex items-center gap-x-2 rounded-md bg-white px-6 py-3 text-base font-semibold text-gray-900 border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" aria-label="View detailed analytics">
View detailed analytics
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</a>
</div>
<div class="mt-16 pt-8 border-t border-gray-200">
<div class="grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-7">
<!-- Dropbox logo -->
<img class="col-span-1 h-8 w-full object-contain grayscale opacity-75" src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox" width="200" height="39">
<!-- Google logo -->
<img class="col-span-1 h-8 w-full object-contain grayscale opacity-75" src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google" width="200" height="83">
<!-- Notion logo -->
<img class="col-span-1 h-8 w-full object-contain grayscale opacity-75" src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" alt="Notion" width="200" height="70">
<!-- Product Hunt logo -->
<img class="col-span-1 h-8 w-full object-contain grayscale opacity-75" src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" alt="Product Hunt" width="200" height="72">
<!-- Shopify logo -->
<img class="col-span-1 h-8 w-full object-contain grayscale opacity-75" src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify" width="200" height="63">
<!-- Slack logo -->
<img class="col-span-1 h-8 w-full object-contain grayscale opacity-75" src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack" width="200" height="51">
<!-- Stripe logo -->
<img class="col-span-1 h-8 w-full object-contain grayscale opacity-75" src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" alt="Stripe" width="200" height="93">
</div>
</div>
</div>
</div>
</section>
