feat(compare): show hardware vendor logos beside each chip on /compare

Render vendor marks beside each hardware label in the /compare pair cards
(en + zh). NVIDIA uses its official full-color green mark (#76B900, new
nvidia-color.svg); AMD's brand guidelines only allow the standard black or
reversed-white logo, so amd.svg joins the shared monochrome dark-invert set,
which reproduces the official reversed treatment in dark mode. Vendors
without a logo mapping (e.g. Teacup) render no mark.

中文：在 /compare 对比卡片中的每个硬件名称旁展示厂商 logo（中英文页面）。
NVIDIA 使用官方全彩绿色标志（#76B900，新增 nvidia-color.svg）；AMD 品牌
规范仅允许标准黑色或反白 logo，因此 amd.svg 加入共享的单色暗色反转集合，
在暗色模式下呈现官方反白效果。无 logo 映射的厂商不渲染标志。

Author: functionstackx

packages/app/cypress/e2e/compare-precision.cy.ts

@@ -42,6 +42,10 @@ describe('Compare precision index page', () => {
       .should('contain.text', '8K→1K')
       .and('have.attr', 'href')
       .and('match', /\/8k-1k$/u);
+    // Vendor logos render beside each hardware label in the pair cards:
+    // NVIDIA uses the full-color green mark, AMD its monochrome brand mark.
+    cy.get('a[data-scenario] img[src="/logos/nvidia-color.svg"]').should('exist');
+    cy.get('a[data-scenario] img[src="/logos/amd.svg"]').should('exist');
   });
 
   it('ships the same AgentX-first hierarchy on the Simplified Chinese page', () => {
@@ -67,6 +71,8 @@ describe('Compare precision index page', () => {
       .first()
       .should('have.attr', 'href')
       .and('match', /^\/zh\/compare\/.+\/agentic$/u);
+    cy.get('a[data-scenario] img[src="/logos/nvidia-color.svg"]').should('exist');
+    cy.get('a[data-scenario] img[src="/logos/amd.svg"]').should('exist');
   });
 
   it('renders the /compare-per-dollar index with precision and spec-decode CTA links', () => {

packages/app/public/logos/nvidia-color.svg

@@ -179,6 +179,14 @@ export default async function CompareIndexPage() {
                           label={label}
                           archLine={archLine}
                           scenarioLabel={scenario.label}
+                          hardwareA={{
+                            label: aMeta?.label ?? a.toUpperCase(),
+                            vendor: aMeta?.vendor,
+                          }}
+                          hardwareB={{
+                            label: bMeta?.label ?? b.toUpperCase(),
+                            vendor: bMeta?.vendor,
+                          }}
                         />
                       );
                     })}

packages/app/src/app/compare/page.tsx

@@ -174,6 +174,14 @@ export default async function CompareIndexPageZh() {
                           label={label}
                           archLine={archLine}
                           scenarioLabel={scenario.label}
+                          hardwareA={{
+                            label: aMeta?.label ?? a.toUpperCase(),
+                            vendor: aMeta?.vendor,
+                          }}
+                          hardwareB={{
+                            label: bMeta?.label ?? b.toUpperCase(),
+                            vendor: bMeta?.vendor,
+                          }}
                         />
                       );
                     })}

packages/app/src/app/zh/compare/page.tsx

@@ -4,12 +4,24 @@ import { ArrowRight } from 'lucide-react';
 
 import { track } from '@/lib/analytics';
 
+import { HwVendorLogo } from '@/components/ui/hw-vendor-logo';
+
+/** One side of the "A vs B" pair: display label plus vendor for the logo. */
+interface PairHardware {
+  label: string;
+  vendor?: string;
+}
+
 interface ComparePairCardLinkProps {
   href: string;
   slug: string;
   label: string;
   archLine: string;
   scenarioLabel?: 'AgentX' | '8K→1K';
+  /** When both sides are provided, the title renders each hardware label with
+   *  its vendor logo beside it instead of the plain `label` string. */
+  hardwareA?: PairHardware;
+  hardwareB?: PairHardware;
 }
 
 export function ComparePairCardLink({
@@ -18,6 +30,8 @@ export function ComparePairCardLink({
   label,
   archLine,
   scenarioLabel,
+  hardwareA,
+  hardwareB,
 }: ComparePairCardLinkProps) {
   return (
     <a
@@ -40,7 +54,21 @@ export function ComparePairCardLink({
         <div className="min-w-0 flex-1">
           <div className="flex flex-wrap items-center gap-2">
             <h3 className="font-semibold text-sm leading-tight group-hover:text-brand transition-colors duration-200">
-              {label}
+              {hardwareA && hardwareB ? (
+                <>
+                  <span className="inline-flex items-center gap-1.5">
+                    <HwVendorLogo vendor={hardwareA.vendor} />
+                    {hardwareA.label}
+                  </span>{' '}
+                  <span className="font-normal text-muted-foreground">vs</span>{' '}
+                  <span className="inline-flex items-center gap-1.5">
+                    <HwVendorLogo vendor={hardwareB.vendor} />
+                    {hardwareB.label}
+                  </span>
+                </>
+              ) : (
+                label
+              )}
             </h3>
             {scenarioLabel && (
               <span className="inline-flex min-h-5 items-center rounded-full border border-brand/30 bg-brand/10 px-2 font-mono text-[10px] font-semibold leading-none text-brand">

packages/app/src/components/compare/compare-pair-card-link.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useState } from 'react';
+
+import { isMonochromeLogo } from '@/lib/model-logos';
+import { getHwVendorLogo } from '@/lib/vendor-logos';
+import { cn } from '@/lib/utils';
+
+/**
+ * Small inline hardware-vendor mark, rendered beside a GPU label (e.g. in the
+ * `/compare` pair cards). Resolves the asset via `getHwVendorLogo` and renders
+ * nothing when the vendor has no configured logo or the asset fails to load,
+ * so surrounding text never gains a broken-image box.
+ *
+ * Full-color marks (NVIDIA green) render as-is in both themes; monochrome
+ * marks (AMD — black / reversed-white only per brand guidelines) get the
+ * shared dark-mode invert. The image is decorative — the hardware label is
+ * the adjacent text — so it is hidden from assistive technology.
+ */
+export function HwVendorLogo({ vendor, className }: { vendor?: string; className?: string }) {
+  // Track WHICH asset failed rather than a boolean, mirroring ModelLogo: a
+  // reused instance should not suppress a different vendor's logo after one
+  // load error.
+  const [failedSrc, setFailedSrc] = useState<string | null>(null);
+  const logo = getHwVendorLogo(vendor);
+
+  if (!logo || failedSrc === logo) return null;
+
+  return (
+    <img
+      src={`/logos/${logo}`}
+      alt=""
+      aria-hidden="true"
+      className={cn(
+        // Height-bounded with natural aspect ratio: the NVIDIA eye mark is
+        // square-ish while the AMD lockup is a wide wordmark; max-w keeps the
+        // wordmark from crowding the card title.
+        'inline-block h-4 w-auto max-w-12 shrink-0 object-contain align-text-bottom',
+        isMonochromeLogo(logo) && 'dark:invert',
+        className,
+      )}
+      onError={() => setFailedSrc(logo)}
+    />
+  );
+}

packages/app/src/components/ui/hw-vendor-logo.tsx

@@ -2,9 +2,14 @@
  * Logo files under `public/logos/` whose brand mark is plain black
  * (`currentColor` SVGs): they need a dark-mode invert to stay visible.
  * Full-color logos render as-is in both themes. Shared by every surface that
- * renders model/developer logos (`/model` pages, inference chart captions).
+ * renders model/developer or hardware-vendor logos (`/model` pages, inference
+ * chart captions, `/compare` pair cards).
+ *
+ * `amd.svg` is here because AMD's brand guidelines only permit the standard
+ * black logo or the reversed-out white logo — no color variant exists, so the
+ * dark-mode invert reproduces the official reversed treatment.
  */
-export const MONOCHROME_LOGO_FILES: ReadonlySet<string> = new Set(['openai.svg']);
+export const MONOCHROME_LOGO_FILES: ReadonlySet<string> = new Set(['amd.svg', 'openai.svg']);
 
 /** Whether a logo file needs a dark-mode invert to stay visible. */
 export function isMonochromeLogo(file: string): boolean {

packages/app/src/lib/model-logos.ts

@@ -0,0 +1,21 @@
+/**
+ * Maps `HW_REGISTRY` vendor names to logo files under `public/logos/`.
+ *
+ * NVIDIA uses its official full-color mark (NVIDIA green, #76B900), which is
+ * legible on both themes as-is. AMD's corporate mark is monochrome by design —
+ * the brand guidelines only permit the standard black logo or the reversed-out
+ * white logo (the legacy green-arrow mark is retired), so it relies on the
+ * shared dark-mode invert from `isMonochromeLogo` instead of a color variant.
+ *
+ * Vendors without an entry (e.g. Teacup) simply render no logo — surfaces
+ * treat the vendor mark as optional decoration beside the hardware label.
+ */
+export const HW_VENDOR_LOGOS: Record<string, string> = {
+  NVIDIA: 'nvidia-color.svg',
+  AMD: 'amd.svg',
+};
+
+/** Logo filename under `/logos/` for a hardware vendor, if one exists. */
+export function getHwVendorLogo(vendor: string | undefined): string | undefined {
+  return vendor ? HW_VENDOR_LOGOS[vendor] : undefined;
+}