Landing Page

landing-page

A landing page has ONE job: move a visitor from attention to action. This skill is the map — what sections a converting page is made of, where proof and CTAs go, which interactions earn their weight, and how to review the result. It is a reference, not a generator: it tells you what to build and how to judge it. The actual pixels/motion come from the impeccable skill (aesthetic direction, craft-floor, the review commands) — invoke that for the visual world; use this for the landing-specific structure it doesn't own.

Scope: this skill is one page. When the product needs a site — a page per audience, per use case, per competitor, a free-tools channel, a mega-menu shell — that is marketing-site, which owns the content model those pages are generated from. Build the home page here; generate the other fifty there.

Two modes — name yours first

1. CREATE new — intake → aesthetic direction → section plan → build → review gates.
2. LEVEL-UP existing — audit current sections against the taxonomy (which are missing? which are weak?), score each section individually, run the review gates, apply targeted upgrades. A strong hero with a buried CTA still loses — grade section by section, not the page as one blob.

The rest of this skill serves both. CREATE reads it top-to-bottom; LEVEL-UP uses §A/§F as a scorecard and §B–D as the upgrade menu.

Non-negotiables (both modes)

• Honor the brand/design system that exists. If the product has tokens, a theme, a DESIGN.md — the page is built IN that world, not a fresh aesthetic. Never hardcode colors a themed system would flip (light/dark); use its variables. Redesigning a branded product's landing toward your own taste is failure.
• No invented proof. No fabricated testimonials, user counts, star ratings, benchmarks, or logos you don't have rights to. True capabilities are fair game; where a testimonial-shaped slot has no real quote, use a product-truth statement instead of a fake one.
• Progressive enhancement. Content lives in the DOM and reads with JS/CDN failed. Motion only enhances. prefers-reduced-motion: reduce disables transforms/loops and shows final states. One primary action visible above the fold on every breakpoint.
• Responsive to three targets — desktop (≥1024), tablet portrait (768), mobile (≤480). Fluid type via clamp(). No horizontal scroll, ever.
• Preserve product contracts. Pricing/localization hooks, analytics attributes, form actions, auth links — restyle freely, but keep the data contract and its fallbacks intact.

A. SECTION TAXONOMY (conversion anatomy)

Average converting page ≈ 6 sections (from scored corpora of hundreds of pages). Range: 3–4 for a single-offer page, 10+ for enterprise. Narrative arc: attention → clarity → trust → action. Each section does exactly ONE job — if you can't name its job, cut or merge it.

1. Header / nav — logo, minimal links, one CTA. Sticky; hairline on scroll. Mobile: logo + CTA, links collapse.
2. Hero — eyebrow/kicker, H1 that states the value (not the product name), one-line benefit subhead, ONE primary CTA above the fold, one focused visual. The 5-second test: a stranger should know what this is and is it for me. No competing primary buttons.
3. Problem — name the pain in the reader's own words (optional; strong for cold traffic).
4. Solution / USP — the offer as resolution; why you over the alternatives.
5. How it works — 2–4 numbered steps. Airy; one authored icon per step.
6. Features / benefits — 3–5 items, benefit-led (function → outcome), each with an icon. Clarity beats catalogue. Bento/featured-card layout reads richer than a flat grid.
7. Social proof — three flavors: named testimonial (name/role/company), logo bar, hard numbers. Distribute it (see below), don't dump one block.
8. Comparison table — vs. alternatives (enterprise / considered purchases).
9. Pricing — transparent tiers; say what each dollar buys. Feature the intended plan.
10. FAQ — objection handling, accordion, aria-expanded. 4–6 items answering the real hesitations (price, privacy, platform limits, commitment).
11. CTA block — the highest-contrast moment on the page; repeat the primary action.
12. Footer — lean: privacy / terms / contact / repeat CTA.

Social-proof PLACEMENT (distributed by visitor mindset, not one block)

• Above fold: one best testimonial line OR a "trusted by N" counter.
• Beside the CTA button: ratings, review counts, trust badges — hesitation peaks here.
• Mid-page (after features): case studies, detailed testimonials — proof it works.
• Near pricing/checkout: security/compliance badges, big-number metrics — risk fear peaks.
• Footer: award badges, logo bars — final confidence. Rule: 3–4 proof types, each placed where its stage's doubt lives.

B. INTERACTION / ANIMATION ARCHETYPES

Motion is orchestrated once in the page's grammar — not scattered hovers. Pick a signature.

1. Hero entrance — timeline: eyebrow → headline (word/line stagger) → subhead → CTA rise. Set initial states FIRST (no flash of unstyled/jumping content).
2. Mouse parallax — layers shift on mousemove for hero depth (back / mid / content).
3. Scroll-trigger stagger — cards/sections fade+rise on enter, staggered. Visible if JS off.
4. Scroll-scrubbed cinematic (Apple-style) — scroll position drives a timeline/video/camera. "The camera moves, scroll drives time." Heavy; use only when the story needs it.
5. Floating decorative shapes — CSS keyframes (cheaper than JS for indefinite loops).
6. Interaction states (per element, non-negotiable): hover / active / disabled / focus / loading / validation. A page missing disabled+focus+loading states is unfinished.
7. Hover lift — feature cards.
8. Signature product demo — the strongest hero move: show the product doing its job in-page (a self-typing input, a live toggle, a before/after) instead of a static screenshot.

Restraint rule: 1–2 signature effects per page, max. More reads as AI-slop. Everything degrades under reduced-motion.

C. EFFECT CATALOG (by JOB, not by library)

Organize by what the effect does. Named exemplars exist across Magic UI / Aceternity / Originkit — pick by job, implement in the page's own world.

• Backgrounds (ambient, behind content): dot/grid/retro/flickering grids, aurora, meteors, shooting-stars, beams (+collision), ripple, spotlight, lamp, noise-texture, vortex.
• Hero focal / scroll-driven: hero-parallax, container/macbook scroll, sticky-scroll-reveal, tracing-beam, scroll-progress, scroll-velocity, scroll-scrubbed cinematic.
• Text (headline/eyebrow — use ONE): text-generate, typewriter, flip/rotate-words, text-reveal, hyper/scramble, shiny/gradient/aurora text, number-ticker, highlight-marker.
• Cards (features/proof/pricing): bento-grid, 3d-card, card-hover/spotlight/glare, comet, expandable, focus-cards, infinite-moving-cards (logo/testimonial marquee), border-beam/shine.
• Buttons/CTA: shimmer, rainbow, ripple, pulsating, magnetic, moving-border, hover-border-gradient, interactive-hover, stateful (loading built in).
• Nav: floating-navbar, resizable-navbar, floating-dock, sticky-banner.
• Media/device mocks: safari/iphone/android frames, hero-video-dialog, before/after compare, lens (zoom), cards-carousel.
• Data/trust visuals: globe, world-map, timeline, orbiting-circles, icon-cloud, avatar-circles, marquee (logo bar), tweet-card.
• Pointer/cursor: following-pointer, pointer-highlight, cursor glow (pointer:fine only).

Section blocks = the level-up shortcut. Magic UI / Aceternity ship whole pre-built Hero/Features/Pricing section blocks (shadcn-style add — source lands in your repo, deps auto). Faster than authoring from zero when the aesthetic fits.

D. STYLE / AESTHETIC

• Tone axis: Professional / Playful / Authoritative / Minimal. Commit to one.
• No brand yet? Use impeccable's aesthetic-direction — commit to a distinct world, don't default. For a whole visual identity (multiple directions to pick from, tokens, logo, favicon/OG, guidelines), run saas-brand-system first, then build this page inside the chosen brand. Brand exists? Extract its tokens and build inside them.
• AI house-style tells to avoid (they read as slop): cream + serif + terracotta/amber; navy + teal + Inter; purple→indigo gradients on everything; emoji as icons; three fonts. Run impeccable's slop-check.
• One spacing rhythm (e.g. 8px base). More space above a heading than below it. Vary density across the page — dense hero → airy how-it-works → dense pricing → quiet FAQ → punch.

E. WORKFLOW

Greenfield: intake → aesthetic direction → section plan → build → review gates. Brand-aware: design-system extract → section plan in-world → build → review gates.

Intake (ask ONE at a time, then commit — don't over-interview):

• Q1 What's the product, in one line? What's the single action you want?
• Q2 Who's the visitor — technical / business / consumer / internal?
• Q3 Brand overrides — existing tokens, colors, fonts, logo? (If yes, extract, don't invent.)
• Q4 Tone — which point on the axis? After Q4, commit and build. No concept survives contact with a fifth question.

F. REVIEW GATES (LEVEL-UP leans hardest here)

Run these before shipping. In a codebase with impeccable installed, these ARE its commands — invoke them rather than re-deriving. Score each section on its own.

• Section coverage — every taxonomy job present or deliberately, defensibly absent.
• Accessibility — semantic landmarks, keyboard path, visible focus, aria-expanded on accordions, alt/aria-label on icons+logo, contrast ≥ 4.5:1 body, reduced-motion honored. (impeccable audit.)
• AI-slop check — the house-style tells above; over-effected pages. (impeccable, slop pass.)
• Hierarchy & rhythm — size/weight/color hierarchy + one spacing scale. (impeccable.)
• Interaction states — hover/active/disabled/focus/loading/validation all present.
• Responsive — 1024 / 768 / 480, no horizontal scroll, primary CTA above fold each.
• Conversion sanity — 5-second test on the hero; one primary action per viewport; proof placed by mindset (§A); CTA is the highest-contrast element.
• Copy honesty — no fabricated proof; claims are true and specific.

G. HANDOFF NOTE

When you finish, state: which sections you built/upgraded, the one or two signature interactions you chose and why, which review gates passed, and anything you were unsure about (a claim you couldn't verify, a section you cut). Don't over-explain — a defended simplification is still a simplification.