# name: creating-landing-pages description: Composes landing pages that convert — hero thesis, section flow, one primary call to action, disciplined visual boldness, and benefit-first copy. Use when the user asks to create, design, or rewrite a landing page, homepage, product page, marketing page, hero section, or signup/waitlist page, or asks why a page is not converting. Do not use for CSS layout mechanics (designing-responsive-layouts), design-token systems (theming-design-tokens), or user-facing release notes (writing-release-notes).

# Creating Landing Pages

# When to use / when NOT to use

• Use for: landing pages, homepages, product/marketing pages, hero sections, waitlist and signup pages — structure, visual direction, and copy.
• Do NOT use for: grid/flexbox/breakpoint mechanics (designing-responsive-layouts), token/theming systems (theming-design-tokens), full app UI, or documentation pages.

# Core rules

1. Open with a hero thesis, not a template. The first screen shows the page's single most characteristic element — a headline, product image, demo, or interactive moment chosen for THIS subject.

   • ✅ a live 10-second product demo as the hero for a screen-recording tool
   • ❌ generic gradient background + stat trio + stock illustration

2. One primary CTA per page, repeated in rhythm. Same verb, same destination, after the hero and after each proof section; secondary actions are visually quiet links.

   • ✅ "Start recording — free" (hero, mid-page, footer)
   • ❌ "Sign up", "Book a demo", "Learn more", and "Contact us" all competing above the fold

3. Section flow: problem → proof → product → action. Name the visitor's pain, prove you solve it (numbers, logos, testimonials), show the product doing it, then ask once more.

4. Spend boldness in ONE signature element. One memorable move — an unusual type treatment, a signature interaction, a striking image — and keep everything around it quiet and disciplined.

   • ❌ animated gradient + parallax + marquee + glassmorphism on one page

5. Avoid the AI-default palettes. Cream background + serif display + terracotta accents, and near-black + acid-green/vermilion, read as templated. Derive the palette from the product's actual subject and brand.

6. Benefit-first, specific copy in active voice. Headlines state what the visitor gets, with concrete nouns and numbers; button labels are specific verbs.

   • ✅ "Ship your changelog in 5 minutes" / button: "Create my changelog"
   • ❌ "Empowering seamless productivity solutions" / button: "Submit"

7. Social proof is placed, not piled. Logos directly under the hero; one strong testimonial (with name, face, role) per proof section; numbers only when true and impressive.

8. Every section earns scroll. If a section restates the previous one or exists "because landing pages have one" (generic feature grid, filler FAQ), cut it.

# Workflow

1. Write the one-sentence thesis: who the page is for and the single action they should take.
2. Draft the section outline per rule 3; assign each section one job and one message.
3. Define the visual direction: palette (4–6 named colors, rule 5), display + body typefaces, and the ONE signature element (rule 4).
4. Write copy headline-first (rule 6); place CTAs and proof (rules 2, 7).
5. Build the page (hand off layout mechanics to designing-responsive-layouts if needed).
6. Self-critique pass: check the hero against rule 1, count CTAs (rule 2), hunt template smells (rules 4–5), cut dead sections (rule 8). Revise anything that reads templated rather than subject-specific.

# Edge cases & failure modes

• No brand or palette exists → derive 4–6 colors from the product's domain (a finance tool and a kids' app must not share a palette); never fall back to the defaults in rule 5.
• Multiple audiences with different CTAs → split into separate landing pages; one page, one primary action.
• No social proof yet (pre-launch) → substitute concrete specificity: exact feature claims, a real demo, founder's note; never fabricate logos, counts, or testimonials.
• Client insists on many CTAs → keep one primary visually dominant; demote the rest to text links, and say why.

# References

Section templates, copy formulas, and gotchas: see references/patterns.md