MintHomes sells residences across three regions. The site has to look like a brand that charges a premium, and it has to be editable by people who will never open a terminal. Those two goals pull against each other: the more a layout is pinned to a design file, the less an editor can safely change.

The resolution was to build the site twice over. Every page renders from a Strapi content model, and every page also has a bundled fallback in code. Where the design is load-bearing — the home hero, the region boards — the layout stays fixed and only the words and pictures are editable. Where your team needs freedom — campaign pages, the blog, new regions — you get a palette of twelve section blocks and a live preview, and the site routes, navigation and sitemap follow whatever you build without a deploy.

The design arrived as a Figma board with desktop and mobile frames, a type scale built on a licensed display face, and photography-led sections. Your side had a marketing editor, not a developer. The hosting budget ruled out a managed CMS.

The site went live in stages rather than as one release. Each phase left something usable, so a delay in a later phase never held back an earlier one. The work falls into these four groups almost exactly.

The frontend never talks to the database. It reads Strapi's REST API, tags every response with a cache key, and writes back to Strapi only for the two things a visitor creates: an enquiry and a consent record. Strapi owns the database and the media library. Nothing reaches production by any route that skips the build.

The palette lives as CSS custom properties and is exposed to Tailwind v4 through @theme inline, so a colour has exactly one definition and every utility class resolves to it. The names are the brand's, not generic scale numbers: verdant, olive, ivory, ticker.

Two of those tokens exist because the board's own values failed in use. The ticker band's original sand tone carried white 15px serif text at 2.89:1, well under the 4.5:1 that WCAG AA asks for at that size, so it was taken down the same hue to 4.73:1 and confined to that one band. The comment recording that sits next to the token, where the next person will find it.

The home page is the one page where letting an editor rearrange everything would be a liability. The hero and the marquee ticker are the brand's signature, so they are rendered from code on every request and are not part of the page builder.

Everything below them is a switch. If the home page's section zone in the CMS is empty, the site renders the five designed sections — about, statistics, featured projects, recent articles, closing call to action. The moment an editor adds a single section, the built stack replaces the fixed one. Emptying the zone puts the original layout back.

About is the most content-dense page: core values, a milestone timeline, leadership profiles, office cards. All four are collection types, ordered by an explicit order field so an editor controls sequence without renaming anything.

It is also where a subtle defect surfaced. Scroll reveals were implemented by branching on framer-motion's reduced-motion hook: render for motion on the server, disarm in the browser for anyone who had asked for less of it. In framer-motion 12 that hook returns the real value on the first client render rather than null, so server and client disagreed about an inline opacity: 0. React does not patch attribute mismatches, and with the animation disarmed nothing ever faded the content back in. Measured on this page: 14 of its 16 sections stayed invisible, permanently, for exactly the visitors who had asked the site to be gentler.

The fix was to stop branching on the preference in markup at all. One MotionConfig reducedMotion="user" at the root honours it through framer-motion's own mechanism — travel is skipped, the fade still plays — so the markup never depends on a preference and there is no mismatch to leave behind.

Regions started the way they usually do: a fixed enum on two Strapi schemas, plus hardcoded lists in five places in the frontend. Adding a fourth region meant a schema change, a code change and a deploy — and even then the new region page could not be linked from the footer without hand-editing the global settings.

It was rebuilt so that the set of valid regions is simply "whichever Region Pages are published". The enum became a plain string on both schemas, which needed no data migration because PostgreSQL stores enum values as text anyway. /projects/[region] now derives its routes, its static params and its 404s from the published Region Pages. Unknown keys still 404 — the route did not become permissive, it became data-driven.

Articles sort by publish date on their own, paginated at twelve. An editor occasionally needs one held at the top regardless of date, which is what the order field is for — a pin, not the sort. Strapi has no drag-to-reorder for collection entries, so a custom admin screen provides one (section 20).

The category filter is drawn rather than using a native select. A native control cannot be styled to the board on every platform, and the filter sits in the middle of a designed band where a system-styled dropdown is visibly foreign. The replacement is keyboard operable and announces its state.

Article bodies are Strapi rich text, rendered through a dedicated component that handles images and inline marks. An earlier renderer silently dropped image nodes, which is the behaviour the exhaustive switch in section 13 now makes impossible.

The first version of the form was a front-end placeholder: it resolved a 600 millisecond timer and showed a thank-you note, with nothing behind it. Wiring it to real delivery was a phase-four task. The form now does three things per submission: it tells the office inbox, it thanks the sender, and it files the enquiry in the CMS so it can be found later.

Only the first of those decides what the visitor sees. A thank-you email that failed to send is not worth making someone retype their message over, and a CMS that is briefly down must not turn a delivered enquiry into an error on screen. Each step reports its own result into the stored record, so "did that one actually go out?" has an answer on the Incoming emails screen.

Careers, the privacy policy, the cookies policy and the 404 page are the pages that get built last and reviewed least. They share one legal-page component so their typography cannot drift apart, and their copy is CMS-held so your counsel can revise it without a release.

The 404 page is content-driven too — its eyebrow, heading, body and button label all come from the global settings, with bundled defaults behind them. A 404 is a page a visitor reads while already frustrated, so it was worth the same treatment as the rest.

The model is deliberately boring. Page-shaped singles hold the copy for a specific page; collections hold things there are many of; shared components hold the pieces that repeat. Nothing in it is clever, which is the point — an editor has to be able to predict where a piece of text lives.

A free page is a title, a slug, a hero and a dynamic zone. The zone accepts twelve section blocks — rich text, image, gallery, media-and-text, a statistics row, a card band, a timeline, a call-to-action banner, a project grid, a blog grid — which an editor stacks in any order.

Two details make this reliable rather than fragile.

Every read passes through one function, and what it does depends on who is asking. An editor in preview gets unpublished drafts with caching turned off. A visitor gets published content, tagged so it can be invalidated precisely. If Strapi cannot be reached at all, the call returns null and the caller falls back to bundled content (section 19).

Strapi's Preview button opens /api/preview with a shared secret and a path. The route checks the secret, confirms the path is a route this site actually serves, enables Draft Mode and redirects. That middle check matters: redirecting to the raw parameter would turn a valid secret into an open redirect, and the secret travels in a URL that editors paste to each other.

Confirming the path cannot use the cached route lists alone, because a brand new draft has no published slug yet. The route queries Strapi directly with status=draft and no caching, falls back to the cached getters if the CMS is unreachable, and reads the live region list rather than a fixed one.

Strapi posts to /api/revalidate with a bearer secret when an entry changes. The route maps the model name to its cache tag and marks just that tag stale, serving the previous response while the new one is fetched. A body-less ping refreshes everything. The read layer's own revalidation window defaults to zero, so even without the webhook nothing is served stale.

Publishing a page that nothing links to is a quiet failure: the editor believes they shipped it, and no visitor will ever find it. So content-derived links are merged over the curated ones every time global settings are read. Every published Region Page appears in the header's Projects dropdown and the footer's Projects column; every published free page appears in the footer's Navigate column.

The merge is additive and deduplicated by href, so anything an editor already listed by hand — with their own label or position — wins and is never duplicated. Automatic navigation that overwrites a deliberate choice is worse than no automatic navigation.

The browser's own cookie stores the choice and is what actually gates scripts. A separate endpoint records the same choice in the CMS so consent can be demonstrated later: what was chosen, against which version of the policy, and when.

The policy version is a constant that is bumped whenever the cookies policy changes materially. A stored consent from an older version is treated as absent, so visitors are asked again rather than being held to terms they never saw. Four categories are modelled; essential is not offered as a choice, because it cannot be declined and offering it would be dishonest.

Rather than withholding the container until someone consents, the defaults are declared as denied before it loads, and updated when a choice is made. That is Google's own guidance for Consent Mode v2, and it means tags inside the container self-gate — whoever manages the container later can add a tag without it escaping the banner.

Ordering is the part that breaks silently: if the consent code runs out of order, the defaults do not apply. So the defaults are a plain inline script in the document head, which runs during parse, and the container loads after it — ordered by document position rather than by a strategy hint that could drift. There is deliberately no noscript iframe fallback, which would fire the container for visitors who could never have consented.

Every route resolves its metadata the same way: the value an editor set in Strapi, then a value derived from the page, then the site default. That ordering lives in a single builder so a new page cannot invent its own.

Two decisions in it are worth naming. CMS meta titles are written as complete titles, so the layout's "%s | MintHomes" template would append the brand twice; the builder emits an absolute title and applies the suffix itself. And the canonical origin is not taken from the CMS siteUrl field, which points at a different property — advertising a canonical for a site this deployment does not serve is worse than having no canonical at all. It comes from the deployment's own domain, overridable by one environment variable.

The motion budget is small on purpose: short-travel fades as sections enter the viewport, and inertial wheel scrolling. On photography-led pages the motion should read as the page settling, not as an effect competing with the images. Nothing above the fold animates — starting the hero at zero opacity would delay the largest contentful paint for content that is already in view.

Only the animation features the site actually uses are loaded. Importing the full motion package pulls drag, layout projection and 3D into the first-load bundle of every page, because the reveals are sitewide. The provider loads the DOM feature set only, in strict mode, so a later import cannot quietly pull the full bundle back in.

Two failure modes are handled explicitly. Reduced motion is honoured at the provider rather than per component, for the hydration reason in section 07. And a noscript rule undoes the server-rendered inline opacity, so a visitor whose JavaScript never arrives sees the page rather than a blank one.

The CMS is one self-hosted Node process on one VPS. A restart, a failed deploy or a brief network problem must not take the marketing site down with it, so no read ever throws. Every fetch returns null on failure and logs a warning, and every getter falls back to the bundled content it replaced.

This is not a stub layer written for the purpose. It is the phase-one site — real copy, real images, the layouts that were signed off — left in place. The degradation is invisible to a visitor: they see the content as it stood at the last deploy rather than an error page.

Strapi's admin is good at editing one entry. It is not good at two jobs your team does weekly, so both got a purpose-built screen in the admin's own design system rather than a spreadsheet somewhere else.

Everything runs on one VPS behind a single nginx reverse proxy with Let's Encrypt TLS. The Next.js site and Strapi are each a systemd service bound to loopback — the site on port 3000, the API on 1337 — PostgreSQL 16 runs in a container on localhost, nginx serves the uploads directory straight from disk, and the database and that directory are backed up daily with a fourteen-day retention.

The runbook is specific about the thing most runbooks get wrong — when a restart is actually required. Content changes need none. Schema changes made in the Content-Type Builder write files under cms/src/api/ and need to be committed, or the next deploy silently deletes your team's work.