refactor(website): the adapter and agent rows read as a banded feature list

Each capability line sits in its own soft band with a left accent bar,
white-on-tint inside the first-class LangGraph lane and grey elsewhere,
so the lines read as a list rather than loose paragraph text. The phone
stack mirrors the same treatment from the same data.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: blove

apps/website/src/components/landing/EnterpriseArchitecture.tsx

@@ -162,6 +162,41 @@ function CardRows({ card }: { card: Card }) {
                 </text>
               </g>
             );
+          case 'items':
+            return (
+              <g
+                key={i}
+                className="arch-items"
+                data-tone={card.highlight ? 'tp' : 'plain'}
+              >
+                {row.items.map((item, j) => {
+                  const y = row.y + j * row.step;
+                  return (
+                    <g key={item}>
+                      <rect
+                        className="arch-item-band"
+                        x={card.x + 12}
+                        y={y - 18}
+                        width={card.width - 24}
+                        height={26}
+                        rx={8}
+                      />
+                      <rect
+                        className="arch-item-bar"
+                        x={card.x + 12}
+                        y={y - 14}
+                        width={3}
+                        height={18}
+                        rx={1.5}
+                      />
+                      <text className="arch-body" x={card.x + CARD_PAD} y={y}>
+                        {item}
+                      </text>
+                    </g>
+                  );
+                })}
+              </g>
+            );
           case 'marks':
             return (
               <g key={i}>
@@ -379,6 +414,7 @@ function ArchitectureStack() {
         const caps = c.rows.find((r) => r.kind === 'caps');
         const marks = c.rows.find((r) => r.kind === 'marks');
         const texts = c.rows.filter((r) => r.kind === 'text');
+        const items = c.rows.find((r) => r.kind === 'items');
         const mono = c.rows.find((r) => r.kind === 'mono');
         const badges = c.rows.filter((r) => r.kind === 'badge');
         return (
@@ -409,6 +445,13 @@ function ArchitectureStack() {
                   )}
                 </ul>
               ) : null}
+              {items && items.kind === 'items' ? (
+                <ul className="arch-stack-items">
+                  {items.items.map((item) => (
+                    <li key={item}>{item}</li>
+                  ))}
+                </ul>
+              ) : null}
               {caps && caps.kind === 'caps' ? (
                 <ul className="arch-stack-caps">
                   {caps.caps.map((cap) => (

apps/website/src/lib/architecture-diagram.spec.ts

@@ -119,6 +119,13 @@ describe('architecture diagram geometry', () => {
             c.y + c.height - 12
           );
         }
+        if (r.kind === 'items') {
+          const last = r.y + (r.items.length - 1) * r.step;
+          expect(r.y - 18, `${c.id} items top`).toBeGreaterThan(c.y + 40);
+          expect(last + 8, `${c.id} items bottom`).toBeLessThanOrEqual(
+            c.y + c.height - 8
+          );
+        }
         if (r.kind === 'caps') {
           expect(r.y + r.caps.length * 40).toBeLessThanOrEqual(
             c.y + c.height - 24

apps/website/src/lib/architecture-diagram.ts

@@ -88,6 +88,14 @@ export type Row =
       readonly mark: LogoKey;
       readonly label: string;
     }
+  /** A banded list: one row per item, each with a left accent bar. */
+  | {
+      readonly kind: 'items';
+      readonly y: number;
+      readonly items: readonly string[];
+      /** Vertical pitch between rows. */
+      readonly step: number;
+    }
   /** A row of mark badges with no labels. */
   | {
       readonly kind: 'marks';
@@ -216,9 +224,16 @@ export const CARDS: readonly Card[] = [
     tag: 'FIRST-CLASS',
     highlight: true,
     rows: [
-      { kind: 'text', y: 212, text: 'checkpoints · interrupts' },
-      { kind: 'text', y: 240, text: 'time travel · memory' },
-      { kind: 'text', y: 268, text: 'subgraphs · durable runs' },
+      {
+        kind: 'items',
+        y: 212,
+        step: 32,
+        items: [
+          'checkpoints · interrupts',
+          'time travel · memory',
+          'subgraphs · durable runs',
+        ],
+      },
     ],
   },
   {
@@ -231,7 +246,9 @@ export const CARDS: readonly Card[] = [
     title2: 'protocol',
     href: '/docs/ag-ui/getting-started/introduction',
     mark: 'agui',
-    rows: [{ kind: 'text', y: 460, text: 'events · tools · state' }],
+    rows: [
+      { kind: 'items', y: 460, step: 32, items: ['events · tools · state'] },
+    ],
   },
   {
     id: 'langsmith',
@@ -243,9 +260,12 @@ export const CARDS: readonly Card[] = [
     href: '/docs/langgraph/guides/deployment',
     mark: 'langchain',
     rows: [
-      { kind: 'text', y: 172, text: 'deploy · observe' },
-      { kind: 'text', y: 212, text: 'traces · evals' },
-      { kind: 'text', y: 240, text: 'or self-hosted' },
+      {
+        kind: 'items',
+        y: 200,
+        step: 32,
+        items: ['deploy · observe', 'traces · evals', 'or self-hosted'],
+      },
     ],
   },
   {
@@ -264,7 +284,12 @@ export const CARDS: readonly Card[] = [
         size: 30,
         step: 34,
       },
-      { kind: 'text', y: 468, text: 'CrewAI · Mastra · Microsoft' },
+      {
+        kind: 'items',
+        y: 468,
+        step: 32,
+        items: ['CrewAI · Mastra · Microsoft'],
+      },
     ],
   },
 ];

apps/website/src/styles/landing.css

@@ -1773,6 +1773,40 @@
   font-weight: 500;
   fill: #2a2f3a;
 }
+/* Adapter and agent capability rows: a banded list with a left accent, so
+ * the lines read as a feature list rather than loose paragraph text. */
+.arch-figure .arch-item-band {
+  fill: #f2f5f8;
+}
+.arch-figure .arch-item-bar {
+  fill: #c2cad6;
+}
+.arch-figure .arch-items[data-tone='tp'] .arch-item-band {
+  fill: rgba(255, 255, 255, 0.75);
+}
+.arch-figure .arch-items[data-tone='tp'] .arch-item-bar {
+  fill: #2f5fa8;
+}
+.arch-stack-items {
+  list-style: none;
+  margin: 10px 0 0;
+  padding: 0;
+  display: grid;
+  gap: 6px;
+  font-family: var(--font-inter);
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+.arch-stack-items li {
+  background: #f2f5f8;
+  border-left: 3px solid #c2cad6;
+  border-radius: 8px;
+  padding: 6px 10px;
+}
+.arch-stack-card[data-highlight] .arch-stack-items li {
+  background: rgba(255, 255, 255, 0.75);
+  border-left-color: #2f5fa8;
+}
 .arch-figure .arch-badge rect {
   fill: #fff;
   stroke: #e2e6ec;