# Build a landing page (/docs/start/guides/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`](https://next.mdxui.dev/docs/showcase/templates/api-product) Template. Each step lights its section in Vanroster's record.

## Prerequisites

- The project from the [Quickstart](https://next.mdxui.dev/docs/start/quickstart), or [starter.zip](https://next.mdxui.dev/starter.zip), whose `pages/home.json` is the record these steps build.

**File: pages/home.json**

**File: Result**

The result, as this site renders it: https://next.mdxui.dev/pages/vanroster/home.json

## Name the Business

[`nav`](https://next.mdxui.dev/docs/sections/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.

## Make the promise

The [`hero`](https://next.mdxui.dev/docs/sections/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.

## Show the proof

[`stats`](https://next.mdxui.dev/docs/sections/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.

## Say what it does

[`feature-grid`](https://next.mdxui.dev/docs/sections/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.

## Ask once more

[`closing`](https://next.mdxui.dev/docs/sections/closing) repeats the call to action under a short head. It ends on up to two buttons or on one command line, never both.

## Close the page

[`footer`](https://next.mdxui.dev/docs/sections/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.

## Result

The record parses and renders as one page. Flip the Theme chips: the words stay, and the Brand changes around them.

## 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](https://next.mdxui.dev/docs/sections/choosing#not-drawn-in-700-alpha0) gives the stand-in for each.

## Next steps

  - [Build a pricing page](https://next.mdxui.dev/docs/start/guides/pricing-page): Plans, a comparison and the questions.
  - [Choose a Section type](https://next.mdxui.dev/docs/sections/choosing): A section for every job on the page.
  - [api-product](https://next.mdxui.dev/docs/showcase/templates/api-product): Every worked page built on it.