@rizom/site-rizom-ai 0.2.0-alpha.196 → 0.2.0-alpha.197

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rizom/site-rizom-ai",
-  "version": "0.2.0-alpha.196",
+  "version": "0.2.0-alpha.197",
   "description": "Rizom AI site package for hosted Rover deployments",
   "type": "module",
   "exports": {
@@ -18,9 +18,9 @@
     "prepack": "publish-manifest prepare"
   },
   "dependencies": {
-    "@rizom/site": "0.2.0-alpha.196",
-    "@rizom/site-rizom": "0.2.0-alpha.196",
-    "@rizom/site-sections": "0.2.0-alpha.196",
+    "@rizom/site": "0.2.0-alpha.197",
+    "@rizom/site-rizom": "0.2.0-alpha.197",
+    "@rizom/site-sections": "0.2.0-alpha.197",
     "preact": "^10.27.2"
   },
   "publishConfig": {

package/src/growth-diagram.tsx

@@ -10,7 +10,7 @@ export function GrowthDiagram(): JSX.Element {
   return (
     <div className="growth reveal reveal-delay-1 mt-5">
       <svg
-        viewBox="0 0 980 290"
+        viewBox="0 0 980 274"
         role="img"
         aria-label="One brain growing into a team, then a network"
       >
@@ -233,7 +233,8 @@ export function GrowthDiagram(): JSX.Element {
           d="M941,141 C958,141 972,140 995,139"
         />
 
-        {/* labels along a common baseline */}
+        {/* labels along a common baseline — the stage columns beneath the
+            diagram carry the words, so the sub-labels are gone (rev 10) */}
         <line className="tick" x1="110" y1="238" x2="110" y2="248" />
         <text
           className="gt-you"
@@ -244,15 +245,6 @@ export function GrowthDiagram(): JSX.Element {
         >
           You
         </text>
-        <text
-          className="gt-sub"
-          x="110"
-          y="281"
-          text-anchor="middle"
-          style="--d:.5s"
-        >
-          personal brain · available now
-        </text>
         <line className="tick" x1="452" y1="238" x2="452" y2="248" />
         <text
           className="gt-team"
@@ -263,15 +255,6 @@ export function GrowthDiagram(): JSX.Element {
         >
           Team
         </text>
-        <text
-          className="gt-sub"
-          x="452"
-          y="281"
-          text-anchor="middle"
-          style="--d:1.1s"
-        >
-          shared intelligence · the team bundle
-        </text>
         <line className="tick" x1="795" y1="238" x2="795" y2="248" />
         <text
           className="gt-net"
@@ -282,15 +265,6 @@ export function GrowthDiagram(): JSX.Element {
         >
           Network
         </text>
-        <text
-          className="gt-sub"
-          x="795"
-          y="281"
-          text-anchor="middle"
-          style="--d:1.8s"
-        >
-          distributed expertise · emerging
-        </text>
       </svg>
     </div>
   );

package/src/home.tsx

@@ -19,35 +19,60 @@ import {
 /**
  * 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), the one light that
- * starts it (the product hook), how the network grows (growth), the mission
- * band, the three faces, and the living-proof colophon.
+ * rev-10 story the map opens — the pain (problem, withered), how the parts
+ * come together (growth carries the system: brain, practice, network), the
+ * mission band (the quote alone), the single ask (one-light), 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.
  */
 
-/* ============ growth diagram ============ */
+/* ============ growth diagram + the three stages ============ */
+
+const growthStageSchema = z.object({
+  title: z.string(),
+  text: z.string(),
+});
 
 const growthSchema = z.object({
   cap: z.string(),
-  capNote: z.string(),
-  note: z.string(),
+  capNote: z.string().optional(),
+  stages: z.array(growthStageSchema),
 });
 
+/* Stage columns are keyed to the diagram's zone colors by position:
+   You (brass, the brain) → Team (ruby, the practice) → Network (moss). */
+const STAGE_TITLE_COLOR = [
+  "text-[color:var(--palette-brass)]",
+  "text-[color:var(--palette-ruby-soft)]",
+  "text-[color:var(--palette-moss)]",
+];
+
 function HomeGrowthSection({
   cap,
   capNote,
-  note,
+  stages,
 }: z.infer<typeof growthSchema>): JSX.Element {
   return (
     <Section id="growth" className="py-14">
       <SectCap lead={cap} trail={capNote} />
       <GrowthDiagram />
-      <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>
+      <div className="reveal reveal-delay-2 mt-6 grid max-w-[1040px] gap-x-11 gap-y-6 md:grid-cols-3">
+        {stages.map((stage, i) => (
+          <div key={stage.title}>
+            <b
+              className={`block font-label text-label-xs font-semibold uppercase tracking-[0.18em] ${STAGE_TITLE_COLOR[i] ?? ""}`}
+            >
+              {stage.title}
+            </b>
+            <p className="mt-2 font-body text-[15px] text-theme-light">
+              {stage.text}
+            </p>
+          </div>
+        ))}
+      </div>
     </Section>
   );
 }
@@ -61,8 +86,9 @@ function HomeProblemSection({
 }: z.infer<typeof trioSchema>): JSX.Element {
   return (
     <Section id="problem" className="py-14">
-      <SectCap lead={cap} trail={capNote} />
-      <Trio items={items} mono={false} />
+      {/* The one section with no warmth: cold cap, hollow numerals. */}
+      <SectCap lead={cap} trail={capNote} tone="cold" />
+      <Trio items={items} mono={false} withered />
     </Section>
   );
 }
@@ -71,9 +97,10 @@ function HomeProblemSection({
 
 const oneLightSchema = z.object({
   cap: z.string(),
-  capNote: z.string(),
+  capNote: z.string().optional(),
   headline: z.string(),
   intro: z.string(),
+  pull: z.string().optional(),
   primaryCta: ctaSchema,
   secondaryCta: ctaSchema,
 });
@@ -83,6 +110,7 @@ function HomeOneLightSection({
   capNote,
   headline,
   intro,
+  pull,
   primaryCta,
   secondaryCta,
 }: z.infer<typeof oneLightSchema>): JSX.Element {
@@ -92,9 +120,14 @@ function HomeOneLightSection({
       <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">
+      <p className="reveal reveal-delay-1 mt-4 max-w-[62ch] font-body text-[17px] leading-[1.7] text-theme-muted">
         {intro}
       </p>
+      {pull && (
+        <p className="reveal reveal-delay-2 mt-5 max-w-[21em] font-display text-[clamp(24px,2.8vw,34px)] font-normal italic leading-[1.22] tracking-[-0.012em] text-theme-muted [font-variation-settings:'SOFT'_90,'opsz'_110]">
+          {renderHighlightedText(pull, "font-[460] text-accent-bright")}
+        </p>
+      )}
       <CtaRow
         primaryCta={primaryCta}
         secondaryCta={secondaryCta}
@@ -106,11 +139,13 @@ function HomeOneLightSection({
 
 /* ============ mission band ============ */
 
+/* Rev 10: the band is pure thesis — the quote carries the mission alone.
+   Sub and CTAs stay authorable but optional, so older content parses. */
 const missionSchema = z.object({
   quote: z.string(),
-  sub: z.string(),
-  primaryCta: ctaSchema,
-  secondaryCta: ctaSchema,
+  sub: z.string().optional(),
+  primaryCta: ctaSchema.optional(),
+  secondaryCta: ctaSchema.optional(),
 });
 
 function HomeMissionSection({
@@ -121,14 +156,18 @@ function HomeMissionSection({
 }: z.infer<typeof missionSchema>): 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]"
-      />
+      {sub && (
+        <p className="reveal reveal-delay-1 mt-[18px] max-w-[52ch] font-body text-[17px] text-theme-light">
+          {sub}
+        </p>
+      )}
+      {primaryCta && secondaryCta && (
+        <CtaRow
+          primaryCta={primaryCta}
+          secondaryCta={secondaryCta}
+          className="reveal reveal-delay-2 mt-[26px]"
+        />
+      )}
     </Band>
   );
 }
@@ -213,20 +252,23 @@ const aliveSchema = z.object({
 export const homeSections: SiteSectionGroup = sectionGroup("home", {
   growth: defineSection(growthSchema, HomeGrowthSection, {
     title: "Growth",
-    description: "You → Team → Network growth diagram with caption and note",
+    description:
+      "You → Team → Network diagram with the three stage columns — how the parts come together",
   }),
   problem: defineSection(trioSchema, HomeProblemSection, {
     title: "Problem",
-    description: "The dark around the lights — problem trio (large numerals)",
+    description:
+      "Alone, it withers — problem trio (hollow numerals, no warmth)",
   }),
   "one-light": defineSection(oneLightSchema, HomeOneLightSection, {
     title: "One Light",
     description:
-      "It starts with one light — the product hook between problem and growth",
+      "It starts with you — the single ask, after the mission and before the faces",
   }),
   mission: defineSection(missionSchema, HomeMissionSection, {
     title: "Mission",
-    description: "Mission band — display-italic statement, sub line, CTAs",
+    description:
+      "Mission band — display-italic statement alone; sub and CTAs optional",
   }),
   faces: defineSection(facesSchema, HomeFacesSection, {
     title: "Faces",

package/src/routes.ts

@@ -17,18 +17,18 @@ export const aiRoutes: RouteDefinitionInput[] = [
       // The hero is the live agent proximity map, rendered from this brain's
       // own registry. dataQuery routes it through the datasource (live map
       // data); its hero copy is authored at site-content/home/network.md and
-      // merged over via the content overlay. Then the story the map opens: the
-      // dark it fights, the one light that starts it (the product hook), how
-      // the network grows, the mission, the faces.
+      // merged over via the content overlay. Then the rev-10 story: the pain
+      // (problem), how the parts come together (growth carries the system),
+      // the mission, and only then the ask (one-light), the faces, the proof.
       {
         id: "network",
         template: "agent-discovery:proximity-map",
         dataQuery: {},
       },
       { id: "problem", template: "home:problem" },
-      { id: "one-light", template: "home:one-light" },
       { id: "growth", template: "home:growth" },
       { id: "mission", template: "home:mission" },
+      { id: "one-light", template: "home:one-light" },
       { id: "faces", template: "home:faces" },
       { id: "alive", template: "home:alive" },
     ],

package/src/shared.tsx

@@ -30,16 +30,20 @@ export const HIGHLIGHT_CLS = "italic font-[395] text-accent-bright";
 export const ROOM_HIGHLIGHT_CLS = "italic font-[400] text-accent";
 
 /* The mockup's `.cap` section caption: mono, wide-tracked, a short
-   accent tick leading in, optional lowercase trail note. */
+   accent tick leading in, optional lowercase trail note. The "cold" tone
+   drains the accent — rev-10's withered section holds no warmth. */
 export function SectCap({
   lead,
   trail,
+  tone = "accent",
   className = "",
 }: {
   lead: string;
   trail?: string | undefined;
+  tone?: "accent" | "cold";
   className?: string;
 }): JSX.Element {
+  const cold = tone === "cold";
   return (
     <p
       className={`reveal flex flex-wrap items-baseline gap-3.5 font-label text-label-xs uppercase tracking-[0.2em] ${className}`}
@@ -49,9 +53,13 @@ export function SectCap({
       <span className="flex items-baseline gap-3.5">
         <span
           aria-hidden="true"
-          className="h-px w-[26px] self-center bg-accent opacity-80"
+          className={`h-px w-[26px] self-center opacity-80 ${cold ? "bg-theme-light" : "bg-accent"}`}
         />
-        <span className="font-medium text-accent">{lead}</span>
+        <span
+          className={`font-medium ${cold ? "text-theme-light" : "text-accent"}`}
+        >
+          {lead}
+        </span>
       </span>
       {trail && (
         <span className="normal-case tracking-[0.1em] text-theme-light">
@@ -206,7 +214,8 @@ export function delayClass(index: number): string {
 /* The three-up marker/title/text grid shared by two rooms: home's "why it
    has to exist" problem trio (large display numerals) and /brain's "your
    data, your rules" principles (mono markers). One schema, one component,
-   the marker style toggled by `mono`. */
+   the marker style toggled by `mono`; `withered` hollows the numerals and
+   cools the titles — the rev-10 no-warmth treatment for the pain section. */
 export const trioItemSchema: z.ZodObject<{
   marker: z.ZodString;
   title: z.ZodString;
@@ -232,10 +241,15 @@ export type TrioItem = z.infer<typeof trioItemSchema>;
 export function Trio({
   items,
   mono,
+  withered = false,
 }: {
   items: TrioItem[];
   mono: boolean;
+  withered?: boolean;
 }): JSX.Element {
+  const numeralClass = withered
+    ? "block font-display text-[44px] font-light leading-none text-transparent [-webkit-text-stroke:1px_var(--color-text-light)] [font-variation-settings:'SOFT'_30,'opsz'_100]"
+    : "block font-display text-[44px] font-light leading-none text-theme-light [font-variation-settings:'SOFT'_30,'opsz'_100]";
   return (
     <div className="mt-[30px] grid gap-11 md:grid-cols-3">
       {items.map((item, i) => (
@@ -245,11 +259,11 @@ export function Trio({
               {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>
+            <span className={numeralClass}>{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]">
+          <b
+            className={`mt-2.5 block font-display text-[21px] font-[520] tracking-[-0.006em] [font-variation-settings:'SOFT'_55] ${withered ? "text-theme-muted" : "text-theme"}`}
+          >
             {item.title}
           </b>
           <p className="mt-2 font-body text-[15.5px] text-theme-light">