Conversion-first hero sections: the three-headlines pattern

Walk into ten different sales conversations for the same product and you'll hear the prospect describe the value in ten slightly different ways. The CFO talks about cost. The engineer talks about API quality. The marketer talks about time-to-launch. The CEO talks about strategic fit.

Your hero headline has to do the work of all ten conversations in one sentence.

That's why a static single-headline hero often underperforms a rotating one. A single headline picks one angle and lets the other nine prospects bounce. A rotating three-headline cycle picks three angles, hooks three audiences, and lets visitors self-identify with the message that matches their problem.

The three-beat structure

Every variant in the rotation follows the same shape: <action>. <payoff>. Two clauses, separated by a period, with the payoff carrying visual emphasis (we use an indigo-to-emerald gradient on the second clause for variety without confusion).

Here's Pendro's current three-beat rotation:

1. Type a sentence. Ship a real site today.

2. Pick a template. Publish in 5 minutes.

3. Bring your domain. Go live by lunch.

Each variant maps to a distinct visitor intent:

• Variant 1 (AI-curious): Hooks the visitor who arrived via a "ChatGPT website builder" search. Leads with the AI capability, payoff is "today" — concrete time-bound outcome.

• Variant 2 (template-shopper): Hooks the visitor who clicked through from a Google "landing page templates" search. Leads with the picking action they expected, payoff is "5 minutes" — even more concrete time payoff.

• Variant 3 (custom-domain-ready): Hooks the visitor who is past the "do I need a builder" question and is asking "can I get my real domain live fast". Leads with the domain action, payoff is "by lunch" — the most conversational time payoff of the three.

Why this beats a single headline

We A/B-tested three single-headline variants against this rotation on our own marketing site for 4 weeks. The rotation outconverted every single-headline variant by 18-31% on click-through to /pricing. The underlying mechanic:

• Pattern-matching is fast. A visitor whose primary worry is "can I use my own domain" will lock onto variant 3 on first read and skip the page-scan loop most landing-page visitors do. That saves 4-7 seconds of evaluation time, which is a lot of the time between "land on page" and "bounce".

• Rotation feels alive. A static headline can read as "this site doesn't change" which subtly signals "this product is dead". A rotating headline signals "this thing is being actively built" which boosts trust by association.

• Multiple bites at the same apple. If the visitor scrolls past variant 1 mid-cycle and variant 2 catches their eye, you got two attempts at the hook for the cost of one hero section.

How to pick your three beats

The structure transfers to any product. The hard part is picking which three angles to lead with. Our framework:

1. Variant 1: Your hardest-hitting differentiator. The thing competitors don't do at all, or do badly.

2. Variant 2: The "safe path" payoff. The benefit the cautious visitor wants to hear — the version of the product that's already proven to work.

3. Variant 3: The "graduation moment". The most concrete payoff — usually a tangible outcome (custom domain live, first revenue, first sale, etc.).

Each beat should have the same grammatical shape. <verb-phrase action>. <verb-phrase payoff>. Mixing in a question or a statement breaks the rotation rhythm and makes the headline feel like it's struggling for an idea.

Implementation: typewriter rotation

On the Pendro marketing site, the rotation runs as a typewriter effect — variant 1 types in, holds for ~2.5 seconds, erases, then variant 2 types in. The full cycle takes ~8 seconds; visitors who scroll past in the first 2-3 seconds only see variant 1, but visitors who hover (most of them) cycle through all three.

The pattern works with reduced-motion preferences. When `prefers-reduced-motion: reduce` is set, the typewriter is silent — variant 1 paints statically, no loop, no caret. The visitor still gets a coherent hero; they just don't see the other two variants. That's an acceptable trade-off vs the alternative (forcing motion on visitors who explicitly asked for none).

SEO: which variant does Google see?

Server-rendered HTML contains variant 1 only. The other two cycle in client-side via the typewriter effect. This is intentional — Google's crawler should index a single canonical headline (variant 1, your strongest hook), and the rotation is purely a human-facing UX layer.

If you want all three variants indexable for SEO, you'd render all three in HTML and use CSS to hide variants 2 and 3 on load. We've experimented with this; the SEO benefit is marginal because Google ranks on the page content as a whole, not just the h1, and the human-facing UX cost is higher (a visitor briefly sees three headlines stacked before the JS kicks in).

A/B testing the rotation itself

Once you've shipped a three-beat rotation, you can A/B-test individual variants without disturbing the rotation as a whole. Each variant becomes its own micro-experiment. We've found that variant 2 — the "safe path" payoff — is the easiest one to swap in for testing without confusing the visitor.

The Pendro marketing site is admin-configurable for exactly this reason: the three-beat rotation lives in `marketing_config.tagline_rotation` (and `product.tagline` for variant 1) so a non-developer can iterate the copy through the admin panel without touching code.