Component:

Stats Business Modern

Name: Stats Business Modern
Availability: InStock

Free

Tags: Stats Page Section Social Proof Business Modern

Colors:

Description:

This carefully crafted Stats component is perfect for Business landing pages, featuring a Modern 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: Business
@style: Modern
@category: Page Section, Social Proof
@framework: HTML/CSS
@license: Free
-->

<style>
:root {
  /* Colors */
  --color-slate-50: #f8fafc;
  --color-slate-200: #e2e8f0;
  --color-slate-600: #475569;
  --color-slate-900: #0f172a;
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-white: #ffffff;

  /* Spacing */
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
  --spacing-40: 10rem;
}

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

/* Base Styles */
.stats-section {
  background-color: var(--color-slate-50);
  padding: var(--spacing-16) var(--spacing-4);
}

.container {
  max-width: 80rem; /* max-w-7xl */
  margin: 0 auto;
}

.header {
  max-width: 48rem; /* max-w-3xl */
  margin: 0 auto;
  text-align: center;
  margin-bottom: var(--spacing-16);
}

.header h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-slate-900);
}

.header p {
  margin-top: var(--spacing-6);
  font-size: 1.125rem;
  line-height: 2rem;
  color: var(--color-slate-600);
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
}

.stat-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: var(--color-white);
  padding: var(--spacing-8);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-slate-200);
  transition: all 300ms;
}

.stat-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -3rem;
  right: -3rem;
  height: var(--spacing-40);
  width: var(--spacing-40);
  border-radius: 50%;
  background-color: var(--color-indigo-50);
  opacity: 0.7;
  transition: transform 500ms;
}

.stat-card:hover::before {
  transform: scale(1.1);
}

.stat-content {
  position: relative;
}

.stat-icon {
  display: inline-flex;
  height: var(--spacing-14);
  width: var(--spacing-14);
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: var(--color-indigo-100);
  color: var(--color-indigo-600);
  margin-bottom: var(--spacing-6);
}

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

.stat-value {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-slate-900);
}

.stat-description {
  margin-top: var(--spacing-4);
  font-size: 1rem;
  color: var(--color-slate-600);
}

/* Additional Stats */
.additional-stats {
  margin-top: var(--spacing-16);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
}

.stat-small-card {
  border-radius: 0.75rem;
  background-color: var(--color-white);
  padding: var(--spacing-8);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-slate-200);
}

.stat-small-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.stat-small-icon {
  display: inline-flex;
  height: var(--spacing-12);
  width: var(--spacing-12);
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: var(--color-indigo-100);
  color: var(--color-indigo-600);
}

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

.stat-small-text p:first-child {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-slate-900);
}

.stat-small-text p:last-child {
  font-size: 0.875rem;
  color: var(--color-slate-600);
}

/* CTA Section */
.cta-section {
  margin-top: var(--spacing-16);
  display: flex;
  flex-direction: column;
  align-items: 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-indigo-600);
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background-color 200ms;
}

.cta-button:hover {
  background-color: var(--color-indigo-700);
}

.cta-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-600);
}

.cta-button svg {
  margin-left: 0.5rem;
  margin-right: -0.25rem;
  height: 1.25rem;
  width: 1.25rem;
}

.cta-note {
  margin-top: var(--spacing-4);
  font-size: 0.875rem;
  color: var(--color-slate-600);
}

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .stats-section {
    padding: var(--spacing-24) var(--spacing-6);
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .additional-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .header h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  
  .stat-value {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

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

<section class="stats-section">
  <div class="container">
    <div class="header">
      <h2>Driving Business Excellence Through Measurable Results</h2>
      <p>Our proven strategies have helped businesses across industries achieve remarkable growth and operational efficiency.</p>
    </div>

    <!-- Stats Grid -->
    <div class="stats-grid">
      <!-- Revenue Growth -->
      <div class="stat-card">
        <div class="stat-content">
          <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">187%</dt>
          <dd class="stat-description">Average revenue growth for our enterprise clients in 2023</dd>
        </div>
      </div>

      <!-- Client Retention -->
      <div class="stat-card">
        <div class="stat-content">
          <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">96%</dt>
          <dd class="stat-description">Client retention rate, reflecting our commitment to long-term partnerships</dd>
        </div>
      </div>

      <!-- ROI -->
      <div class="stat-card">
        <div class="stat-content">
          <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">8.5x</dt>
          <dd class="stat-description">Average return on investment for clients implementing our solutions</dd>
        </div>
      </div>

      <!-- Global Presence -->
      <div class="stat-card">
        <div class="stat-content">
          <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 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
            </svg>
          </div>
          <dt class="stat-value">42</dt>
          <dd class="stat-description">Countries where our business solutions have been successfully implemented</dd>
        </div>
      </div>
    </div>

    <!-- Additional Stats Row -->
    <div class="additional-stats">
      <div class="stat-small-card">
        <div class="stat-small-content">
          <div class="stat-small-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>
          <div class="stat-small-text">
            <p>1,500+ Projects</p>
            <p>Successfully delivered</p>
          </div>
        </div>
      </div>

      <div class="stat-small-card">
        <div class="stat-small-content">
          <div class="stat-small-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="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
            </svg>
          </div>
          <div class="stat-small-text">
            <p>750+ Clients</p>
            <p>From startups to Fortune 500</p>
          </div>
        </div>
      </div>

      <div class="stat-small-card">
        <div class="stat-small-content">
          <div class="stat-small-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="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
            </svg>
          </div>
          <div class="stat-small-text">
            <p>4.9/5 Rating</p>
            <p>Based on 2,400+ reviews</p>
          </div>
        </div>
      </div>
    </div>

    <!-- CTA Section -->
    <div class="cta-section">
      <a href="#" class="cta-button" aria-label="Schedule a consultation">
        Schedule a Business 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>
      <p class="cta-note">No commitment required. Free initial assessment.</p>
    </div>
  </div>
</section>


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

<section class="bg-slate-50 py-16 sm:py-24">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-3xl text-center mb-16">
      <h2 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">Driving Business Excellence Through Measurable Results</h2>
      <p class="mt-6 text-lg leading-8 text-slate-600">Our proven strategies have helped businesses across industries achieve remarkable growth and operational efficiency.</p>
    </div>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
      <!-- Revenue Growth -->
      <div class="group relative overflow-hidden rounded-xl bg-white p-8 shadow-lg border border-slate-200 transition-all duration-300 hover:shadow-xl">
        <div class="absolute -right-12 -top-12 h-40 w-40 rounded-full bg-indigo-50 opacity-70 transition-transform duration-500 group-hover:scale-110"></div>
        <div class="relative">
          <div class="inline-flex h-14 w-14 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600 mb-6">
            <svg class="h-6 w-6" 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-3xl font-bold text-slate-900 md:text-4xl">187%</dt>
          <dd class="mt-4 text-base text-slate-600">Average revenue growth for our enterprise clients in 2023</dd>
        </div>
      </div>

      <!-- Client Retention -->
      <div class="group relative overflow-hidden rounded-xl bg-white p-8 shadow-lg border border-slate-200 transition-all duration-300 hover:shadow-xl">
        <div class="absolute -right-12 -top-12 h-40 w-40 rounded-full bg-indigo-50 opacity-70 transition-transform duration-500 group-hover:scale-110"></div>
        <div class="relative">
          <div class="inline-flex h-14 w-14 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600 mb-6">
            <svg class="h-6 w-6" 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-3xl font-bold text-slate-900 md:text-4xl">96%</dt>
          <dd class="mt-4 text-base text-slate-600">Client retention rate, reflecting our commitment to long-term partnerships</dd>
        </div>
      </div>

      <!-- ROI -->
      <div class="group relative overflow-hidden rounded-xl bg-white p-8 shadow-lg border border-slate-200 transition-all duration-300 hover:shadow-xl">
        <div class="absolute -right-12 -top-12 h-40 w-40 rounded-full bg-indigo-50 opacity-70 transition-transform duration-500 group-hover:scale-110"></div>
        <div class="relative">
          <div class="inline-flex h-14 w-14 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600 mb-6">
            <svg class="h-6 w-6" 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-3xl font-bold text-slate-900 md:text-4xl">8.5x</dt>
          <dd class="mt-4 text-base text-slate-600">Average return on investment for clients implementing our solutions</dd>
        </div>
      </div>

      <!-- Global Presence -->
      <div class="group relative overflow-hidden rounded-xl bg-white p-8 shadow-lg border border-slate-200 transition-all duration-300 hover:shadow-xl">
        <div class="absolute -right-12 -top-12 h-40 w-40 rounded-full bg-indigo-50 opacity-70 transition-transform duration-500 group-hover:scale-110"></div>
        <div class="relative">
          <div class="inline-flex h-14 w-14 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600 mb-6">
            <svg class="h-6 w-6" 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 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
            </svg>
          </div>
          <dt class="text-3xl font-bold text-slate-900 md:text-4xl">42</dt>
          <dd class="mt-4 text-base text-slate-600">Countries where our business solutions have been successfully implemented</dd>
        </div>
      </div>
    </div>

    <!-- Additional Stats Row -->
    <div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-3">
      <div class="rounded-xl bg-white p-8 shadow-lg border border-slate-200">
        <div class="flex items-center gap-4">
          <div class="inline-flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600">
            <svg class="h-6 w-6" 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>
          <div>
            <p class="text-lg font-semibold text-slate-900">1,500+ Projects</p>
            <p class="text-sm text-slate-600">Successfully delivered</p>
          </div>
        </div>
      </div>

      <div class="rounded-xl bg-white p-8 shadow-lg border border-slate-200">
        <div class="flex items-center gap-4">
          <div class="inline-flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
            </svg>
          </div>
          <div>
            <p class="text-lg font-semibold text-slate-900">750+ Clients</p>
            <p class="text-sm text-slate-600">From startups to Fortune 500</p>
          </div>
        </div>
      </div>

      <div class="rounded-xl bg-white p-8 shadow-lg border border-slate-200">
        <div class="flex items-center gap-4">
          <div class="inline-flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
            </svg>
          </div>
          <div>
            <p class="text-lg font-semibold text-slate-900">4.9/5 Rating</p>
            <p class="text-sm text-slate-600">Based on 2,400+ reviews</p>
          </div>
        </div>
      </div>
    </div>

    <!-- CTA Section -->
    <div class="mt-16 flex flex-col items-center">
      <a href="#" class="inline-flex items-center px-6 py-3 text-base font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" aria-label="Schedule a consultation">
        Schedule a Business 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>
      <p class="mt-4 text-sm text-slate-600">No commitment required. Free initial assessment.</p>
    </div>
  </div>
</section>

Stats Business Modern

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions