Fix homepage visuals and mobile navigation (#27)

Author: NicholasKissel

packages/components/src/header/index.tsx

@@ -82,22 +82,24 @@ export function Header({
 										? "text-zinc-900 border-zinc-200 bg-transparent hover:bg-zinc-100 hover:border-zinc-300 hover:text-zinc-900"
 										: "text-white border-white/10 bg-transparent hover:bg-white/5 hover:border-white/20 hover:text-white"
 								)}
+								data-mobile-menu-trigger=""
 							>
 								<Icon icon={faBars} className="size-5" />
 								<span className="sr-only">
 									Toggle navigation menu
 								</span>
 							</Button>
 						</SheetTrigger>
-						<SheetContent side="left" className={cn("overflow-auto p-0 [&>button]:fixed [&>button]:left-[calc(100vw-4rem)] [&>button]:top-4 [&>button]:bg-black/80 [&>button]:backdrop-blur [&>button]:border [&>button]:border-white/10 [&>button]:shadow-lg [&>button]:text-white [&>button]:ring-offset-black [&>button]:focus:ring-white/20 [&>button]:hover:bg-white/5 [&>button]:hover:border-white/20", sheetClassName)}>
-							<nav className="min-h-full text-lg font-medium h-full max-w-full">
+						<SheetContent
+							side="left"
+							aria-label="Navigation menu"
+							className={cn(
+								"overflow-visible p-0 [&>button]:right-3 [&>button]:top-3 [&>button]:inline-flex [&>button]:size-10 [&>button]:items-center [&>button]:justify-center [&>button]:border [&>button]:border-white/10 [&>button]:bg-black/80 [&>button]:text-white [&>button]:shadow-lg [&>button]:backdrop-blur [&>button]:ring-offset-black [&>button]:hover:border-white/20 [&>button]:hover:bg-white/5 [&>button]:focus:ring-white/20",
+								sheetClassName,
+							)}
+						>
+							<nav className="h-full max-w-full overflow-y-auto overscroll-contain text-lg font-medium">
 								<div className="flex flex-col min-h-full">
-									<a
-										href="/"
-										className="hidden"
-									>
-										{logo}
-									</a>
 									<div className="flex flex-1 flex-col px-4 py-4 gap-2">
 										{mobileBreadcrumbs}
 									</div>

src/components/marketing/ProductMotif.tsx

@@ -24,22 +24,33 @@ const workflowLanes = [
 ] as const;
 
 // Both ends run 180 units off-canvas so the pulse dash (0.1 of the path,
-// ~161-169 units) sits fully off-screen at the loop's extremes.
-const workflowLanePath = (offset: number) => {
+// ~161-169 units) sits fully off-screen at the loop's extremes. The card keeps
+// the original turn positions; the hero pushes the turns out to sit inside the
+// wide field's visible center. The pulse dash math in main.css assumes the
+// card geometry, so heroes render rails only (see WorkflowMotif).
+const workflowLanePath = (offset: number, rightX = 262, leftX = 58) => {
   const rightRadius = 38 - offset;
   const leftRadius = 38 + offset;
   return [
     `M -180 ${48 + offset}`,
-    "H 262",
+    `H ${rightX}`,
     `a ${rightRadius} ${rightRadius} 0 0 1 0 ${rightRadius * 2}`,
-    "H 58",
+    `H ${leftX}`,
     `a ${leftRadius} ${leftRadius} 0 0 0 0 ${leftRadius * 2}`,
-    "H 262",
+    `H ${rightX}`,
     `a ${rightRadius} ${rightRadius} 0 0 1 0 ${rightRadius * 2}`,
     "H -180",
   ].join(" ");
 };
 
+// Card motifs draw one 320×400 cluster stretched over the 4/5 plate. Heroes
+// are wide and short, so slicing that same viewBox magnifies the artwork ~4×
+// and the center cut-out mask swallows it — the shapes stop reading as the
+// card imagery. Instead heroes repeat the cluster across a 1600×400 field so
+// the pattern stays at card scale, matching the Actors hero's tiled marks.
+const HERO_FIELD_VIEWBOX = "0 0 1600 400";
+const CARD_VIEWBOX = "0 0 320 400";
+
 const agentOSCircles = [
   { cx: 16, cy: 36, direction: "forward", tone: "bright", delay: 0 },
   { cx: 96, cy: 108, direction: "backward", tone: "soft", delay: 0 },
@@ -253,7 +264,7 @@ const containerClassName = (
 const WorkflowMotif = ({ surface }: Pick<ProductMotifProps, "surface">) => (
   <svg
     className="h-full w-full"
-    viewBox="0 0 320 400"
+    viewBox={surface === "hero" ? HERO_FIELD_VIEWBOX : CARD_VIEWBOX}
     preserveAspectRatio={surface === "hero" ? "xMidYMid slice" : "none"}
   >
     {workflowLanes.map((lane) => (
@@ -268,16 +279,22 @@ const WorkflowMotif = ({ surface }: Pick<ProductMotifProps, "surface">) => (
       >
         <path
           className={`workflow-rail workflow-rail--${lane.tone}`}
-          d={workflowLanePath(lane.offset)}
-          pathLength="1"
-          vectorEffect="non-scaling-stroke"
-        />
-        <path
-          className={`workflow-pulse workflow-pulse--${lane.lane}`}
-          d={workflowLanePath(lane.offset)}
+          d={
+            surface === "hero"
+              ? workflowLanePath(lane.offset, 1150, 450)
+              : workflowLanePath(lane.offset)
+          }
           pathLength="1"
           vectorEffect="non-scaling-stroke"
         />
+        {surface === "card" && (
+          <path
+            className={`workflow-pulse workflow-pulse--${lane.lane}`}
+            d={workflowLanePath(lane.offset)}
+            pathLength="1"
+            vectorEffect="non-scaling-stroke"
+          />
+        )}
       </g>
     ))}
   </svg>
@@ -322,48 +339,68 @@ const LifeRect = ({
   />
 );
 
+// Hero copies sit 13 columns apart: a three-column dead gap between 10-column
+// boards, so the frozen generation-0 frames never read as one merged board.
+const DYNAMIC_APPS_HERO_COLUMNS = [0, 13, 26, 39] as const;
+
 const DynamicAppsMotif = ({ surface }: Pick<ProductMotifProps, "surface">) => (
   <svg
     className="h-full w-full"
-    viewBox="0 0 320 400"
+    viewBox={surface === "hero" ? HERO_FIELD_VIEWBOX : CARD_VIEWBOX}
     preserveAspectRatio={surface === "hero" ? "xMidYMid slice" : "none"}
   >
-    {lifeBoardCells.map((cell) => (
-      <LifeRect key={`${cell.col}-${cell.row}`} cell={cell} />
+    {(surface === "hero" ? DYNAMIC_APPS_HERO_COLUMNS : [0]).map((colShift) => (
+      <g key={colShift}>
+        {lifeBoardCells.map((cell) => (
+          <LifeRect
+            key={`${cell.col}-${cell.row}`}
+            cell={cell}
+            colOffset={colShift}
+          />
+        ))}
+        <g className="dynamic-app-glider">
+          {gliderCells.map((cell) => (
+            <LifeRect
+              key={`glider-${cell.col}-${cell.row}`}
+              cell={cell}
+              colOffset={GLIDER_ORIGIN.col + colShift}
+              rowOffset={GLIDER_ORIGIN.row}
+            />
+          ))}
+        </g>
+      </g>
     ))}
-    <g className="dynamic-app-glider">
-      {gliderCells.map((cell) => (
-        <LifeRect
-          key={`glider-${cell.col}-${cell.row}`}
-          cell={cell}
-          colOffset={GLIDER_ORIGIN.col}
-          rowOffset={GLIDER_ORIGIN.row}
-        />
-      ))}
-    </g>
   </svg>
 );
 
+// The circle lattice is periodic at 320 in x (80/72 staggered grid), so
+// hero copies at 320-unit steps continue the cluster seamlessly.
+const AGENTOS_HERO_COLUMNS = [0, 320, 640, 960, 1280] as const;
+
 const AgentOSMotif = ({ surface }: Pick<ProductMotifProps, "surface">) => (
   <svg
     className="h-full w-full"
-    viewBox="0 0 320 400"
+    viewBox={surface === "hero" ? HERO_FIELD_VIEWBOX : CARD_VIEWBOX}
     preserveAspectRatio={surface === "hero" ? "xMidYMid slice" : "none"}
   >
-    {agentOSCircles.map((circle) => (
-      <circle
-        key={`${circle.cx}-${circle.cy}`}
-        className={`agentos-circle agentos-circle--${circle.direction} agentos-circle--${circle.tone}`}
-        style={
-          {
-            "--agentos-circle-delay": `${circle.delay}ms`,
-          } as CSSProperties
-        }
-        cx={circle.cx}
-        cy={circle.cy}
-        r="62"
-        vectorEffect="non-scaling-stroke"
-      />
+    {(surface === "hero" ? AGENTOS_HERO_COLUMNS : [0]).map((xShift) => (
+      <g key={xShift}>
+        {agentOSCircles.map((circle) => (
+          <circle
+            key={`${circle.cx}-${circle.cy}`}
+            className={`agentos-circle agentos-circle--${circle.direction} agentos-circle--${circle.tone}`}
+            style={
+              {
+                "--agentos-circle-delay": `${circle.delay}ms`,
+              } as CSSProperties
+            }
+            cx={circle.cx + xShift}
+            cy={circle.cy}
+            r="62"
+            vectorEffect="non-scaling-stroke"
+          />
+        ))}
+      </g>
     ))}
   </svg>
 );