ServicesWorkInspirationBlogAbouthello@optimaflow.id
← All components

Section

free

Stats Band 02

Dark-glow stats band: four oversized display numerals with tiny grey labels, teal glow bleed, and a compact eyebrow + headline lead-in.

Preview

By the numbers

Built to scale from first commit to global load

Teams ship faster on infrastructure that stays fast under real traffic — no cold starts, no surprises.

  • 99.99%

    Uptime SLA

  • 38ms

    Median latency

  • 120+

    Edge regions

  • 4.2B

    Requests / day

Copy the code

paste-ready → Designer
<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="stats_component">
  <div class="stats_glow"></div>
  <div class="stats_inner">
    <p class="stats_eyebrow">By the numbers</p>
    <h2 class="stats_title">Built to scale from first commit to global load</h2>
    <p class="stats_sub">Teams ship faster on infrastructure that stays fast under real traffic — no cold starts, no surprises.</p>
    <ul class="stats_row">
      <li class="stats_cell">
        <p class="stats_num">99.99%</p>
        <p class="stats_label">Uptime SLA</p>
      </li>
      <li class="stats_cell">
        <p class="stats_num">38ms</p>
        <p class="stats_label">Median latency</p>
      </li>
      <li class="stats_cell">
        <p class="stats_num">120+</p>
        <p class="stats_label">Edge regions</p>
      </li>
      <li class="stats_cell_last">
        <p class="stats_num">4.2B</p>
        <p class="stats_label">Requests / day</p>
      </li>
    </ul>
  </div>
</section>

<style>
.stats_component {
  position:relative;
  overflow:hidden;
  background:#05060a;
  padding:120px 24px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

.stats_glow {
  pointer-events:none;
  position:absolute;
  left:50%;
  top:-160px;
  width:820px;
  height:520px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(0,229,192,0.35),rgba(0,229,192,0));
  filter:blur(130px);
  opacity:0.6;
}

.stats_inner {
  position:relative;
  z-index:1;
  max-width:1140px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.stats_eyebrow {
  margin:0 0 18px 0;
  font-size:13px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.22em;
  color:#00e5c0;
}

.stats_title {
  margin:0 0 16px 0;
  max-width:720px;
  text-align:center;
  font-size:44px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:#ffffff;
}

.stats_sub {
  margin:0 0 72px 0;
  max-width:560px;
  text-align:center;
  font-size:17px;
  line-height:1.6;
  color:#9aa0ac;
}

.stats_row {
  width:100%;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:20px;
  background:rgba(255,255,255,0.02);
  overflow:hidden;
}

.stats_cell {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:46px 28px;
  text-align:center;
  background:rgba(255,255,255,0.015);
  border-right:1px solid rgba(255,255,255,0.05);
}

.stats_num {
  margin:0;
  font-size:64px;
  font-weight:700;
  line-height:0.95;
  letter-spacing:-0.04em;
  color:#ffffff;
}

.stats_label {
  margin:0;
  font-size:13px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:#8a909c;
}

.stats_cell_last {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:46px 28px;
  text-align:center;
  background:rgba(255,255,255,0.015);
}
</style>

One email unlocks copying across the whole library — that's the only ask.

Want the whole site built for you?

Book a free call