Add hero performance overview

Author: ZhangGongjie

app/components/ReportPage.tsx

@@ -1734,6 +1734,36 @@ export function ReportPage() {
                 {copy.watchDemos}
               </a>
             </div>
+
+            <div
+              className="hero-performance-strip"
+              aria-label={
+                language === "zh"
+                  ? "Qwen-UI-Agent 六项代表性基准结果"
+                  : "Six representative Qwen-UI-Agent benchmark results"
+              }
+            >
+              <img
+                src={siteAsset("/hero-performance-mobile.png")}
+                alt={
+                  language === "zh"
+                    ? "MobileWorld、MobileWorld-Real 与 AndroidDaily 性能对比"
+                    : "Performance comparisons on MobileWorld, MobileWorld-Real, and AndroidDaily"
+                }
+                width="2244"
+                height="652"
+              />
+              <img
+                src={siteAsset("/hero-performance-desktop-web.png")}
+                alt={
+                  language === "zh"
+                    ? "OSWorld-Verified、WebArena 与 ScreenSpot-Pro 性能对比"
+                    : "Performance comparisons on OSWorld-Verified, WebArena, and ScreenSpot-Pro"
+                }
+                width="2244"
+                height="652"
+              />
+            </div>
           </div>
         </section>
 

app/globals.css

@@ -5993,6 +5993,24 @@ body {
   box-shadow: none;
 }
 
+.hero-performance-strip {
+  display: grid;
+  width: min(1460px, calc(100vw - 48px));
+  margin: 42px 50% 0;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  transform: translateX(-50%);
+}
+
+.hero-performance-strip img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: white;
+}
+
 .play-mark {
   background: #e8e4db;
   color: var(--ink);
@@ -7248,6 +7266,19 @@ footer {
   }
 }
 
+@media (max-width: 900px) {
+  .hero-performance-strip {
+    width: min(760px, calc(100vw - 30px));
+    margin-top: 34px;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 8px;
+  }
+
+  .hero-performance-strip img {
+    border-radius: 7px;
+  }
+}
+
 @media (max-width: 720px) {
   .page-shell {
     width: min(100% - 30px, 1180px);

public/hero-performance-desktop-web.png

@@ -88,6 +88,9 @@ test("server-renders the Qwen-UI-Agent technical report", async () => {
   assert.match(html, /Technical report/);
   assert.match(html, /https:\/\/github\.com\/Tongyi-MAI\/MAI-UI/);
   assert.match(html, />GitHub</);
+  assert.match(html, /hero-performance-mobile\.png/);
+  assert.match(html, /hero-performance-desktop-web\.png/);
+  assert.match(html, /Six representative Qwen-UI-Agent benchmark results/);
   assert.match(html, /End-to-End GUI Tasks/);
   assert.match(html, /Broader Capabilities/);
   assert.match(