ROI Calculator Section
A savings calculator band with team size, hours and hourly cost sliders, a rolling annual savings figure, before and after bars, payback, assumptions and a call to action.
Preview
Savings calculator
See what you’d save
Move the sliders to match your team. The numbers update as you go.
You’d save each year€93,696after the plan cost of €3,456 · 1,766 hours back
Today4,416 h
With Pebble2,650 h
- Pays for itself in
- 2 days
- Per person, per year
- €3,904
How we work this out
- Teams spend 40% less time finding and tidying notes (median from customer interviews).
- 46 working weeks a year.
- Plan cost €12 per person a month, taken off the savings.
- Hourly cost is salary plus overheads; leave it at your own estimate.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | { team, hours, rate } | { team: 24, hours: 4, rate: 55 } | Starting slider values. |
| assumptions | { reduction?, weeks?, pricePerSeat? } | 0.4 / 46 / 12 | Share of time saved, working weeks, plan price per seat per month. |
| ranges | { team?, hours?, rate? } | 2–200 / 1–12 / 20–150 | Slider min, max and step per input. |
| currency | string | "EUR" | ISO currency for all money. |
| locale | string | "en-GB" | Locale for numbers and currency. |
| product | string | — | Name for the With … bar (With us by default). |
| activity | string | "finding and tidying notes" | What the time goes on today. |
| cta | { label, href } | — | Primary call to action. |
| secondary | { label, href } | — | Secondary link. |
| onValueChange | (inputs, result) => void | — | Called as sliders move. |
| title | ReactNode | "See what you’d save" | Section heading. |
| description | ReactNode | — | Line under the heading. |
| eyebrow | ReactNode | "Savings calculator" | Label above the heading. |
| headingLevel | 2 | 3 | 2 | Heading level of the title. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.