<!--
@type: Stats
@industry: Marketing
@style: Dark
@category: Page Section, Social Proof
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-gray-300: #d1d5db;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--color-blue-400: #60a5fa;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-white: #ffffff;
/* Spacing */
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-14: 3.5rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
}
/* 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-gray-900);
padding: var(--spacing-16) var(--spacing-4);
}
.header {
max-width: 42rem; /* max-w-2xl */
margin: 0 auto var(--spacing-16);
text-align: center;
}
.header h2 {
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
}
.header p {
margin-top: var(--spacing-6);
font-size: 1.125rem;
line-height: 2rem;
color: var(--color-gray-300);
}
.stats-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
.stat-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-8) var(--spacing-6);
background-color: var(--color-gray-800);
border: 1px solid var(--color-gray-700);
border-radius: 0.75rem;
}
.stat-icon {
display: inline-flex;
height: var(--spacing-14);
width: var(--spacing-14);
align-items: center;
justify-content: center;
border-radius: 9999px;
background-color: rgba(37, 99, 235, 0.1);
margin-bottom: var(--spacing-4);
}
.stat-icon svg {
height: 1.5rem;
width: 1.5rem;
color: var(--color-blue-400);
}
.stat-value {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
}
.stat-label {
margin-top: var(--spacing-4);
font-size: 1rem;
line-height: 1.75rem;
color: var(--color-gray-300);
text-align: center;
}
.cta-container {
margin-top: var(--spacing-16);
display: flex;
justify-content: center;
}
.cta-button {
display: inline-flex;
align-items: center;
padding: 0.75rem var(--spacing-6);
font-size: 1rem;
font-weight: 600;
color: var(--color-white);
background-color: var(--color-blue-600);
border-radius: 0.5rem;
text-decoration: none;
transition: background-color 0.2s;
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.cta-button svg {
margin-left: 0.5rem;
margin-right: -0.25rem;
height: 1.25rem;
width: 1.25rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.stats-section {
padding: var(--spacing-20) var(--spacing-6);
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.stat-value {
font-size: 2.25rem;
line-height: 2.5rem;
}
}
@media (min-width: 1024px) {
.stats-grid {
grid-template-columns: repeat(4, 1fr);
}
.header h2 {
font-size: 2.25rem;
line-height: 2.5rem;
}
}
</style>
<section class="stats-section">
<div class="header">
<h2>Driving Growth Through Data</h2>
<p>Our proven marketing strategies have helped businesses achieve remarkable results. Here's what we've accomplished together with our clients.</p>
</div>
<dl class="stats-grid">
<!-- Revenue Growth -->
<div class="stat-card">
<div class="stat-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
</svg>
</div>
<dt class="stat-value">245%</dt>
<dd class="stat-label">Average revenue growth for our clients in 2023</dd>
</div>
<!-- Campaigns -->
<div class="stat-card">
<div class="stat-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605" />
</svg>
</div>
<dt class="stat-value">1.2K+</dt>
<dd class="stat-label">Successful marketing campaigns delivered</dd>
</div>
<!-- ROI -->
<div class="stat-card">
<div class="stat-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<dt class="stat-value">12.8x</dt>
<dd class="stat-label">Average return on marketing investment</dd>
</div>
<!-- Clients -->
<div class="stat-card">
<div class="stat-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
</div>
<dt class="stat-value">500+</dt>
<dd class="stat-label">Global clients across industries</dd>
</div>
</dl>
<div class="cta-container">
<a href="#" class="cta-button" aria-label="Schedule a consultation">
Schedule a Consultation
<svg 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>
</section>
<!--
@type: Stats
@industry: Marketing
@style: Dark
@category: Page Section, Social Proof
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900 py-16 sm:py-20">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center mb-16">
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Driving Growth Through Data</h2>
<p class="mt-6 text-lg leading-8 text-gray-300">Our proven marketing strategies have helped businesses achieve remarkable results. Here's what we've accomplished together with our clients.</p>
</div>
<dl class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
<!-- Revenue Growth -->
<div class="flex flex-col items-center justify-center rounded-xl bg-gray-800 px-6 py-8 border border-gray-700">
<div class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-blue-600/10 mb-4">
<svg class="h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
</svg>
</div>
<dt class="text-2xl font-bold tracking-tight text-white md:text-4xl">245%</dt>
<dd class="mt-4 text-base leading-7 text-gray-300 text-center">Average revenue growth for our clients in 2023</dd>
</div>
<!-- Campaigns -->
<div class="flex flex-col items-center justify-center rounded-xl bg-gray-800 px-6 py-8 border border-gray-700">
<div class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-blue-600/10 mb-4">
<svg class="h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605" />
</svg>
</div>
<dt class="text-2xl font-bold tracking-tight text-white md:text-4xl">1.2K+</dt>
<dd class="mt-4 text-base leading-7 text-gray-300 text-center">Successful marketing campaigns delivered</dd>
</div>
<!-- ROI -->
<div class="flex flex-col items-center justify-center rounded-xl bg-gray-800 px-6 py-8 border border-gray-700">
<div class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-blue-600/10 mb-4">
<svg class="h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<dt class="text-2xl font-bold tracking-tight text-white md:text-4xl">12.8x</dt>
<dd class="mt-4 text-base leading-7 text-gray-300 text-center">Average return on marketing investment</dd>
</div>
<!-- Clients -->
<div class="flex flex-col items-center justify-center rounded-xl bg-gray-800 px-6 py-8 border border-gray-700">
<div class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-blue-600/10 mb-4">
<svg class="h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
</div>
<dt class="text-2xl font-bold tracking-tight text-white md:text-4xl">500+</dt>
<dd class="mt-4 text-base leading-7 text-gray-300 text-center">Global clients across industries</dd>
</div>
</dl>
<div class="mt-16 flex justify-center">
<a href="#" class="inline-flex items-center px-6 py-3 text-base font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors duration-200" aria-label="Schedule a consultation">
Schedule a Consultation
<svg class="ml-2 -mr-1 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>
</section>
