# Products and Services as pages (/docs/start/guides/products-and-services)

> How a Product becomes a landing, a pricing page and a listing, and how a Service becomes an intake form, a sent page and terms, each one a record.

> A Product is what a Customer gets from a Startup, with a promise the Customer can rely on.
>
> startupbuilder.dev, [Product](https://startupbuilder.dev/business/nouns/product)

> An Offer is a Product, under a Brand, at a price, on terms, made by a Startup.
>
> startupbuilder.dev, [Offer](https://startupbuilder.dev/business/nouns/offer)

startupbuilder.dev defines the Product, the Service and their Offers. mdxui draws the pages a customer reads about them. A Business that sells a Product and one that sells a Service need different pages, and each page is one record.

## A Product: say it, price it, list it

Vanroster sells crew scheduling as software. Its Product reaches a customer through three pages.

| Page | Template | What it carries | Record |
| --- | --- | --- | --- |
| Landing | `api-product` | The promise, the proof, the features and the plans, in the order a buyer reads | [`pages/vanroster/home.json`](https://next.mdxui.dev/pages/vanroster/home.json) |
| Pricing | `api-product` | Plans as OfferTiles, a plan table and the pricing questions | [`pages/vanroster/pricing.json`](https://next.mdxui.dev/pages/vanroster/pricing.json) |
| Product page | `directory-product` | One feature as a listing: its head, facts, calls and endpoints | [`pages/vanroster/product/dispatch.json`](https://next.mdxui.dev/pages/vanroster/product/dispatch.json) |

The rendered page: https://next.mdxui.dev/sites/vanroster/pricing; its record: https://next.mdxui.dev/pages/vanroster/pricing.json

The pricing page's plans are Offers: a name, a price, terms and an action. Each is an OfferTile in [`pricing`](https://next.mdxui.dev/docs/sections/pricing), and the same plans line up feature by feature in [`plan-table`](https://next.mdxui.dev/docs/sections/plan-table).

## A Service: take the inquiry, set the terms

Ledgerhouse sells bookkeeping, done by two partners. A Service starts with a conversation, so its pages ask before they sell.

| Page | Template | What it carries | Record |
| --- | --- | --- | --- |
| Services | `article` | What the firm does, as a list of engagements | [`pages/ledgerhouse/services.json`](https://next.mdxui.dev/pages/ledgerhouse/services.json) |
| Intake | `contact` | An eight-field form and the steps that follow it | [`pages/ledgerhouse/intake.json`](https://next.mdxui.dev/pages/ledgerhouse/intake.json) |
| Sent | `article` | What happens next, after the form | [`pages/ledgerhouse/intake/sent.json`](https://next.mdxui.dev/pages/ledgerhouse/intake/sent.json) |
| Terms | `article` | The engagement terms, as a document | [`pages/ledgerhouse/terms.json`](https://next.mdxui.dev/pages/ledgerhouse/terms.json) |

The rendered page: https://next.mdxui.dev/sites/ledgerhouse/intake; its record: https://next.mdxui.dev/pages/ledgerhouse/intake.json

The intake is a [`cta-form`](https://next.mdxui.dev/docs/sections/cta-form) of up to eight bounded fields. [Contact flow and 404](https://next.mdxui.dev/docs/start/guides/contact-and-404) shows where its post goes.

## One record per page, one Theme per Business

Every page above is its own record, and every record of one Business names one Theme. A plan changed on the pricing page is changed there only; the [Product record](https://next.mdxui.dev/docs/components/product-record) is the Spec that gives every page one source for those facts.

## Coming from a kind of Product or Service

Earlier mdxui had a page per kind of Product and Service. startupbuilder.dev now defines each kind; these docs show the pages it puts in front of a customer. Find your kind, open the closest worked Site, and read the definition there.

| Earlier topic | Closest here | Defined on startupbuilder.dev |
| --- | --- | --- |
| API products, REST APIs | [Harbor tides](https://next.mdxui.dev/docs/showcase/harbor) and the [`api-product`](https://next.mdxui.dev/docs/showcase/templates/api-product) Template | [API products](https://startupbuilder.dev/products/api) |
| SaaS products | [Vanroster](https://next.mdxui.dev/docs/showcase/vanroster) | [SaaS Template](https://startupbuilder.dev/products/templates/saas) |
| Headless products | [Harbor tides](https://next.mdxui.dev/docs/showcase/harbor): an API with pages and no App | [Headless SaaS Template](https://startupbuilder.dev/products/templates/headless-saas) |
| SDKs | [Diffkeel](https://next.mdxui.dev/docs/showcase/diffkeel): install lines in [`command-row`](https://next.mdxui.dev/docs/sections/command-row) and [`terminal`](https://next.mdxui.dev/docs/sections/terminal) | [SDK](https://startupbuilder.dev/code/sdk) |
| MCP servers | [Harbor tides](https://next.mdxui.dev/docs/showcase/harbor): calls in [`api-call`](https://next.mdxui.dev/docs/sections/api-call), a prompt in [`agent-prompt`](https://next.mdxui.dev/docs/sections/agent-prompt) | [MCP](https://startupbuilder.dev/code/mcp) |
| Data products | [Harbor tides](https://next.mdxui.dev/docs/showcase/harbor): tide windows sold per call | [Data products](https://startupbuilder.dev/products/data) |
| Product schema, Product as a tile | [The Product record](https://next.mdxui.dev/docs/components/product-record) | [Product](https://startupbuilder.dev/business/nouns/product) |
| Product and Service contexts | [Interface](https://next.mdxui.dev/docs/components/interface): the Site against its renderings | [Interface](https://startupbuilder.dev/business/nouns/interface) |
| Product or Service as an App | [App types](https://next.mdxui.dev/docs/app): 13 studies, no package | [App](https://startupbuilder.dev/business/nouns/app) |
| Agency and consulting services | [Ledgerhouse](https://next.mdxui.dev/docs/showcase/ledgerhouse): services, intake and terms | [Managed service Template](https://startupbuilder.dev/products/templates/managed-service) |
| Operations services | [Ledgerhouse](https://next.mdxui.dev/docs/showcase/ledgerhouse), and the [delivery console](https://next.mdxui.dev/docs/app/delivery-console) study | [Services as software](https://startupbuilder.dev/products/templates/services-as-software) |
| Support services | The [`faq`](https://next.mdxui.dev/docs/sections/faq) and [contact flow](https://next.mdxui.dev/docs/start/guides/contact-and-404) | [Support](https://startupbuilder.dev/systems/support) |
| Agents as service workers | The [agent console](https://next.mdxui.dev/docs/app/agent-console) study | [Agent as a service Template](https://startupbuilder.dev/products/templates/agent-as-a-service) |
| Human in the loop | The [Worklist](https://next.mdxui.dev/docs/app/worklist) study | [Human functions](https://startupbuilder.dev/products/service/human-functions) |
| Workflows and activities | The [Worklist](https://next.mdxui.dev/docs/app/worklist) and [delivery console](https://next.mdxui.dev/docs/app/delivery-console) studies | [Workflows](https://startupbuilder.dev/workflows) |

## Next steps

  - [Build a pricing page](https://next.mdxui.dev/docs/start/guides/pricing-page): Plans as OfferTiles, a plan table and pricing questions.
  - [Contact flow and 404](https://next.mdxui.dev/docs/start/guides/contact-and-404): A form, its sent page and the page for lost addresses.
  - [Templates](https://next.mdxui.dev/docs/showcase/templates): The seven page kinds, each in two or three Businesses.
  - [How mdxui fits a Business](https://next.mdxui.dev/docs/start/business): Business, Brand, Theme, Site, Page and Section.