Landing page structure, section by section

A landing page is eleven sections in one order, and the order is the sequence a buyer asks questions in. What is this, who says so, do you understand my problem, what changes, how does it work, what exactly do I get, compared to what, did it work for anyone, what does it cost, what about the thing I am worried about, and what do I do now.

Answer them out of order and every section does less work than it could. In order, a page of 800 words outperforms one of 2,400, because nothing arrives before the reader had the question.

it looks and behaves like the AI default

A developer on Hacker News

That default has a shape: hero, features grid, testimonial carousel, pricing, footer, equal blocks, a fade on each. It is unsequenced rather than wrong, and the fix is an order with reasons attached. The Thanor library ships its prompts with that order already written.

Why order is a conversion decision#

A page is read once, downward, by somebody deciding whether to keep going. Each section either earns the next scroll or spends the credit the last one built.

Two consequences:

• Proof goes second, not last. A headline is an assertion until something witnesses it. Put a logo row, a customer count or one measured result directly under the hero and every section that follows is read as explanation rather than as persuasion. Move it to the bottom and the reader has spent nine sections discounting everything.
• Pricing goes before objections, not after. A visitor who has seen the price has exactly one more question, and it is the objection. A page that answers objections first is answering a question nobody has asked yet.

The word budget is the other half of the order and the part nobody publishes: 700 to 900 words of body copy for the whole page. Generated pages routinely run past 1,800, because each section was written to fill a block whose height was already decided.

A section with nothing a reader needs gets deleted rather than padded. That rule does more for conversion than any headline test, and it is why the table below carries a word count.

Depth matters as much as order. The second call to action goes immediately after how it works, at roughly 45% of the page: the first point where a reader can decide and the last where most of the audience is still present.

The eleven sections, in order#

That sums to 868 words. Three notes on the rows people get wrong.

Section 4 is the row almost every page omits. One sentence naming the mechanism, between the problem and the steps, turns a list of features into a claim about cause. Without it, sections 5 and 6 are a specification with no reason.

Section 7 is a table, not prose, and it compares against what the reader does today rather than a named rival. Section 10 gets the largest word budget on the page because it is the only section a serious buyer reads in full.

The rhythm between them#

Section padding is 112px top and bottom on desktop, 80px on tablet, 56px on a phone, applied identically to every section including the short ones. The proof strip at 160px total height is the single exception, because it is a rule rather than a section.

• Spacing ladder: 4, 8, 12, 16, 24, 32, 48, 64, 80, 112, 160. Eleven values, no twelfth.
• Content container: min(100% - 40px, 1200px), with text blocks inside it capped at 68ch.
• Grid inside a section: 12 columns, 24px gutter. A three card row is 4 columns each, a two column text block is 5 and 5 with one column between.
• Space between a section heading and its body: 16px. Between the body and the first card row: 48px.

Four more, because these are the ones a page assembled block by block gets wrong:

• Card padding 24px on all four sides, and the gap between cards also 24px. When those differ, a grid stops reading as a grid.
• Sections do not get closer because their contents are related. The gap stays 112px.
• Full bleed elements break the container to the viewport edge and never to a third width. Two widths on the page, not three.
• The footer takes 80px top and 48px bottom, the only asymmetric padding on the page.

Background alternation is where most pages go wrong twice over. Use two values, #FFFFFF and #F4F4F6, and change background only where the argument changes, at most three times on the page: once entering the problem, once entering pricing, once entering the ask. Alternating every section is the visual equivalent of a drum machine and it flattens the structure it was meant to clarify.

The ladder and the palette#

Ratio 1.333 from 17px, which gives a page that reads dense at body size and still has a display step for the hero.

White on the accent is also 8.71:1, so the primary button needs no second thought at any size. The ink measures 17.78:1 on the alternate background, which means body copy is equally readable in both and you never need a second ink value. One radius, 8px, and one shadow, used on cards and nothing else.

Motion, and the sections to delete#

One curve, cubic-bezier(0.22, 1, 0.36, 1), at 560ms, translateY 20px to 0, triggered once when the element crosses 18% of the viewport. Stagger siblings 80ms, capped at four items, and no element animates a second time on scroll back up.

Three things never animate, and each has a reason:

1. The hero. It is already visible. An entrance on a section that loads in view is an animation the visitor watches instead of reads.
2. The pricing table. A number that arrives late reads as a number somebody was reluctant to show.
3. Anything below the ninth section. By then the visitor is scanning at speed and reveal animations become a page that lags.

Then delete these, because they are the sections a generator adds and a buyer skips:

• A stats band with invented numbers. Three big figures with no source is the fastest way to lose a reader who was previously willing.
• An integrations wall with four logos. A wall needs twenty. Four is a list.
• A second testimonial carousel. One testimonial with a specific outcome outperforms six with adjectives, and a carousel hides five of the six anyway.
• An About section above the ask. Nobody deciding whether to buy wants the founding story at 92% depth. Put it on its own page, where the people who do want it will go looking.
• A newsletter box in the footer. It competes with the only action that matters, and turns the visitors closest to buying into people on a list.

The verdict on structure#

The order is the cheapest improvement available on a landing page, because it costs nothing to implement and it changes what every other section is worth. Proof second, the mechanism sentence at four, comparison against the status quo at seven, objections at ten with the biggest word budget, and the ask alone.

The complete specification:

• Eleven blocks in the table's order, with the word budget per block and 868 words in total.
• 112px of section padding, identical on every section, from an eleven value ladder.
• Two backgrounds, changed three times, never alternated.
• 1.333 from 17px, five colours, 8.71:1 on the primary button.
• 560ms on cubic-bezier(0.22, 1, 0.36, 1) at an 18% threshold, once, and three things that never animate.
• The call to action three times: hero, after how it works, and the ask.

Hand that to a model and you get the same page every run, which is the difference between a specification and a style guideline. Then audit it with one question per section: what does a reader know now that they did not before. A section with no answer gets deleted, which raises the value of the ten that remain. The hero specification covers the first block in the same detail, and the professional look is the component and state layer underneath all eleven. Every prompt in the Thanor library arrives with the order, the budgets and the values decided, for whichever model you build in. Browse the Thanor library and start from a finished structure.