spb/ultra-sharp-agent-skills Public

1<!--2Author: Simon-Pierre Boucher3Contact: contact@spboucher.ai4-->56# Patterns — Creating Landing Pages78## Contents9- Page skeleton (problem → proof → product → action)10- Hero patterns by product type11- Copy formulas12- CTA hierarchy markup13- Social proof blocks14- Visual direction worksheet15- Gotchas1617## Page skeleton (problem → proof → product → action)1819```html20<main>21  <section class="hero">        <!-- thesis + primary CTA -->22  <section class="logos">       <!-- proof: who already trusts it -->23  <section class="problem">     <!-- name the pain in the visitor's words -->24  <section class="product">     <!-- show it solving the pain (demo/screens) -->25  <section class="proof">       <!-- testimonial + numbers, CTA repeat -->26  <section class="objections">  <!-- pricing/security/FAQ — only real questions -->27  <section class="closer">      <!-- restate thesis, final CTA -->28</main>29```3031Each section: one job, one message, max one CTA.3233## Hero patterns by product type3435| Product | Hero thesis element |36|---|---|37| Dev tool / API | Working code snippet or terminal session, real output |38| Visual product (design, video) | The product's own output, full-bleed |39| SaaS dashboard | One annotated screenshot of the "aha" screen — not a collage |40| AI product | Live or looped input→output demo, honest speed |41| Service / agency | The single best result with the number that proves it |4243Headline sits with the element, max ~10 words, states the benefit.4445## Copy formulas4647Headline (pick one, fill with concrete nouns):48- Outcome + time: "Ship your changelog in 5 minutes"49- Kill the pain: "Never write release notes by hand again"50- Capability + audience: "Session replay built for mobile teams"5152Subheadline: one sentence — how it works + for whom.53Button labels: verb + object, first person works well — "Create my changelog",54"Start recording — free". Never "Submit", "Learn more" (as primary), "Get started" (default-smell).5556Testimonial pull: quote the *result*, not the compliment —57✅ "Cut our onboarding time from 3 weeks to 4 days." — Dana K., Head of Ops58❌ "Great tool, love the team!"5960## CTA hierarchy markup6162```html63<div class="cta-group">64  <a class="cta-primary" href="/signup">Start recording — free</a>65  <a class="cta-secondary" href="/demo">Watch the 2-min demo</a>66</div>67```6869```css70.cta-primary   { /* filled, brand color, largest tap target on screen */ }71.cta-secondary { /* text link or ghost — visibly subordinate */ }72```7374Same `.cta-primary` label + destination everywhere it repeats.7576## Social proof blocks7778```html79<!-- Logos: 4–6, grayscale, one row, directly under hero -->80<section class="logos" aria-label="Trusted by">81  <img src="logo-a.svg" alt="Acme" height="28">82  …83</section>8485<!-- One strong testimonial beats six weak ones -->86<figure class="testimonial">87  <blockquote>Cut our onboarding time from 3 weeks to 4 days.</blockquote>88  <figcaption><img src="dana.jpg" alt="" width="40" height="40">89    Dana K. — Head of Ops, Acme</figcaption>90</figure>91```9293Numbers block: only true, only impressive, max three. "12,400 teams" beats "many customers"; if the true number is small, use a different proof type.9495## Visual direction worksheet9697Before building, write down (one line each):981. Palette: 4–6 named hex colors derived from the subject (not cream/terracotta, not black/acid-green).992. Type: display face + body face, chosen for this brief; type scale (e.g. 1.25 ratio).1003. Layout concept in one sentence + rough ASCII wireframe of the hero.1014. THE signature element — the one bold move. Everything else stays quiet.102103Then critique: "Would this exact plan fit any other product?" If yes, revise until it wouldn't.104105## Gotchas106107- **The feature-grid reflex**: a 3×2 grid of icon+blurb usually restates the108  product section with less proof — cut or merge it.109- **Carousel/slider testimonials** hide proof behind interaction — static, one110  per section.111- **Fake urgency** (countdowns, "3 spots left") destroys trust with technical112  audiences instantly.113- **Above-the-fold obsession**: long pages convert when each section earns the114  scroll; don't cram everything into the first screen.115- **Lorem ipsum in review**: never review layout with placeholder copy — copy116  IS the design decision on a landing page.117- **Hero video autoplay with sound** — muted, looped, short, with poster; or118  don't autoplay.119- **Dark pattern CTAs** ("No thanks, I hate saving money") — never.120