ooiyeefei/landing-page-gtm

Landing Page GTM

Build conversion-focused landing pages that sell — not just describe. Combine product research, competitive positioning, sales copywriting, and frontend implementation into a single workflow.

Intake — Always Ask First

Before any work, collect these inputs:

| Input | Question | |-------|----------| | Target URL | "What URL or route is this for?" (e.g., myapp.com/pricing) | | Codebase path | "Where's the source code?" (e.g., /home/user/project/src) | | Product/feature | "What product or feature is this page selling?" | | Audience | "Who's the buyer? (role, company size, pain level)" | | Competitors | "Who do they compare you against?" | | Constraints | "Existing design system, form provider, CTA destination?" |

If the page already exists, read it first. Never propose changes to code you haven't read.

Workflow

Phase 1: Research the Product

Study the actual product before writing a single word of copy. Never invent features.

1. Read the codebase — Search for the feature's implementation. Use git log to find recent changes.
2. Validate claims — For every claimed feature, confirm it exists in code. Report gaps: "X exists. Y is partial. Z not found."
3. Identify differentiators — What does this do that competitors genuinely don't? Architectural advantages > surface features.
4. Find the self-improving angle — Any learning/adaptive behavior is marketing gold. Understand the mechanism so you can describe it without jargon.

Phase 2: Competitive Positioning

Frame every section as "why us, not them" without naming competitors.

Positioning formula:

Pain they feel daily
+ What competitors do about it (poorly)
+ What you do differently
+ Outcome they'll experience

Anti-generic test — If copy could appear on a competitor's site unchanged, rewrite it:

• "AI-powered" → What does the AI actually DO?
• "Smart automation" → What specifically gets automated?
• "Easy to use" → Compared to what painful alternative?

Competitor dismissal patterns:

• "Every [category] app claims [buzzword]. Most just [what they do]. We're different."
• "Not [old approach]. Real [new approach] that [concrete outcome]."
• "Other tools stay static. Ours [how it evolves]."

Phase 3: Write Sales Copy

Transform features into desire. Think like a buyer, not an engineer.

Voice by audience:

| Audience | Tone | Example | |----------|------|---------| | SME owner | Warm, direct | "Snap a receipt. Done." | | Finance manager | Outcome-driven | "Every match shows you exactly why." | | Enterprise | Trust-building | "Control without complexity." | | Technical | Precise, credible | "Gets measurably smarter every week." |

Copy rules:

1. Lead with pain — "Stop filling forms one by one" > "Automated form filling"
2. One sentence, one idea — Short. Punchy. Scannable.
3. Concrete > abstract — "Reply in 10 seconds" > "Fast response times"
4. "I want this" test — Read each card aloud. Does the buyer think "I need this"? If not, rewrite.
5. End with outcome — "Never lose a sale to a slow reply" > "Uses NLP to generate responses"

Talking about AI/tech without jargon:

| Technical reality | Say instead | |---|---| | ML model retrains weekly | "Gets smarter every week from your feedback" | | Internal optimization framework | Never mention. Say "learns from corrections" | | LLM / GPT / Claude | "AI assistant" or just "your assistant" | | API integration | "Connects to your existing tools" | | Training data from user corrections | "Every correction teaches it something new" | | Accuracy gating prevents regression | "Can only get better — never worse" | | Explainable AI / reasoning traces | "Shows you exactly why each decision was made" |

Phase 4: Design the Page

Conversion-focused page anatomy:

1. Hero         — Headline + subheadline + primary CTA
2. Pain Points  — 3-4 scenarios the buyer FEELS (red/warm tones)
3. Solution     — Transformation cards, not feature lists
4. Social Proof — Testimonials or metrics
5. How It Works — 3 steps max (reduce perceived complexity)
6. Pricing      — vs. status quo comparison, not just a table
7. FAQ          — Objection handling disguised as helpfulness
8. Final CTA    — Urgency + form (repeat primary CTA)

Not every page needs all sections. Match to product complexity:

• New product launch: All sections
• Feature card update: Cards + new section if needed
• Product in portfolio: Cards in drawer/grid, link to dedicated page

CTA and forms:

• Primary CTA at hero AND bottom — two chances to convert
• Minimum fields. Each extra field kills ~10% conversion.
• Lead capture minimum: name + email + company. Add phone only if product requires it.
• Use existing form infra (Formspree, Resend, etc.) — don't add dependencies.
• Add hidden _source field to distinguish which page the lead came from.

Early Access / Waitlist pattern:

• Colored badge signals exclusivity (e.g., purple "Early Access")
• Minimal inline form (2-3 fields) directly on the feature card
• Lower friction than separate page — capture interest at moment of discovery

Phase 5: Build and Ship

1. Match existing patterns — Read 2-3 existing pages. Match imports, layout, routing, design system.
2. Reuse the design system — Existing UI components only. Don't introduce new frameworks.
3. Mobile-first — Every section must work at 375px width.
4. Register the route — Add to router with import.
5. Type-check — Run type checker before committing. Zero new errors.
6. Multi-codebase consistency — If product appears on multiple sites, update ALL with consistent messaging.

Phase 6: Ship Checklist

Before pushing:

• [ ] Every feature in copy exists in actual product code
• [ ] No jargon (scan for: API, SDK, LLM, model, algorithm, pipeline, container)
• [ ] Every card passes the "I want this" test
• [ ] CTA buttons work (scroll to form or link to sign-up)
• [ ] Form submits correctly with _source field
• [ ] Mobile responsive at 375px
• [ ] Type-checks pass
• [ ] All codebases updated if product is multi-site
• [ ] Competitor copy test: could this appear on a competitor's site? If yes, rewrite.

Reference Files

• references/copy-formulas.md — Headline formulas, card patterns, CTA text, FAQ templates
• references/page-archetypes.md — Templates for product launch, feature update, comparison, waitlist pages