From 230d73ddd7859e7086dcc3f2d371bfdad4f87fec Mon Sep 17 00:00:00 2001
From: enixCode <58286681+enixCode@users.noreply.github.com>
Date: Wed, 3 Jun 2026 00:17:20 +0200
Subject: [PATCH] feat(website): animated DAG as the landing hero

Replace the static banner.webp hero with DagHero, a wider cut of the workflow
graph (ingest fans out to transform/validate, both feed score, which routes to
report/store) tuned to fill the shared landing's 16/5 hero-banner box. Pure CSS
animation, no client JS, safe across the RSC boundary and in static export.

- DagHero: bare SVG (no frame of its own, the landing supplies corners, the
  bottom gradient and the caption), shared design tokens with the docs diagrams.
- diagrams.module.css: hoist the token block to a shared .figure/.heroFill
  selector, add .heroFill/.heroSvg sizing.
- data.tsx: hero banner now carries node: <DagHero /> instead of src.
- bump the light-landing-page lockfile pin to the commit that added the
  optional banner node prop.

build with cc
---
 website/package-lock.json                     |   2 +-
 website/src/app/(home)/data.tsx               |   8 +-
 website/src/components/diagrams/DagHero.tsx   | 110 ++++++++++++++++++
 .../components/diagrams/diagrams.module.css   |  19 ++-
 website/src/components/diagrams/index.ts      |   1 +
 5 files changed, 134 insertions(+), 6 deletions(-)
 create mode 100644 website/src/components/diagrams/DagHero.tsx

diff --git a/website/package-lock.json b/website/package-lock.json
index 5a390ab..d364b71 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -7463,7 +7463,7 @@
     },
     "node_modules/light-landing-page": {
       "version": "0.1.0",
-      "resolved": "git+ssh://git@github.com/enixCode/light-landing-page.git#62deeb09f0bb8e28d6f046c7db1bb4b63ed71564",
+      "resolved": "git+ssh://git@github.com/enixCode/light-landing-page.git#36425324e917edc8b9586a3e5bd1a2f9e90a2948",
       "license": "MIT",
       "peerDependencies": {
         "react": ">=18",
diff --git a/website/src/app/(home)/data.tsx b/website/src/app/(home)/data.tsx
index 62b9122..ae19d24 100644
--- a/website/src/app/(home)/data.tsx
+++ b/website/src/app/(home)/data.tsx
@@ -1,4 +1,5 @@
 import type { LandingData } from 'light-landing-page';
+import { DagHero } from '@/components/diagrams';
 
 const BASE = '/light-process';
 
@@ -45,10 +46,9 @@ export const lightProcessData: LandingData = {
       { k: 'License', v: <>AGPL-3.0 <span className="sub">copyleft</span></> },
     ],
     banner: {
-      src: `${BASE}/banner.webp`,
-      alt: 'Several glowing spheres linked by light into a directed graph above an isolated dark grid, the visual metaphor for a container DAG.',
-      captionLeft: 'Fig. 01 - Many cells, one graph, one grid.',
-      captionRight: 'light-process / visual',
+      node: <DagHero />,
+      captionLeft: 'Fig. 01 - ingest fans out; score routes the result.',
+      captionRight: 'light-process / graph',
     },
   },
   primitives: {
diff --git a/website/src/components/diagrams/DagHero.tsx b/website/src/components/diagrams/DagHero.tsx
new file mode 100644
index 0000000..d3bd8d3
--- /dev/null
+++ b/website/src/components/diagrams/DagHero.tsx
@@ -0,0 +1,110 @@
+import styles from './diagrams.module.css';
+
+/*
+ * The landing hero: a wider, cinematic cut of the DAG, tuned to fill the
+ * shared landing's 16/5 hero-banner box (viewBox ratio matches exactly). It
+ * carries no frame of its own - the landing supplies the corners, the bottom
+ * gradient and the caption. Pure CSS animation, no client JS, so it survives
+ * static export and is safe to pass across the RSC boundary. Same visual
+ * language as the docs diagrams; this is the flagship instance.
+ */
+
+type NodeDef = {
+  id: string;
+  x: number;
+  y: number;
+  label: string;
+  sub: string;
+  pulse: string;
+};
+
+const W = 150;
+const H = 52;
+
+const NODES: NodeDef[] = [
+  { id: 'ingest', x: 48, y: 124, label: 'ingest', sub: 'node:24', pulse: 'pulse' },
+  { id: 'transform', x: 280, y: 62, label: 'transform', sub: 'python', pulse: 'pulseB' },
+  { id: 'validate', x: 280, y: 186, label: 'validate', sub: 'node:24', pulse: 'pulseC' },
+  { id: 'score', x: 512, y: 124, label: 'score', sub: 'python', pulse: 'pulseB' },
+  { id: 'report', x: 744, y: 62, label: 'report', sub: 'node:24', pulse: 'pulse' },
+  { id: 'store', x: 744, y: 186, label: 'store', sub: 'python', pulse: 'pulseC' },
+];
+
+function center(n: NodeDef) {
+  return { cx: n.x + W / 2, cy: n.y + H / 2 };
+}
+
+export function DagHero() {
+  const byId = Object.fromEntries(NODES.map((n) => [n.id, n]));
+  const edge = (from: string, to: string) => {
+    const a = center(byId[from]);
+    const b = center(byId[to]);
+    const x1 = byId[from].x + W;
+    const y1 = a.cy;
+    const x2 = byId[to].x;
+    const y2 = b.cy;
+    const mx = (x1 + x2) / 2;
+    return `M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`;
+  };
+
+  const EDGES: [string, string][] = [
+    ['ingest', 'transform'],
+    ['ingest', 'validate'],
+    ['transform', 'score'],
+    ['validate', 'score'],
+    ['score', 'report'],
+    ['score', 'store'],
+  ];
+
+  return (
+    <div className={styles.heroFill}>
+      <svg
+        className={styles.heroSvg}
+        viewBox="0 0 960 300"
+        preserveAspectRatio="xMidYMid meet"
+        role="img"
+        aria-label="A directed graph of containers: ingest fans out to transform and validate, both feed score, which routes to report and store."
+      >
+        <defs>
+          <marker id="hero-arrow" viewBox="0 0 8 8" refX="6.5" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+            <path className={styles.arrowLive} d="M0 0 L8 4 L0 8 z" />
+          </marker>
+        </defs>
+
+        {EDGES.map(([from, to]) => (
+          <g key={`${from}-${to}`}>
+            <path className={styles.edge} d={edge(from, to)} markerEnd="url(#hero-arrow)" />
+            <path className={styles.edgeLive} d={edge(from, to)} />
+          </g>
+        ))}
+
+        {/* a couple of condition tags, kept sparse for the hero */}
+        <text className={styles.tag} x={232} y={96}>
+          when ok:true
+        </text>
+        <text className={styles.tag} x={604} y={92}>
+          score &gt; 0.8
+        </text>
+
+        {NODES.map((n) => (
+          <g key={n.id}>
+            <rect
+              className={`${styles.node} ${styles[n.pulse]}`}
+              x={n.x}
+              y={n.y}
+              width={W}
+              height={H}
+              rx={3}
+            />
+            <text className={styles.label} x={n.x + 18} y={n.y + 24}>
+              {n.label}
+            </text>
+            <text className={styles.sub} x={n.x + 18} y={n.y + 41}>
+              {n.sub}
+            </text>
+          </g>
+        ))}
+      </svg>
+    </div>
+  );
+}
diff --git a/website/src/components/diagrams/diagrams.module.css b/website/src/components/diagrams/diagrams.module.css
index 0101819..b9e396a 100644
--- a/website/src/components/diagrams/diagrams.module.css
+++ b/website/src/components/diagrams/diagrams.module.css
@@ -7,7 +7,8 @@
  * the landing CSS variables are not in scope inside the docs.
  */
 
-.figure {
+.figure,
+.heroFill {
   --d-ink: #050608;
   --d-ink-2: #0a0c10;
   --d-line: #1a1d24;
@@ -19,7 +20,9 @@
   --d-halo-soft: #7fddff;
   --d-amber: #ffb855;
   --d-ember: #ff6b35;
+}
 
+.figure {
   position: relative;
   margin: 1.75rem 0;
   padding: 1.4rem 1.4rem 1rem;
@@ -62,6 +65,20 @@
   height: auto;
 }
 
+/* Hero variant: fills the landing's hero-banner box (16/5). It carries no
+   chrome of its own - the landing supplies the frame, corner brackets, bottom
+   gradient and caption. Tokens come from the shared .figure/.heroFill block. */
+.heroFill {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.heroSvg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .caption {
   margin-top: 0.9rem;
   display: flex;
diff --git a/website/src/components/diagrams/index.ts b/website/src/components/diagrams/index.ts
index a6ad7d3..87fa3b0 100644
--- a/website/src/components/diagrams/index.ts
+++ b/website/src/components/diagrams/index.ts
@@ -1,3 +1,4 @@
 export { Architecture } from './Architecture';
 export { Dag } from './Dag';
+export { DagHero } from './DagHero';
 export { NetworkServices } from './NetworkServices';