ServicesWorkInspirationBlogAbouthello@optimaflow.id
← All components

Section

free

What We Do 03

Split 'What We Do' section: accent headline + intro on the left, four numbered offering cards in a grid on the right. Deep-green light-SaaS.

Preview

What we do

actually moves.

We build the rails, dashboards and controls that finance teams rely on every day — from the first invoice to the annual close. Fewer tools, less reconciliation, and a single source of truth you can trust.

Explore the platform →

01

Payments & payouts

Move money in 40+ currencies with automated routing, batch payouts and instant reconciliation baked in.

02

Spend controls

Issue virtual cards, set live budgets and approve requests without a single spreadsheet touch.

03

Real-time reporting

Cash flow, runway and burn — always current, always auditable, ready for the board in one click.

04

Automated close

Sync ledgers, match transactions and shave days off month-end with rules that learn as you go.

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="whatwedo_component">
  <div class="whatwedo_inner">
    <div class="whatwedo_intro">
      <div class="whatwedo_eyebrow">
        <p class="whatwedo_eyebrow_text">What we do</p>
      </div>
      <h2 class="whatwedo_title">
        <span class="whatwedo_title_accent">actually moves.</span>
      </h2>
      <p class="whatwedo_lead">We build the rails, dashboards and controls that finance teams rely on every day — from the first invoice to the annual close. Fewer tools, less reconciliation, and a single source of truth you can trust.</p>
      <a class="whatwedo_cta" href="#offerings">Explore the platform →</a>
    </div>
    <div class="whatwedo_grid">
      <div class="whatwedo_card">
        <div class="whatwedo_index">
          <p class="whatwedo_index_num">01</p>
        </div>
        <h3 class="whatwedo_card_title">Payments & payouts</h3>
        <p class="whatwedo_card_text">Move money in 40+ currencies with automated routing, batch payouts and instant reconciliation baked in.</p>
      </div>
      <div class="whatwedo_card">
        <div class="whatwedo_index">
          <p class="whatwedo_index_num">02</p>
        </div>
        <h3 class="whatwedo_card_title">Spend controls</h3>
        <p class="whatwedo_card_text">Issue virtual cards, set live budgets and approve requests without a single spreadsheet touch.</p>
      </div>
      <div class="whatwedo_card">
        <div class="whatwedo_index">
          <p class="whatwedo_index_num">03</p>
        </div>
        <h3 class="whatwedo_card_title">Real-time reporting</h3>
        <p class="whatwedo_card_text">Cash flow, runway and burn — always current, always auditable, ready for the board in one click.</p>
      </div>
      <div class="whatwedo_card">
        <div class="whatwedo_index">
          <p class="whatwedo_index_num">04</p>
        </div>
        <h3 class="whatwedo_card_title">Automated close</h3>
        <p class="whatwedo_card_text">Sync ledgers, match transactions and shave days off month-end with rules that learn as you go.</p>
      </div>
    </div>
  </div>
</section>

<style>
.whatwedo_component {
  width:100%;
  background:#f7f8fa;
  padding:120px 24px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  box-sizing:border-box;
}

.whatwedo_inner {
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:72px;
  align-items:start;
}

.whatwedo_intro {
  display:flex;
  flex-direction:column;
  gap:28px;
  position:sticky;
  top:100px;
}

.whatwedo_eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  border-radius:999px;
  background:#e3ede9;
  padding:7px 16px;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:#0f4c3a;
}

.whatwedo_eyebrow_text {
  margin:0;
}

.whatwedo_title {
  margin:0;
  font-size:46px;
  line-height:1.05;
  font-weight:600;
  letter-spacing:-0.02em;
  color:#0e1512;
}

.whatwedo_title_accent {
  color:#0f4c3a;
}

.whatwedo_lead {
  margin:0;
  max-width:420px;
  font-size:17px;
  line-height:1.65;
  color:#4a5751;
}

.whatwedo_cta {
  display:inline-flex;
  align-items:center;
  gap:10px;
  align-self:flex-start;
  border-radius:999px;
  background:#0f4c3a;
  padding:15px 26px;
  font-size:15px;
  font-weight:600;
  color:#ffffff;
  text-decoration:none;
  transition:background .2s ease;
}

.whatwedo_grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.whatwedo_card {
  display:flex;
  flex-direction:column;
  gap:16px;
  border-radius:20px;
  border:1px solid #e6e9e7;
  background:#ffffff;
  padding:28px;
  transition:transform .2s ease,box-shadow .2s ease;
}

.whatwedo_index {
  display:flex;
  height:42px;
  width:42px;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#eef4f1;
  font-size:15px;
  font-weight:600;
  color:#0f4c3a;
}

.whatwedo_index_num {
  margin:0;
}

.whatwedo_card_title {
  margin:0;
  font-size:20px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:#0e1512;
}

.whatwedo_card_text {
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:#5a665f;
}
</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