03b — GOLDEN EXAMPLE: CYP Paid Traffic Page — Purchase Type
Structural reference. The golden example lives in the vault at:
advisory-os-vault/content/business/marketing/campaigns/the-build/wip/the-build-sales-page-v2.htmlWhat it is: The Build sales page. A $100 live event purchase page for warm/cold traffic. Three-session workshop with ThriveCart checkout. The most developed CYP purchase page in the vault.
Why This Is the Golden Example
This page contains the full section library for CYP purchase pages: numbered problem cards, before/after transformation, qualification grid, session/product cards with gold top-accent bars, comparison cards with "Recommended" badge, gold testimonial band, photo-overlay authority section, FAQ on teal background, and a register section with value checklist. Every purchase page is a subset of these sections.
Section Architecture (14 sections)
| # | Section | Background | Key Components |
|---|---|---|---|
| 1 | Header | Dark teal | Logo + CTA button (sticky) |
| 2 | Hero | Dark teal | Section label, h1, three-pillar words (gold), description, meta pills (4), CTA button |
| 3 | Why [Problem] | Dark teal | Section header, intro paragraph, 3-column numbered problem cards (glass cards with gold numbers) |
| 4 | Qualification | Cream | 2-column grid: "Built for You If" (gold left-border card, › markers) + "Not for You If" (teal left-border card, — markers) |
| 5 | Product/Sessions | Teal gradient | 3-column cards with gold top-accent bars, session labels, outcome boxes, CTA at bottom |
| 6 | Value Stack | Cream | Vertical stack of gold left-border cards (h4 heading + description) |
| 7 | Transformation | Teal gradient | 2-column: "Before" (glass card, hollow bullets, muted) + "After" (gold-border glass card, filled bullets, gold) |
| 8 | Authority | Photo overlay | Full-width image with left-to-right gradient fade, text content on left, section label + h3 + paragraphs |
| 9 | Testimonial | Gold band | Centered serif italic quote + attribution |
| 10 | Comparison | Cream | 3-column cards, one with "Recommended" badge + thicker gold border |
| 11 | FAQ | Mid-teal (#3e666e) | Vertical stack of glass cards with gold left-border, h4 question + p answer |
| 12 | Register | Teal gradient | Centered: label, h2, price display, includes list (glass card, › bullets), CTA button, guarantee callout |
| 13 | Proof Quote | Cream | Single gold left-border card: italic serif quote + attribution + source note |
| 14 | Final CTA | Teal gradient | 3-line tagline (Fraunces, 1.5rem) + subheading + CTA button + event details |
| 15 | Footer | Dark teal | Meta disclaimer, results disclaimer, copyright, contact, legal links |
Key Design Patterns Demonstrated
- Glass cards on dark —
background: rgba(241,237,230,0.06); border: 1px solid rgba(183,157,100,0.25); border-radius: 6px - Gold top-accent bars —
position: absolute; top: 0; left: 2rem; right: 2rem; height: 3px; background: #b79d64 - Meta pills — 4 pills in flex-wrap row: format, price, delivery, compatibility
- Numbered problem cards — Gold numbers (01, 02, 03) in Fraunces serif
- Qualification 2-column — Built-for (gold border,
›) vs Not-for (teal border,—) - Outcome boxes —
background: rgba(183,157,100,0.1)inside cards - Before/after transformation — Hollow bullets (before) vs filled gold bullets (after)
- Photo-overlay authority — Image right, gradient fades left, text on left with z-index stacking
- Gold testimonial band — Full-width
#b79d64, centered Fraunces italic quote - Comparison with Recommended — One card gets
border: 2px solid #b79d64+ positioned badge - FAQ on teal — Glass cards with gold left-border on
#3e666ebackground - Register section — Glass card includes list,
›bullets, guarantee callout at bottom - CTA hover —
transition: background 0.3s ease, transform 0.2s ease/ hover:#c4aa74 + translateY(-1px) - Section background rhythm — dark → dark → cream → gradient → cream → gradient → photo → gold → cream → teal → gradient → cream → gradient → dark (never same background twice in a row)
Section Metrics
- Total sections: 14 (+ header + footer)
- Word count (visible copy): ~1,200 words
- CTA appearances: 5 (header, hero, after sessions, register, final)
- Background rhythm: 5 different background states used
What Makes This Example Good
- Every section earns its place — no filler
- Section rhythm creates visual variety without chaos
- Problem section establishes pain before presenting the solution
- Qualification section self-selects the right audience
- Product cards (sessions) show outcome boxes — what you walk away with
- Before/after is concrete, not aspirational
- Authority section uses photo overlay — premium feel without stock photography
- Gold testimonial band breaks the pattern intentionally (only 1 per page)
- Comparison section frames "The Build" against inferior alternatives
- FAQ answers objections, not just information gaps
- Register section consolidates: price, includes, CTA, guarantee — all in one view
- Final CTA is a summary line, not a repeat of the sell
What Could Go Wrong
| Risk | Mitigation |
|---|---|
| Too many sections for a low-price product | Subset the sections. $7-$29 pages need 8-10 sections, not 14 |
| Photo overlay fails on mobile | At 968px, gradient switches to top-to-bottom, object-position shifts |
| Gold testimonial band overused | Maximum 1 per page. More than that cheapens the effect |
| Section rhythm broken (same background twice in a row) | Plot backgrounds before building. Check adjacency |
| Comparison section without "Recommended" badge | Always include the badge — without it, the reader doesn't know which to choose |
| FAQ too short | Minimum 3 items for cold traffic. 4-5 is the sweet spot |
| Register section missing guarantee | Every purchase page should address risk — guarantee or refund window |
Section Selection Guide — Price × Audience Temperature
Not every purchase page needs all sections. Selection depends on price AND audience temperature. Cold traffic (Meta ads, paid traffic, no prior relationship) needs more sections than warm traffic at the same price — because the conversion work warm traffic already has from prior exposure must be done on the page.
| Price Point | Warm Traffic | Cold Traffic |
|---|---|---|
| Free (opt-in) | Hero, Features, Second CTA, Authority, Footer (5) | Same — opt-in pages are short regardless |
| $7-$12 (tripwire) | Hero, Problem, Product cards, Value stack, Authority, FAQ, CTA, Footer (8-9) | Hero, Problem, Mechanism, Results-in-Advance, Qualification, Product cards, How It Works, Value stack, Authority, FAQ, CTA, Footer (11-13) |
| $27-$49 (mid-range) | Hero, Problem, Qualification, Product cards, Value stack, Transformation, Authority, FAQ, Register, Footer (10-11) | Hero, Problem, Mechanism, Results-in-Advance, Qualification, Product cards, Value stack, Transformation, Authority, FAQ, Register, Final CTA, Footer (12-14) |
| $97-$200 (event) | Full architecture — all sections (13-15) | Full architecture — all sections (13-15) |
| $500+ | Use kit-offer-page (AOS brand, warm traffic) instead | — |
Bold = sections added by the cold traffic modifier. These are the conversion elements that warm traffic gets from prior relationship:
- Mechanism / Shift — "Why does this specific approach work?" (Brunson's Story)
- Results-in-Advance — Shows actual output, not promises (Kern)
- Qualification — Self-selects the right buyer, builds trust
- How It Works — Reduces perceived effort (Hormozi's Value Equation)
Word count limits still apply. More sections = tighter copy per section, not more total words. 1,200 words max for purchase pages.