@rizom/site-rizom-ai 0.2.0-alpha.142

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@rizom/site-rizom-ai",
+  "version": "0.2.0-alpha.142",
+  "description": "Rizom AI site package for hosted Rover deployments",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "bun test",
+    "lint": "eslint . --max-warnings 0",
+    "lint:fix": "eslint . --max-warnings 0 --fix",
+    "postpack": "publish-manifest restore",
+    "prepack": "publish-manifest prepare"
+  },
+  "dependencies": {
+    "@rizom/site": "0.2.0-alpha.142",
+    "@rizom/site-rizom": "0.2.0-alpha.142",
+    "preact": "^10.27.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rizom-ai/brains.git",
+    "directory": "sites/rizom-ai"
+  },
+  "license": "Apache-2.0",
+  "author": "Yeehaa <yeehaa@rizom.ai> (https://rizom.ai)",
+  "homepage": "https://github.com/rizom-ai/brains/tree/main/sites/rizom-ai#readme",
+  "bugs": {
+    "url": "https://github.com/rizom-ai/brains/issues"
+  },
+  "engines": {
+    "bun": ">=1.3.3"
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { rizomAiSite, rizomAiSite as default } from "./site";
+export { aiRoutes } from "./routes";
+export { default as aiSiteContent } from "./site-content";

package/src/layout.tsx

@@ -0,0 +1,84 @@
+/** @jsxImportSource preact */
+import type { ComponentChildren, JSX } from "preact";
+import type { SiteLayoutInfo } from "@rizom/site";
+import {
+  Footer,
+  Header,
+  RizomFrame,
+  SideNav,
+  socialLinksToRizomLinks,
+} from "@rizom/site-rizom";
+
+interface AiSiteInfo extends Pick<SiteLayoutInfo, "socialLinks"> {
+  cta?: {
+    buttonLink: string;
+    buttonText: string;
+  };
+  copyright: string;
+}
+
+interface AiLayoutProps {
+  sections: ComponentChildren[];
+  title: string;
+  description: string;
+  path: string;
+  siteInfo: AiSiteInfo;
+}
+
+const NAV_LINKS = [
+  { href: "#problem", label: "Platform" },
+  { href: "#quickstart", label: "Docs" },
+  { href: "#ecosystem", label: "Network" },
+];
+
+const PRIMARY_CTA = {
+  href: "#quickstart",
+  label: "Get Started",
+};
+
+const FOOTER_LINKS = [
+  {
+    href: "https://github.com/rizom-ai/brains/tree/main/docs",
+    label: "Documentation",
+  },
+];
+
+const SIDE_NAV_ITEMS = [
+  { href: "#hero", label: "Intro" },
+  { href: "#problem", label: "Problem" },
+  { href: "#answer", label: "Answer" },
+  { href: "#ownership", label: "Open" },
+  { href: "#quickstart", label: "Start" },
+  { href: "#mission", label: "Vision" },
+  { href: "#ecosystem", label: "Network" },
+];
+
+export const AiLayout = ({
+  sections,
+  siteInfo,
+}: AiLayoutProps): JSX.Element => (
+  <RizomFrame>
+    <Header
+      brandSuffix="ai"
+      navLinks={NAV_LINKS}
+      primaryCta={
+        siteInfo.cta
+          ? {
+              href: siteInfo.cta.buttonLink,
+              label: siteInfo.cta.buttonText,
+            }
+          : PRIMARY_CTA
+      }
+    />
+    <SideNav items={SIDE_NAV_ITEMS} />
+    <main>{sections}</main>
+    <Footer
+      brandSuffix="ai"
+      metaLabel={siteInfo.copyright}
+      links={[
+        ...FOOTER_LINKS,
+        ...socialLinksToRizomLinks(siteInfo, ["github", "linkedin"]),
+      ]}
+    />
+  </RizomFrame>
+);

package/src/routes.ts

@@ -0,0 +1,27 @@
+import type { RouteDefinitionInput } from "@rizom/site";
+
+export const aiRoutes: RouteDefinitionInput[] = [
+  {
+    id: "home",
+    path: "/",
+    layout: "default",
+    navigation: {
+      show: false,
+      slot: "secondary",
+      priority: 10,
+    },
+    sections: [
+      { id: "hero", template: "landing-page:hero", content: {} },
+      { id: "problem", template: "landing-page:problem", content: {} },
+      { id: "answer", template: "landing-page:answer", content: {} },
+      { id: "products", template: "landing-page:products", content: {} },
+      { id: "ownership", template: "landing-page:ownership", content: {} },
+      { id: "quickstart", template: "landing-page:quickstart", content: {} },
+      { id: "mission", template: "landing-page:mission", content: {} },
+      {
+        id: "ecosystem",
+        template: "landing-page:ecosystem",
+      },
+    ],
+  },
+];

package/src/sections/answer/layout.tsx

@@ -0,0 +1,40 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import type { AnswerContent } from "./schema";
+import {
+  Badge,
+  Divider,
+  Section,
+  renderHighlightedText,
+} from "@rizom/site-rizom";
+import { ScalesDiagram } from "./scales-diagram";
+
+const HIGHLIGHT_CLS = "italic text-accent font-normal";
+
+export const AnswerLayout = ({
+  badge,
+  headline,
+  subhead,
+  scalesHeadline,
+  scalesSubhead,
+}: AnswerContent): JSX.Element => {
+  return (
+    <Section id="answer" className="reveal text-center py-section">
+      <Badge className="mb-7">{badge}</Badge>
+      <h2 className="font-display font-normal text-display-md max-w-[900px] mx-auto mb-6 mt-7">
+        {renderHighlightedText(headline, HIGHLIGHT_CLS)}
+      </h2>
+      <p className="text-body-md md:text-body-xl text-theme-muted max-w-[640px] mx-auto">
+        {subhead}
+      </p>
+      <Divider className="my-10 md:my-12" />
+      <div className="font-display font-normal text-display-sm mb-3.5 md:mb-4">
+        {scalesHeadline}
+      </div>
+      <ScalesDiagram />
+      <p className="text-body-xs md:text-body-md text-theme-light max-w-[600px] mx-auto">
+        {scalesSubhead}
+      </p>
+    </Section>
+  );
+};

package/src/sections/answer/scales-diagram.tsx

@@ -0,0 +1,254 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+
+/**
+ * Three-layer scales diagram — renders the "personal → team → network"
+ * claim by giving each stage its own structural visual:
+ *
+ *   You     → a node inside two concentric rings (a lone agent)
+ *   Team    → a hub with four satellites connected by spokes
+ *   Network → a 7-node hex mesh with no center, triangulated +
+ *              cross-linked (peer-to-peer)
+ *
+ * Each stage *shows* its structure, not just its scale. All three
+ * visualizations share a horizontal baseline (BAND_CENTER) and the
+ * labels/descriptions all anchor to the same two Y-values so the
+ * typographic row below the graphics is straight regardless of which
+ * stage is tallest.
+ */
+
+const LABEL_CLASS =
+  "fill-accent [font-family:var(--font-label)] text-[11px] font-semibold uppercase tracking-[0.22em]";
+const DESC_CLASS =
+  "fill-[var(--color-text-muted)] [font-family:var(--font-body)] text-[12px]";
+const CONNECTOR_CLASS = "stroke-accent";
+const NODE_CLASS = "fill-accent";
+const RING_CLASS = "stroke-accent";
+
+const BAND_CENTER = 65;
+const LABEL_Y = 135;
+const DESC_Y = 158;
+
+export const ScalesDiagram = ({
+  className,
+  showLabels = true,
+  decorative = false,
+}: {
+  className?: string;
+  showLabels?: boolean;
+  decorative?: boolean;
+} = {}): JSX.Element => {
+  const colX = { you: 110, team: 340, network: 570 };
+
+  // Stage 2 — Team: one hub + four satellites on a rotated square
+  const teamRadius = 24;
+  const teamSatellites = [
+    { cx: colX.team - teamRadius, cy: BAND_CENTER - teamRadius },
+    { cx: colX.team + teamRadius, cy: BAND_CENTER - teamRadius },
+    { cx: colX.team + teamRadius, cy: BAND_CENTER + teamRadius },
+    { cx: colX.team - teamRadius, cy: BAND_CENTER + teamRadius },
+  ];
+
+  // Stage 3 — Network: 7 nodes in a hexagonal mesh (no single center).
+  // Hex perimeter + one interior node to seed cross-connections. Sized
+  // so the vertical extent stays close to the team's — growth reads as
+  // connective, not oversized.
+  const netRadius = 32;
+  const netHalf = netRadius * 0.87; // hex side-to-side (cos 30°)
+  const netMidY = BAND_CENTER;
+  const net = [
+    { cx: colX.network, cy: netMidY - netRadius }, // 0  top
+    { cx: colX.network + netHalf, cy: netMidY - netRadius / 2 }, // 1  upper right
+    { cx: colX.network + netHalf, cy: netMidY + netRadius / 2 }, // 2  lower right
+    { cx: colX.network, cy: netMidY + netRadius }, // 3  bottom
+    { cx: colX.network - netHalf, cy: netMidY + netRadius / 2 }, // 4  lower left
+    { cx: colX.network - netHalf, cy: netMidY - netRadius / 2 }, // 5  upper left
+    { cx: colX.network, cy: netMidY }, // 6  interior seed
+  ];
+  const netEdges: Array<[number, number]> = [
+    [0, 1],
+    [1, 2],
+    [2, 3],
+    [3, 4],
+    [4, 5],
+    [5, 0], // hexagon perimeter
+    [0, 6],
+    [2, 6],
+    [4, 6], // interior triangulation
+    [1, 4],
+    [5, 2], // long-range cross-links
+  ];
+
+  return (
+    <svg
+      viewBox="0 0 680 180"
+      className={`mx-auto my-8 md:my-10 block w-full max-w-[600px] md:max-w-[680px]${className ? ` ${className}` : ""}`}
+      role={decorative ? undefined : "img"}
+      aria-hidden={decorative ? true : undefined}
+      aria-label={
+        decorative
+          ? undefined
+          : "Three layers of intelligence: personal brain, team, distributed network"
+      }
+    >
+      {/* Subtle rails between stages — continuity cue, not decoration */}
+      <line
+        x1="140"
+        y1={BAND_CENTER}
+        x2="304"
+        y2={BAND_CENTER}
+        className={CONNECTOR_CLASS}
+        strokeWidth="1"
+        opacity="0.22"
+      />
+      <line
+        x1="378"
+        y1={BAND_CENTER}
+        x2="534"
+        y2={BAND_CENTER}
+        className={CONNECTOR_CLASS}
+        strokeWidth="1"
+        opacity="0.22"
+      />
+
+      {/* Stage 1 — You */}
+      <g>
+        <circle
+          cx={colX.you}
+          cy={BAND_CENTER}
+          r="26"
+          fill="none"
+          className={RING_CLASS}
+          strokeWidth="1.25"
+          opacity="0.4"
+        />
+        <circle
+          cx={colX.you}
+          cy={BAND_CENTER}
+          r="16"
+          fill="none"
+          className={RING_CLASS}
+          strokeWidth="1"
+          opacity="0.65"
+        />
+        <circle cx={colX.you} cy={BAND_CENTER} r="7" className={NODE_CLASS} />
+        {showLabels ? (
+          <>
+            <text
+              x={colX.you}
+              y={LABEL_Y}
+              textAnchor="middle"
+              className={LABEL_CLASS}
+            >
+              You
+            </text>
+            <text
+              x={colX.you}
+              y={DESC_Y}
+              textAnchor="middle"
+              className={DESC_CLASS}
+            >
+              Personal brain
+            </text>
+          </>
+        ) : null}
+      </g>
+
+      {/* Stage 2 — Team */}
+      <g>
+        {teamSatellites.map((sat) => (
+          <line
+            key={`spoke-${sat.cx}-${sat.cy}`}
+            x1={colX.team}
+            y1={BAND_CENTER}
+            x2={sat.cx}
+            y2={sat.cy}
+            className={CONNECTOR_CLASS}
+            strokeWidth="1"
+            opacity="0.55"
+          />
+        ))}
+        <circle cx={colX.team} cy={BAND_CENTER} r="6" className={NODE_CLASS} />
+        {teamSatellites.map((sat) => (
+          <circle
+            key={`sat-${sat.cx}-${sat.cy}`}
+            cx={sat.cx}
+            cy={sat.cy}
+            r="4.5"
+            className={NODE_CLASS}
+          />
+        ))}
+        {showLabels ? (
+          <>
+            <text
+              x={colX.team}
+              y={LABEL_Y}
+              textAnchor="middle"
+              className={LABEL_CLASS}
+            >
+              Team
+            </text>
+            <text
+              x={colX.team}
+              y={DESC_Y}
+              textAnchor="middle"
+              className={DESC_CLASS}
+            >
+              Shared intelligence
+            </text>
+          </>
+        ) : null}
+      </g>
+
+      {/* Stage 3 — Network */}
+      <g>
+        {netEdges.map(([a, b]) => {
+          const pa = net[a];
+          const pb = net[b];
+          if (!pa || !pb) return null;
+          return (
+            <line
+              key={`edge-${a}-${b}`}
+              x1={pa.cx}
+              y1={pa.cy}
+              x2={pb.cx}
+              y2={pb.cy}
+              className={CONNECTOR_CLASS}
+              strokeWidth="0.9"
+              opacity="0.45"
+            />
+          );
+        })}
+        {net.map((node, idx) => (
+          <circle
+            key={`node-${idx}`}
+            cx={node.cx}
+            cy={node.cy}
+            r={idx === 6 ? "5" : "4.5"}
+            className={NODE_CLASS}
+          />
+        ))}
+        {showLabels ? (
+          <>
+            <text
+              x={colX.network}
+              y={LABEL_Y}
+              textAnchor="middle"
+              className={LABEL_CLASS}
+            >
+              Network
+            </text>
+            <text
+              x={colX.network}
+              y={DESC_Y}
+              textAnchor="middle"
+              className={DESC_CLASS}
+            >
+              Distributed expertise
+            </text>
+          </>
+        ) : null}
+      </g>
+    </svg>
+  );
+};

package/src/sections/answer/schema.ts

@@ -0,0 +1,7 @@
+export interface AnswerContent {
+  badge: string;
+  headline: string;
+  subhead: string;
+  scalesHeadline: string;
+  scalesSubhead: string;
+}

package/src/sections/ecosystem.tsx

@@ -0,0 +1,3 @@
+/** @jsxImportSource preact */
+export { Ecosystem as EcosystemLayout } from "@rizom/site-rizom";
+export type { EcosystemCard, EcosystemContent } from "@rizom/site-rizom";

package/src/sections/hero/layout.tsx

@@ -0,0 +1,45 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import type { HeroContent } from "./schema";
+import { Button, Section, renderHighlightedText } from "@rizom/site-rizom";
+
+const HIGHLIGHT_CLS = "italic text-accent font-normal";
+
+/**
+ * Hero section — full-viewport intro with animated rise-in headline,
+ * subhead, and CTA row. All copy is content-driven via app-owned
+ * site-content definitions; there are no hardcoded fallbacks.
+ * Instances ship their own copy in brain-data/site-content/home/hero.md.
+ */
+export const HeroLayout = ({
+  headline,
+  subhead,
+  primaryCtaLabel,
+  primaryCtaHref,
+  secondaryCtaLabel,
+  secondaryCtaHref,
+}: HeroContent): JSX.Element => {
+  return (
+    <Section
+      id="hero"
+      className="flex items-center overflow-hidden min-h-[100dvh]"
+    >
+      <div className="relative z-[2] w-full md:w-[55%] pt-0 md:pt-20">
+        <h1 className="font-display font-normal text-[38px] tracking-[-1.5px] leading-[1.05] md:text-display-lg mb-6 opacity-0 animate-hero-rise [animation-delay:0.2s]">
+          {renderHighlightedText(headline, HIGHLIGHT_CLS)}
+        </h1>
+        <p className="font-body text-body-md md:text-body-lg text-theme-muted max-w-full md:max-w-[480px] mb-9 md:mb-10 opacity-0 animate-hero-rise [animation-delay:0.4s]">
+          {subhead}
+        </p>
+        <div className="flex flex-col md:flex-row gap-3 md:gap-4 md:flex-wrap opacity-0 animate-hero-rise [animation-delay:0.6s]">
+          <Button href={primaryCtaHref} variant="primary" block>
+            {primaryCtaLabel}
+          </Button>
+          <Button href={secondaryCtaHref} variant="secondary" block>
+            {secondaryCtaLabel}
+          </Button>
+        </div>
+      </div>
+    </Section>
+  );
+};

package/src/sections/hero/schema.ts

@@ -0,0 +1,13 @@
+/**
+ * Runtime schema/formatter for hero now live in `src/site-content.ts`.
+ * Keep the props type local to the layout so app code does not depend on
+ * low-level template authoring primitives here.
+ */
+export interface HeroContent {
+  headline: string;
+  subhead: string;
+  primaryCtaLabel: string;
+  primaryCtaHref: string;
+  secondaryCtaLabel: string;
+  secondaryCtaHref: string;
+}

package/src/sections/mission/layout.tsx

@@ -0,0 +1,44 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import type { MissionContent } from "./schema";
+import {
+  Button,
+  Divider,
+  Section,
+  renderHighlightedText,
+} from "@rizom/site-rizom";
+
+const HIGHLIGHT_CLS = "italic text-accent font-normal";
+
+export const MissionLayout = ({
+  preamble,
+  headline,
+  post,
+  primaryCtaLabel,
+  primaryCtaHref,
+  secondaryCtaLabel,
+  secondaryCtaHref,
+}: MissionContent): JSX.Element => {
+  return (
+    <Section id="mission" className="reveal py-section text-center">
+      <Divider className="mb-10 md:mb-12" />
+      <p className="font-body text-body-sm md:text-body-lg text-theme-light max-w-[520px] mx-auto mb-8 md:mb-10">
+        {preamble}
+      </p>
+      <h2 className="font-display font-normal text-display-xl">
+        {renderHighlightedText(headline, HIGHLIGHT_CLS)}
+      </h2>
+      <p className="font-body text-body-sm md:text-body-lg text-theme-light max-w-[500px] mx-auto mt-8">
+        {post}
+      </p>
+      <div className="flex flex-col md:flex-row gap-3 md:gap-5 md:justify-center items-stretch md:items-center mt-9 md:mt-16">
+        <Button href={primaryCtaHref} variant="primary-strong" size="lg" block>
+          {primaryCtaLabel}
+        </Button>
+        <Button href={secondaryCtaHref} variant="secondary" size="lg" block>
+          {secondaryCtaLabel}
+        </Button>
+      </div>
+    </Section>
+  );
+};

package/src/sections/mission/schema.ts

@@ -0,0 +1,9 @@
+export interface MissionContent {
+  preamble: string;
+  headline: string;
+  post: string;
+  primaryCtaLabel: string;
+  primaryCtaHref: string;
+  secondaryCtaLabel: string;
+  secondaryCtaHref: string;
+}

package/src/sections/ownership/layout.tsx

@@ -0,0 +1,45 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import type { OwnershipContent } from "./schema";
+import { Badge, Section, renderHighlightedText } from "@rizom/site-rizom";
+
+const HIGHLIGHT_CLS = "italic text-accent font-normal";
+
+export const OwnershipLayout = ({
+  badge,
+  headline,
+  features,
+}: OwnershipContent): JSX.Element => {
+  return (
+    <Section id="ownership" className="reveal py-section">
+      <div className="flex flex-col items-start gap-9 md:flex-row md:gap-20">
+        <div className="w-full md:w-[45%]">
+          <Badge>{badge}</Badge>
+          <h2 className="font-display font-normal text-[28px] tracking-[-1px] leading-[1.1] md:text-display-md mt-4 md:mt-6">
+            {renderHighlightedText(headline, HIGHLIGHT_CLS)}
+          </h2>
+        </div>
+        <div className="flex w-full flex-col gap-8 md:w-[55%] md:pt-[60px]">
+          {features.map((row, i) => (
+            <div
+              key={row.icon + row.title}
+              className={`reveal reveal-delay-${i + 1} flex items-start gap-4 md:gap-5`}
+            >
+              <div className="shrink-0 min-w-[44px] md:min-w-[48px] h-11 md:h-12 flex items-center justify-center border border-accent rounded-lg font-nav text-[18px] md:text-heading-md font-bold text-accent">
+                {row.icon}
+              </div>
+              <div>
+                <div className="font-nav text-heading-sm md:text-heading-md font-bold mb-1.5">
+                  {row.title}
+                </div>
+                <p className="text-body-xs md:text-body-sm text-theme-muted">
+                  {row.body}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Section>
+  );
+};

package/src/sections/ownership/schema.ts

@@ -0,0 +1,11 @@
+export interface FeatureRow {
+  icon: string;
+  title: string;
+  body: string;
+}
+
+export interface OwnershipContent {
+  badge: string;
+  headline: string;
+  features: FeatureRow[];
+}