{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "template-northwind", "title": "Northwind: B2B SaaS", "author": "Ballmac ", "description": "A warm, editorial five-page site for a B2B product: serif headlines on cream paper, an interactive product tour with numbered pins, case studies, pricing, an about page and a demo request form.", "dependencies": [ "lucide-react", "radix-ui" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/accordion.json", "https://ui.ballmac.com/r/blur-fade.json", "https://ui.ballmac.com/r/number-ticker.json", "https://ui.ballmac.com/r/segmented-control.json" ], "files": [ { "path": "registry/ballmac/components/templates/northwind/northwind-fonts.ts", "content": "// Ballmac UI: Northwind template fonts. https://ui.ballmac.com/templates/template-northwind\nimport { Figtree, Fraunces } from \"next/font/google\"\n\nexport const northwindSerif = Fraunces({ variable: \"--northwind-serif\", subsets: [\"latin\"], axes: [\"opsz\", \"SOFT\"], display: \"swap\", preload: false })\nexport const northwindSans = Figtree({ variable: \"--northwind-sans\", subsets: [\"latin\"], display: \"swap\", preload: false })\n", "type": "registry:component", "target": "@components/ballmac/templates/northwind/northwind-fonts.ts" }, { "path": "registry/ballmac/components/templates/northwind/northwind-theme.tsx", "content": "// Ballmac UI: Northwind template shell. https://ui.ballmac.com/templates/template-northwind\n\"use client\"\n\nimport * as React from \"react\"\nimport { Menu, X } from \"lucide-react\"\n\nimport { northwindSans, northwindSerif } from \"@/components/ballmac/templates/northwind/northwind-fonts\"\nimport { cn } from \"@/lib/utils\"\n\ntype NorthwindPage = \"home\" | \"pricing\" | \"customers\" | \"about\" | \"contact\"\ntype NorthwindHrefs = Record\n\nconst defaultHrefs: NorthwindHrefs = { home: \"/northwind\", pricing: \"/northwind/pricing\", customers: \"/northwind/customers\", about: \"/northwind/about\", contact: \"/northwind/contact\" }\n\n/** Northwind's palette: cream paper, forest ink and one terracotta. Dark mode turns to deep green. */\nconst northwindCss = `\n.northwind-theme{--background:oklch(0.975 0.014 88);--foreground:oklch(0.24 0.035 155);--card:oklch(0.99 0.01 88);--card-foreground:oklch(0.24 0.035 155);--popover:oklch(0.99 0.01 88);--popover-foreground:oklch(0.24 0.035 155);--primary:oklch(0.36 0.075 158);--primary-foreground:oklch(0.975 0.014 88);--secondary:oklch(0.94 0.02 88);--secondary-foreground:oklch(0.24 0.035 155);--muted:oklch(0.94 0.02 88);--muted-foreground:oklch(0.48 0.03 150);--accent:oklch(0.925 0.025 95);--accent-foreground:oklch(0.24 0.035 155);--border:oklch(0.24 0.035 155 / 13%);--input:oklch(0.24 0.035 155 / 18%);--ring:oklch(0.5 0.1 158);--surface:oklch(0.955 0.018 88);--destructive:oklch(0.55 0.2 28);--chart-1:oklch(0.45 0.09 158);--chart-2:oklch(0.5 0.15 45);--chart-3:oklch(0.76 0.13 85);--chart-4:oklch(0.5 0.12 330);--chart-5:oklch(0.52 0.08 240);--radius:0.5rem}\n.dark .northwind-theme{--background:oklch(0.19 0.025 158);--foreground:oklch(0.95 0.015 88);--card:oklch(0.23 0.03 158);--card-foreground:oklch(0.95 0.015 88);--popover:oklch(0.25 0.03 158);--popover-foreground:oklch(0.95 0.015 88);--primary:oklch(0.84 0.09 150);--primary-foreground:oklch(0.2 0.03 158);--secondary:oklch(0.27 0.032 158);--secondary-foreground:oklch(0.95 0.015 88);--muted:oklch(0.26 0.03 158);--muted-foreground:oklch(0.74 0.03 130);--accent:oklch(0.3 0.035 158);--accent-foreground:oklch(0.95 0.015 88);--border:oklch(0.95 0.015 88 / 14%);--input:oklch(0.95 0.015 88 / 18%);--ring:oklch(0.74 0.12 150);--surface:oklch(0.21 0.027 158);--destructive:oklch(0.7 0.18 28);--chart-1:oklch(0.78 0.11 150);--chart-2:oklch(0.76 0.13 50);--chart-3:oklch(0.84 0.12 90);--chart-4:oklch(0.74 0.12 335);--chart-5:oklch(0.76 0.09 240)}\n`\n\nconst links: { key: NorthwindPage; label: string }[] = [\n { key: \"home\", label: \"Product\" },\n { key: \"pricing\", label: \"Pricing\" },\n { key: \"customers\", label: \"Customers\" },\n { key: \"about\", label: \"About\" },\n]\n\nfunction NorthwindMark({ className }: { className?: string }) {\n return (\n \n \n \n \n \n )\n}\n\n/** A serif heading. Wrap one word in `` for the italic accent. */\nfunction NorthwindHeading({ as: Tag = \"h2\", className, ...props }: React.ComponentProps<\"h2\"> & { as?: \"h1\" | \"h2\" | \"h3\" }) {\n return \n}\n\ntype NorthwindShellProps = React.ComponentProps<\"div\"> & {\n /** The page being shown, so its nav link is marked current. */\n page: NorthwindPage\n /** Override where pages live (used by previews). */\n hrefs?: Partial\n}\n\n/** Northwind's frame: cream paper, a serif wordmark header and an editorial footer. Wrap every Northwind page in it. */\nfunction NorthwindShell({ page, hrefs: overrides, className, style, children, ...props }: NorthwindShellProps) {\n const hrefs = { ...defaultHrefs, ...overrides }\n const [open, setOpen] = React.useState(false)\n return (\n \n \n
\n
\n \n \n Northwind\n \n \n
\n \n Book a demo\n \n
\n
\n {open && (\n \n )}\n
\n {children}\n
\n
\n
\n
\n

Know where every dollar goes.

\n Book a demo\n
\n {[\n { title: \"Product\", items: [[\"Cards\", \"home\"], [\"Approvals\", \"home\"], [\"Reporting\", \"home\"], [\"Pricing\", \"pricing\"]] },\n { title: \"Company\", items: [[\"About\", \"about\"], [\"Customers\", \"customers\"], [\"Careers\", \"about\"], [\"Contact\", \"contact\"]] },\n { title: \"Resources\", items: [[\"Guides\", \"home\"], [\"Security\", \"home\"], [\"Status\", \"home\"], [\"Press\", \"about\"]] },\n ].map((c) => (\n
\n

{c.title}

\n
    \n {c.items.map(([label, key]) =>
  • {label}
    • )}\n
\n
\n ))}\n
\n

© 2026 Northwind Financial, Inc. Banking services provided by partner banks, Members FDIC.

\n
\n
\n \n )\n}\n\nexport { NorthwindHeading, NorthwindMark, NorthwindShell, defaultHrefs as northwindDefaultHrefs, type NorthwindHrefs, type NorthwindPage, type NorthwindShellProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/northwind/northwind-theme.tsx" }, { "path": "registry/ballmac/components/templates/northwind/northwind-tour.tsx", "content": "// Ballmac UI: Northwind product tour. https://ui.ballmac.com/templates/template-northwind\n\"use client\"\n\nimport * as React from \"react\"\nimport { BarChart3, Check, CreditCard, Home, ListChecks, Settings, Wallet } from \"lucide-react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { NorthwindHeading } from \"@/components/ballmac/templates/northwind/northwind-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst steps = [\n { id: \"cards\", title: \"Issue a card in seconds\", text: \"Virtual or physical, with a limit, a merchant lock and an owner. Employees never wait on finance to buy what they need.\" },\n { id: \"approvals\", title: \"Approve from anywhere\", text: \"Requests reach the right person by policy, with the receipt and context attached. One tap from a phone is enough.\" },\n { id: \"budgets\", title: \"Budgets that warn early\", text: \"Every team sees what is left as they spend, and finance is told at 80 percent, not after the overrun.\" },\n { id: \"close\", title: \"Close the month in days\", text: \"Receipts are matched, coded and exported to your ledger as spend happens, so close day stops being a project.\" },\n] as const\n\ntype StepId = (typeof steps)[number][\"id\"]\n\nconst cardRows = [\n [\"Design tools\", \"•••• 4821\", \"$2,400\", \"Maya R.\"],\n [\"Team offsite\", \"•••• 1190\", \"$8,000\", \"Dev P.\"],\n [\"Cloud hosting\", \"•••• 7745\", \"$14,500\", \"Engineering\"],\n]\n\nconst queue = [\n [\"Figma annual\", \"$1,440\", \"Maya R.\"],\n [\"Flight to Lisbon\", \"$612\", \"Sam O.\"],\n [\"Conference pass\", \"$890\", \"Dev P.\"],\n]\n\nconst budgets = [\n [\"Marketing\", 82, \"bg-chart-2\"],\n [\"Engineering\", 64, \"bg-chart-1\"],\n [\"Operations\", 38, \"bg-chart-5\"],\n]\n\nfunction Region({ id, active, children, className }: { id: StepId; active: StepId; children: React.ReactNode; className?: string }) {\n const on = id === active\n return (\n \n {children}\n \n )\n}\n\n/** A numbered pin on the mock. It repeats the step list for pointer users, so it is hidden from keyboard and screen readers. */\nfunction Pin({ n, id, active, onSelect }: { n: number; id: StepId; active: StepId; onSelect: (id: StepId) => void }) {\n const on = id === active\n return (\n onSelect(id)}\n className={cn(\"absolute -top-3 -start-3 z-10 flex size-7 items-center justify-center rounded-full border-2 text-xs font-semibold shadow-sm outline-none transition-colors\", on ? \"bg-chart-2 border-card text-white\" : \"bg-card text-foreground hover:bg-accent\")}\n >\n {n}\n \n )\n}\n\n/** An interactive product tour: numbered pins on a mock dashboard, tied to a list of steps. */\nfunction NorthwindTour({ className }: { className?: string }) {\n const [active, setActive] = React.useState(\"cards\")\n const current = steps.find((s) => s.id === active)!\n return (\n
\n
\n setActive(v as StepId)} aria-label=\"Product tour steps\" className=\"space-y-1.5\">\n {steps.map((s, i) => {\n const on = s.id === active\n return (\n \n \n {i + 1}\n {s.title}\n \n {on && {s.text}}\n \n )\n })}\n \n
\n\n
\n

Step {steps.indexOf(current) + 1} of {steps.length}: {current.title}. {current.text}

\n
\n \n
\n {[Home, CreditCard, ListChecks, Wallet].map((I, i) => )}\n
\n
\n \n \n

Cards

\n
    \n {cardRows.map((r) => (\n
  • \n {r[0]}\n \n \n {r[2]}\n
    • \n ))}\n
\n \n \n \n

Needs approval 3

\n
    \n {queue.map((q) => (\n
  • \n {q[0]} {q[2]}\n {q[1]}\n
    • \n ))}\n
\n \n \n \n

Budgets this quarter

\n
    \n {budgets.map(([name, pct, tone]) => (\n
  • \n
    {name} 80 && \"text-chart-2 font-semibold\")}>{pct}%
    \n
    \n
    • \n ))}\n
\n \n \n \n
\n

October close

\n

Day 2 of 3

\n
\n
\n

412 of 468 receipts matched · 56 waiting on employees

\n \n
\n
\n
\n
\n )\n}\n\nexport { NorthwindTour }\n", "type": "registry:component", "target": "@components/ballmac/templates/northwind/northwind-tour.tsx" }, { "path": "registry/ballmac/components/templates/northwind/northwind-home.tsx", "content": "// Ballmac UI: Northwind home page. https://ui.ballmac.com/templates/template-northwind\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRight, Check, Quote } from \"lucide-react\"\n\nimport { BlurFade } from \"@/components/ballmac/blur-fade\"\nimport { NumberTicker } from \"@/components/ballmac/number-ticker\"\nimport { NorthwindHeading, NorthwindShell, type NorthwindHrefs } from \"@/components/ballmac/templates/northwind/northwind-theme\"\nimport { NorthwindTour } from \"@/components/ballmac/templates/northwind/northwind-tour\"\nimport { cn } from \"@/lib/utils\"\n\nconst serif = \"[font-family:var(--northwind-serif),ui-serif,Georgia,serif]\"\n\nconst logos = [\"Harlow & Pine\", \"Fernhill\", \"Oakline\", \"Brightwell\", \"Tidewater\", \"Marlow Co\"]\n\nconst before = [\"Receipts in a shared inbox\", \"Spreadsheets for every team’s budget\", \"Cards approved by whoever answers Slack\", \"Nine days to close the month\"]\nconst after = [\"Receipts captured and matched at purchase\", \"Live budgets every team can see\", \"Policy routes each request to the right person\", \"Three days to close the month\"]\n\nfunction Mini({ children, label }: { children: React.ReactNode; label: string }) {\n return (\n
\n
{children}
\n
\n )\n}\n\ntype NorthwindHomeProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Northwind home page: an editorial hero, an interactive product tour, proof, three product stories and a quote. */\nfunction NorthwindHome({ hrefs, ...props }: NorthwindHomeProps) {\n const contact = hrefs?.contact ?? \"/northwind/contact\"\n return (\n \n
\n
\n \n

Spend management for finance teams

\n \n Spend with clarity, close with calm.\n \n
\n

\n Northwind gives every team the cards, approvals and budgets they need, and gives finance a ledger that is already right on the first of the month.\n

\n \n
\n \n
\n\n
\n \n
\n\n
\n
\n

Trusted by 1,400 finance teams

\n
    \n {logos.map((l) =>
  • {l}
    • )}\n
\n
\n
\n\n
\n
\n {[\n { v: 62, s: \"%\", l: \"Faster month-end close\", d: 0 },\n { v: 4.2, s: \"B\", p: \"$\", l: \"Spend managed each year\", d: 1 },\n { v: 97, s: \"%\", l: \"Receipts matched automatically\", d: 0 },\n ].map((x) => (\n
\n
{x.p}{x.s}
\n
{x.l}
\n
\n ))}\n
\n
\n\n {/* Three stories */}\n
\n
\n
\n

Cards

\n Give every team a card that knows the rules.\n

Limits, merchants and approval policies travel with the card, so the right purchase just works and the wrong one never leaves the building.

\n
    {[\"Virtual cards for every subscription\", \"Merchant and category locks\", \"Instant freeze, from any device\"].map((x) =>
  • {x}
    • )}
\n
\n \n
\n {[[\"Design tools\", \"$2,400\", \"bg-chart-1\"], [\"Cloud hosting\", \"$14,500\", \"bg-chart-2\"], [\"Team offsite\", \"$8,000\", \"bg-chart-5\"]].map(([n, a, t]) => (\n
\n \n

{n}

Monthly limit

\n

{a}

\n
\n ))}\n
\n \n
\n\n
\n \n
\n

Before

    {before.map((x) =>
  • ×{x}
    • )}
\n

With Northwind

    {after.map((x) =>
  • {x}
    • )}
\n
\n \n
\n

Close

\n The month closes itself, nearly.\n

Every transaction is matched to a receipt, coded to your chart of accounts and synced to your ledger as it happens. What is left on close day is review, not data entry.

\n
\n
\n\n
\n
\n

Reporting

\n Answers for the board, before they ask.\n

Spend by team, vendor and project, always current. Build a view once and share it with a link.

\n
\n \n
\n {[48, 56, 52, 70, 64, 82].map((h, i) =>
)}\n
\n
MayOct
\n \n
\n
\n\n
\n
\n \n
\n “We went from nine days to three to close the books, and nobody on my team has asked me for a receipt since March.”\n
\n
Elena Marchetti · Controller, Harlow & Pine
\n
\n
\n\n
\n See it with your numbers.\n

A 30-minute walkthrough, built around how your team spends today.

\n Book a demo \n
\n
\n \n )\n}\n\nexport { NorthwindHome, type NorthwindHomeProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/northwind/northwind-home.tsx" }, { "path": "registry/ballmac/components/templates/northwind/northwind-pricing.tsx", "content": "// Ballmac UI: Northwind pricing page. https://ui.ballmac.com/templates/template-northwind\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check } from \"lucide-react\"\n\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ballmac/accordion\"\nimport { SegmentedControl, SegmentedControlItem } from \"@/components/ballmac/segmented-control\"\nimport { NorthwindHeading, NorthwindShell, type NorthwindHrefs } from \"@/components/ballmac/templates/northwind/northwind-theme\"\nimport { cn } from \"@/lib/utils\"\n\ntype Billing = \"annual\" | \"monthly\"\n\nconst plans = [\n { id: \"starter\", name: \"Starter\", blurb: \"For teams of up to 25 that are moving off spreadsheets.\", price: 8, unit: \"per person / month\", features: [\"Virtual and physical cards\", \"Receipt capture and matching\", \"Basic approval rules\", \"Sync to QuickBooks or Xero\"] },\n { id: \"growth\", name: \"Growth\", blurb: \"For finance teams that want budgets and policy.\", price: 14, unit: \"per person / month\", featured: true, features: [\"Everything in Starter\", \"Team budgets with alerts\", \"Multi-step approval policies\", \"Bill pay and reimbursements\", \"NetSuite and Sage Intacct sync\"] },\n { id: \"enterprise\", name: \"Enterprise\", blurb: \"For multiple entities, countries and auditors.\", price: null, unit: \"annual contract\", features: [\"Everything in Growth\", \"Multi-entity and multi-currency\", \"SSO, SCIM and audit exports\", \"Dedicated implementation lead\", \"99.95% uptime SLA\"] },\n] as const\n\nconst faqs = [\n { q: \"Do I pay for every employee?\", a: \"You pay for people who hold a card or approve spend. Employees who only submit reimbursements are free, so rolling out to the whole company doesn’t change your bill.\" },\n { q: \"Is there a card fee?\", a: \"No. Cards are free, and we earn a small share of interchange from the card network. That is why we can keep seat prices low.\" },\n { q: \"How long does setup take?\", a: \"Most teams are issuing cards in a day. Accounting sync and policy setup usually take a week, with a guide at your side.\" },\n { q: \"What if we outgrow a plan?\", a: \"Change plans any time. We prorate to the day, and your cards, receipts and history carry over untouched.\" },\n]\n\ntype NorthwindPricingProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** Northwind pricing: three plans with an annual saving, an included-everywhere list and questions. */\nfunction NorthwindPricing({ hrefs, ...props }: NorthwindPricingProps) {\n const [billing, setBilling] = React.useState(\"annual\")\n const contact = hrefs?.contact ?? \"/northwind/contact\"\n return (\n \n
\n
\n
\n Pricing that scales with your team, not your spend.\n

No percentage of volume, no card fees, no surprise add-ons.

\n setBilling(v as Billing)} className=\"mt-9\">\n Annual · save 20%\n Monthly\n \n
\n
\n {plans.map((p) => {\n const price = p.price === null ? null : billing === \"annual\" ? Math.round(p.price * 0.8) : p.price\n const featured = \"featured\" in p && p.featured\n return (\n \n )\n })}\n
\n
\n\n
\n Included with every plan.\n
    \n {[\"Unlimited virtual cards\", \"Real-time spend alerts\", \"Mobile app for iOS and Android\", \"Receipt capture by email and text\", \"CSV and API exports\", \"Bank-level encryption and 2FA\", \"US-based support, weekdays\", \"Free onboarding session\"].map((x) => (\n
  • {x}
    • \n ))}\n
\n
\n\n
\n
\n Questions we hear often.\n \n {faqs.map((f) => (\n \n {f.q}\n {f.a}\n \n ))}\n \n
\n
\n
\n \n )\n}\n\nexport { NorthwindPricing, type NorthwindPricingProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/northwind/northwind-pricing.tsx" }, { "path": "registry/ballmac/components/templates/northwind/northwind-customers.tsx", "content": "// Ballmac UI: Northwind customers page. https://ui.ballmac.com/templates/template-northwind\nimport * as React from \"react\"\nimport { ArrowUpRight } from \"lucide-react\"\n\nimport { NorthwindHeading, NorthwindShell, type NorthwindHrefs } from \"@/components/ballmac/templates/northwind/northwind-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst serif = \"[font-family:var(--northwind-serif),ui-serif,Georgia,serif]\"\n\nconst stories = [\n { name: \"Fernhill\", sector: \"Architecture\", stat: \"70%\", note: \"less time chasing receipts\", quote: \"Our partners finally see project costs while the project is still running.\", tone: \"bg-chart-1/15\" },\n { name: \"Oakline\", sector: \"Logistics\", stat: \"$310k\", note: \"saved on duplicate vendors\", quote: \"We found three vendors we paid under different names within a week.\", tone: \"bg-chart-2/15\" },\n { name: \"Tidewater\", sector: \"Hospitality\", stat: \"11 days → 4\", note: \"month-end close\", quote: \"Eighteen restaurants, one close process. It used to be eighteen.\", tone: \"bg-chart-5/15\" },\n { name: \"Marlow Co\", sector: \"Consumer goods\", stat: \"4.9 / 5\", note: \"employee card satisfaction\", quote: \"Nobody has asked to expense a personal card in a year.\", tone: \"bg-chart-4/15\" },\n { name: \"Brightwell\", sector: \"Healthcare\", stat: \"100%\", note: \"audit-ready receipts\", quote: \"Our auditors asked what we changed. We told them: everything.\", tone: \"bg-chart-3/20\" },\n { name: \"Quill & Co\", sector: \"Publishing\", stat: \"2 hrs\", note: \"to onboard 60 people\", quote: \"Cards for the whole company were live before lunch.\", tone: \"bg-chart-1/15\" },\n]\n\ntype NorthwindCustomersProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** Northwind customers: a featured case study with results, then a grid of shorter stories. */\nfunction NorthwindCustomers({ hrefs, ...props }: NorthwindCustomersProps) {\n return (\n \n
\n
\n

Customers

\n Finance teams that got their weekends back.\n
\n\n
\n
\n
\n

Case study · Professional services

\n

Harlow & Pine closes the books in three days, not nine.

\n

A 340-person consultancy replaced spreadsheets, a shared inbox and four card programs with one system finance trusts.

\n Read the story \n
\n
\n {[[\"9 → 3\", \"days to close\"], [\"97%\", \"receipts matched\"], [\"$1.2M\", \"cash found in dormant subscriptions\"], [\"340\", \"employees, live in 2 weeks\"]].map(([v, l], i) => (\n
\n
{v}
\n
{l}
\n
\n ))}\n
\n
\n
\n\n
\n More stories\n
    \n {stories.map((s) => (\n
  • \n
    \n {s.name[0]}\n

    {s.name}

    {s.sector}

    \n
    \n

    {s.stat}

    \n

    {s.note}

    \n
    “{s.quote}”
    \n
    • \n ))}\n
\n
\n
\n \n )\n}\n\nexport { NorthwindCustomers, type NorthwindCustomersProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/northwind/northwind-customers.tsx" }, { "path": "registry/ballmac/components/templates/northwind/northwind-about.tsx", "content": "// Ballmac UI: Northwind about page. https://ui.ballmac.com/templates/template-northwind\nimport * as React from \"react\"\n\nimport { NorthwindHeading, NorthwindShell, type NorthwindHrefs } from \"@/components/ballmac/templates/northwind/northwind-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst serif = \"[font-family:var(--northwind-serif),ui-serif,Georgia,serif]\"\n\nconst values = [\n { title: \"Plain beats clever\", text: \"If a customer needs a manual to use a feature, we haven’t finished it.\" },\n { title: \"Money is personal\", text: \"Behind every transaction is someone trying to do their job. We design for them first.\" },\n { title: \"Boring is a feature\", text: \"Finance software should be dependable enough to forget about. We aim to be forgotten.\" },\n]\n\nconst timeline = [\n [\"2019\", \"Two former controllers start Northwind in a spare bedroom in Portland.\"],\n [\"2021\", \"First 100 customers, and our first real month-end close with no spreadsheets.\"],\n [\"2023\", \"Launch bill pay and reimbursements. Reach $1B in annual spend managed.\"],\n [\"2025\", \"Open offices in Toronto and London. 1,000 customers across 14 countries.\"],\n [\"2026\", \"Today: 1,400 finance teams, 140 people, still answering email ourselves.\"],\n]\n\nconst team = [\n [\"Ines Alvarado\", \"Co-founder, CEO\", \"bg-chart-1/25\"], [\"Tobias Wren\", \"Co-founder, CTO\", \"bg-chart-2/25\"], [\"Amara Nwosu\", \"VP Finance\", \"bg-chart-5/25\"],\n [\"Jonas Eklund\", \"Head of Design\", \"bg-chart-4/25\"], [\"Mei Tanaka\", \"Head of Security\", \"bg-chart-3/30\"], [\"Colm Brennan\", \"Head of Support\", \"bg-chart-1/25\"],\n] as const\n\ntype NorthwindAboutProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** Northwind about: a long-form mission, values, a timeline and the team. */\nfunction NorthwindAbout({ hrefs, ...props }: NorthwindAboutProps) {\n return (\n \n
\n
\n

About

\n We think finance should feel quiet.\n
\n

Northwind began with a frustration. We had both run finance teams, and we had both spent the last week of every month chasing people for receipts that were, somewhere, already in an inbox.

\n

The tools we used treated spending as a problem to police. We wanted the opposite: software that makes it easy for people to do the right thing, and shows finance what happened without asking.

\n

The best month-end is the one you barely notice.

\n
\n
\n\n
\n What we believe\n
    \n {values.map((v, i) => (\n
  1. \n {i + 1}\n

    {v.title}

    \n

    {v.text}

    \n
    2. \n ))}\n
\n
\n\n
\n
\n Seven years, briefly\n
    \n {timeline.map(([y, t]) => (\n
  1. {y}

    {t}

    2. \n ))}\n
\n
\n
\n\n
\n The people\n
    \n {team.map(([n, r, t]) => (\n
  • \n
    {n.split(\" \").map((w) => w[0]).join(\"\")}
    \n

    {n}

    \n

    {r}

    \n
    • \n ))}\n
\n
\n

We’re hiring in Portland, Toronto and London.

14 open roles across engineering, design and support.

\n See open roles\n
\n
\n
\n \n )\n}\n\nexport { NorthwindAbout, type NorthwindAboutProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/northwind/northwind-about.tsx" }, { "path": "registry/ballmac/components/templates/northwind/northwind-contact.tsx", "content": "// Ballmac UI: Northwind contact page. https://ui.ballmac.com/templates/template-northwind\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Mail, MapPin, MessageCircle } from \"lucide-react\"\n\nimport { NorthwindHeading, NorthwindShell, type NorthwindHrefs } from \"@/components/ballmac/templates/northwind/northwind-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst serif = \"[font-family:var(--northwind-serif),ui-serif,Georgia,serif]\"\nconst field = \"bg-card focus-visible:ring-ring/50 mt-2 h-12 w-full rounded-xl border px-4 text-base outline-none focus-visible:ring-[3px] aria-[invalid=true]:border-destructive\"\n\ntype Errors = Partial>\n\ntype NorthwindContactProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** Northwind contact: a demo request form with inline validation, and the other ways to reach the team. */\nfunction NorthwindContact({ hrefs, ...props }: NorthwindContactProps) {\n const [errors, setErrors] = React.useState({})\n const [sent, setSent] = React.useState(null)\n const [pending, setPending] = React.useState(false)\n const timer = React.useRef | undefined>(undefined)\n React.useEffect(() => () => clearTimeout(timer.current), [])\n\n function submit(e: React.FormEvent) {\n e.preventDefault()\n const form = e.currentTarget\n const f = new FormData(form)\n const name = String(f.get(\"name\") ?? \"\").trim()\n const email = String(f.get(\"email\") ?? \"\").trim()\n const size = String(f.get(\"size\") ?? \"\")\n const next: Errors = {}\n if (!name) next.name = \"Tell us your name.\"\n if (!/^\\S+@\\S+\\.\\S+$/.test(email)) next.email = \"Enter a work email like you@company.com.\"\n if (!size) next.size = \"Choose your team size.\"\n setErrors(next)\n if (Object.keys(next).length) {\n const first = ([\"name\", \"email\", \"size\"] as const).find((k) => next[k])\n ;(form.elements.namedItem(first ?? \"name\") as HTMLElement | null)?.focus()\n return\n }\n setPending(true)\n timer.current = setTimeout(() => {\n setPending(false)\n setSent(name.split(\" \")[0])\n }, 700)\n }\n\n return (\n \n
\n
\n Let’s talk about your spend.\n

Tell us a little about your team. We’ll book a 30-minute walkthrough built around how you spend today. No slides.

\n {sent ? (\n
\n \n

Thanks, {sent}.

\n

We’ll email you within one business day with a few times that work.

\n
\n ) : (\n
\n
\n \n \n {errors.name &&

{errors.name}

}\n
\n
\n \n \n {errors.email &&

{errors.email}

}\n
\n
\n \n \n {errors.size &&

{errors.size}

}\n
\n
\n \n