docs: restore README hero below the tagline (#520)

README.md

@@ -6,6 +6,8 @@
 </p>
 <h3 align="center">Turn anything you want to understand, plan, or share into an interactive visual.</h3>
 
+<p align="center"><img src="docs/assets/archify-readme-hero.png" alt="Archify — interactive diagrams" width="960" /></p>
+
 <p align="center">Start with an idea, a question, or a plan. Describe it to your AI agent, and Archify turns it into an interactive HTML you can explore, customize, and share. From travel itineraries and learning maps to complex systems—make it your own.</p>
 
 <p align="center">See what the community is creating—and imagine what you could make next.</p>
@@ -138,8 +140,6 @@ The output is a self-contained HTML file. Download it and open it in your browse
 <details>
 <summary>Themes, exports, and share cards</summary>
 
-<p align="center"><img src="docs/assets/archify-readme-hero.png" alt="Archify — interactive diagrams" width="960" /></p>
-
 Same diagram, two themes, one click to switch:
 
 | Dark | Light |

README_EN.md

@@ -6,6 +6,8 @@
 </p>
 <h3 align="center">Turn anything you want to understand, plan, or share into an interactive visual.</h3>
 
+<p align="center"><img src="docs/assets/archify-readme-hero.png" alt="Archify — interactive diagrams" width="960" /></p>
+
 <p align="center">Start with an idea, a question, or a plan. Describe it to your AI agent, and Archify turns it into an interactive HTML you can explore, customize, and share. From travel itineraries and learning maps to complex systems—make it your own.</p>
 
 <p align="center">See what the community is creating—and imagine what you could make next.</p>
@@ -138,8 +140,6 @@ The output is a self-contained HTML file. Download it and open it in your browse
 <details>
 <summary>Themes, exports, and share cards</summary>
 
-<p align="center"><img src="docs/assets/archify-readme-hero.png" alt="Archify — interactive diagrams" width="960" /></p>
-
 Same diagram, two themes, one click to switch:
 
 | Dark | Light |

README_ZH.md

@@ -6,6 +6,8 @@
 </p>
 <h3 align="center">把你想理解、规划或分享的事，变成可以互动的可视化作品。</h3>
 
+<p align="center"><img src="docs/assets/archify-readme-hero.png" alt="Archify — interactive diagrams" width="960" /></p>
+
 <p align="center">从一个想法、一个问题或一份计划开始。把它描述给 AI Agent，Archify 就能生成可以探索、修改和分享的交互式 HTML。从旅行行程、知识地图到复杂系统，你都可以继续扩展，做成自己需要的样子。</p>
 
 <p align="center">看看社区正在创造什么，也想想你还能用它做些什么。</p>
@@ -138,8 +140,6 @@ Archify 追踪 [`mco-org/mco`](https://github.com/mco-org/mco) 的 `9f1a1cf` 版
 <details>
 <summary>深浅主题、导出菜单与分享卡片</summary>
 
-<p align="center"><img src="docs/assets/archify-readme-hero.png" alt="Archify — interactive diagrams" width="960" /></p>
-
 同一张图，两套主题，一键切换：
 
 | 深色 | 浅色 |

archify/test/readme-showcase.test.mjs

@@ -121,6 +121,13 @@ test('all README languages show the brand mark and retain the verified animated
   for (const filename of ['README.md', 'README_EN.md', 'README_ZH.md']) {
     const readme = fs.readFileSync(path.join(repoRoot, filename), 'utf8');
     const markIndex = readme.indexOf('docs/assets/archify-lockup-light.svg');
+    const heroPath = 'docs/assets/archify-readme-hero.png';
+    const heroIndex = readme.indexOf(heroPath);
+    const taglineEnd = readme.indexOf('</h3>');
+    assert.equal(readme.split(heroPath).length - 1, 1, `${filename}: hero must appear exactly once`);
+    assert.ok(markIndex < taglineEnd && taglineEnd < heroIndex, `${filename}: hero must follow the logo and tagline`);
+    assert.ok(heroIndex < readme.indexOf('<strong>', taglineEnd), `${filename}: hero must precede navigation`);
+    assert.match(readme.slice(taglineEnd + 5), /^\s*<p align="center"><img src="docs\/assets\/archify-readme-hero\.png"/);
     const proofIndex = readme.indexOf('docs/assets/archify-live-proof.gif');
     const demosIndex = Math.max(readme.indexOf('## See Archify in action'), readme.indexOf('## 看看 Archify 能做什么'));
     assert.ok(markIndex >= 0 && markIndex < demosIndex, `${filename}: brand lockup is missing before the demos`);