Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0
Build a landing page
Write a landing page record from nav to footer, one section at a time, the way Vanroster's home is built.
A landing page says what a Business sells in the order a buyer reads it: who you are, the promise, the proof, what it does, the next step. It uses the api-product Template. Each step lights its section in Vanroster's record.
Prerequisites
- The project from the Quickstart, or starter.zip, whose
pages/home.jsonis the record these steps build.
Name the Business
nav holds the brand, a wordmark of up to 16 characters, a mark, or both. With menu: "push" it takes up to six links of 20 characters and one call to action; below its collapse width the links fold into a menu that runs no script.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "callboard",
"frame": "none",
"template": "api-product",
"title": "Vanroster: every crew on the right job",
"description": "Crew scheduling for field-service teams. Vanroster matches each job to a crew with the skills, the van and the shortest drive.",
"sections": [
{sections.0 · nav
"kind": "nav",
"shell": {
"inset": "bleed",
"density": "none",
"surface": "glass",
"sticky": true
},
"block": {
"type": "nav",
"menu": "push",
"collapse": 880,
"brand": { "href": "/", "text": "Vanroster", "mark": "radar" },
"links": [
["/product/dispatch", "Dispatch"],
["/pricing", "Pricing"],
["/changelog", "Changelog"],
["/security", "Security"]
],
"cta": { "href": "/contact", "label": "Book a walkthrough" }
}
},
{sections.1 · hero
"kind": "hero",
"shell": { "inset": "contained", "density": "hero", "background": "glow" },
"block": {
"type": "hero",
"layout": "split",
"stack": 640,
"title": "Every crew on the right job.",
"lede": "Vanroster matches each job to a crew with the right skills, the right van and the shortest drive. Move a job on the board, and every crew phone follows.",
"actions": [
{
"href": "/contact",
"label": "Book a walkthrough",
"kind": "solid"
},
{ "href": "/pricing", "label": "See the plans", "kind": "ghost" }
],
"fine": [
"14-day trial, no payment details",
"Office users free on every plan"
],
"specimen": {
"panel": "field",
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Board · Tue 13 Oct · 07:42",
"lines": [
"@dim{CREW VAN JOB WINDOW DRIVE}",
"A-1 V-12 Boiler service 08:00-10:00 14 min",
"A-1 V-12 Heat pump install 10:30-13:00 9 min",
"@dim{B-2 V-07 Out today: 2 jobs moved}",
"C-3 V-03 Panel upgrade 08:00-11:00 22 min",
"C-3 V-03 @acc{Boiler service} ←B2 11:30-12:30 @pass{6 min}",
"D-4 V-15 @acc{Gas leak check} ←B2 13:00-14:00 @pass{11 min}",
"D-4 V-15 Water heater swap 14:30-16:30 18 min",
"",
"@pass{2 customers texted a new window}"
]
}
]
}
}
},
{sections.2 · stats
"kind": "band",
"shell": { "inset": "contained", "density": "compact" },
"block": {
"type": "stats",
"items": [
{
"value": "400",
"label": "Crews on one board, on every plan",
"icon": "layout-grid"
},
{
"value": "12",
"label": "Skills a job can require, from gas to height",
"icon": "badge-check"
},
{
"value": "30 min",
"label": "Arrival window texted to each customer",
"icon": "clock"
}
]
}
},
{sections.3 · feature-grid
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "feature-grid",
"cellHead": "icon",
"head": {
"eyebrow": "The board",
"title": "One board runs the whole day.",
"lede": "Office staff plan on the board. Crews work from one ordered list on their phones."
},
"items": [
{
"icon": "map-pin",
"title": "Drive time, not distance",
"text": "Jobs are ordered by the drive between them, from road times at the hour of the job."
},
{
"icon": "badge-check",
"title": "Skills before speed",
"text": "A gas job reaches only a crew with a gas licence on file and in date."
},
{
"icon": "refresh-cw",
"title": "Swaps in one drag",
"text": "Drag a job to another crew. Both crew phones update before the drag ends."
},
{
"icon": "bell",
"title": "Customers told once",
"text": "Each customer gets one text with a 30-minute window, and one when the van leaves."
},
{
"icon": "clock",
"title": "Overtime flagged",
"text": "A day that keeps a crew past 10 hours turns amber before anyone assigns it."
},
{
"icon": "shield-check",
"title": "Every change logged",
"text": "Who moved which job, when and why, kept for up to 7 years."
}
]
}
},
{sections.4 · feature-split
"kind": "section",
"shell": { "inset": "contained", "density": "section", "surface": "tint" },
"block": {
"type": "feature-split",
"head": {
"eyebrow": "A sick call at 07:40",
"title": "Re-plan the day in one move."
},
"items": [
{
"icon": "x",
"title": "Mark the crew out",
"text": "One tap clears the crew and lists every job it held that day."
},
{
"icon": "radar",
"title": "Accept the re-plan",
"text": "Each job goes to the nearest crew that holds every skill it needs."
},
{
"icon": "message-square",
"title": "Tell the customers",
"text": "Each changed window goes out as one text, with the new time."
}
],
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Text to the customer · 07:43",
"lines": [
"Your boiler service today moved to 11:30-12:30.",
"Crew C-3 is coming in van V-03.",
"",
"@dim{A second text arrives when the van leaves.}",
"@dim{Reply 1 to keep the time, 2 to pick another day.}"
]
}
]
}
}
},
{sections.5 · compare
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "compare",
"head": {
"eyebrow": "Against the whiteboard",
"title": "A board that moves with the day."
},
"cons": {
"label": "Whiteboard and calls",
"items": [
"Jobs assigned from memory",
"Licences checked by phone",
"Customers call to ask",
"Swaps lost by noon"
]
},
"pros": {
"label": "Vanroster",
"items": [
"Jobs matched to skills",
"Licences checked on assign",
"Customers get a window",
"Every swap on record"
]
}
}
},
{sections.6 · closing
"kind": "closing",
"shell": { "inset": "contained", "density": "closing", "surface": "plate" },
"block": {
"type": "closing",
"layout": "split",
"head": {
"eyebrow": "14-day trial",
"title": "Plan tomorrow on Vanroster.",
"lede": "Import crews and jobs from three spreadsheets. The first board is ready the same afternoon."
},
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Import · 3 files",
"lines": [
"crews.csv 14 crews, 14 vans, 2 depots",
"skills.csv 38 licences, @acc{3 expire this year}",
"jobs.csv 212 jobs over the next 10 days",
"",
"@pass{Board ready: 212 jobs on 14 crews}"
]
}
]
},
"actions": [
{
"href": "/contact",
"label": "Book a walkthrough",
"kind": "solid"
},
{
"href": "/product/dispatch",
"label": "Tour Dispatch",
"kind": "ghost"
}
]
}
},
{sections.7 · footer
"kind": "footer",
"shell": { "inset": "contained", "density": "footer" },
"block": {
"type": "footer",
"layout": "areas",
"brand": { "href": "/", "text": "Vanroster", "mark": "radar" },
"blurb": "Crew scheduling for field-service teams: heating, electrical, plumbing, cleaning and grounds.",
"columns": [
{
"title": "Product",
"links": [
["/product/dispatch", "Dispatch"],
["/pricing", "Pricing"],
["/changelog", "Changelog"]
]
},
{
"title": "Company",
"links": [["/security", "Security"], ["/contact", "Contact"]]
},
{
"title": "For agents",
"links": [
["/product/dispatch", "The Dispatch API"],
["/records.zip", "Site records (.zip)"]
]
}
],
"cta": {
"href": "/contact",
"label": "Book a walkthrough",
"icon": "arrow-right"
},
"note": [
"Vanroster is a worked example on mdxui.dev, not a customer.",
"Rendered by @mdxui/site. Forms here do not send."
]
}
}
]
}
Make the promise
The hero title runs to 64 characters and the lede to 260. Give it two actions at most, and up to four lines of fine print. layout: "split" sets up to three Section types beside the words, such as a terminal window or an API call.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "callboard",
"frame": "none",
"template": "api-product",
"title": "Vanroster: every crew on the right job",
"description": "Crew scheduling for field-service teams. Vanroster matches each job to a crew with the skills, the van and the shortest drive.",
"sections": [
{sections.0 · nav
"kind": "nav",
"shell": {
"inset": "bleed",
"density": "none",
"surface": "glass",
"sticky": true
},
"block": {
"type": "nav",
"menu": "push",
"collapse": 880,
"brand": { "href": "/", "text": "Vanroster", "mark": "radar" },
"links": [
["/product/dispatch", "Dispatch"],
["/pricing", "Pricing"],
["/changelog", "Changelog"],
["/security", "Security"]
],
"cta": { "href": "/contact", "label": "Book a walkthrough" }
}
},
{sections.1 · hero
"kind": "hero",
"shell": { "inset": "contained", "density": "hero", "background": "glow" },
"block": {
"type": "hero",
"layout": "split",
"stack": 640,
"title": "Every crew on the right job.",
"lede": "Vanroster matches each job to a crew with the right skills, the right van and the shortest drive. Move a job on the board, and every crew phone follows.",
"actions": [
{
"href": "/contact",
"label": "Book a walkthrough",
"kind": "solid"
},
{ "href": "/pricing", "label": "See the plans", "kind": "ghost" }
],
"fine": [
"14-day trial, no payment details",
"Office users free on every plan"
],
"specimen": {
"panel": "field",
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Board · Tue 13 Oct · 07:42",
"lines": [
"@dim{CREW VAN JOB WINDOW DRIVE}",
"A-1 V-12 Boiler service 08:00-10:00 14 min",
"A-1 V-12 Heat pump install 10:30-13:00 9 min",
"@dim{B-2 V-07 Out today: 2 jobs moved}",
"C-3 V-03 Panel upgrade 08:00-11:00 22 min",
"C-3 V-03 @acc{Boiler service} ←B2 11:30-12:30 @pass{6 min}",
"D-4 V-15 @acc{Gas leak check} ←B2 13:00-14:00 @pass{11 min}",
"D-4 V-15 Water heater swap 14:30-16:30 18 min",
"",
"@pass{2 customers texted a new window}"
]
}
]
}
}
},
{sections.2 · stats
"kind": "band",
"shell": { "inset": "contained", "density": "compact" },
"block": {
"type": "stats",
"items": [
{
"value": "400",
"label": "Crews on one board, on every plan",
"icon": "layout-grid"
},
{
"value": "12",
"label": "Skills a job can require, from gas to height",
"icon": "badge-check"
},
{
"value": "30 min",
"label": "Arrival window texted to each customer",
"icon": "clock"
}
]
}
},
{sections.3 · feature-grid
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "feature-grid",
"cellHead": "icon",
"head": {
"eyebrow": "The board",
"title": "One board runs the whole day.",
"lede": "Office staff plan on the board. Crews work from one ordered list on their phones."
},
"items": [
{
"icon": "map-pin",
"title": "Drive time, not distance",
"text": "Jobs are ordered by the drive between them, from road times at the hour of the job."
},
{
"icon": "badge-check",
"title": "Skills before speed",
"text": "A gas job reaches only a crew with a gas licence on file and in date."
},
{
"icon": "refresh-cw",
"title": "Swaps in one drag",
"text": "Drag a job to another crew. Both crew phones update before the drag ends."
},
{
"icon": "bell",
"title": "Customers told once",
"text": "Each customer gets one text with a 30-minute window, and one when the van leaves."
},
{
"icon": "clock",
"title": "Overtime flagged",
"text": "A day that keeps a crew past 10 hours turns amber before anyone assigns it."
},
{
"icon": "shield-check",
"title": "Every change logged",
"text": "Who moved which job, when and why, kept for up to 7 years."
}
]
}
},
{sections.4 · feature-split
"kind": "section",
"shell": { "inset": "contained", "density": "section", "surface": "tint" },
"block": {
"type": "feature-split",
"head": {
"eyebrow": "A sick call at 07:40",
"title": "Re-plan the day in one move."
},
"items": [
{
"icon": "x",
"title": "Mark the crew out",
"text": "One tap clears the crew and lists every job it held that day."
},
{
"icon": "radar",
"title": "Accept the re-plan",
"text": "Each job goes to the nearest crew that holds every skill it needs."
},
{
"icon": "message-square",
"title": "Tell the customers",
"text": "Each changed window goes out as one text, with the new time."
}
],
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Text to the customer · 07:43",
"lines": [
"Your boiler service today moved to 11:30-12:30.",
"Crew C-3 is coming in van V-03.",
"",
"@dim{A second text arrives when the van leaves.}",
"@dim{Reply 1 to keep the time, 2 to pick another day.}"
]
}
]
}
}
},
{sections.5 · compare
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "compare",
"head": {
"eyebrow": "Against the whiteboard",
"title": "A board that moves with the day."
},
"cons": {
"label": "Whiteboard and calls",
"items": [
"Jobs assigned from memory",
"Licences checked by phone",
"Customers call to ask",
"Swaps lost by noon"
]
},
"pros": {
"label": "Vanroster",
"items": [
"Jobs matched to skills",
"Licences checked on assign",
"Customers get a window",
"Every swap on record"
]
}
}
},
{sections.6 · closing
"kind": "closing",
"shell": { "inset": "contained", "density": "closing", "surface": "plate" },
"block": {
"type": "closing",
"layout": "split",
"head": {
"eyebrow": "14-day trial",
"title": "Plan tomorrow on Vanroster.",
"lede": "Import crews and jobs from three spreadsheets. The first board is ready the same afternoon."
},
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Import · 3 files",
"lines": [
"crews.csv 14 crews, 14 vans, 2 depots",
"skills.csv 38 licences, @acc{3 expire this year}",
"jobs.csv 212 jobs over the next 10 days",
"",
"@pass{Board ready: 212 jobs on 14 crews}"
]
}
]
},
"actions": [
{
"href": "/contact",
"label": "Book a walkthrough",
"kind": "solid"
},
{
"href": "/product/dispatch",
"label": "Tour Dispatch",
"kind": "ghost"
}
]
}
},
{sections.7 · footer
"kind": "footer",
"shell": { "inset": "contained", "density": "footer" },
"block": {
"type": "footer",
"layout": "areas",
"brand": { "href": "/", "text": "Vanroster", "mark": "radar" },
"blurb": "Crew scheduling for field-service teams: heating, electrical, plumbing, cleaning and grounds.",
"columns": [
{
"title": "Product",
"links": [
["/product/dispatch", "Dispatch"],
["/pricing", "Pricing"],
["/changelog", "Changelog"]
]
},
{
"title": "Company",
"links": [["/security", "Security"], ["/contact", "Contact"]]
},
{
"title": "For agents",
"links": [
["/product/dispatch", "The Dispatch API"],
["/records.zip", "Site records (.zip)"]
]
}
],
"cta": {
"href": "/contact",
"label": "Book a walkthrough",
"icon": "arrow-right"
},
"note": [
"Vanroster is a worked example on mdxui.dev, not a customer.",
"Rendered by @mdxui/site. Forms here do not send."
]
}
}
]
}
Show the proof
stats holds three or four values of six characters, each with a label. State product facts or plan terms the reader can check: a trial length, a count of views, a step saved.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "callboard",
"frame": "none",
"template": "api-product",
"title": "Vanroster: every crew on the right job",
"description": "Crew scheduling for field-service teams. Vanroster matches each job to a crew with the skills, the van and the shortest drive.",
"sections": [
{sections.0 · nav
"kind": "nav",
"shell": {
"inset": "bleed",
"density": "none",
"surface": "glass",
"sticky": true
},
"block": {
"type": "nav",
"menu": "push",
"collapse": 880,
"brand": { "href": "/", "text": "Vanroster", "mark": "radar" },
"links": [
["/product/dispatch", "Dispatch"],
["/pricing", "Pricing"],
["/changelog", "Changelog"],
["/security", "Security"]
],
"cta": { "href": "/contact", "label": "Book a walkthrough" }
}
},
{sections.1 · hero
"kind": "hero",
"shell": { "inset": "contained", "density": "hero", "background": "glow" },
"block": {
"type": "hero",
"layout": "split",
"stack": 640,
"title": "Every crew on the right job.",
"lede": "Vanroster matches each job to a crew with the right skills, the right van and the shortest drive. Move a job on the board, and every crew phone follows.",
"actions": [
{
"href": "/contact",
"label": "Book a walkthrough",
"kind": "solid"
},
{ "href": "/pricing", "label": "See the plans", "kind": "ghost" }
],
"fine": [
"14-day trial, no payment details",
"Office users free on every plan"
],
"specimen": {
"panel": "field",
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Board · Tue 13 Oct · 07:42",
"lines": [
"@dim{CREW VAN JOB WINDOW DRIVE}",
"A-1 V-12 Boiler service 08:00-10:00 14 min",
"A-1 V-12 Heat pump install 10:30-13:00 9 min",
"@dim{B-2 V-07 Out today: 2 jobs moved}",
"C-3 V-03 Panel upgrade 08:00-11:00 22 min",
"C-3 V-03 @acc{Boiler service} ←B2 11:30-12:30 @pass{6 min}",
"D-4 V-15 @acc{Gas leak check} ←B2 13:00-14:00 @pass{11 min}",
"D-4 V-15 Water heater swap 14:30-16:30 18 min",
"",
"@pass{2 customers texted a new window}"
]
}
]
}
}
},
{sections.2 · stats
"kind": "band",
"shell": { "inset": "contained", "density": "compact" },
"block": {
"type": "stats",
"items": [
{
"value": "400",
"label": "Crews on one board, on every plan",
"icon": "layout-grid"
},
{
"value": "12",
"label": "Skills a job can require, from gas to height",
"icon": "badge-check"
},
{
"value": "30 min",
"label": "Arrival window texted to each customer",
"icon": "clock"
}
]
}
},
{sections.3 · feature-grid
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "feature-grid",
"cellHead": "icon",
"head": {
"eyebrow": "The board",
"title": "One board runs the whole day.",
"lede": "Office staff plan on the board. Crews work from one ordered list on their phones."
},
"items": [
{
"icon": "map-pin",
"title": "Drive time, not distance",
"text": "Jobs are ordered by the drive between them, from road times at the hour of the job."
},
{
"icon": "badge-check",
"title": "Skills before speed",
"text": "A gas job reaches only a crew with a gas licence on file and in date."
},
{
"icon": "refresh-cw",
"title": "Swaps in one drag",
"text": "Drag a job to another crew. Both crew phones update before the drag ends."
},
{
"icon": "bell",
"title": "Customers told once",
"text": "Each customer gets one text with a 30-minute window, and one when the van leaves."
},
{
"icon": "clock",
"title": "Overtime flagged",
"text": "A day that keeps a crew past 10 hours turns amber before anyone assigns it."
},
{
"icon": "shield-check",
"title": "Every change logged",
"text": "Who moved which job, when and why, kept for up to 7 years."
}
]
}
},
{sections.4 · feature-split
"kind": "section",
"shell": { "inset": "contained", "density": "section", "surface": "tint" },
"block": {
"type": "feature-split",
"head": {
"eyebrow": "A sick call at 07:40",
"title": "Re-plan the day in one move."
},
"items": [
{
"icon": "x",
"title": "Mark the crew out",
"text": "One tap clears the crew and lists every job it held that day."
},
{
"icon": "radar",
"title": "Accept the re-plan",
"text": "Each job goes to the nearest crew that holds every skill it needs."
},
{
"icon": "message-square",
"title": "Tell the customers",
"text": "Each changed window goes out as one text, with the new time."
}
],
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Text to the customer · 07:43",
"lines": [
"Your boiler service today moved to 11:30-12:30.",
"Crew C-3 is coming in van V-03.",
"",
"@dim{A second text arrives when the van leaves.}",
"@dim{Reply 1 to keep the time, 2 to pick another day.}"
]
}
]
}
}
},
{sections.5 · compare
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "compare",
"head": {
"eyebrow": "Against the whiteboard",
"title": "A board that moves with the day."
},
"cons": {
"label": "Whiteboard and calls",
"items": [
"Jobs assigned from memory",
"Licences checked by phone",
"Customers call to ask",
"Swaps lost by noon"
]
},
"pros": {
"label": "Vanroster",
"items": [
"Jobs matched to skills",
"Licences checked on assign",
"Customers get a window",
"Every swap on record"
]
}
}
},
{sections.6 · closing
"kind": "closing",
"shell": { "inset": "contained", "density": "closing", "surface": "plate" },
"block": {
"type": "closing",
"layout": "split",
"head": {
"eyebrow": "14-day trial",
"title": "Plan tomorrow on Vanroster.",
"lede": "Import crews and jobs from three spreadsheets. The first board is ready the same afternoon."
},
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Import · 3 files",
"lines": [
"crews.csv 14 crews, 14 vans, 2 depots",
"skills.csv 38 licences, @acc{3 expire this year}",
"jobs.csv 212 jobs over the next 10 days",
"",
"@pass{Board ready: 212 jobs on 14 crews}"
]
}
]
},
"actions": [
{
"href": "/contact",
"label": "Book a walkthrough",
"kind": "solid"
},
{
"href": "/product/dispatch",
"label": "Tour Dispatch",
"kind": "ghost"
}
]
}
},
{sections.7 · footer
"kind": "footer",
"shell": { "inset": "contained", "density": "footer" },
"block": {
"type": "footer",
"layout": "areas",
"brand": { "href": "/", "text": "Vanroster", "mark": "radar" },
"blurb": "Crew scheduling for field-service teams: heating, electrical, plumbing, cleaning and grounds.",
"columns": [
{
"title": "Product",
"links": [
["/product/dispatch", "Dispatch"],
["/pricing", "Pricing"],
["/changelog", "Changelog"]
]
},
{
"title": "Company",
"links": [["/security", "Security"], ["/contact", "Contact"]]
},
{
"title": "For agents",
"links": [
["/product/dispatch", "The Dispatch API"],
["/records.zip", "Site records (.zip)"]
]
}
],
"cta": {
"href": "/contact",
"label": "Book a walkthrough",
"icon": "arrow-right"
},
"note": [
"Vanroster is a worked example on mdxui.dev, not a customer.",
"Rendered by @mdxui/site. Forms here do not send."
]
}
}
]
}
Say what it does
feature-grid takes 2, 3, 4, 6 or 8 cells, the counts that fill their rows at every width. Each cell has a title of 40 characters and a text of 200; cellHead picks what tops it: an icon, a label, both, an index, or nothing.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "callboard",
"frame": "none",
"template": "api-product",
"title": "Vanroster: every crew on the right job",
"description": "Crew scheduling for field-service teams. Vanroster matches each job to a crew with the skills, the van and the shortest drive.",
"sections": [
{sections.0 · nav
"kind": "nav",
"shell": {
"inset": "bleed",
"density": "none",
"surface": "glass",
"sticky": true
},
"block": {
"type": "nav",
"menu": "push",
"collapse": 880,
"brand": { "href": "/", "text": "Vanroster", "mark": "radar" },
"links": [
["/product/dispatch", "Dispatch"],
["/pricing", "Pricing"],
["/changelog", "Changelog"],
["/security", "Security"]
],
"cta": { "href": "/contact", "label": "Book a walkthrough" }
}
},
{sections.1 · hero
"kind": "hero",
"shell": { "inset": "contained", "density": "hero", "background": "glow" },
"block": {
"type": "hero",
"layout": "split",
"stack": 640,
"title": "Every crew on the right job.",
"lede": "Vanroster matches each job to a crew with the right skills, the right van and the shortest drive. Move a job on the board, and every crew phone follows.",
"actions": [
{
"href": "/contact",
"label": "Book a walkthrough",
"kind": "solid"
},
{ "href": "/pricing", "label": "See the plans", "kind": "ghost" }
],
"fine": [
"14-day trial, no payment details",
"Office users free on every plan"
],
"specimen": {
"panel": "field",
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Board · Tue 13 Oct · 07:42",
"lines": [
"@dim{CREW VAN JOB WINDOW DRIVE}",
"A-1 V-12 Boiler service 08:00-10:00 14 min",
"A-1 V-12 Heat pump install 10:30-13:00 9 min",
"@dim{B-2 V-07 Out today: 2 jobs moved}",
"C-3 V-03 Panel upgrade 08:00-11:00 22 min",
"C-3 V-03 @acc{Boiler service} ←B2 11:30-12:30 @pass{6 min}",
"D-4 V-15 @acc{Gas leak check} ←B2 13:00-14:00 @pass{11 min}",
"D-4 V-15 Water heater swap 14:30-16:30 18 min",
"",
"@pass{2 customers texted a new window}"
]
}
]
}
}
},
{sections.2 · stats
"kind": "band",
"shell": { "inset": "contained", "density": "compact" },
"block": {
"type": "stats",
"items": [
{
"value": "400",
"label": "Crews on one board, on every plan",
"icon": "layout-grid"
},
{
"value": "12",
"label": "Skills a job can require, from gas to height",
"icon": "badge-check"
},
{
"value": "30 min",
"label": "Arrival window texted to each customer",
"icon": "clock"
}
]
}
},
{sections.3 · feature-grid
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "feature-grid",
"cellHead": "icon",
"head": {
"eyebrow": "The board",
"title": "One board runs the whole day.",
"lede": "Office staff plan on the board. Crews work from one ordered list on their phones."
},
"items": [
{
"icon": "map-pin",
"title": "Drive time, not distance",
"text": "Jobs are ordered by the drive between them, from road times at the hour of the job."
},
{
"icon": "badge-check",
"title": "Skills before speed",
"text": "A gas job reaches only a crew with a gas licence on file and in date."
},
{
"icon": "refresh-cw",
"title": "Swaps in one drag",
"text": "Drag a job to another crew. Both crew phones update before the drag ends."
},
{
"icon": "bell",
"title": "Customers told once",
"text": "Each customer gets one text with a 30-minute window, and one when the van leaves."
},
{
"icon": "clock",
"title": "Overtime flagged",
"text": "A day that keeps a crew past 10 hours turns amber before anyone assigns it."
},
{
"icon": "shield-check",
"title": "Every change logged",
"text": "Who moved which job, when and why, kept for up to 7 years."
}
]
}
},
{sections.4 · feature-split
"kind": "section",
"shell": { "inset": "contained", "density": "section", "surface": "tint" },
"block": {
"type": "feature-split",
"head": {
"eyebrow": "A sick call at 07:40",
"title": "Re-plan the day in one move."
},
"items": [
{
"icon": "x",
"title": "Mark the crew out",
"text": "One tap clears the crew and lists every job it held that day."
},
{
"icon": "radar",
"title": "Accept the re-plan",
"text": "Each job goes to the nearest crew that holds every skill it needs."
},
{
"icon": "message-square",
"title": "Tell the customers",
"text": "Each changed window goes out as one text, with the new time."
}
],
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Text to the customer · 07:43",
"lines": [
"Your boiler service today moved to 11:30-12:30.",
"Crew C-3 is coming in van V-03.",
"",
"@dim{A second text arrives when the van leaves.}",
"@dim{Reply 1 to keep the time, 2 to pick another day.}"
]
}
]
}
}
},
{sections.5 · compare
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "compare",
"head": {
"eyebrow": "Against the whiteboard",
"title": "A board that moves with the day."
},
"cons": {
"label": "Whiteboard and calls",
"items": [
"Jobs assigned from memory",
"Licences checked by phone",
"Customers call to ask",
"Swaps lost by noon"
]
},
"pros": {
"label": "Vanroster",
"items": [
"Jobs matched to skills",
"Licences checked on assign",
"Customers get a window",
"Every swap on record"
]
}
}
},
{sections.6 · closing
"kind": "closing",
"shell": { "inset": "contained", "density": "closing", "surface": "plate" },
"block": {
"type": "closing",
"layout": "split",
"head": {
"eyebrow": "14-day trial",
"title": "Plan tomorrow on Vanroster.",
"lede": "Import crews and jobs from three spreadsheets. The first board is ready the same afternoon."
},
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Import · 3 files",
"lines": [
"crews.csv 14 crews, 14 vans, 2 depots",
"skills.csv 38 licences, @acc{3 expire this year}",
"jobs.csv 212 jobs over the next 10 days",
"",
"@pass{Board ready: 212 jobs on 14 crews}"
]
}
]
},
"actions": [
{
"href": "/contact",
"label": "Book a walkthrough",
"kind": "solid"
},
{
"href": "/product/dispatch",
"label": "Tour Dispatch",
"kind": "ghost"
}
]
}
},
{sections.7 · footer
"kind": "footer",
"shell": { "inset": "contained", "density": "footer" },
"block": {
"type": "footer",
"layout": "areas",
"brand": { "href": "/", "text": "Vanroster", "mark": "radar" },
"blurb": "Crew scheduling for field-service teams: heating, electrical, plumbing, cleaning and grounds.",
"columns": [
{
"title": "Product",
"links": [
["/product/dispatch", "Dispatch"],
["/pricing", "Pricing"],
["/changelog", "Changelog"]
]
},
{
"title": "Company",
"links": [["/security", "Security"], ["/contact", "Contact"]]
},
{
"title": "For agents",
"links": [
["/product/dispatch", "The Dispatch API"],
["/records.zip", "Site records (.zip)"]
]
}
],
"cta": {
"href": "/contact",
"label": "Book a walkthrough",
"icon": "arrow-right"
},
"note": [
"Vanroster is a worked example on mdxui.dev, not a customer.",
"Rendered by @mdxui/site. Forms here do not send."
]
}
}
]
}
Ask once more
closing repeats the call to action under a short head. It ends on up to two buttons or on one command line, never both.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "callboard",
"frame": "none",
"template": "api-product",
"title": "Vanroster: every crew on the right job",
"description": "Crew scheduling for field-service teams. Vanroster matches each job to a crew with the skills, the van and the shortest drive.",
"sections": [
{sections.0 · nav
"kind": "nav",
"shell": {
"inset": "bleed",
"density": "none",
"surface": "glass",
"sticky": true
},
"block": {
"type": "nav",
"menu": "push",
"collapse": 880,
"brand": { "href": "/", "text": "Vanroster", "mark": "radar" },
"links": [
["/product/dispatch", "Dispatch"],
["/pricing", "Pricing"],
["/changelog", "Changelog"],
["/security", "Security"]
],
"cta": { "href": "/contact", "label": "Book a walkthrough" }
}
},
{sections.1 · hero
"kind": "hero",
"shell": { "inset": "contained", "density": "hero", "background": "glow" },
"block": {
"type": "hero",
"layout": "split",
"stack": 640,
"title": "Every crew on the right job.",
"lede": "Vanroster matches each job to a crew with the right skills, the right van and the shortest drive. Move a job on the board, and every crew phone follows.",
"actions": [
{
"href": "/contact",
"label": "Book a walkthrough",
"kind": "solid"
},
{ "href": "/pricing", "label": "See the plans", "kind": "ghost" }
],
"fine": [
"14-day trial, no payment details",
"Office users free on every plan"
],
"specimen": {
"panel": "field",
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Board · Tue 13 Oct · 07:42",
"lines": [
"@dim{CREW VAN JOB WINDOW DRIVE}",
"A-1 V-12 Boiler service 08:00-10:00 14 min",
"A-1 V-12 Heat pump install 10:30-13:00 9 min",
"@dim{B-2 V-07 Out today: 2 jobs moved}",
"C-3 V-03 Panel upgrade 08:00-11:00 22 min",
"C-3 V-03 @acc{Boiler service} ←B2 11:30-12:30 @pass{6 min}",
"D-4 V-15 @acc{Gas leak check} ←B2 13:00-14:00 @pass{11 min}",
"D-4 V-15 Water heater swap 14:30-16:30 18 min",
"",
"@pass{2 customers texted a new window}"
]
}
]
}
}
},
{sections.2 · stats
"kind": "band",
"shell": { "inset": "contained", "density": "compact" },
"block": {
"type": "stats",
"items": [
{
"value": "400",
"label": "Crews on one board, on every plan",
"icon": "layout-grid"
},
{
"value": "12",
"label": "Skills a job can require, from gas to height",
"icon": "badge-check"
},
{
"value": "30 min",
"label": "Arrival window texted to each customer",
"icon": "clock"
}
]
}
},
{sections.3 · feature-grid
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "feature-grid",
"cellHead": "icon",
"head": {
"eyebrow": "The board",
"title": "One board runs the whole day.",
"lede": "Office staff plan on the board. Crews work from one ordered list on their phones."
},
"items": [
{
"icon": "map-pin",
"title": "Drive time, not distance",
"text": "Jobs are ordered by the drive between them, from road times at the hour of the job."
},
{
"icon": "badge-check",
"title": "Skills before speed",
"text": "A gas job reaches only a crew with a gas licence on file and in date."
},
{
"icon": "refresh-cw",
"title": "Swaps in one drag",
"text": "Drag a job to another crew. Both crew phones update before the drag ends."
},
{
"icon": "bell",
"title": "Customers told once",
"text": "Each customer gets one text with a 30-minute window, and one when the van leaves."
},
{
"icon": "clock",
"title": "Overtime flagged",
"text": "A day that keeps a crew past 10 hours turns amber before anyone assigns it."
},
{
"icon": "shield-check",
"title": "Every change logged",
"text": "Who moved which job, when and why, kept for up to 7 years."
}
]
}
},
{sections.4 · feature-split
"kind": "section",
"shell": { "inset": "contained", "density": "section", "surface": "tint" },
"block": {
"type": "feature-split",
"head": {
"eyebrow": "A sick call at 07:40",
"title": "Re-plan the day in one move."
},
"items": [
{
"icon": "x",
"title": "Mark the crew out",
"text": "One tap clears the crew and lists every job it held that day."
},
{
"icon": "radar",
"title": "Accept the re-plan",
"text": "Each job goes to the nearest crew that holds every skill it needs."
},
{
"icon": "message-square",
"title": "Tell the customers",
"text": "Each changed window goes out as one text, with the new time."
}
],
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Text to the customer · 07:43",
"lines": [
"Your boiler service today moved to 11:30-12:30.",
"Crew C-3 is coming in van V-03.",
"",
"@dim{A second text arrives when the van leaves.}",
"@dim{Reply 1 to keep the time, 2 to pick another day.}"
]
}
]
}
}
},
{sections.5 · compare
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "compare",
"head": {
"eyebrow": "Against the whiteboard",
"title": "A board that moves with the day."
},
"cons": {
"label": "Whiteboard and calls",
"items": [
"Jobs assigned from memory",
"Licences checked by phone",
"Customers call to ask",
"Swaps lost by noon"
]
},
"pros": {
"label": "Vanroster",
"items": [
"Jobs matched to skills",
"Licences checked on assign",
"Customers get a window",
"Every swap on record"
]
}
}
},
{sections.6 · closing
"kind": "closing",
"shell": { "inset": "contained", "density": "closing", "surface": "plate" },
"block": {
"type": "closing",
"layout": "split",
"head": {
"eyebrow": "14-day trial",
"title": "Plan tomorrow on Vanroster.",
"lede": "Import crews and jobs from three spreadsheets. The first board is ready the same afternoon."
},
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Import · 3 files",
"lines": [
"crews.csv 14 crews, 14 vans, 2 depots",
"skills.csv 38 licences, @acc{3 expire this year}",
"jobs.csv 212 jobs over the next 10 days",
"",
"@pass{Board ready: 212 jobs on 14 crews}"
]
}
]
},
"actions": [
{
"href": "/contact",
"label": "Book a walkthrough",
"kind": "solid"
},
{
"href": "/product/dispatch",
"label": "Tour Dispatch",
"kind": "ghost"
}
]
}
},
{sections.7 · footer
"kind": "footer",
"shell": { "inset": "contained", "density": "footer" },
"block": {
"type": "footer",
"layout": "areas",
"brand": { "href": "/", "text": "Vanroster", "mark": "radar" },
"blurb": "Crew scheduling for field-service teams: heating, electrical, plumbing, cleaning and grounds.",
"columns": [
{
"title": "Product",
"links": [
["/product/dispatch", "Dispatch"],
["/pricing", "Pricing"],
["/changelog", "Changelog"]
]
},
{
"title": "Company",
"links": [["/security", "Security"], ["/contact", "Contact"]]
},
{
"title": "For agents",
"links": [
["/product/dispatch", "The Dispatch API"],
["/records.zip", "Site records (.zip)"]
]
}
],
"cta": {
"href": "/contact",
"label": "Book a walkthrough",
"icon": "arrow-right"
},
"note": [
"Vanroster is a worked example on mdxui.dev, not a customer.",
"Rendered by @mdxui/site. Forms here do not send."
]
}
}
]
}
Close the page
footer in columns or areas holds two or three link columns, and one of them is titled "For agents"; layout: "row" drops that rule. Two note lines of 96 characters end the page.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "callboard",
"frame": "none",
"template": "api-product",
"title": "Vanroster: every crew on the right job",
"description": "Crew scheduling for field-service teams. Vanroster matches each job to a crew with the skills, the van and the shortest drive.",
"sections": [
{sections.0 · nav
"kind": "nav",
"shell": {
"inset": "bleed",
"density": "none",
"surface": "glass",
"sticky": true
},
"block": {
"type": "nav",
"menu": "push",
"collapse": 880,
"brand": { "href": "/", "text": "Vanroster", "mark": "radar" },
"links": [
["/product/dispatch", "Dispatch"],
["/pricing", "Pricing"],
["/changelog", "Changelog"],
["/security", "Security"]
],
"cta": { "href": "/contact", "label": "Book a walkthrough" }
}
},
{sections.1 · hero
"kind": "hero",
"shell": { "inset": "contained", "density": "hero", "background": "glow" },
"block": {
"type": "hero",
"layout": "split",
"stack": 640,
"title": "Every crew on the right job.",
"lede": "Vanroster matches each job to a crew with the right skills, the right van and the shortest drive. Move a job on the board, and every crew phone follows.",
"actions": [
{
"href": "/contact",
"label": "Book a walkthrough",
"kind": "solid"
},
{ "href": "/pricing", "label": "See the plans", "kind": "ghost" }
],
"fine": [
"14-day trial, no payment details",
"Office users free on every plan"
],
"specimen": {
"panel": "field",
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Board · Tue 13 Oct · 07:42",
"lines": [
"@dim{CREW VAN JOB WINDOW DRIVE}",
"A-1 V-12 Boiler service 08:00-10:00 14 min",
"A-1 V-12 Heat pump install 10:30-13:00 9 min",
"@dim{B-2 V-07 Out today: 2 jobs moved}",
"C-3 V-03 Panel upgrade 08:00-11:00 22 min",
"C-3 V-03 @acc{Boiler service} ←B2 11:30-12:30 @pass{6 min}",
"D-4 V-15 @acc{Gas leak check} ←B2 13:00-14:00 @pass{11 min}",
"D-4 V-15 Water heater swap 14:30-16:30 18 min",
"",
"@pass{2 customers texted a new window}"
]
}
]
}
}
},
{sections.2 · stats
"kind": "band",
"shell": { "inset": "contained", "density": "compact" },
"block": {
"type": "stats",
"items": [
{
"value": "400",
"label": "Crews on one board, on every plan",
"icon": "layout-grid"
},
{
"value": "12",
"label": "Skills a job can require, from gas to height",
"icon": "badge-check"
},
{
"value": "30 min",
"label": "Arrival window texted to each customer",
"icon": "clock"
}
]
}
},
{sections.3 · feature-grid
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "feature-grid",
"cellHead": "icon",
"head": {
"eyebrow": "The board",
"title": "One board runs the whole day.",
"lede": "Office staff plan on the board. Crews work from one ordered list on their phones."
},
"items": [
{
"icon": "map-pin",
"title": "Drive time, not distance",
"text": "Jobs are ordered by the drive between them, from road times at the hour of the job."
},
{
"icon": "badge-check",
"title": "Skills before speed",
"text": "A gas job reaches only a crew with a gas licence on file and in date."
},
{
"icon": "refresh-cw",
"title": "Swaps in one drag",
"text": "Drag a job to another crew. Both crew phones update before the drag ends."
},
{
"icon": "bell",
"title": "Customers told once",
"text": "Each customer gets one text with a 30-minute window, and one when the van leaves."
},
{
"icon": "clock",
"title": "Overtime flagged",
"text": "A day that keeps a crew past 10 hours turns amber before anyone assigns it."
},
{
"icon": "shield-check",
"title": "Every change logged",
"text": "Who moved which job, when and why, kept for up to 7 years."
}
]
}
},
{sections.4 · feature-split
"kind": "section",
"shell": { "inset": "contained", "density": "section", "surface": "tint" },
"block": {
"type": "feature-split",
"head": {
"eyebrow": "A sick call at 07:40",
"title": "Re-plan the day in one move."
},
"items": [
{
"icon": "x",
"title": "Mark the crew out",
"text": "One tap clears the crew and lists every job it held that day."
},
{
"icon": "radar",
"title": "Accept the re-plan",
"text": "Each job goes to the nearest crew that holds every skill it needs."
},
{
"icon": "message-square",
"title": "Tell the customers",
"text": "Each changed window goes out as one text, with the new time."
}
],
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Text to the customer · 07:43",
"lines": [
"Your boiler service today moved to 11:30-12:30.",
"Crew C-3 is coming in van V-03.",
"",
"@dim{A second text arrives when the van leaves.}",
"@dim{Reply 1 to keep the time, 2 to pick another day.}"
]
}
]
}
}
},
{sections.5 · compare
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "compare",
"head": {
"eyebrow": "Against the whiteboard",
"title": "A board that moves with the day."
},
"cons": {
"label": "Whiteboard and calls",
"items": [
"Jobs assigned from memory",
"Licences checked by phone",
"Customers call to ask",
"Swaps lost by noon"
]
},
"pros": {
"label": "Vanroster",
"items": [
"Jobs matched to skills",
"Licences checked on assign",
"Customers get a window",
"Every swap on record"
]
}
}
},
{sections.6 · closing
"kind": "closing",
"shell": { "inset": "contained", "density": "closing", "surface": "plate" },
"block": {
"type": "closing",
"layout": "split",
"head": {
"eyebrow": "14-day trial",
"title": "Plan tomorrow on Vanroster.",
"lede": "Import crews and jobs from three spreadsheets. The first board is ready the same afternoon."
},
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Import · 3 files",
"lines": [
"crews.csv 14 crews, 14 vans, 2 depots",
"skills.csv 38 licences, @acc{3 expire this year}",
"jobs.csv 212 jobs over the next 10 days",
"",
"@pass{Board ready: 212 jobs on 14 crews}"
]
}
]
},
"actions": [
{
"href": "/contact",
"label": "Book a walkthrough",
"kind": "solid"
},
{
"href": "/product/dispatch",
"label": "Tour Dispatch",
"kind": "ghost"
}
]
}
},
{sections.7 · footer
"kind": "footer",
"shell": { "inset": "contained", "density": "footer" },
"block": {
"type": "footer",
"layout": "areas",
"brand": { "href": "/", "text": "Vanroster", "mark": "radar" },
"blurb": "Crew scheduling for field-service teams: heating, electrical, plumbing, cleaning and grounds.",
"columns": [
{
"title": "Product",
"links": [
["/product/dispatch", "Dispatch"],
["/pricing", "Pricing"],
["/changelog", "Changelog"]
]
},
{
"title": "Company",
"links": [["/security", "Security"], ["/contact", "Contact"]]
},
{
"title": "For agents",
"links": [
["/product/dispatch", "The Dispatch API"],
["/records.zip", "Site records (.zip)"]
]
}
],
"cta": {
"href": "/contact",
"label": "Book a walkthrough",
"icon": "arrow-right"
},
"note": [
"Vanroster is a worked example on mdxui.dev, not a customer.",
"Rendered by @mdxui/site. Forms here do not send."
]
}
}
]
}
Result
The record parses and renders as one page. Flip the Theme chips: the words stay, and the Brand changes around them.
Vanroster › home · callboardOpen the render
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "callboard",
"frame": "none",
"template": "api-product",
"title": "Vanroster: every crew on the right job",
"description": "Crew scheduling for field-service teams. Vanroster matches each job to a crew with the skills, the van and the shortest drive.",
"sections": [
{sections.0 · nav
"kind": "nav",
"shell": {
"inset": "bleed",
"density": "none",
"surface": "glass",
"sticky": true
},
"block": {
"type": "nav",
"menu": "push",
"collapse": 880,
"brand": { "href": "/", "text": "Vanroster", "mark": "radar" },
"links": [
["/product/dispatch", "Dispatch"],
["/pricing", "Pricing"],
["/changelog", "Changelog"],
["/security", "Security"]
],
"cta": { "href": "/contact", "label": "Book a walkthrough" }
}
},
{sections.1 · hero
"kind": "hero",
"shell": { "inset": "contained", "density": "hero", "background": "glow" },
"block": {
"type": "hero",
"layout": "split",
"stack": 640,
"title": "Every crew on the right job.",
"lede": "Vanroster matches each job to a crew with the right skills, the right van and the shortest drive. Move a job on the board, and every crew phone follows.",
"actions": [
{
"href": "/contact",
"label": "Book a walkthrough",
"kind": "solid"
},
{ "href": "/pricing", "label": "See the plans", "kind": "ghost" }
],
"fine": [
"14-day trial, no payment details",
"Office users free on every plan"
],
"specimen": {
"panel": "field",
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Board · Tue 13 Oct · 07:42",
"lines": [
"@dim{CREW VAN JOB WINDOW DRIVE}",
"A-1 V-12 Boiler service 08:00-10:00 14 min",
"A-1 V-12 Heat pump install 10:30-13:00 9 min",
"@dim{B-2 V-07 Out today: 2 jobs moved}",
"C-3 V-03 Panel upgrade 08:00-11:00 22 min",
"C-3 V-03 @acc{Boiler service} ←B2 11:30-12:30 @pass{6 min}",
"D-4 V-15 @acc{Gas leak check} ←B2 13:00-14:00 @pass{11 min}",
"D-4 V-15 Water heater swap 14:30-16:30 18 min",
"",
"@pass{2 customers texted a new window}"
]
}
]
}
}
},
{sections.2 · stats
"kind": "band",
"shell": { "inset": "contained", "density": "compact" },
"block": {
"type": "stats",
"items": [
{
"value": "400",
"label": "Crews on one board, on every plan",
"icon": "layout-grid"
},
{
"value": "12",
"label": "Skills a job can require, from gas to height",
"icon": "badge-check"
},
{
"value": "30 min",
"label": "Arrival window texted to each customer",
"icon": "clock"
}
]
}
},
{sections.3 · feature-grid
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "feature-grid",
"cellHead": "icon",
"head": {
"eyebrow": "The board",
"title": "One board runs the whole day.",
"lede": "Office staff plan on the board. Crews work from one ordered list on their phones."
},
"items": [
{
"icon": "map-pin",
"title": "Drive time, not distance",
"text": "Jobs are ordered by the drive between them, from road times at the hour of the job."
},
{
"icon": "badge-check",
"title": "Skills before speed",
"text": "A gas job reaches only a crew with a gas licence on file and in date."
},
{
"icon": "refresh-cw",
"title": "Swaps in one drag",
"text": "Drag a job to another crew. Both crew phones update before the drag ends."
},
{
"icon": "bell",
"title": "Customers told once",
"text": "Each customer gets one text with a 30-minute window, and one when the van leaves."
},
{
"icon": "clock",
"title": "Overtime flagged",
"text": "A day that keeps a crew past 10 hours turns amber before anyone assigns it."
},
{
"icon": "shield-check",
"title": "Every change logged",
"text": "Who moved which job, when and why, kept for up to 7 years."
}
]
}
},
{sections.4 · feature-split
"kind": "section",
"shell": { "inset": "contained", "density": "section", "surface": "tint" },
"block": {
"type": "feature-split",
"head": {
"eyebrow": "A sick call at 07:40",
"title": "Re-plan the day in one move."
},
"items": [
{
"icon": "x",
"title": "Mark the crew out",
"text": "One tap clears the crew and lists every job it held that day."
},
{
"icon": "radar",
"title": "Accept the re-plan",
"text": "Each job goes to the nearest crew that holds every skill it needs."
},
{
"icon": "message-square",
"title": "Tell the customers",
"text": "Each changed window goes out as one text, with the new time."
}
],
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Text to the customer · 07:43",
"lines": [
"Your boiler service today moved to 11:30-12:30.",
"Crew C-3 is coming in van V-03.",
"",
"@dim{A second text arrives when the van leaves.}",
"@dim{Reply 1 to keep the time, 2 to pick another day.}"
]
}
]
}
}
},
{sections.5 · compare
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "compare",
"head": {
"eyebrow": "Against the whiteboard",
"title": "A board that moves with the day."
},
"cons": {
"label": "Whiteboard and calls",
"items": [
"Jobs assigned from memory",
"Licences checked by phone",
"Customers call to ask",
"Swaps lost by noon"
]
},
"pros": {
"label": "Vanroster",
"items": [
"Jobs matched to skills",
"Licences checked on assign",
"Customers get a window",
"Every swap on record"
]
}
}
},
{sections.6 · closing
"kind": "closing",
"shell": { "inset": "contained", "density": "closing", "surface": "plate" },
"block": {
"type": "closing",
"layout": "split",
"head": {
"eyebrow": "14-day trial",
"title": "Plan tomorrow on Vanroster.",
"lede": "Import crews and jobs from three spreadsheets. The first board is ready the same afternoon."
},
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "Import · 3 files",
"lines": [
"crews.csv 14 crews, 14 vans, 2 depots",
"skills.csv 38 licences, @acc{3 expire this year}",
"jobs.csv 212 jobs over the next 10 days",
"",
"@pass{Board ready: 212 jobs on 14 crews}"
]
}
]
},
"actions": [
{
"href": "/contact",
"label": "Book a walkthrough",
"kind": "solid"
},
{
"href": "/product/dispatch",
"label": "Tour Dispatch",
"kind": "ghost"
}
]
}
},
{sections.7 · footer
"kind": "footer",
"shell": { "inset": "contained", "density": "footer" },
"block": {
"type": "footer",
"layout": "areas",
"brand": { "href": "/", "text": "Vanroster", "mark": "radar" },
"blurb": "Crew scheduling for field-service teams: heating, electrical, plumbing, cleaning and grounds.",
"columns": [
{
"title": "Product",
"links": [
["/product/dispatch", "Dispatch"],
["/pricing", "Pricing"],
["/changelog", "Changelog"]
]
},
{
"title": "Company",
"links": [["/security", "Security"], ["/contact", "Contact"]]
},
{
"title": "For agents",
"links": [
["/product/dispatch", "The Dispatch API"],
["/records.zip", "Site records (.zip)"]
]
}
],
"cta": {
"href": "/contact",
"label": "Book a walkthrough",
"icon": "arrow-right"
},
"note": [
"Vanroster is a worked example on mdxui.dev, not a customer.",
"Rendered by @mdxui/site. Forms here do not send."
]
}
}
]
}
Vanroster › home · callboardOpen the render
What a landing here does not draw
Images, video, a gallery, testimonials, a logo wall and a team page have no Section type in 7.0.0-alpha.0. Choosing a Section type gives the stand-in for each.