# OnPagePilot JV / Affiliate Asset Kit

Everything needed to implement the JV page and run the launch creative.
All paths are relative — drop the whole folder structure into the site as-is.

## Not locked yet (placeholders)

Pricing and launch dates are under revision. Every number/date appears as a
`{{PLACEHOLDER}}` driven from ONE file: `css/tokens.css`, section "1b. CONTENT
TOKENS". Replace the placeholder strings there once Brian confirms; the page
updates everywhere. The three URL placeholders live in `index.html` itself
(search for `{{`): `{{JVZOO_AFFILIATE_SIGNUP_URL}}`, `{{JV_CONTACT_EMAIL}}`,
`{{AFFILIATE_TERMS_URL}}`, `{{CANONICAL_URL}}`.

## Folder map

| Folder | Contents | Placement |
|---|---|---|
| `banners/` | Static banners, PNG, 1x + `-2x` retina | see table below |
| `animated/` | Same sizes as looping MP4 + WebM + GIF (looping map animation), plus `topical-authority-map-master.mp4` (source, 2560x1268) | web embeds: use WebM with MP4 fallback; email: GIF (or static PNG for weight-sensitive sends) |
| `logos/` | `onpage_pilot_logo.png` (full wordmark, 931x326, transparent), `.webp` variants, `logo_without_text.webp` (icon mark) | light backgrounds; icon mark in natural colors on navy footer |
| `screenshots/` | `map-endstate-full.png` (dense map, UI chrome cropped), `map-endstate-legend.png` (with legend), `map-start-sparse.png`, `ui-start/endstate-fullpage.png`, product shots (`topical/audit/editor-tight.jpg`) | page hero poster, PR, social |
| `emails/` | 4 swipe emails as .txt with subject lines + placeholder markers | affiliate downloads |
| `css/tokens.css` | The single locked CSS file: brand tokens + content tokens + all page styles | `<link rel="stylesheet">` from the JV page |
| `fonts/` | Montserrat 700/800 + Poppins 400/500/600 woff2 (self-hosted) | referenced by tokens.css |

## Banner sizes and intended placement

| File base name | Size | Use |
|---|---|---|
| `email-header-600x200` | 600x200 (+1200x400 retina) | email header, primary |
| `email-header-600x300` | 600x300 (+retina) | email header, tall variant |
| `leaderboard-728x90` | 728x90 | display networks, blog headers |
| `rectangle-300x250` | 300x250 | sidebars, in-content |
| `skyscraper-160x600` | 160x600 | sidebar placements |
| `social-og-1200x628` | 1200x628 | FB/LinkedIn/X link-preview cards, paid social |
| `social-square-1080x1080` | 1080x1080 | IG/LinkedIn/FB feed |

Every size: `banners/<name>.png`, `banners/<name>-2x.png`,
`animated/<name>.mp4`, `.webm`, `.gif`.

## Design rules baked into these assets

- Palette, typography (Montserrat + Poppins), radius and shadows mirror the
  live onpagepilot.com CSS (extracted 2026-07-13). CTA green is `#15803d`
  (the site's WCAG-passing green), navy `#1B2A49`, orange `#F39C12` sparing.
- Map node colors are the real product's: seed green, competitor orange,
  topic purple, cluster blue, intent pink.
- The map footage is unedited product capture. If a layout fights the map,
  the map wins. No stock art, no emojis, no abstract gradients.
- Commission language everywhere: "25% lifetime recurring on the base
  subscription only." Do not shorten it to "25% recurring".

## Rebuilding banners (optional)

`bannersrc/build_banners.py` in the repo regenerates all templates and the
`render.sh` / `animate.sh` scripts (headless Chrome + ffmpeg). Geometry,
headline and CTA text live in that one file.
