docs(readme): hero SVG logo, two frames kept, two moved to landing source (TASK-422)

README.md

@@ -1,6 +1,9 @@
 <div align="center">
 
-<img src="frontend/src/assets/commonly-logo.png" alt="Commonly AI" width="72" />
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/assets/brand/commonly-mark-white.svg" />
+  <img src="docs/assets/brand/commonly-mark-ink.svg" alt="Commonly AI" width="72" />
+</picture>
 
 # Commonly AI
 
@@ -36,24 +39,8 @@ Give each agent only the access you grant it, run everyone's agents in one pod (
 
 **Run: everyone's agents in one pod.** Teammates bring their own Claude Code or Codex from their own machine, or start the hosted agent with nothing to install. Every agent sits on one roster. [Run your own agent →](https://docs.commonly.me/agents/daemon)
 
-<div align="center">
-
-<img src="docs/assets/readme/team-2x.png" alt="Commonly's Your team page: six agents with their roles and pods, two marked as needing you, and a card for bringing your own agent." width="880" />
-
-<sub><em>Your team: hosted or your own, one list</em></sub>
-
-</div>
-
 **See: what every agent did.** Agents claim work on the pod's board and post what they tried. When the call is yours, the agent asks you on a card, and Activity shows what needs you across every pod. [Quickstart →](https://docs.commonly.me/quickstart)
 
-<div align="center">
-
-<img src="docs/assets/readme/activity-2x.png" alt="Commonly's Activity page: three items that need you across the website, launch and support pods, two of them agent decision cards with options, above what moved forward." width="880" />
-
-<sub><em>Activity: what needs you, across every pod</em></sub>
-
-</div>
-
 ## Start on commonly.me
 
 On [commonly.me](https://commonly.me), with nothing to install:

docs/design/landing-demo/Landing390.dc.html

@@ -78,7 +78,7 @@
   <!-- feature rows: shot on top, copy below -->
   <div style="height: 2466px; flex: 0 0 auto; box-sizing: border-box; padding: 0 24px 64px; display: flex; flex-direction: column; gap: 56px;">
     <div style="display: flex; flex-direction: column; gap: 20px;">
-      <div style="width: 342px; height: 214.5px; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 6px; overflow: hidden;"><img src="../../assets/readme/activity-2x.png" width="340" height="212.5" style="display: block;" alt=""></div>
+      <div style="width: 342px; height: 214.5px; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 6px; overflow: hidden;"><img src="../../assets/landing-source/activity-2x.png" width="340" height="212.5" style="display: block;" alt=""></div>
       <div style="display: flex; flex-direction: column; gap: 12px;">
         <span class="mono" style="font-size: 12px; letter-spacing: 0.06em; color: #1d3fd1;">NEEDS YOU</span>
         <div class="disp" style="font-size: 26px; line-height: 30px; text-wrap: balance;">Agents ask. You decide in one tap.</div>
@@ -91,7 +91,7 @@
       </div>
     </div>
     <div style="display: flex; flex-direction: column; gap: 20px;">
-      <div style="width: 342px; height: 214.5px; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 6px; overflow: hidden;"><img src="../../assets/readme/team-2x.png" width="340" height="212.5" style="display: block;" alt=""></div>
+      <div style="width: 342px; height: 214.5px; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 6px; overflow: hidden;"><img src="../../assets/landing-source/team-2x.png" width="340" height="212.5" style="display: block;" alt=""></div>
       <div style="display: flex; flex-direction: column; gap: 12px;">
         <span class="mono" style="font-size: 12px; letter-spacing: 0.06em; color: #1d3fd1;">YOUR TEAM</span>
         <div class="disp" style="font-size: 26px; line-height: 30px; text-wrap: balance;">Any runtime, one roster</div>

frontend/src/v2/landing/__tests__/landingFrames.test.ts

@@ -17,12 +17,15 @@ import path from 'path';
 const REPO_ROOT = path.resolve(__dirname, '..', '..', '..', '..', '..');
 const LANDING_ASSETS = path.join(REPO_ROOT, 'frontend/src/assets/landing');
 const README_FRAMES = path.join(REPO_ROOT, 'docs/assets/readme');
+// Frames the README no longer shows keep their capture here, so the landing copy
+// still has a pinned source and docs/assets/readme/ holds no orphan.
+const LANDING_SOURCES = path.join(REPO_ROOT, 'docs/assets/landing-source');
 const PAGE = fs.readFileSync(path.join(__dirname, '..', 'V2LandingPage.tsx'), 'utf8');
 
-const FRAMES: Array<[landing: string, readme: string]> = [
-  ['activity.png', 'activity-2x.png'],
-  ['team.png', 'team-2x.png'],
-  ['connectors.png', 'connectors-2x.png'],
+const FRAMES: Array<[landing: string, source: string, dir: string]> = [
+  ['activity.png', 'activity-2x.png', LANDING_SOURCES],
+  ['team.png', 'team-2x.png', LANDING_SOURCES],
+  ['connectors.png', 'connectors-2x.png', README_FRAMES],
 ];
 
 // The README dropped its Bring-your-own frame (#2564) because the capture shows
@@ -32,10 +35,10 @@ const LANDING_ONLY = ['byo.png'];
 const LANDING_IMAGES = [...FRAMES.map(([landing]) => landing), ...LANDING_ONLY].sort();
 
 describe('landing feature frames', () => {
-  test.each(FRAMES)('%s is byte-identical to the README frame %s', (landing, readme) => {
+  test.each(FRAMES)('%s is byte-identical to its source frame %s', (landing, source, dir) => {
     const copy = fs.readFileSync(path.join(LANDING_ASSETS, landing));
-    const source = fs.readFileSync(path.join(README_FRAMES, readme));
-    expect(copy.equals(source)).toBe(true);
+    const original = fs.readFileSync(path.join(dir, source));
+    expect(copy.equals(original)).toBe(true);
   });
 
   test('the page imports exactly these four frames, and no other landing image', () => {

frontend/src/v2/landing/__tests__/readmeFrames.test.ts

@@ -114,7 +114,7 @@ describe('README frames', () => {
   });
 
   it('leads with the hero, after the header block and before "What is Commonly?"', () => {
-    const logoAt = README.indexOf('<img src="frontend/src/assets/commonly-logo.png"');
+    const logoAt = README.indexOf('<img src="docs/assets/brand/commonly-mark-ink.svg"');
     const heroAt = README.indexOf(`<img src="${HERO}"`);
     const headingAt = README.indexOf('## What is Commonly?');