# AI Affiliate Builders — UI Revamp Direction (v1) **Author:** Claude (brand + UI direction) · **Date:** 2026-06-08 **Stack (do not change):** Astro + Tailwind, tokens in `site/tailwind.config.*`, fonts Instrument Serif (display) + Plus Jakarta Sans (body), brand-indigo `#4F46E5` / brand-mint `#2DD4BF` / brand-amber `#F59E0B` / surface `#FFFBF5` / ink `#0F172A` / muted `#64748B`. **Build agent:** implement section by section in the order below. Keep all colors as `brand-*` tokens — never hard-code hex in components. Match the Facebook page kit in `/CLAUDE-UNIFIED/facebook-promo/` (same logo, same indigo/mint, same serif headlines) so Page → site is one identity. --- ## 0. North star The current site reads like internal tooling: honest, but flat. Cards are all the same white box with a hairline border, the hero leaks engineering language ("Blueprint Studio · separate design system", "burns every token daily", "phonescale.db"), and there's no proof, no motion, no visual hierarchy beyond the serif H1. The revamp goal: **make it feel like a premium product that ships premium sites** — because "we build beautiful sites" is the entire value prop, so the homepage IS the demo. Three principles: 1. **Show, don't claim.** Every "we build great sites" sentence should be replaced or backed by a visible site preview. 2. **One clear path.** Free intake is the conversion. It should be the loudest thing on every screen. 3. **Customer-facing copy only.** Strip all internal/engineering jargon from guest pages. --- ## 1. Quick wins (do these first — 1–2 hrs, high impact) 1. **Kill the jargon.** In `index.astro`: - Remove the eyebrow "Blueprint Studio · separate design system" → replace with a value chip: **"AI-built affiliate sites · live in ~24 hours"**. - Feature card "Keepa at full throttle" / "burns every token daily — shared catalog in phonescale.db" → rewrite as customer benefit: **"Always-fresh products"** / "Real Amazon prices and stock, refreshed daily — never a dead product page." - Anywhere "phonescale.db", "daemon", "dist deploy", "Keepa gate" appears in guest pages → translate to benefit language (per MEDIA-KIT voice rules). 2. **One primary CTA per viewport.** The hero has two equal-weight buttons; keep "Start building — free intake" as `.btn-primary` and demote "See live examples" to a quieter text-link with arrow. Repeat the single primary CTA in the nav (it's currently missing a CTA button) and as a sticky bottom bar on mobile. 3. **Add social proof above the fold.** Under the hero CTAs, a thin trust row: "Amazon · CJ · ShareASale · Impact" logos in muted grey, plus a counter if you have real numbers ("X sites launched"). If no numbers yet, use "Pay only when you're happy with the preview" — that's the strongest honest trust line you already have (it's on /examples). 4. **Replace the static hero image** (`hero-platform.webp`) with a live, rotating preview of a real built site (Atlas/Herald/Bazaar/Pulse) in a browser frame. Even a CSS mockup beats a flat screenshot. --- ## 2. Homepage structure (target) Reorder/sharpen sections to this funnel: 1. **Hero** — serif headline (keep "Build affiliate sites that *earn*."), one-line subhead, single primary CTA + ghost link, trust row. Right side: browser-framed live site preview (not a screenshot card). 2. **"See it build" strip** — a 3-step visual mini-pipeline (Describe → AI builds → Go live) with the actual intake field inline so people can start typing their niche right there. Lowering the start friction to "type your niche" on the homepage will lift intake starts more than any copy change. 3. **Live examples gallery** — you already fetch these; make each card a real browser-framed thumbnail with a "Preview" hover and the template name + niche. This is your strongest asset; move it UP (right after the build strip). 4. **Templates** (Atlas/Herald/Bazaar/Pulse) — keep, but make cards visually distinct per template (each should preview its own art direction, not a uniform white card). The whole pitch is "4 distinct art directions" — the cards must prove it. 5. **What's included** — convert the 6 white feature boxes into 3 tiers of visual weight: a hero feature (live catalog), then a 2x2 of supporting features with mint check icons. Add real iconography (lucide), not text-only. 6. **Pricing teaser** — 3 plans as cards with the $149 "Pro" elevated (you already mark it "Most popular"). Add an annual toggle if billing supports it. 7. **Final CTA band** — full-width indigo (`brand-indigo`) section, white serif headline, single CTA. Currently the closing CTA is quiet; make it the boldest band on the page. --- ## 3. Visual system upgrades The brand tokens are good; the *application* is thin. Add depth and motion: - **Elevation:** you have `shadow-stack` (indigo-tinted) — use it on cards, not just borders. Define `shadow-stack-sm` and `shadow-stack-lg` for hover lift. Cards should lift on hover (motion level "subtle": scale 1.01, shadow up, 150–200ms). - **Surfaces:** stop using pure-white boxes on the warm canvas — they look flat. Use `bg-white` with the stack shadow + a faint `border-brand-indigo/8`, and introduce one tinted surface (`bg-brand-mint/5` or `bg-brand-indigo/5`) to break the monotony between sections. - **The blueprint grid** is a strong motif — extend it as a faint background behind the hero and the final CTA (you already have a `.blueprint-grid` class). Use it sparingly so it stays special. - **Brand mark consistency:** the logo (indigo tile, 3 descending bars, mint AI dot) should appear as a favicon, in the nav, and as a loading state. The "three stacked frames" idea from the media kit is now realized as the motif in the FB kit — reuse that SVG as a decorative element in the hero and 404. - **Accent discipline:** indigo = primary/action, mint = "AI / live / success" only, amber = "draft/preview/warning" only. Don't let mint and amber become decorative; they carry meaning. - **Display type:** lean into Instrument Serif for ALL section H2s (you do this already) and add an italic Instrument Serif accent for pull-quotes/proof lines — it's a distinctive, premium signal that separates you from generic SaaS. --- ## 4. Conversion specifics - **Intake on homepage:** embed the first field of `/app/new` (the niche description) directly in the hero or build-strip. "Try it: describe your niche →" with the textarea inline. Every step you remove before the textarea raises starts. - **Sticky mobile CTA bar:** fixed bottom bar on mobile with "Start free intake" — mobile is where your Facebook traffic lands, so this is critical. - **Risk reversal everywhere:** "Free intake · preview in ~24h · pay only when you're happy" should appear under every CTA. It's your best objection-killer and it's currently buried on /examples. - **Exit-aware:** add a single, tasteful "Not ready? See 4 real builds" link near the final CTA for people who won't convert yet. --- ## 5. Page-by-page priority order for the build agent 1. `index.astro` — hero + jargon strip + examples move-up + final CTA band (biggest leverage). 2. `components/TemplateCard.astro` — per-template art direction + hover lift. 3. `pages/app/new.astro` — make the first field dead simple; mirror it on the homepage. 4. `pages/examples.astro` — browser-framed thumbnails, "pay when happy" reassurance. 5. `pages/pricing.astro` — elevate Pro, add risk-reversal line, optional annual toggle. 6. `layouts/BaseLayout.astro` — add nav CTA button, favicon, sticky mobile CTA, footer polish. 7. Landing pages `lp/*` — apply the same hero pattern (these are your paid-traffic destinations; they must match the new hero). --- ## 6. Guardrails - Don't introduce a new color outside the token set. If you need a shade, derive it (`brand-indigo/10`, `indigo-600` for hover — already used). - Don't reintroduce internal terms on guest pages. - Keep Lighthouse/perf intact: prefer CSS browser frames over heavy screenshots; lazy-load gallery images; keep the two web fonts only. - Every new section must have a single, obvious next action pointing at the free intake. - Match the Facebook kit's look exactly so a visitor who clicks an ad lands on a page that feels identical to the post. --- ## 7. Reference asset `/CLAUDE-UNIFIED/facebook-promo/homepage-hero-mockup.html` is a static reference hero rendered in these exact tokens (light canvas, serif headline, indigo CTA, stacked-frames motif, browser-framed preview). Use it as the visual target for the `index.astro` hero rebuild — it is the look the Facebook page is selling, so the site must match it.