Harbor tides
API product: tide windows per berth, in quaypoint.
- Pages
- 10
- Sections
- 47
- Section types
- 24
- Templates
- 7
- 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.
Brand
- Display
- Space Grotesk
- Text
- Inter
- Mono
- JetBrains Mono
Why quaypoint
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
| Record | Template | Sections | Size |
|---|---|---|---|
| home.json | api-product | 14 | 9.3 KB |
| blog.json | blog | 4 | 2.8 KB |
| blog/tide-windows.json | post | 3 | 2.8 KB |
| contact.json | contact | 3 | 2.4 KB |
| contact/sent.json | article | 3 | 1.8 KB |
| integrations.json | directory-list | 3 | 2.3 KB |
| integrations/chartplot.json | directory-product | 5 | 3.4 KB |
| pricing.json | api-product | 5 | 3.9 KB |
| terms.json | article | 3 | 2.1 KB |
| 404.json | article | 4 | 2.1 KB |
| pages/harbor/ | 7 Templates | 47 | 32.8 KB |
The tally and the records, as text
24 Section types across 10 pages.
footer ×10 · nav ×10 · article ×2 · closing ×2 · page-head ×2 · pricing ×2 · text-stack ×2 · agent-prompt ×1 · api-call ×1 · bento ×1 · command-row ×1 · compare ×1 · cta-form ×1 · endpoints ×1 · facts ×1 · faq ×1 · feature-grid ×1 · feature-split ×1 · hero ×1 · plan-table ×1 · post-list ×1 · product-head ×1 · product-list ×1 · steps ×1
| Page | Template | Sections | Record |
|---|---|---|---|
| home | api-product | 14 | JSON |
| 404 | article | 4 | JSON |
| blog | blog | 4 | JSON |
| contact | contact | 3 | JSON |
| integrations | directory-list | 3 | JSON |
| pricing | api-product | 5 | JSON |
| terms | article | 3 | JSON |
| blog/tide-windows | post | 3 | JSON |
| contact/sent | article | 3 | JSON |
| integrations/chartplot | directory-product | 5 | JSON |
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
Download the 10 records. The zip holds
harbor/pages/, one record per page, each with its$schema.bash curl -O https://next.mdxui.dev/sites/harbor/records.zip unzip records.zipInstall the pinned pair.
bash pnpm add @mdxui/site@7.0.0-alpha.0 @mdxui/themes@7.0.0-alpha.0Rename 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.