diff --git a/docs/marketing-visuals.md b/docs/marketing-visuals.md new file mode 100644 index 00000000..9949d8a9 --- /dev/null +++ b/docs/marketing-visuals.md @@ -0,0 +1,190 @@ +# Marketing visuals — home & about + +Plan for adding visuals to the logged-out home page (`web/components/home/home.tsx`) and the about page +(`web/pages/about.tsx`). Both are currently 100% type + Heroicons; `web/public/images/` holds only logos and +`default-avatar.png`. Every differentiator ("keyword search any profile", "filter by values", "get notified +about searches", "democratic") is asserted in prose and never shown. + +## Principles + +- **Product visuals, not people visuals.** The home subtitle ends "— not just your photos". Stock imagery of + smiling couples would contradict the positioning and read as the thing we're arguing against. +- **Captured, not mocked.** Everything that _can_ be a screenshot of the live app should be, so it can be + regenerated when the UI changes instead of rotting. `media-creator/scripts/capture-profile.mjs` already + does this for the profile tour reel; the same approach extends to marketing stills. +- **Never fabricate social proof.** See H3 below. +- **Poster-first.** The LCP element stays a static image; video is lazy and decorative. + +## Prerequisite: showcase seed data (W0) + +Screenshots are only as good as the database behind them. The current seed +(`tests/e2e/utils/seedDatabase.ts` + `tests/e2e/backend/utils/userInformation.ts`) produces: + +- `bio` = 200–350 lorem-ipsum words, `headline` = lorem words, `keywords` = lorem words +- `age` uniform in 18–100 +- `pinned_url` = `/images/default-avatar.png` for _every_ medium/full profile +- `city` / `country` / `university` / `links` / `photo_urls` / interests / causes / work never set + +Unusable for capture. W0 adds a curated set of hand-authored personas alongside the faker ones — real prose, +coherent field combinations, real photos, real locations, populated interests/causes/work and social links. + +**Status: in progress.** See "Showcase profiles" below. + +## Home page + +### H1 — Hero search demo (highest value) + +The page says "Don't Swipe. / Search." and then shows no search. A 10–15s loop — typing `stoicism`, filter +chips appearing, result cards sliding in — proves the core differentiator at a glance. + +- Build as a `SearchDemo` Remotion scene in `media-creator/`, fed by a `capture-search.mjs` companion to the + existing `capture-profile.mjs`. +- Place below the CTA row in `home.tsx`, above the divider, framed in browser chrome. +- Static poster is the LCP image (`next/image`, `priority`, AVIF); `