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