# Shared brief for the frontend design templates

Product: **Who's Paying · India** (brand wordmark `ostrya.`). A creator types their Instagram handle; we read their public posts, scan the Meta Ad Library for brands buying their audience right now, and price their reels from real plays. Audience: Indian Instagram creators (50k–1M followers), on phones mostly, reviewing on desktop too. Primary job of the UI: get a handle typed, keep the creator engaged through a ~1 minute scan, then make the preview feel so concrete that they unlock the full report.

Every template is ONE self-contained HTML file (inline CSS + vanilla JS, Google Fonts allowed, no other network). Hash routes, all reachable and interactive:

## Routes and states

`#home` → `#scan` → `#result` → (unlock) → `#unlocked`; `#queue` reachable from the unlock action when the report is still with a reviewer. Include a small fixed prototype footer: `Prototype · story detection is simulated` with links to all five hashes and a `start over` link.

### `#home`
- Wordmark `ostrya.`, kicker "Who's Paying · India" (do not set in all caps), a line "For creators with an audience brands want".
- H1: "Brands are paying creators in your niche. See which ones, and what they'd pay you."
- Sub: "Type your Instagram handle. We read your last 30 posts, scan the Meta Ad Library for brands buying your audience right now, and price your reels from your real plays."
- Input with `@` prefix, placeholder `your_handle`, button "Scan my account". Validation: empty → inline error "Enter your Instagram handle". Strip leading `@`, lowercase.
- Trust line: "Public data only. No login. About a minute. Nothing is posted without you."
- "Try a real one" chips: @sid_fundas, @sanyajollyyy, @brandingtactics, @fitnglammagazine, @yourinstalawyer, @swapnil.nova. Clicking fills the input.
- Live ticker (marquee or slow horizontal scroll, pauses on hover, static if reduced motion): "Live in the Meta Ad Library · India · active ads · 6 Sept 2026" then brand chips: ACKO (pays creators), Nua (pays creators), TrulyMadly (pays creators), Flipkart, Amazon India, Levi's (pays creators), Nykaa (pays creators), Mamaearth, Zepto, Cred, Groww (pays creators), Boat. Chips marked "pays creators" get a distinct treatment.
- Error states to include (as toggleable demo via `?state=` or a small "demo states" control is optional): 503 "Scanning is paused while we reconnect a data source. Try again in a few minutes." and 500 "The scan failed before it started. Nothing was charged. Try again."

### `#scan`
Progress bar + 5-row checklist. Each row: pending → running (spinner/animated) → done (check) with a one-line proof under it. Timings are illustrative (~1.5–3s per row); rows must be able to render from data, so build them from a JS array. A `Skip to results` text link. Rows:
1. Pulling your profile → "2,56,859 followers · verified · Women's rights, legal, social critique · 727 posts"
2. Reading your last 30 posts → "26 reels, 4 carousels · 3 paid partnerships · median 32,657 plays"
3. Scanning the Meta Ad Library, India, active ads → "4 keyword sweeps · 160 ads · about 40 brands buying women 22–40"
4. Checking who already pays creators → "8 brands running creator-made ads (ACKO has ten live)"
5. Pricing your attention → "Trusted-voice rates for women 25–40: ₹2–3 per view · your median 32,657 · your paid AJIO reel 25,18,905"
Also show a skeleton-loader version of the result card stack below/beside the checklist so the page never looks empty. When all five finish, auto-route to `#result`.

### `#result` (preview, free)
1. Creator header: "Your Insta Lawyer" + verified mark, "@yourinstalawyer · Women's rights · legal · social critique · scanned 6 Sept 2026".
2. Stat strip, 4 cells: Followers 2,56,859 · Median plays 32,657 · Reach per reel 12.7% · Paid deals 3.
3. Insight callout: "Your best paid post (AJIO, 25,18,905 plays) did 77x your median. Your worst (a legal-tips carousel, 4,100 reach) sank. Brand-fit posts convert; generic tips sink."
4. The gap: heading "Brands are spending on your audience right now. Some are asking you to work for free." Quote from the creator's own caption: "Not a paid partnership, just sharing because it matters." Then three named live spenders: ACKO · 10 live ads, Nua · 6 live ads, TrulyMadly · 4 live ads. Contrast line: "Brand fit moved your number 250x."
5. Rate card (estimate): rows Per sponsored reel ₹60,000 – ₹95,000 (visible); Licensed reuse, 30 days (blurred); Story + reel package (blurred); Legal-rights explainer, franchise format · 9,68,966 plays (visible). Footnote: "Based on ₹2–3 per view for trusted-voice creators reaching women 25–40. Send us one closed deal and this becomes a number, not a band."
6. "Brands buying your audience — 12 brands match you (2 open · 10 locked)".
   Open cards (2):
   - ACKO — badge "Pays creators · 10 live ads", category Insurance, match 91, chips: "10 creator-made ads since Jul 2026", "CTA: Get a quote", "1.2M page likes". Why: "You've posted three times about consumer rights in claims. ACKO is running ten creator-led ads about claim settlement right now. A pitch that ties your claim-rights explainers to their 'no-hassle claims' line lands on a brief they are already buying." Bars: Niche fit 88, Spending now 95, Pays creators 100, Audience overlap 82. Button "Pitch draft" (locked).
   - Nua — badge "Heaviest spender in your niche", category Women's wellness, match 87, chips: "6 creator-made ads since Aug 2026", "CTA: Shop now", "410k page likes". Why: "Your audience is 78% women 22–40. Nua's current ads are all creator testimonials aimed at exactly that group. Your period-leave explainer reel is the closest thing to a pre-made brief." Bars: Niche fit 84, Spending now 90, Pays creators 92, Audience overlap 79.
   Locked cards (10), name blurred, descriptor visible, score visible: 88 Dating · verified profiles; 86 Women's hair loss; 84 Intimate hygiene; 82 Period underwear; 80 Dating · install; 78 Legal-tech · consumer; 76 Mutual funds · women; 74 Skincare · derm-led; 71 Ed-tech · law entrance; 69 Micro-insurance.
7. Methodology footnote: "Match score = niche fit + spending now + pays creators + audience overlap. Ad facts come from the Meta Ad Library, India, active ads, 6 Sept 2026. Page likes are the advertiser's Facebook page."
8. Sticky unlock bar (persistent at bottom): "Unlock all 12 with one story" / "Full rate card, a pitch per brand, your spot on the index" + button "Unlock". Unlock opens a dialog: "Post one story mentioning @ostrya, then tap check. Story detection is simulated in this prototype." Buttons "I've posted it" → 1.5s checking state → either route to `#unlocked` (default) or `#queue` (if a "report still under review" toggle in the dialog is on).

### `#unlocked`
Same header. Rate card unblurred: Per sponsored reel ₹60,000 – ₹95,000; Licensed reuse, 30 days ₹18,000 – ₹28,000; Story + reel package ₹78,000 – ₹1,20,000; Legal-rights explainer, franchise format ₹1,10,000 – ₹1,60,000. All 12 brands as open cards (use the descriptors above as names for the 10: e.g. TrulyMadly, Traya, Pee Safe, Bummer, Aisle, LegalKart, Groww, Minimalist, Unacademy Law, ACKO Micro). Each card has a "Pitch draft" that expands inline with a 3–4 sentence draft quoting the brand's live ad line. A small "Reviewed by a person on 7 Sept 2026" mark. One card demonstrates a reviewer-edited claim (show a subtle "edited by reviewer" marker on one sentence). One slot demonstrates a rejected claim: an empty slot that says "One claim was removed in review" rather than fake content. Index spot: "You're #14 of 212 legal creators on the India index this week."

### `#queue`
Calm notice: "Your full report is with a reviewer. Scans run in small batches so every number is checked by a person before you see it. Usually under 24 hours." Show position "You're 7th in today's batch", what the person is checking (3 bullet list), a "We'll message you on Instagram when it's ready" line, and a link back to the preview.

## Component floor (shadcn-like, hand-rolled)
Buttons (primary / secondary / ghost / destructive, with loading state), input with prefix, badge, progress, skeleton, spinner, card, dialog (with backdrop, ESC to close, focus trap-ish), toast (show one on unlock check), tooltip on the match score ("How this is scored"), blurred/locked treatment with a lock glyph, score bars, sticky bottom bar, tabs are optional. Visible keyboard focus rings. `prefers-reduced-motion` respected (no marquee, no fake progress animation → show finished rows). Responsive to 360px wide. Indian number formatting (2,56,859) everywhere.

## Content rules
Sentence case for labels. Plain verbs on buttons. No "Submit". Errors say what happened and what to do. Do not invent extra stats. Do not use `→` in link text. Middle dots only in the meta line under names and in the ticker.