Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0

Vanroster

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

View as JSON
Worked example, not a customerSaaScallboard
Pages
9
Sections
49
Section types
25
Templates
6
Themes
1

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.

Flip Site

Brand

paper
panel
ink
ink-soft
rule
rule-soft
accent
accent-ink
plate
plate-ink
plate-rule
pass
warn
fail
Display
Bricolage Grotesque
Text
Instrument Sans
Mono
DM Mono
callboardlight only

Why callboard

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.

dividers rulemarkers offfeatured plateicons inlinescheme light
The callboard Theme →

Built from

9 records · 46.2 KB
RecordTemplateSectionsSize
home.jsonapi-product88.7 KB
changelog.jsonblog44.3 KB
changelog/route-swaps.jsonpost33.6 KB
contact.jsoncontact43.5 KB
contact/sent.jsonarticle42.4 KB
pricing.jsonapi-product55.8 KB
product/dispatch.jsondirectory-product1010.6 KB
security.jsonarticle74.9 KB
404.jsonarticle42.4 KB
pages/vanroster/6 Templates4946.2 KB
The tally and the records, as text

25 Section types across 9 pages.

footer ×9 · nav ×9 · closing ×4 · facts ×3 · page-head ×3 · feature-grid ×2 · agent-prompt ×1 · api-call ×1 · article ×1 · bento ×1 · command-row ×1 · compare ×1 · cta-form ×1 · endpoints ×1 · faq ×1 · feature-split ×1 · hero ×1 · plan-table ×1 · post-list ×1 · pricing ×1 · product-head ×1 · stats ×1 · steps ×1 · terminal ×1 · text-stack ×1

PageTemplateSectionsRecord
homeapi-product8JSON
404article4JSON
changelogblog4JSON
contactcontact4JSON
pricingapi-product5JSON
securityarticle7JSON
changelog/route-swapspost3JSON
contact/sentarticle4JSON
product/dispatchdirectory-product10JSON

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

  1. Download the 9 records. The zip holds vanroster/pages/, one record per page, each with its $schema.

    bash
    curl -O https://next.mdxui.dev/sites/vanroster/records.zip
    unzip records.zip
    
  2. Install the pinned pair.

    bash
    pnpm add @mdxui/site@7.0.0-alpha.0 @mdxui/themes@7.0.0-alpha.0
    
  3. Rename the folder, rewrite each record for your Business, and render the folder as a Site: Ship a Site walks the script, the 404 and the contact flow.