## Contents - 4. Section templates (runnable HTML + Tailwind) - 4.1 Hero - 4.2 Problem / stakes - 4.3 Solution / benefits (alternating rows) - 4.4 Social proof (logo wall + testimonials + metric) - 4.5 How it works (3 steps) - 4.6 Features grid - 4.7 Pricing (self-serve) - 4.8 FAQ accordion (native
, no JS) - 4.9 Final CTA - 4.10 Mobile nav (progressive enhancement) - 4.11 — metadata, Open Graph, social cards ## 4. Section templates (runnable HTML + Tailwind) Drop-in, responsive, accessible. Replace bracketed placeholders. Tailwind v3+/v4 utility names; assumes Tailwind is loaded. Swap `class`→`className` for JSX. ### 4.1 Hero ```html

[Optional eyebrow / category]

[What it is + who it's for + payoff, ~10 words]

[Subhead: the "how" or the proof, one sentence]

[Start free — no card] See how it works

Trusted by [N]+ teams · ★ 4.8 on [G2/Trustpilot]

[Concrete description of the product screenshot]
``` ### 4.2 Problem / stakes ```html

[The problem with the current approach]

[Specific frustration]

[One concrete sentence on the cost of this pain.]

``` ### 4.3 Solution / benefits (alternating rows) ```html

[How [Product] solves this]

[What this screenshot shows]

[Outcome they get]

[Benefit framed as "so that …". Lead with the result, not the mechanism.]

[What this shows]

[Outcome they get]

[Benefit 2.]

``` ### 4.4 Social proof (logo wall + testimonials + metric) ```html

Trusted by teams at

Acme
"[Exact quote the customer actually gave you.]"
[Real name]
[Title], [Company]

[Real metric, e.g. "Cuts onboarding time 40%"] — [source/sample]

``` ### 4.5 How it works (3 steps) ```html

Get started in 3 steps

  1. 1

    [Step title]

    [What the user does. Make it sound effortless.]

``` ### 4.6 Features grid ```html

[Everything you need to {outcome}]

[Feature]

[One-line benefit.]

``` ### 4.7 Pricing (self-serve) For tier strategy/anchoring, see `pricing-optimization`; for live Stripe checkout, `stripe-billing`. ```html

Simple, transparent pricing

Starter

$X/mo

  • ✓ [Feature]
  • ✓ [Feature]
Choose Starter
Most popular

Pro

$Y/mo

  • ✓ Everything in Starter
  • ✓ [Feature]
  • ✓ [Feature]
Choose Pro

Enterprise

Custom

  • ✓ SSO/SAML
  • ✓ Dedicated support
Contact sales
``` ### 4.8 FAQ accordion (native `
`, no JS) Uses native `
/` so it works without JavaScript and is keyboard-accessible by default. For JSON-LD, see §6. ```html

Frequently asked questions

[Real objection phrased as a question, e.g. "Do I need a credit card to start?"]

[Answer the question directly in the first sentence, then add detail.]

``` ### 4.9 Final CTA ```html

[Restate the core value proposition]

[Risk reversal: "No card required. Cancel anytime." / "30-day money-back guarantee."]

[Start free — no card]
``` ### 4.10 Mobile nav (progressive enhancement) `
` gives a working hamburger menu with zero JS; enhance with a framework's state if you have one. ```html
``` ### 4.11 `` — metadata, Open Graph, social cards Critical for shareability and click-through; do this on every landing page. ```html [Outcome-led title, 50–60 chars] — [Brand] ``` ---