# Vanroster (/docs/showcase/vanroster)

> B2B SaaS: scheduling for field-service crews, in callboard.



## Pages

Every page is a live render of its record. Flip the Site to see each one under another Theme; the records do not change.

## Brand

Crew scheduling sells to operations leads choosing in a crowded field. Violet and Bricolage Grotesque make the brand loud enough to remember, and the plated plan points every visitor at the crew plan.

## Built from

<details className="mx-sc-details">
<summary>The tally and the records, as text</summary>

25 Section types across 9 pages.

[`footer`](https://next.mdxui.dev/docs/sections/footer) ×9 · [`nav`](https://next.mdxui.dev/docs/sections/nav) ×9 · [`closing`](https://next.mdxui.dev/docs/sections/closing) ×4 · [`facts`](https://next.mdxui.dev/docs/sections/facts) ×3 · [`page-head`](https://next.mdxui.dev/docs/sections/page-head) ×3 · [`feature-grid`](https://next.mdxui.dev/docs/sections/feature-grid) ×2 · [`agent-prompt`](https://next.mdxui.dev/docs/sections/agent-prompt) ×1 · [`api-call`](https://next.mdxui.dev/docs/sections/api-call) ×1 · [`article`](https://next.mdxui.dev/docs/sections/article) ×1 · [`bento`](https://next.mdxui.dev/docs/sections/bento) ×1 · [`command-row`](https://next.mdxui.dev/docs/sections/command-row) ×1 · [`compare`](https://next.mdxui.dev/docs/sections/compare) ×1 · [`cta-form`](https://next.mdxui.dev/docs/sections/cta-form) ×1 · [`endpoints`](https://next.mdxui.dev/docs/sections/endpoints) ×1 · [`faq`](https://next.mdxui.dev/docs/sections/faq) ×1 · [`feature-split`](https://next.mdxui.dev/docs/sections/feature-split) ×1 · [`hero`](https://next.mdxui.dev/docs/sections/hero) ×1 · [`plan-table`](https://next.mdxui.dev/docs/sections/plan-table) ×1 · [`post-list`](https://next.mdxui.dev/docs/sections/post-list) ×1 · [`pricing`](https://next.mdxui.dev/docs/sections/pricing) ×1 · [`product-head`](https://next.mdxui.dev/docs/sections/product-head) ×1 · [`stats`](https://next.mdxui.dev/docs/sections/stats) ×1 · [`steps`](https://next.mdxui.dev/docs/sections/steps) ×1 · [`terminal`](https://next.mdxui.dev/docs/sections/terminal) ×1 · [`text-stack`](https://next.mdxui.dev/docs/sections/text-stack) ×1

| Page | Template | Sections | Record |
| --- | --- | --- | --- |
| [home](https://next.mdxui.dev/sites/vanroster/) | `api-product` | 8 | [JSON](https://next.mdxui.dev/pages/vanroster/home.json) |
| [404](https://next.mdxui.dev/sites/vanroster/404) | `article` | 4 | [JSON](https://next.mdxui.dev/pages/vanroster/404.json) |
| [changelog](https://next.mdxui.dev/sites/vanroster/changelog) | `blog` | 4 | [JSON](https://next.mdxui.dev/pages/vanroster/changelog.json) |
| [contact](https://next.mdxui.dev/sites/vanroster/contact) | `contact` | 4 | [JSON](https://next.mdxui.dev/pages/vanroster/contact.json) |
| [pricing](https://next.mdxui.dev/sites/vanroster/pricing) | `api-product` | 5 | [JSON](https://next.mdxui.dev/pages/vanroster/pricing.json) |
| [security](https://next.mdxui.dev/sites/vanroster/security) | `article` | 7 | [JSON](https://next.mdxui.dev/pages/vanroster/security.json) |
| [changelog/route-swaps](https://next.mdxui.dev/sites/vanroster/changelog/route-swaps) | `post` | 3 | [JSON](https://next.mdxui.dev/pages/vanroster/changelog/route-swaps.json) |
| [contact/sent](https://next.mdxui.dev/sites/vanroster/contact/sent) | `article` | 4 | [JSON](https://next.mdxui.dev/pages/vanroster/contact/sent.json) |
| [product/dispatch](https://next.mdxui.dev/sites/vanroster/product/dispatch) | `directory-product` | 10 | [JSON](https://next.mdxui.dev/pages/vanroster/product/dispatch.json) |

</details>

## How it was built

**The brief.** A B2B SaaS that schedules field-service crews, with a product page for dispatch and a pricing page. The hero says it in six words: "Every crew on the right job."

**The records.** One JSON record per page under `pages/vanroster/`: the home and pricing name `api-product`, `product/dispatch` names `directory-product`, the changelog and one entry name `blog` and `post`, and security, contact and its sent page fill out the rest.

**The Theme.** Every record names `"theme": "callboard"`. Changing that line in each file rebrands the Site, which is what Flip Site shows under all five Themes.

**The 404 and the contact flow.** `404.json` leads back home. The contact form posts to its action, and `contact/sent.json` is the page a sender lands on. A static host answers no post, so on this host the form does not send.

## Use this Site