@rizom/site-rizom-ai 0.2.0-alpha.166 → 0.2.0-alpha.167

package/src/brain.tsx

@@ -0,0 +1,418 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import type { SiteSectionGroup } from "@rizom/site";
+import { defineSection, sectionGroup, z } from "@rizom/site-sections";
+import { Section, renderHighlightedText } from "@rizom/site-rizom";
+import {
+  Band,
+  CtaRow,
+  SectCap,
+  Trio,
+  trioSchema,
+  ctaSchema,
+  ROOM_HIGHLIGHT_CLS,
+} from "./shared";
+import {
+  BrainScreenStyles,
+  StudioScreen,
+  ChatScreen,
+  IntegrationsScreen,
+  DashboardScreen,
+} from "./brain-screens";
+
+/**
+ * The /brain room — the product's own page. The consolidated homepage grew
+ * two pages long because it told the umbrella story and the product story at
+ * once; the product story lives here, told as the brain's life with its owner
+ * in four chapters — capture, ask, see it run, connect — each illustrated by a
+ * real interface screen, then the data principles and the quickstart.
+ *
+ * The namespace ("brain") matches the route id, so each section stores as
+ * site-content/brain/<section>.md and resolves as "brain:<section>".
+ */
+
+/* ============ chapter heading ============ */
+
+/* The shared chapter head: a numbered cap, a display headline with an accent
+   em, and a standfirst. Used by every chapter so the copy stays authored. */
+function ChapterHead({
+  cap,
+  capNote,
+  headline,
+  intro,
+}: {
+  cap: string;
+  capNote?: string | undefined;
+  headline: string;
+  intro: string;
+}): JSX.Element {
+  return (
+    <>
+      <SectCap lead={cap} trail={capNote} />
+      <h2 className="reveal reveal-delay-1 mt-3.5 max-w-[20em] font-display text-[clamp(28px,3vw,40px)] font-[465] leading-[1.1] tracking-[-0.014em] text-theme [font-variation-settings:'SOFT'_78,'opsz'_84]">
+        {renderHighlightedText(headline, ROOM_HIGHLIGHT_CLS)}
+      </h2>
+      <p className="reveal reveal-delay-2 mt-4 max-w-[62ch] font-body text-[17px] leading-[1.7] text-theme-muted">
+        {intro}
+      </p>
+    </>
+  );
+}
+
+/* ============ hero ============ */
+
+const heroSchema = z.object({
+  eyebrow: z.string(),
+  provenance: z.string(),
+  headline: z.string(),
+  standfirst: z.string(),
+  primaryCta: ctaSchema,
+  secondaryCta: ctaSchema,
+  chips: z.array(z.string()),
+});
+
+function BrainHeroSection({
+  eyebrow,
+  provenance,
+  headline,
+  standfirst,
+  primaryCta,
+  secondaryCta,
+  chips,
+}: z.infer<typeof heroSchema>): JSX.Element {
+  return (
+    <Section
+      id="brain-hero"
+      className="relative overflow-hidden pt-16 pb-8 md:pt-20"
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -inset-x-[10%] -inset-y-[30%] bg-[radial-gradient(680px_360px_at_14%_8%,rgb(from_var(--color-accent)_r_g_b_/_0.14),transparent_66%)]"
+      />
+      <div className="relative">
+        <SectCap lead={eyebrow} trail={provenance} />
+        <h1 className="mt-[18px] max-w-[15.5em] font-display text-[clamp(36px,4.8vw,64px)] font-[448] leading-[1.04] tracking-[-0.02em] text-theme [font-variation-settings:'SOFT'_88,'opsz'_110]">
+          {renderHighlightedText(headline, ROOM_HIGHLIGHT_CLS)}
+        </h1>
+        <p className="mt-4 max-w-[52ch] font-body text-[20px] leading-[1.7] text-theme-muted">
+          {standfirst}
+        </p>
+        <CtaRow
+          primaryCta={primaryCta}
+          secondaryCta={secondaryCta}
+          className="mt-[26px]"
+        />
+        <div className="mt-9 flex flex-wrap gap-2.5">
+          {chips.map((chip) => (
+            <span
+              key={chip}
+              className="rounded-full border border-theme px-[13px] py-1.5 font-label text-[10.5px] tracking-[0.06em] text-theme-light"
+            >
+              {chip}
+            </span>
+          ))}
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+/* ============ shared authored checklist ============ */
+
+function Checks({ items }: { items: string[] }): JSX.Element {
+  return (
+    <ul className="mt-[18px] max-w-[40ch] font-body text-[15.5px] text-theme-light">
+      {items.map((item) => (
+        <li
+          key={item}
+          className="flex gap-2.5 border-b border-theme-light py-[7px]"
+        >
+          <span aria-hidden="true" className="font-label text-secondary">
+            ✓
+          </span>
+          {item}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+/* ============ 01 · capture — the studio ============ */
+
+const captureSchema = z.object({
+  cap: z.string(),
+  capNote: z.string().optional(),
+  headline: z.string(),
+  intro: z.string(),
+  checks: z.array(z.string()),
+});
+
+function BrainCaptureSection({
+  cap,
+  capNote,
+  headline,
+  intro,
+  checks,
+}: z.infer<typeof captureSchema>): JSX.Element {
+  return (
+    <Section id="capture" className="py-14">
+      {/* Screen styles are global; emitted once here, the first screen chapter. */}
+      <BrainScreenStyles />
+      <SectCap lead={cap} trail={capNote} />
+      <div className="mt-4 grid items-center gap-11 lg:grid-cols-[4fr_8fr]">
+        <div>
+          <h2 className="reveal reveal-delay-1 font-display text-[clamp(26px,2.6vw,34px)] font-[465] leading-[1.12] tracking-[-0.012em] text-theme [font-variation-settings:'SOFT'_78,'opsz'_84]">
+            {renderHighlightedText(headline, ROOM_HIGHLIGHT_CLS)}
+          </h2>
+          <p className="reveal reveal-delay-2 mt-4 font-body text-[16.5px] leading-[1.7] text-theme-muted">
+            {intro}
+          </p>
+          <Checks items={checks} />
+        </div>
+        <div className="reveal reveal-delay-2">
+          <StudioScreen />
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+/* ============ 02 · ask — the chat and its integrations ============ */
+
+const askSchema = z.object({
+  cap: z.string(),
+  capNote: z.string().optional(),
+  headline: z.string(),
+  intro: z.string(),
+});
+
+function BrainAskSection({
+  cap,
+  capNote,
+  headline,
+  intro,
+}: z.infer<typeof askSchema>): JSX.Element {
+  return (
+    <Section id="ask" className="py-14">
+      <ChapterHead
+        cap={cap}
+        capNote={capNote}
+        headline={headline}
+        intro={intro}
+      />
+      <div className="mt-7 grid items-start gap-6 lg:grid-cols-[1.12fr_1fr]">
+        <div className="reveal reveal-delay-1">
+          <ChatScreen />
+        </div>
+        <div className="reveal reveal-delay-2">
+          <IntegrationsScreen />
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+/* ============ 03 · see it run — the dashboard ============ */
+
+const runSchema = z.object({
+  cap: z.string(),
+  capNote: z.string().optional(),
+  headline: z.string(),
+  intro: z.string(),
+  note: z.string(),
+});
+
+function BrainRunSection({
+  cap,
+  capNote,
+  headline,
+  intro,
+  note,
+}: z.infer<typeof runSchema>): JSX.Element {
+  return (
+    <Section id="run" className="py-14">
+      <ChapterHead
+        cap={cap}
+        capNote={capNote}
+        headline={headline}
+        intro={intro}
+      />
+      <div className="reveal reveal-delay-1 mt-7 max-w-[1120px]">
+        <DashboardScreen />
+      </div>
+      <p className="reveal reveal-delay-2 mt-5 max-w-[52em] font-display text-[17px] font-normal italic text-theme-light [font-variation-settings:'SOFT'_85]">
+        {renderHighlightedText(note, "font-medium not-italic text-theme-muted")}
+      </p>
+    </Section>
+  );
+}
+
+/* ============ 04 · connect — back to the map ============ */
+
+const connectSchema = z.object({
+  cap: z.string(),
+  capNote: z.string().optional(),
+  headline: z.string(),
+  intro: z.string(),
+  cta: ctaSchema,
+});
+
+function BrainConnectSection({
+  cap,
+  capNote,
+  headline,
+  intro,
+  cta,
+}: z.infer<typeof connectSchema>): JSX.Element {
+  return (
+    <Section id="connect" className="py-14">
+      <ChapterHead
+        cap={cap}
+        capNote={capNote}
+        headline={headline}
+        intro={intro}
+      />
+      <div className="reveal reveal-delay-2 mt-6">
+        <a
+          href={cta.href}
+          className="font-body text-[15.5px] text-theme-light no-underline transition-colors hover:text-accent"
+        >
+          {cta.label}
+        </a>
+      </div>
+    </Section>
+  );
+}
+
+/* ============ your data, your rules ============ */
+
+function BrainYourDataSection({
+  cap,
+  items,
+}: z.infer<typeof trioSchema>): JSX.Element {
+  return (
+    <Section id="your-data" className="py-14">
+      <SectCap lead={cap} />
+      <Trio items={items} mono={true} />
+    </Section>
+  );
+}
+
+/* ============ quickstart ============ */
+
+const termLineSchema = z.object({
+  kind: z.enum(["comment", "command", "ok"]),
+  text: z.string(),
+});
+
+const quickstartSchema = z.object({
+  cap: z.string(),
+  capNote: z.string(),
+  lines: z.array(termLineSchema),
+  checks: z.array(z.string()),
+});
+
+type TermLine = z.infer<typeof termLineSchema>;
+
+function termLineClass(kind: TermLine["kind"]): string {
+  switch (kind) {
+    case "comment":
+      return "text-theme-light opacity-70";
+    case "ok":
+      return "text-secondary";
+    case "command":
+      return "text-theme";
+  }
+}
+
+function BrainQuickstartSection({
+  cap,
+  capNote,
+  lines,
+  checks,
+}: z.infer<typeof quickstartSchema>): JSX.Element {
+  return (
+    <Section id="quickstart" className="py-14">
+      <SectCap lead={cap} trail={capNote} />
+      <div className="mt-7 grid max-w-[1000px] items-start gap-12 md:grid-cols-[1.15fr_1fr]">
+        <div className="reveal reveal-delay-1 border border-theme bg-theme-subtle/60 px-6 py-5 font-label text-[14px] leading-[1.9]">
+          {lines.map((line, i) => (
+            <div key={i} className={termLineClass(line.kind)}>
+              {line.kind === "command" && (
+                <span className="select-none text-accent">$ </span>
+              )}
+              {line.text}
+            </div>
+          ))}
+        </div>
+        <Checks items={checks} />
+      </div>
+    </Section>
+  );
+}
+
+/* ============ closing band ============ */
+
+const closeSchema = z.object({
+  quote: z.string(),
+  sub: z.string(),
+  primaryCta: ctaSchema,
+  secondaryCta: ctaSchema,
+});
+
+function BrainCloseSection({
+  quote,
+  sub,
+  primaryCta,
+  secondaryCta,
+}: z.infer<typeof closeSchema>): JSX.Element {
+  return (
+    <Band quote={quote}>
+      <p className="reveal reveal-delay-1 mt-[18px] max-w-[52ch] font-body text-[17px] text-theme-light">
+        {sub}
+      </p>
+      <CtaRow
+        primaryCta={primaryCta}
+        secondaryCta={secondaryCta}
+        className="reveal reveal-delay-2 mt-[26px]"
+      />
+    </Band>
+  );
+}
+
+/* ============ the brain section group ============ */
+
+export const brainSections: SiteSectionGroup = sectionGroup("brain", {
+  hero: defineSection(heroSchema, BrainHeroSection, {
+    title: "Hero",
+    description: "Product hero — build the agent that represents you",
+  }),
+  capture: defineSection(captureSchema, BrainCaptureSection, {
+    title: "Capture",
+    description: "01 · Capture — markdown corpus, illustrated by the studio",
+  }),
+  ask: defineSection(askSchema, BrainAskSection, {
+    title: "Ask",
+    description: "02 · Ask — chat + Discord, Claude/MCP, terminal",
+  }),
+  run: defineSection(runSchema, BrainRunSection, {
+    title: "See It Run",
+    description: "03 · See it run — the dashboard overview",
+  }),
+  connect: defineSection(connectSchema, BrainConnectSection, {
+    title: "Connect",
+    description: "04 · Connect — takes your seat in the network (the map)",
+  }),
+  "your-data": defineSection(trioSchema, BrainYourDataSection, {
+    title: "Your Data",
+    description: "Your data, your rules — ownership trio (mono markers)",
+  }),
+  quickstart: defineSection(quickstartSchema, BrainQuickstartSection, {
+    title: "Quickstart",
+    description: "Three-command quickstart terminal with a checklist",
+  }),
+  close: defineSection(closeSchema, BrainCloseSection, {
+    title: "Close",
+    description: "Closing band — own the intelligence you already have",
+  }),
+});

package/src/home.tsx

@@ -9,67 +9,23 @@ import {
   CtaRow,
   AliveLine,
   SectCap,
+  Trio,
+  trioSchema,
   ctaSchema,
   delayClass,
-  HIGHLIGHT_CLS,
 } from "./shared";
 
 /**
- * The platform home page — today's rizom.ai tightened (hero → growth diagram
- * → problem → your-data → quickstart → mission band → faces → living-proof
- * colophon). Each section is authored from one zod schema (its component's
- * props are `z.infer` of that schema); copy is content-driven, stored as
- * markdown in site-content/home/<section>.md. Only the assembled section group
- * is exported — the schemas and components are module-local.
+ * The umbrella home page. The hero is the live agent proximity map (wired in
+ * routes.ts as agent-discovery:proximity-map); the sections here tell the
+ * story the map opens — the dark it fights (problem), how the network grows
+ * (growth), the mission band, the three faces, and the living-proof colophon.
+ * Each section is authored from one zod schema (its component's props are
+ * `z.infer` of that schema); copy is content-driven, stored as markdown in
+ * site-content/home/<section>.md. Only the assembled section group is
+ * exported — the schemas and components are module-local.
  */
 
-/* ============ hero ============ */
-
-const heroSchema = z.object({
-  kicker: z.string(),
-  headline: z.string(),
-  standfirst: z.string(),
-  primaryCta: ctaSchema,
-  secondaryCta: ctaSchema,
-});
-
-function HomeHeroSection({
-  kicker,
-  headline,
-  standfirst,
-  primaryCta,
-  secondaryCta,
-}: z.infer<typeof heroSchema>): JSX.Element {
-  return (
-    <Section
-      id="hero"
-      className="relative overflow-hidden pt-[84px] pb-[72px] md:pt-[110px]"
-    >
-      <div
-        aria-hidden="true"
-        className="pointer-events-none absolute -inset-x-[15%] -inset-y-[35%] bg-[radial-gradient(760px_400px_at_16%_4%,var(--color-wash-a),transparent_64%),radial-gradient(560px_340px_at_92%_90%,var(--color-wash-b),transparent_70%)]"
-      />
-      <div className="relative">
-        <p className="animate-hero-rise font-label text-label-sm uppercase tracking-[0.22em] text-accent opacity-0">
-          {kicker}
-        </p>
-        <h1 className="mt-5 max-w-[10.5em] animate-hero-rise font-display text-[clamp(50px,6.4vw,96px)] font-[435] leading-[0.99] tracking-[-0.022em] text-theme opacity-0 [animation-delay:0.12s] [font-variation-settings:'SOFT'_92,'opsz'_130]">
-          {renderHighlightedText(headline, HIGHLIGHT_CLS)}
-        </h1>
-        <div className="mt-9 flex animate-hero-rise flex-col items-start gap-[22px] opacity-0 [animation-delay:0.26s] lg:flex-row lg:items-baseline lg:gap-[60px]">
-          <p className="max-w-[42ch] font-body text-[21px] leading-[1.7] text-theme-muted">
-            {renderHighlightedText(
-              standfirst,
-              "font-medium not-italic text-theme",
-            )}
-          </p>
-          <CtaRow primaryCta={primaryCta} secondaryCta={secondaryCta} />
-        </div>
-      </div>
-    </Section>
-  );
-}
-
 /* ============ growth diagram ============ */
 
 const growthSchema = z.object({
@@ -94,52 +50,7 @@ function HomeGrowthSection({
   );
 }
 
-/* ============ trios: problem + your-data ============ */
-
-const trioItemSchema = z.object({
-  marker: z.string(),
-  title: z.string(),
-  text: z.string(),
-});
-
-const trioSchema = z.object({
-  cap: z.string(),
-  items: z.array(trioItemSchema),
-});
-
-type TrioItem = z.infer<typeof trioItemSchema>;
-
-function Trio({
-  items,
-  mono,
-}: {
-  items: TrioItem[];
-  mono: boolean;
-}): JSX.Element {
-  return (
-    <div className="mt-[30px] grid max-w-[1040px] gap-11 md:grid-cols-3">
-      {items.map((item, i) => (
-        <div key={item.title} className={`reveal ${delayClass(i)}`}>
-          {mono ? (
-            <span className="inline-block pt-3 pb-[15px] font-label text-[14px] font-medium tracking-[0.1em] text-accent">
-              {item.marker}
-            </span>
-          ) : (
-            <span className="block font-display text-[44px] font-light leading-none text-theme-light [font-variation-settings:'SOFT'_30,'opsz'_100]">
-              {item.marker}
-            </span>
-          )}
-          <b className="mt-2.5 block font-display text-[21px] font-[520] tracking-[-0.006em] text-theme [font-variation-settings:'SOFT'_55]">
-            {item.title}
-          </b>
-          <p className="mt-2 font-body text-[15.5px] text-theme-light">
-            {item.text}
-          </p>
-        </div>
-      ))}
-    </div>
-  );
-}
+/* ============ problem trio ============ */
 
 function HomeProblemSection({
   cap,
@@ -153,83 +64,6 @@ function HomeProblemSection({
   );
 }
 
-function HomeYourDataSection({
-  cap,
-  items,
-}: z.infer<typeof trioSchema>): JSX.Element {
-  return (
-    <Section id="your-data" className="py-14">
-      <SectCap lead={cap} />
-      <Trio items={items} mono={true} />
-    </Section>
-  );
-}
-
-/* ============ quickstart ============ */
-
-const termLineSchema = z.object({
-  kind: z.enum(["comment", "command", "ok"]),
-  text: z.string(),
-});
-
-const quickstartSchema = z.object({
-  cap: z.string(),
-  capNote: z.string(),
-  lines: z.array(termLineSchema),
-  checks: z.array(z.string()),
-});
-
-type TermLine = z.infer<typeof termLineSchema>;
-
-function termLineClass(kind: TermLine["kind"]): string {
-  switch (kind) {
-    case "comment":
-      return "text-theme-light opacity-70";
-    case "ok":
-      return "text-secondary";
-    case "command":
-      return "text-theme";
-  }
-}
-
-function HomeQuickstartSection({
-  cap,
-  capNote,
-  lines,
-  checks,
-}: z.infer<typeof quickstartSchema>): JSX.Element {
-  return (
-    <Section id="quickstart" className="py-14">
-      <SectCap lead={cap} trail={capNote} />
-      <div className="mt-7 grid max-w-[1000px] items-start gap-12 md:grid-cols-[1.15fr_1fr]">
-        <div className="reveal reveal-delay-1 border border-theme bg-theme-subtle/60 px-6 py-5 font-label text-[14px] leading-[1.9]">
-          {lines.map((line, i) => (
-            <div key={i} className={termLineClass(line.kind)}>
-              {line.kind === "command" && (
-                <span className="select-none text-accent">$ </span>
-              )}
-              {line.text}
-            </div>
-          ))}
-        </div>
-        <ul className="reveal reveal-delay-2 font-body text-[15.5px] text-theme-light">
-          {checks.map((check) => (
-            <li
-              key={check}
-              className="flex gap-2.5 border-b border-theme-light py-[7px]"
-            >
-              <span aria-hidden="true" className="font-label text-secondary">
-                ✓
-              </span>
-              {check}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </Section>
-  );
-}
-
 /* ============ mission band ============ */
 
 const missionSchema = z.object({
@@ -329,15 +163,14 @@ const aliveSchema = z.object({
 /* ============ the home section group ============ */
 
 /**
- * The platform home page, in order. The namespace ("home") matches the route
- * id, so each section stores as site-content/home/<section>.md and its
- * template resolves as "home:<section>".
+ * The umbrella home page's authored sections. The namespace ("home") matches
+ * the route id, so each stores as site-content/home/<section>.md and resolves
+ * as "home:<section>". The hero is not here — it is the live agent proximity
+ * map (agent-discovery:proximity-map), whose authored copy lives at
+ * site-content/home/network.md and merges over the live data via the content
+ * overlay.
  */
 export const homeSections: SiteSectionGroup = sectionGroup("home", {
-  hero: defineSection(heroSchema, HomeHeroSection, {
-    title: "Hero",
-    description: "Platform homepage hero: kicker, headline, standfirst, CTAs",
-  }),
   growth: defineSection(growthSchema, HomeGrowthSection, {
     title: "Growth",
     description: "You → Team → Network growth diagram with caption and note",
@@ -346,14 +179,6 @@ export const homeSections: SiteSectionGroup = sectionGroup("home", {
     title: "Problem",
     description: "Why it has to exist — problem trio (large numerals)",
   }),
-  "your-data": defineSection(trioSchema, HomeYourDataSection, {
-    title: "Your Data",
-    description: "Your data, your rules — ownership trio (mono markers)",
-  }),
-  quickstart: defineSection(quickstartSchema, HomeQuickstartSection, {
-    title: "Quickstart",
-    description: "Three-command quickstart terminal with a checklist",
-  }),
   mission: defineSection(missionSchema, HomeMissionSection, {
     title: "Mission",
     description: "Mission band — display-italic statement, sub line, CTAs",