ServicesWorkInspirationBlogAbouthello@optimaflow.id
← All components

Timeline

free

Timeline 03

Editorial year timeline: a giant green year numeral anchors each row beside dense, dated milestone entries. Clean SaaS/fintech vibe.

Preview

Our story so far

A decade of building money movement, quietly

2019

The beginning

Jan

The first line of code

Two engineers, one rented desk, and a stubborn belief that moving money should feel instant.

Sep

Seed round closed

$3.2M from operators who had felt the pain of legacy payment rails firsthand.

2021

Scaling up

Mar

Series A, $21M

Fresh capital to expand across three continents and hire the people to run it.

Oct

Instant payouts shipped

Sub-second settlement rolled out to every customer on the platform, with zero downtime.

2022

Earning trust

Feb

One million businesses

Crossed the milestone we once scribbled on a whiteboard as a half-serious joke.

Aug

SOC 2 Type II certified

Security and trust, verified — because payment infrastructure has to be boring in the best way.

2024

Global by default

May

Live in 38 markets

Local rails, local currencies, one unified API — the whole world settling in real time.

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="timeline_component">
  <div class="timeline_inner">
    <div class="timeline_header">
      <p class="timeline_eyebrow">Our story so far</p>
      <h2 class="timeline_title">
        <span class="timeline_title_plain">A decade of building money movement, </span>
        <span class="timeline_title_accent">quietly</span>
      </h2>
    </div>
    <div class="timeline_track">
      <div class="timeline_row">
        <div class="timeline_yearwrap">
          <p class="timeline_year">2019</p>
          <p class="timeline_year_label">The beginning</p>
        </div>
        <div class="timeline_entries">
          <div class="timeline_entry">
            <p class="timeline_date">Jan</p>
            <div class="timeline_entry_body">
              <h3 class="timeline_entry_title">The first line of code</h3>
              <p class="timeline_entry_text">Two engineers, one rented desk, and a stubborn belief that moving money should feel instant.</p>
            </div>
          </div>
          <div class="timeline_entry">
            <p class="timeline_date">Sep</p>
            <div class="timeline_entry_body">
              <h3 class="timeline_entry_title">Seed round closed</h3>
              <p class="timeline_entry_text">$3.2M from operators who had felt the pain of legacy payment rails firsthand.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="timeline_row">
        <div class="timeline_yearwrap">
          <p class="timeline_year">2021</p>
          <p class="timeline_year_label">Scaling up</p>
        </div>
        <div class="timeline_entries">
          <div class="timeline_entry">
            <p class="timeline_date">Mar</p>
            <div class="timeline_entry_body">
              <h3 class="timeline_entry_title">Series A, $21M</h3>
              <p class="timeline_entry_text">Fresh capital to expand across three continents and hire the people to run it.</p>
            </div>
          </div>
          <div class="timeline_entry">
            <p class="timeline_date">Oct</p>
            <div class="timeline_entry_body">
              <h3 class="timeline_entry_title">Instant payouts shipped</h3>
              <p class="timeline_entry_text">Sub-second settlement rolled out to every customer on the platform, with zero downtime.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="timeline_row">
        <div class="timeline_yearwrap">
          <p class="timeline_year">2022</p>
          <p class="timeline_year_label">Earning trust</p>
        </div>
        <div class="timeline_entries">
          <div class="timeline_entry">
            <p class="timeline_date">Feb</p>
            <div class="timeline_entry_body">
              <h3 class="timeline_entry_title">One million businesses</h3>
              <p class="timeline_entry_text">Crossed the milestone we once scribbled on a whiteboard as a half-serious joke.</p>
            </div>
          </div>
          <div class="timeline_entry">
            <p class="timeline_date">Aug</p>
            <div class="timeline_entry_body">
              <h3 class="timeline_entry_title">SOC 2 Type II certified</h3>
              <p class="timeline_entry_text">Security and trust, verified — because payment infrastructure has to be boring in the best way.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="timeline_row_final">
        <div class="timeline_yearwrap">
          <p class="timeline_year">2024</p>
          <p class="timeline_year_label">Global by default</p>
        </div>
        <div class="timeline_entries">
          <div class="timeline_entry">
            <p class="timeline_date">May</p>
            <div class="timeline_entry_body">
              <h3 class="timeline_entry_title">Live in 38 markets</h3>
              <p class="timeline_entry_text">Local rails, local currencies, one unified API — the whole world settling in real time.</p>
            </div>
          </div>
          <div class="timeline_cta_wrap">
            <a class="timeline_cta" href="#">Read the full story →</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
.timeline_component {
  background-color:#f7f8fa;
  width:100%;
  padding:120px 24px;
  font-family:Inter,'Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;
}

.timeline_inner {
  max-width:1120px;
  margin:0 auto;
}

.timeline_header {
  margin-bottom:80px;
  max-width:640px;
}

.timeline_eyebrow {
  font-size:13px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#0f4c3a;
  margin:0 0 20px 0;
}

.timeline_title {
  font-size:48px;
  line-height:1.05;
  font-weight:600;
  letter-spacing:-0.02em;
  color:#111614;
  margin:0;
}

.timeline_title_accent {
  color:#0f4c3a;
}

.timeline_track {
  display:flex;
  flex-direction:column;
}

.timeline_row {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:48px;
  padding:56px 0;
  border-top:1px solid #e3e6e4;
}

.timeline_year {
  font-size:88px;
  line-height:0.9;
  font-weight:600;
  letter-spacing:-0.04em;
  color:#0f4c3a;
  margin:0;
}

.timeline_year_label {
  font-size:13px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#7c847f;
  margin:16px 0 0 0;
}

.timeline_entries {
  display:flex;
  flex-direction:column;
  gap:40px;
  padding-top:10px;
}

.timeline_entry {
  display:grid;
  grid-template-columns:76px 1fr;
  gap:24px;
}

.timeline_date {
  font-size:13px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#0f4c3a;
  padding-top:4px;
  margin:0;
}

.timeline_entry_title {
  font-size:19px;
  font-weight:600;
  color:#111614;
  letter-spacing:-0.01em;
  margin:0 0 6px 0;
}

.timeline_entry_text {
  font-size:15px;
  line-height:1.6;
  color:#5b615d;
  margin:0;
}

.timeline_row_final {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:48px;
  padding:56px 0;
  border-top:1px solid #e3e6e4;
  border-bottom:1px solid #e3e6e4;
}

.timeline_cta_wrap {
  padding-top:8px;
}

.timeline_cta {
  display:inline-flex;
  align-items:center;
  background-color:#0f4c3a;
  color:#ffffff;
  font-size:15px;
  font-weight:600;
  padding:14px 28px;
  border-radius:999px;
  text-decoration:none;
  transition:background-color 0.2s ease;
}
</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