ROI Calculator Page

Add to a project

Pro item: the CLI needs a Pro account. See plans

Usage

// app/(marketing)/roi/page.tsx
"use client"

import Link from "next/link"
import { RoiCalculatorPage } from "@/components/templates/roi-calculator-page"

export default function RoiRoute() {
  return (
    <RoiCalculatorPage
      linkComponent={Link}
      ctaTone="brand"
      onRequestReport={async (inputs, results, contact) => {
        const response = await fetch("/api/roi-report", {
          method: "POST",
          body: JSON.stringify({ inputs, net: results.net, ...contact }),
        })
        if (!response.ok) throw new Error("Could not send the report")
      }}
    />
  )
}

Props

• designdefault "classic"
  "classic" | "bold" | "minimal"

  The whole page's look. classic: a dotted glow behind a start-aligned hero and raised panels; bold: a pill header, a giant title on a gradient mesh, an inverted results panel, rounder panels, FAQ cards, an image band and a wordmark footer; minimal: a transparent header, a centered hero, no glow, outlined flat panels, no gray bands and a simple footer. faqProps and ctaProps still win.

• inputs
  RoiInputs

  Controlled calculator values: { teamSize, hourlyCost, tools, statusHours, searchHours, switchHours, plan, billing }. Use with onInputsChange.

• defaultInputsdefault "ROI_DEFAULT_INPUTS"
  Partial<RoiInputs>

  The values on load and after Reset to defaults: 40 people, $55 an hour, four tools, 2.5 / 3 / 2 hours, Business billed yearly.

• onInputsChange
  (inputs: RoiInputs) => void

  Fires on every edit, including the values read from a share link.

• assumptions
  RoiAssumptions

  Controlled assumptions; use with onAssumptionsChange.

• defaultAssumptionsdefault "ROI_DEFAULT_ASSUMPTIONS"
  Partial<RoiAssumptions>

  Reductions (40 / 30 / 20%), adoption 80%, half of the hours counted as value, 46 weeks, a 3-month ramp, 2 setup hours and the plan prices.

• onAssumptionsChange
  (assumptions: RoiAssumptions) => void

  Fires when the assumptions card is edited or reset.

• toolsdefault "ROI_TOOLS"
  RoiTool[]

  The tools Acme replaces: { id, name, description, price (per seat per month), icon? }.

• customersdefault "ROI_CUSTOMERS"
  RoiCustomer[]

  Proof cards: { company, icon?, industry, metric, metricLabel, quote, name, role, detail }.

• faqdefault "ROI_FAQ"
  FaqItem[]

  { question, answer } pairs about the method.

• labelsdefault "DEFAULT_ROI_CALCULATOR_PAGE_LABELS"
  Partial<RoiCalculatorPageLabels>

  Every visible string; the ones with numbers in them are functions.

• hrefsdefault "DEFAULT_ROI_CALCULATOR_PAGE_HREFS"
  Partial<RoiCalculatorPageHrefs>

  { announcement, signUp, sales, privacy, customers }.

• maxTeamdefault 500
  number

  The team size slider's end and the largest value a share link may set.

• defaultHorizondefault "36"
  12 | 24 | 36

  The chart's time range on load, in months (a number; the playground passes it as text).

• readSharedInputsdefault true
  boolean

  Reads team, rate, tools, status, search, switch, plan and billing from the query string after mount.

• showAnnouncementdefault true
  boolean

  The strip above the header bar.

• showTimelinedefault true
  boolean

  The savings over time chart (and the report form beside it).

• showReportdefault true
  boolean

  The Get the full report form and the buttons that lead to it.

• showWeekdefault true
  boolean

  The before / after week calendars.

• showAssumptionsdefault true
  boolean

  The method, the editable assumptions and the survey footnote.

• showCustomersdefault true
  boolean

  The customer proof cards.

• showFaqdefault true
  boolean

  The FAQ.

• showCtadefault true
  boolean

  The closing call to action.

• showSharedefault true
  boolean

  The Share this estimate button.

• showSummaryBardefault true
  boolean

  The bottom summary bar below 1024px and its results sheet.

• ctaVariantdefault "inverted"
  "inverted" | "soft" | "split"

  The closing band: a solid band, a gray band, or copy beside the buttons on a raised panel. Applies to the classic design.

• alternatedefault true
  boolean

  Gray bands on every other section. Applies to the classic and bold designs.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Accents: the hero badge, the glow, sliders, segmented thumbs and selected tool chips.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Get the full report, Email me the report, Details, the header's Get started and the closing band; brand is the marketing orange.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  The corners of the form fields.

• headerdefault true
  boolean

  The marketing header; off inside a site layout.

• footerdefault true
  boolean

  The marketing footer with its newsletter form.

• headerProps
  Partial<MarketingHeaderProps>

  Passed to MarketingHeader.

• footerProps
  Partial<MarketingFooterProps>

  Passed to MarketingFooter.

• faqProps
  Partial<FaqSectionProps>

  Overrides for the FaqSection.

• ctaProps
  Partial<CtaSectionProps>

  Overrides for the CtaSection.

• onRequestReport
  (inputs: RoiInputs, results: RoiResult, contact: { email, company }) => (void | Promise<unknown>)

  The report form. A promise keeps the button loading and a rejection shows an error. Without it the form waits 900 ms and shows the sent state with a drawn PDF preview.

• onShare
  (url: string, inputs: RoiInputs) => void

  The share link was built and copied (or the copy failed).

• onSubscribe
  (email: string) => (void | Promise<unknown>)

  The footer newsletter; a rejected promise shows an error.

• animateIndefault true
  boolean

  The hero rises in once and numbers roll to new values; false keeps the page still (thumbnails). Reduced motion always does.

• localedefault "en-US"
  string

  Intl locale for money, hours and percentages.

• currencydefault "USD"
  string

  ISO currency of the hourly cost, tool prices and results (amounts are not converted).

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for every link on the page (next/link in an app).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<RoiCalculatorPageSlot, string>>

  Classes for header, hero, title, inputs, results, timeline, chart, report, week, assumptions, customers, customer, faq, cta, summary and footer.

Parts