03a — GOLDEN EXAMPLE: CYP Paid Traffic Page — Opt-in Type
Structural reference. The golden example lives in the vault at:
advisory-os-vault/content/business/marketing/campaigns/the-build/wip/opt-in-cib-v4.htmlWhat it is: The Client Intelligence Brief opt-in page. A lead-capture page for cold traffic from Meta ads. Collects name + email via MailerLite form, delivers a free Claude skill.
Why This Is the Golden Example
This page was the first CYP-branded paid traffic page built. It established the design patterns that all subsequent funnel pages follow: glass cards, gold accents, sticky form panel, section rhythm, and the Fraunces + Montserrat typography system on the teal/gold/cream palette.
Section Architecture (5 sections)
| # | Section | Background | Purpose |
|---|---|---|---|
| 1 | Hero (2-column) | Teal gradient | Left: headline, problem statement, feature list, proof. Right: sticky form panel with glass card styling + gold top-accent bar |
| 2 | What You Get | Cream (#f1ede6) | 4-item vertical feature list with numbered items. Section header label in accessible gold (#6b5d3e) |
| 3 | Second CTA | Dark teal card on cream | Centered heading + full-width gold button + disclaimer text |
| 4 | Built By | White | Circular photo with gold border + bio paragraph |
| 5 | Footer | Dark teal (#0f2d3e) | Meta disclaimer, results disclaimer, copyright, contact, legal links |
Key Design Patterns Demonstrated
- Sticky form panel — Glass card with gold top-accent bar,
position: sticky; top: 100pxon desktop,position: staticon mobile (968px breakpoint) - Form-first mobile — At 968px, form gets
order: -1to appear above copy - Copy-details hide — Detailed feature list hidden at 968px (
.copy-details { display: none }) - Gold angle brackets —
›bullets in gold (#b79d64) for feature items - Preview section inside form card — Below the form, a border-top separator shows example output snippets
- MailerLite form styling — Custom CSS overrides: input fields
background: #506e76,color: #f1ede6,border: 1px solid #797d66. Submit button matches CTA button styling - Circular authority photo — 100px,
border-radius: 50%,border: 3px solid #b79d64 - Success redirect — JavaScript function redirects to thank-you page on form submit
Section Metrics
- Total sections: 5 (compact — opt-in pages are shorter than purchase pages)
- Word count (visible copy): ~350 words
- CTA appearances: 3 (header anchor, form submit button, second CTA button)
- Background rhythm: gradient → cream → dark card → white → dark teal
What Makes This Example Good
- Two-column hero puts the form above the fold on desktop
- Problem statement is 2 sentences — no preamble
- Feature list uses bold terms + descriptions, scannable
- Form preview section shows real example output (not generic)
- Single-purpose: no navigation, no sidebar, no distractions
- Mobile: form appears first, detailed copy hidden
- Authority section is minimal — circular photo + 1 paragraph
What Could Go Wrong
| Risk | Mitigation |
|---|---|
| MailerLite form HTML changes format between builds | Always paste fresh form HTML from MailerLite dashboard — don't reuse old embed code |
| Form styling overrides break after MailerLite updates | Test form rendering after any MailerLite embed code update |
| Sticky form overlaps footer on short pages | Ensure enough content in left column to create scroll depth |
| Copy-details hidden on tablet removes selling power | Keep hero headline and form strong enough to convert without the feature list |