landing-page-architecture

name	Landing Page Architecture
description	ENFORCE conversion-focused landing page structure: Hook → Problem → Solution → Proof → Action. Prevent generic AI-generated designs with random gradients, lorem ipsum text, and no clear CTA. Every section must earn its place by moving the visitor toward a specific action. Trigger: "build (a|a) landing page", "create (a|a) homepage", "design (a|a) marketing site", "build (a|a) portfolio site".
category	ui-ux
version	3.0.0
last_updated	2026-06-28T00:00:00.000Z
stacks	["React 19.2","Next.js 16","Vue","Nuxt","Astro"]
related_skills	["responsive-layout-math","accessibility-audit-protocol","performance-budgets-and-cwv","component-architecture-patterns"]

No-Slop Landing Page Architecture

IDENTIFY: When to Activate

Activate when creating any public-facing entry point:

• Product landing page
• Marketing homepage
• SaaS signup page
• Portfolio site
• Waitlist/pre-launch page

CORE PRINCIPLE

A landing page is a conversion funnel, not a brochure. Every section MUST earn its place by moving visitors toward one specific action.

THE CONVERSION FUNNEL: Build in This Order

┌─────────────────────────────────────────┐
│ 1. NAV          Logo | Links | [CTA]     │
├─────────────────────────────────────────┤
│ 2. HERO          H1 + H2 + CTA + Visual │
├─────────────────────────────────────────┤
│ 3. SOCIAL PROOF  Logos | Testimonials    │
├─────────────────────────────────────────┤
│ 4. PROBLEM       The pain you solve      │
├─────────────────────────────────────────┤
│ 5. SOLUTION      3-6 features           │
├─────────────────────────────────────────┤
│ 6. HOW IT WORKS  3-step process (opt.)  │
├─────────────────────────────────────────┤
│ 7. PRICING       Tiers (if applicable)  │
├─────────────────────────────────────────┤
│ 8. FINAL CTA     Same as Hero CTA       │
├─────────────────────────────────────────┤
│ 9. FOOTER        Links, copyright       │
└─────────────────────────────────────────┘

EXECUTE: Section-by-Section Rules

Section 1: Navigation

LEFT: Logo
CENTER: 3-5 links (Features, Pricing, Docs, etc.)
RIGHT: One CTA button ("Sign Up", "Get Started")
BEHAVIOR: Sticky on scroll

Section 2: Hero: ALL FOUR Required Elements

ALWAYS include:
1. H1 headline: Value proposition. ONE sentence. No jargon.
   "Deploy in seconds, not hours" beats "Leveraging cloud-native infrastructure"
2. H2 sub-headline: Supporting detail. ONE sentence. Clarifies H1.
3. Primary CTA button: High contrast. ONE action. "Start free trial"
4. Visual element: Product screenshot, illustration, or demo video.
   NOT a random abstract shape or gradient blob.

PERFORMANCE REQUIREMENT (hero image = LCP element):

• Explicit width and height attributes, prevents layout shift
• priority={true} if using Next.js <Image> component
• Modern format: WebP or AVIF
• Appropriate dimensions, not 4000px-wide scaled down in CSS

Section 3: Social Proof: Choose Based on Availability

IF product has real users:
  "Used by 10,000+ teams" (use REAL numbers, NEVER fabricate)
  Customer logos (real companies, with permission)
  Testimonial: quote + name + title + photo (real people)
  Star ratings with review count

IF product is pre-launch / MVP:
  OMIT social proof entirely, empty/fabricated is worse than absent
  OR use beta tester quotes (with permission)
  OR showcase team background: "Built by engineers from [Company X]"
  NEVER fabricate metrics, logos, or testimonials

PLACEHOLDER MARKING:
  <!-- PLACEHOLDER: Social proof section, replace with real testimonials before launch -->

Section 4: Problem Section

❌ "Managing tasks is hard."
✅ "Your team uses 5 different tools to track work. Nothing syncs. Deadlines slip."

Section 5: Solution / Features

- 3-6 features max. >6 = overwhelming.
- Each feature: icon (lucide-react), title, 2-3 sentence description
- Layout: alternating zig-zag (image left/text right, then text left/image right)
- Features MUST address specific pain points from Problem section

Section 6: Final CTA

- Identical to hero CTA in message and destination
- High contrast background section
- Urgency line: "Free forever. No credit card." or "Join 5,000+ teams"

DESIGN RULES

Typography

• Max 2 font families. One headings, one body.
• H1: text-5xl / text-6xl bold
• Body: ~70 chars per line (max-w-prose)

Colors: 60-30-10 Rule

• 60% neutral background (white, light gray, dark gray)
• 30% secondary surfaces (cards, sections)
• 10% accent color (CTAs, links, highlights)

NEVER use random gradient as hero background unless it passes WCAG AA contrast.

Images: ALL MUST HAVE:

• Explicit width + height (prevents CLS)
• Descriptive alt attribute
• WebP or AVIF format
• CSS fallback background color for failed loads

VALIDATE: Quality Gates

• Every funnel section present (Nav, Hero, Proof, Problem, Solution, CTA, Footer)
• Hero contains ALL 4: H1, H2, CTA, Visual
• All text is real and specific, no lorem ipsum, no "amazing feature"
• Colors pass WCAG AA contrast (4.5:1 normal, 3:1 large)
• ONE primary action per viewport, no competing CTAs
• Heading hierarchy sequential (H1→H2→H3, no skips)
• All images have width, height, alt
• Responsive at 375px, 768px, 1440px
• Hero image is LCP-optimized (preloaded, priority, modern format)

ANTI-PATTERNS: ALWAYS Avoid

Anti-Pattern	Why Wrong	Fix
Hero with only gradient + headline	Generic, low-effort, no info	Add product screenshot or illustration
"Lorem ipsum" anywhere	Signals AI-generated, unreviewed	Write real, specific copy
3 different CTAs in hero	Confuses user on what to do	One primary action per section
12 identical feature cards	Overwhelming, no hierarchy	Max 6 features, distinct value props
No social proof	Reduces trust	Add testimonials/logos/metrics
Pastel text on pastel bg	Fails contrast, unreadable	Verify WCAG AA ratios
Missing final CTA	User arrives at bottom with no next step	Always end with CTA mirroring hero