Every page in the 18 Next.js homepage templates I've been shipping has a hard budget: 3,400px of document height. Not a guideline, not a lint warning — a number I check before a template counts as done.
Last week that number made me delete the section I liked most.
The template
t18 is Stonebridge Build, a residential builder/remodeler. The page had five sections:
- a before/after drag hero on the same elevation (frame → finished room)
- a live site log — active jobs with phase badges and what was signed off
- a scope board — new build / whole-home remodel / add-on, with photos
- a four-step "how the quote works" strip
- a trust + estimate section: licence badges, warranty, and the form
Section 4 is the one I fought for. Four numbered steps — site visit, fixed quote, consent, build — each with one line of copy. It answered the question every homeowner actually has after filling in a form: what happens next, and when will someone ask me for money.
Why it lost
After the hero and its lead, the site log and the scope board, there was no room left for both a process strip and a form section. One section had to die, and the honest ranking looked like this:
- hero — proves the transformation. Cannot be cut; it's the whole pitch.
- site log — proves the work is happening now, on real houses. Cannot be cut; it's the difference between a builder and a brochure.
- scope board — says what's in and out. Cannot be cut; it's where "we do everything" stops being true and starts being useful.
- trust + estimate — badges, warranty, and the form. Cannot be cut; it's the only place a visitor can act.
- quote steps — reassures.
Reassurance loses to proof. That's the whole decision.
What replaced it
Not nothing — a compression. The step sequence moved into the form panel as a single line under the submit button ("Site visit within 5 working days · fixed quote before any work starts"), and the four licence badges stayed as a compact row. Roughly 120px instead of 640px, and the same promise, in the place where the visitor is actually hesitating.
Everything else stayed deleted. I kept the component and the copy in git; the template simply doesn't mount it.
What the cap actually is
A height budget is a priority list wearing a number. When you can't add a section, you're forced to answer a question that a 12-section homepage lets you dodge forever: which of these is doing work, and which is just making me feel thorough?
I'd been treating "process transparency" as proof. It isn't. Proof is a photograph of this week's framing, a phase label, a licence number. Process is comfort — real, worth having, but compressible into a sentence at the point of decision.
The tradeoff is genuine: for a very high-ticket service, the process is the product, and someone choosing between two builders may care more about "who signs off" than about a pretty before/after. If that's your case, fold the steps into the estimate section and keep the sequence — just don't give it its own 600px slot out of politeness.
The rule I'd give anyone building a page
Write down the height. Then, for each section, write the one job it does in a single sentence. If a section's sentence is "it reassures people", it can live inside the section that asks for the sale.
The 3,400px cap didn't make t18 smaller. It made it decide what it was for. Pages that never decide stay long, and long pages don't read as thorough — they read as unsure.
The other 17 templates got the same treatment; the ones that survived the cut are the ones I'd actually put in front of a client.
