# Harbor tides (/docs/showcase/harbor)

> API product: tide windows per berth, in quaypoint.



## 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

Harbor sells numbers to people who plan around the water. Navy and signal orange read as a chart table, Space Grotesk keeps headings sturdy, and the plated plan marks the one most berths need.

## Built from

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

24 Section types across 10 pages.

[`footer`](https://next.mdxui.dev/docs/sections/footer) ×10 · [`nav`](https://next.mdxui.dev/docs/sections/nav) ×10 · [`article`](https://next.mdxui.dev/docs/sections/article) ×2 · [`closing`](https://next.mdxui.dev/docs/sections/closing) ×2 · [`page-head`](https://next.mdxui.dev/docs/sections/page-head) ×2 · [`pricing`](https://next.mdxui.dev/docs/sections/pricing) ×2 · [`text-stack`](https://next.mdxui.dev/docs/sections/text-stack) ×2 · [`agent-prompt`](https://next.mdxui.dev/docs/sections/agent-prompt) ×1 · [`api-call`](https://next.mdxui.dev/docs/sections/api-call) ×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 · [`facts`](https://next.mdxui.dev/docs/sections/facts) ×1 · [`faq`](https://next.mdxui.dev/docs/sections/faq) ×1 · [`feature-grid`](https://next.mdxui.dev/docs/sections/feature-grid) ×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 · [`product-head`](https://next.mdxui.dev/docs/sections/product-head) ×1 · [`product-list`](https://next.mdxui.dev/docs/sections/product-list) ×1 · [`steps`](https://next.mdxui.dev/docs/sections/steps) ×1

| Page | Template | Sections | Record |
| --- | --- | --- | --- |
| [home](https://next.mdxui.dev/sites/harbor/) | `api-product` | 14 | [JSON](https://next.mdxui.dev/pages/harbor/home.json) |
| [404](https://next.mdxui.dev/sites/harbor/404) | `article` | 4 | [JSON](https://next.mdxui.dev/pages/harbor/404.json) |
| [blog](https://next.mdxui.dev/sites/harbor/blog) | `blog` | 4 | [JSON](https://next.mdxui.dev/pages/harbor/blog.json) |
| [contact](https://next.mdxui.dev/sites/harbor/contact) | `contact` | 3 | [JSON](https://next.mdxui.dev/pages/harbor/contact.json) |
| [integrations](https://next.mdxui.dev/sites/harbor/integrations) | `directory-list` | 3 | [JSON](https://next.mdxui.dev/pages/harbor/integrations.json) |
| [pricing](https://next.mdxui.dev/sites/harbor/pricing) | `api-product` | 5 | [JSON](https://next.mdxui.dev/pages/harbor/pricing.json) |
| [terms](https://next.mdxui.dev/sites/harbor/terms) | `article` | 3 | [JSON](https://next.mdxui.dev/pages/harbor/terms.json) |
| [blog/tide-windows](https://next.mdxui.dev/sites/harbor/blog/tide-windows) | `post` | 3 | [JSON](https://next.mdxui.dev/pages/harbor/blog/tide-windows.json) |
| [contact/sent](https://next.mdxui.dev/sites/harbor/contact/sent) | `article` | 3 | [JSON](https://next.mdxui.dev/pages/harbor/contact/sent.json) |
| [integrations/chartplot](https://next.mdxui.dev/sites/harbor/integrations/chartplot) | `directory-product` | 5 | [JSON](https://next.mdxui.dev/pages/harbor/integrations/chartplot.json) |

</details>

## How it was built

**The brief.** An API product that sells tide windows per berth: a free plan, paid plans and a way to ask for a new berth. The hero says it in four words: "Every berth, every tide."

**The records.** One JSON record per page under `pages/harbor/`: the home and pricing name `api-product`, the integrations listing and one integration name `directory-list` and `directory-product`, and a blog, a post, terms, contact and its sent page fill out the rest.

**The Theme.** Every record names `"theme": "quaypoint"`. 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` is a page head and a closing that leads back home. The form posts to `/contact/send`, 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