--- name: competitor-brief-page description: "Design and build stunning competitor brand analysis pages — a brief view (visual mosaic gallery with expandable sections) that links to a full deep-dive page. Use when building competitor analysis pages, brand brief pages, competitive intelligence documents, brand research pages, or any visual brand comparison for client deliverables. Produces two connected pages per brand: brief.html (fast visual scan) and index.html (full deep-dive). Works for any brand, any client. Triggers on competitor brief, brand brief page, build the brief, competitor page, brand analysis page, competition page." --- # Competitor Brief Page Builds two connected HTML pages per competitor brand: - **`brief.html`** — editorial brief view: split hero + TL;DR strip + mosaic gallery of expandable section cards - **`index.html`** — full deep-dive: the complete brand analysis (existing long-form format) ## Assets - `assets/brief-page.css` — shared stylesheet. Copy to your project's shared assets folder. - `assets/brief-template.html` — blank template with inline instructions and placeholders. ## Quick Start ``` 1. Copy assets/brief-page.css → public/[project]/assets/brief-page.css 2. Copy assets/brief-template.html → public/[project]/[brand]/brief.html 3. Set CSS vars on : --brand-primary, --brand-dark, --bg 4. Run the image audit (see references/image-assignment.md) 5. Fill 13 sections with content + images 6. Quality gate (see below) ``` ## Page Architecture ### Split Hero Two panels, always: - **Left** (`.hero-brand`): Brand name, one-line brand statement, 3 key stats. Uses CSS custom properties — never fails even with no assets. - **Right** (`.hero-photo`): Brand identity image OR brand primary color + wordmark. **Never campaign photography.** Campaign images (celebrity shoots, seasonal ads, specific moments) belong on the Campaigns card. **Hero image rules:** - ✅ Logo/wordmark on brand color — always safe, always brand - ✅ Core product/artifact (the thing the brand IS — e.g., Cash App Card) - ✅ Brand visual system spread (guidelines page, design system overview) - ❌ Celebrity campaign shoots — move to §11 Campaigns - ❌ Seasonal/event-specific ads - ❌ Images with baked-in rounded corners (device screenshots, web captures) ### Mosaic Columns Two independent flex columns, `align-items: flex-start`, gap 16px. Cards have intentional heights creating visual rhythm — not a uniform grid. **Left col arc** (creative/identity): Positioning → Brand Evolution → Color+Type → Campaigns → Quick Facts **Right col arc** (analytical): Personality → Layout+UX → Social → Assessment → Verdict → Audience → vs Client ### TL;DR Strip 5 stats + 1 strategic call. The strategic call is the most important line on the page — what the client should DO with this intelligence. ## The 13 Canonical Sections | § | Section | Card image type | Notes | |---|---------|----------------|-------| | 01 | Quick Facts | Product/press identity | Bottom of left col — reference, not story opener | | 02 | Positioning | Cultural/lifestyle | Opens left col LARGE. Shows brand's world, not ad | | 03 | Brand Evolution | Timeline spread/overview | Natural ratio — panoramic works great | | 04–05 | Color & Typography | Brand pillars / type system | 3 sub-sections required: Logo + Color + Type | | 06 | Layout & UX | Website homepage screenshot | Natural ratio. Expanded = full-bleed product screens | | 07 | Assessment | Design principles / strategy visual | Strengths + Vulnerabilities grid | | 08 | Verdict | Iconic brand object | Borrow / Watch / Reject framework | | 09 | Personality | Brand world / lifestyle objects | Brand archetype + tone | | 10 | Social | Social-native, viral content | Must reflect actual platform strategy | | 11 | Campaigns | Cinematic campaign hero | Left col visual anchor — largest campaign image | | 12 | Audience | Documentary / lifestyle | Age, geography, retention driver | | 13 | vs [Client] | Campaign or cultural image | Comparison table + strategic call | **Full-width below mosaic:** Brand in Practice — 12+ unique images, never duplicating images used in section cards. ## Per-Brand Theming (CSS Custom Properties) Set on `` in inline `