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

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@rizom/site-rizom-foundation",
+  "version": "0.2.0-alpha.142",
+  "description": "Rizom Foundation 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-foundation"
+  },
+  "license": "Apache-2.0",
+  "author": "Yeehaa <yeehaa@rizom.ai> (https://rizom.ai)",
+  "homepage": "https://github.com/rizom-ai/brains/tree/main/sites/rizom-foundation#readme",
+  "bugs": {
+    "url": "https://github.com/rizom-ai/brains/issues"
+  },
+  "engines": {
+    "bun": ">=1.3.3"
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { rizomFoundationSite, rizomFoundationSite as default } from "./site";
+export { foundationRoutes } from "./routes";
+export { default as foundationSiteContent } from "./site-content";

package/src/layout.tsx

@@ -0,0 +1,89 @@
+/** @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 FoundationSiteInfo extends Pick<SiteLayoutInfo, "socialLinks"> {
+  cta?: {
+    buttonLink: string;
+    buttonText: string;
+  };
+  copyright: string;
+}
+
+interface FoundationLayoutProps {
+  sections: ComponentChildren[];
+  title: string;
+  description: string;
+  path: string;
+  siteInfo: FoundationSiteInfo;
+}
+
+const NAV_LINKS = [
+  { href: "#research", label: "Research" },
+  { href: "#events", label: "Events" },
+  { href: "#ecosystem", label: "Ecosystem" },
+];
+
+const PRIMARY_CTA = {
+  href: "#mission",
+  label: "Read Manifesto",
+};
+
+const FOOTER_LINKS = [
+  { href: "#mission", label: "Newsletter" },
+  { href: "#ecosystem", label: "Ecosystem" },
+  { href: "#support", label: "Contact" },
+];
+
+const FOOTER_TAGLINE = {
+  prefix: "",
+  link: { href: "https://rizom.work", label: "Rizom.work" },
+  suffix: " runs the TMS workshops and tools that fund this research.",
+};
+
+const SIDE_NAV_ITEMS = [
+  { href: "#hero", label: "Intro" },
+  { href: "#research", label: "Research" },
+  { href: "#events", label: "Events" },
+  { href: "#ownership", label: "About" },
+  { href: "#mission", label: "Follow" },
+  { href: "#ecosystem", label: "Network" },
+];
+
+export const FoundationLayout = ({
+  sections,
+  siteInfo,
+}: FoundationLayoutProps): JSX.Element => (
+  <RizomFrame>
+    <Header
+      brandSuffix="foundation"
+      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="foundation"
+      metaLabel={siteInfo.copyright}
+      tagline={FOOTER_TAGLINE}
+      links={[
+        ...FOOTER_LINKS,
+        ...socialLinksToRizomLinks(siteInfo, ["linkedin"]),
+      ]}
+    />
+  </RizomFrame>
+);

package/src/routes.ts

@@ -0,0 +1,55 @@
+import type { RouteDefinitionInput } from "@rizom/site";
+
+export const foundationRoutes: RouteDefinitionInput[] = [
+  {
+    id: "home",
+    path: "/",
+    layout: "default",
+    navigation: {
+      show: false,
+      slot: "secondary",
+      priority: 10,
+    },
+    sections: [
+      {
+        id: "hero",
+        template: "landing-page:hero",
+        content: {},
+      },
+      {
+        id: "pull-quote",
+        template: "landing-page:pull-quote",
+        content: {},
+      },
+      {
+        id: "research",
+        template: "landing-page:research",
+        content: {},
+      },
+      {
+        id: "events",
+        template: "landing-page:events",
+        content: {},
+      },
+      {
+        id: "support",
+        template: "landing-page:support",
+        content: {},
+      },
+      {
+        id: "ownership",
+        template: "landing-page:ownership",
+        content: {},
+      },
+      {
+        id: "mission",
+        template: "landing-page:mission",
+        content: {},
+      },
+      {
+        id: "ecosystem",
+        template: "landing-page:ecosystem",
+      },
+    ],
+  },
+];

package/src/sections/ecosystem.tsx

@@ -0,0 +1,95 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Badge, Divider, Section } from "@rizom/site-rizom";
+
+export const ECOSYSTEM_SUFFIXES = ["ai", "foundation", "work"] as const;
+type EcosystemSuffix = (typeof ECOSYSTEM_SUFFIXES)[number];
+
+interface EcosystemCard {
+  suffix: EcosystemSuffix;
+  title: string;
+  body: string;
+  linkLabel: string;
+  linkHref: string;
+}
+
+interface EcosystemContent {
+  eyebrow: string;
+  headline: string;
+  cards: EcosystemCard[];
+}
+
+const BASE_CARD_CLASS =
+  "reveal relative overflow-hidden flex flex-col gap-2 p-6 md:p-8 rounded-[12px] md:rounded-[16px] border transition-all duration-400 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-[3px] hover:border-white/12 [border-color:var(--rizom-ecosystem-card-border)] [background-image:var(--rizom-ecosystem-card-bg)] hover:[box-shadow:var(--rizom-ecosystem-card-hover-shadow)] before:content-[''] before:absolute before:top-0 before:left-0 before:right-0 before:h-[var(--rizom-ecosystem-card-bar-height)] before:opacity-[var(--rizom-ecosystem-card-bar-opacity)] hover:before:opacity-100 before:transition-opacity before:[background-image:var(--rizom-ecosystem-card-bar)]";
+
+const ACTIVE_THEME =
+  "[--rizom-ecosystem-card-border:var(--color-card-panel-current-border)] [--rizom-ecosystem-card-bg:var(--color-card-panel-current-bg)] [--rizom-ecosystem-card-hover-shadow:0_16px_40px_-16px_var(--color-glow-panel-current)] [--rizom-ecosystem-card-bar-height:3px] [--rizom-ecosystem-card-bar-opacity:1] [--rizom-ecosystem-card-bar:linear-gradient(90deg,transparent,var(--color-accent)_30%,var(--color-accent)_70%,transparent)]";
+
+const STANDARD_THEME =
+  "[--rizom-ecosystem-card-border:var(--color-card-panel-border)] [--rizom-ecosystem-card-bg:var(--color-card-panel-bg)] [--rizom-ecosystem-card-bar-height:2px] [--rizom-ecosystem-card-bar-opacity:0.6]";
+
+const SUFFIX_THEME: Record<EcosystemSuffix, string> = {
+  ai: "[--rizom-ecosystem-card-hover-shadow:0_16px_40px_-16px_var(--color-glow-panel-ai)] [--rizom-ecosystem-card-bar:linear-gradient(90deg,transparent,var(--color-accent)_30%,var(--color-accent)_70%,transparent)]",
+  foundation:
+    "[--rizom-ecosystem-card-hover-shadow:0_16px_40px_-16px_var(--color-glow-panel-foundation)] [--rizom-ecosystem-card-bar:linear-gradient(90deg,transparent,var(--color-secondary)_30%,var(--color-secondary)_70%,transparent)]",
+  work: "[--rizom-ecosystem-card-hover-shadow:0_16px_40px_-16px_var(--color-glow-panel-work)] [--rizom-ecosystem-card-bar:linear-gradient(90deg,transparent,var(--palette-amber-light)_30%,var(--color-secondary)_70%,transparent)]",
+};
+
+const ACCENT_LINK: Record<EcosystemSuffix, string> = {
+  ai: "text-accent",
+  foundation: "text-secondary",
+  work: "text-secondary",
+};
+
+export const EcosystemLayout = ({
+  eyebrow,
+  headline,
+  cards,
+}: EcosystemContent): JSX.Element => {
+  return (
+    <Section id="ecosystem" className="reveal pt-section pb-16 md:pb-24">
+      <Divider className="mb-10 md:mb-14" />
+      <div className="text-center mb-10 md:mb-14">
+        <Badge className="mb-6">{eyebrow}</Badge>
+        <h2 className="font-display text-display-md max-w-[880px] mx-auto">
+          {headline}
+        </h2>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
+        {cards.map((card, i) => {
+          const isActive = card.linkLabel === "You are here";
+          const isDisabled = card.linkHref.trim().length === 0;
+          const themeClass = isActive
+            ? ACTIVE_THEME
+            : `${STANDARD_THEME} ${SUFFIX_THEME[card.suffix]}`;
+          const linkClass = `mt-2 font-body text-[13px] md:text-[14px] font-medium ${isDisabled ? "text-theme-light opacity-70 cursor-default" : `transition-opacity hover:opacity-70 ${ACCENT_LINK[card.suffix]}`}`;
+          return (
+            <div
+              key={card.suffix}
+              className={`${BASE_CARD_CLASS} reveal-delay-${i + 1} ${themeClass}`}
+            >
+              <div className="mb-2 flex items-center gap-1 font-nav text-[16px]">
+                <span className="font-bold">rizom</span>
+                <span className="font-bold text-accent">.</span>
+                <span className="text-theme-muted">{card.suffix}</span>
+              </div>
+              <div className="font-nav text-[18px] md:text-[22px] font-bold">
+                {card.title}
+              </div>
+              <p className="text-[13px] md:text-[14px] leading-[1.7] text-theme-muted">
+                {card.body}
+              </p>
+              {isDisabled ? (
+                <span className={linkClass}>{card.linkLabel}</span>
+              ) : (
+                <a href={card.linkHref} className={linkClass}>
+                  {card.linkLabel}
+                </a>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </Section>
+  );
+};

package/src/sections/events/layout.tsx

@@ -0,0 +1,102 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Button, Section } from "@rizom/site-rizom";
+import {
+  FOUNDATION_OUTLINED_INDEX,
+  FOUNDATION_SECTION_EYEBROW_ROW,
+  FOUNDATION_SECTION_EYEBROW_RULE,
+  FOUNDATION_SECTION_EYEBROW_TEXT,
+  FOUNDATION_SECTION_HEADER,
+  FOUNDATION_SECTION_HEADLINE,
+  FOUNDATION_SECTION_SUBHEAD,
+} from "../styles";
+interface EventItem {
+  num: string;
+  city: string;
+  description: string;
+  date: string;
+  anchor: string;
+  actionLabel: string;
+  href: string;
+}
+
+interface EventsContent {
+  kicker: string;
+  headline: string;
+  subhead: string;
+  events: EventItem[];
+  primaryCtaLabel: string;
+  primaryCtaHref: string;
+  secondaryCtaLabel: string;
+  secondaryCtaHref: string;
+}
+
+export const EventsLayout = ({
+  kicker,
+  headline,
+  subhead,
+  events,
+  primaryCtaLabel,
+  primaryCtaHref,
+  secondaryCtaLabel,
+  secondaryCtaHref,
+}: EventsContent): JSX.Element => {
+  return (
+    <Section id="events" className="reveal py-section">
+      <div className="mx-auto max-w-[960px]">
+        <div className={FOUNDATION_SECTION_HEADER}>
+          <div className={FOUNDATION_SECTION_EYEBROW_ROW}>
+            <span className={FOUNDATION_SECTION_EYEBROW_RULE} />
+            <span className={FOUNDATION_SECTION_EYEBROW_TEXT}>{kicker}</span>
+          </div>
+          <h2 className={`${FOUNDATION_SECTION_HEADLINE} max-w-[14ch]`}>
+            {headline}
+          </h2>
+          <p className={`${FOUNDATION_SECTION_SUBHEAD} max-w-[700px]`}>
+            {subhead}
+          </p>
+        </div>
+
+        <div className="flex flex-col">
+          {events.map((event, i) => (
+            <a
+              key={event.num + event.city}
+              href={event.href}
+              className={`reveal reveal-delay-${Math.min(i + 1, 3)} group grid grid-cols-[80px_1fr] items-start gap-6 border-t border-[var(--color-foundation-divider-soft)] py-8 transition-all hover:border-accent/40 hover:pl-3 md:grid-cols-[110px_1fr_220px] md:gap-8 md:py-11 md:hover:pl-4 max-[900px]:grid-cols-[80px_1fr] max-[900px]:gap-6 max-[900px]:py-8`}
+            >
+              <div className={FOUNDATION_OUTLINED_INDEX}>{event.num}</div>
+              <div>
+                <h3 className="font-display text-[28px] md:text-[42px] tracking-[-1.4px] leading-none text-theme transition-colors group-hover:text-accent">
+                  {event.city}
+                </h3>
+                <p className="mt-3 text-body-xs md:text-body-sm text-theme-muted max-w-[560px] italic">
+                  {event.description}
+                </p>
+              </div>
+              <div className="flex flex-col gap-2 pt-1 text-body-xs md:pt-3 md:text-body-sm md:text-right max-[900px]:col-span-full max-[900px]:flex-row max-[900px]:flex-wrap max-[900px]:items-baseline max-[900px]:gap-[14px] max-[900px]:pt-0 max-[900px]:text-left">
+                <span className="font-display text-[18px] md:text-[20px] text-accent tracking-[-0.3px]">
+                  {event.date}
+                </span>
+                <span className="font-mono text-[10px] uppercase tracking-[0.15em] text-theme-light">
+                  {event.anchor}
+                </span>
+                <span className="font-body text-theme-muted transition-all group-hover:text-accent md:group-hover:translate-x-1">
+                  {event.actionLabel}
+                </span>
+              </div>
+            </a>
+          ))}
+        </div>
+
+        <div className="border-t border-white/8 pt-8 md:pt-10 flex flex-col md:flex-row gap-3 md:gap-5">
+          <Button href={primaryCtaHref} variant="primary">
+            {primaryCtaLabel}
+          </Button>
+          <Button href={secondaryCtaHref} variant="secondary">
+            {secondaryCtaLabel}
+          </Button>
+        </div>
+      </div>
+    </Section>
+  );
+};

package/src/sections/hero/layout.tsx

@@ -0,0 +1,84 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Button, Section } from "@rizom/site-rizom";
+
+interface HeroContent {
+  volumeLabel: string;
+  yearLabel: string;
+  metaLabel: string;
+  headline: string;
+  headlineTail: string;
+  tagline: string;
+  subtitle: string;
+  primaryCtaLabel: string;
+  primaryCtaHref: string;
+  secondaryCtaLabel: string;
+  secondaryCtaHref: string;
+  scrollLabel: string;
+  scrollHref: string;
+  colophon: string[];
+}
+
+export const HeroLayout = ({
+  volumeLabel,
+  yearLabel,
+  metaLabel,
+  headline,
+  headlineTail,
+  tagline,
+  subtitle,
+  primaryCtaLabel,
+  primaryCtaHref,
+  secondaryCtaLabel,
+  secondaryCtaHref,
+  scrollLabel,
+  scrollHref,
+  colophon,
+}: HeroContent): JSX.Element => {
+  return (
+    <Section
+      id="hero"
+      className="flex min-h-[100dvh] items-center overflow-hidden text-center"
+    >
+      <div className="relative z-[2] mx-auto max-w-[1040px] pt-[52px] md:pt-[60px]">
+        <div className="mx-auto mb-8 inline-flex flex-wrap items-center justify-center gap-[10px] border-y border-[var(--color-foundation-meta-rule)] px-[18px] py-[10px] font-label text-label-sm font-semibold uppercase tracking-[0.18em] text-theme-light opacity-0 animate-hero-rise [animation-delay:0.1s] md:mb-14 md:gap-3 md:px-6 md:py-[11px]">
+          <span>{volumeLabel}</span>
+          <span className="text-accent">·</span>
+          <span>{yearLabel}</span>
+          <span className="text-accent">·</span>
+          <span>{metaLabel}</span>
+          <span className="inline-block h-2.5 w-2.5 rounded-full bg-accent shadow-[0_0_12px_var(--color-glow-cta)]" />
+        </div>
+        <h1 className="mb-6 font-display text-[clamp(56px,10.5vw,148px)] font-normal leading-[0.88] tracking-[-2.5px] opacity-0 animate-hero-rise [animation-delay:0.2s] md:tracking-[-5px]">
+          {headline}
+          <span className="mt-4 block text-[0.42em] leading-[1.2] tracking-[-1.5px] text-theme-muted italic md:mt-6 md:leading-[1.15]">
+            {headlineTail}
+          </span>
+        </h1>
+        <p className="mx-auto mb-7 max-w-[780px] font-display text-[clamp(20px,2.4vw,28px)] tracking-[-0.3px] text-theme italic leading-[1.4] opacity-0 animate-hero-rise [animation-delay:0.35s] md:mb-10">
+          {tagline}
+        </p>
+        <p className="mx-auto mb-11 max-w-[560px] font-body text-[16px] leading-[1.7] text-theme-muted italic opacity-0 animate-hero-rise [animation-delay:0.45s]">
+          {subtitle}
+        </p>
+        <div className="flex flex-col items-center gap-6 opacity-0 animate-hero-rise [animation-delay:0.6s] md:flex-row md:flex-wrap md:justify-center md:gap-9">
+          <Button href={primaryCtaHref} variant="primary" block>
+            {primaryCtaLabel}
+          </Button>
+          <Button href={secondaryCtaHref} variant="secondary" block>
+            {secondaryCtaLabel}
+          </Button>
+        </div>
+        <div className="mx-auto mt-10 flex max-w-[680px] flex-col items-center justify-center gap-[14px] border-t border-[var(--color-foundation-divider-soft)] pt-[18px] font-label text-label-sm font-medium uppercase tracking-[0.14em] text-theme-light opacity-0 animate-hero-rise [animation-delay:0.75s] md:mt-16 md:flex-row md:gap-8 md:pt-6">
+          {colophon.map((line) => (
+            <span key={line}>{line}</span>
+          ))}
+        </div>
+      </div>
+      <a className="scroll-cue" href={scrollHref} aria-label={scrollLabel}>
+        <span>{scrollLabel}</span>
+        <span className="scroll-cue-line"></span>
+      </a>
+    </Section>
+  );
+};

package/src/sections/mission/layout.tsx

@@ -0,0 +1,49 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Button, Divider, Section } from "@rizom/site-rizom";
+
+interface MissionContent {
+  preamble: string;
+  headlineStart: string;
+  headlineHighlight: string;
+  post: string;
+  primaryCtaLabel: string;
+  primaryCtaHref: string;
+  secondaryCtaLabel: string;
+  secondaryCtaHref: string;
+}
+
+export const MissionLayout = ({
+  preamble,
+  headlineStart,
+  headlineHighlight,
+  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-[620px] mx-auto mb-8 md:mb-10">
+        {preamble}
+      </p>
+      <h2 className="font-display font-normal text-display-lg md:text-display-xl">
+        {headlineStart}{" "}
+        <span className="italic text-accent">{headlineHighlight}</span>
+      </h2>
+      <p className="font-body text-body-sm md:text-body-lg text-theme-light max-w-[560px] 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/ownership/layout.tsx

@@ -0,0 +1,54 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Badge, Section } from "@rizom/site-rizom";
+
+interface OwnershipFeature {
+  icon: string;
+  title: string;
+  body: string;
+}
+
+interface OwnershipContent {
+  badge: string;
+  headline: string;
+  features: OwnershipFeature[];
+}
+
+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 text-[28px] tracking-[-1px] leading-[1.1] md:text-display-md mt-4 md:mt-6">
+            {headline}
+          </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/pull-quote/layout.tsx

@@ -0,0 +1,28 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Section } from "@rizom/site-rizom";
+
+interface PullQuoteContent {
+  quote: string;
+  attribution: string;
+}
+
+export const PullQuoteLayout = ({
+  quote,
+  attribution,
+}: PullQuoteContent): JSX.Element => {
+  return (
+    <Section id="pull-quote" className="reveal pt-20 pb-10 md:pt-20 md:pb-10">
+      <div className="max-w-[880px] mx-auto px-4 md:px-10 text-center">
+        <div className="mx-auto mb-8 h-px w-12 bg-[var(--color-divider)]" />
+        <blockquote className="font-display font-light text-[26px] tracking-[-0.8px] leading-[1.25] md:text-[42px] text-theme">
+          {quote}
+        </blockquote>
+        <div className="mt-6 font-label text-label-sm font-medium uppercase tracking-[0.16em] text-theme-light">
+          {attribution}
+        </div>
+        <div className="mx-auto mt-8 h-px w-12 bg-[var(--color-divider)]" />
+      </div>
+    </Section>
+  );
+};

package/src/sections/research/layout.tsx

@@ -0,0 +1,90 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Button, Section } from "@rizom/site-rizom";
+import {
+  FOUNDATION_OUTLINED_INDEX,
+  FOUNDATION_SECTION_EYEBROW_ROW,
+  FOUNDATION_SECTION_EYEBROW_RULE,
+  FOUNDATION_SECTION_EYEBROW_TEXT,
+  FOUNDATION_SECTION_HEADER,
+  FOUNDATION_SECTION_HEADLINE,
+  FOUNDATION_SECTION_SUBHEAD,
+} from "../styles";
+interface ResearchEssay {
+  num: string;
+  series: string;
+  title: string;
+  teaser: string;
+  href: string;
+}
+
+interface ResearchContent {
+  kicker: string;
+  headline: string;
+  subhead: string;
+  essays: ResearchEssay[];
+  ctaLabel: string;
+  ctaHref: string;
+}
+
+export const ResearchLayout = ({
+  kicker,
+  headline,
+  subhead,
+  essays,
+  ctaLabel,
+  ctaHref,
+}: ResearchContent): JSX.Element => {
+  return (
+    <Section
+      id="research"
+      className="reveal px-0 py-[88px] md:pt-20 md:pb-[120px]"
+    >
+      <div className="mx-auto max-w-[960px]">
+        <div className={FOUNDATION_SECTION_HEADER}>
+          <div className={FOUNDATION_SECTION_EYEBROW_ROW}>
+            <span className={FOUNDATION_SECTION_EYEBROW_RULE} />
+            <span className={FOUNDATION_SECTION_EYEBROW_TEXT}>{kicker}</span>
+          </div>
+          <h2 className={`${FOUNDATION_SECTION_HEADLINE} max-w-[12ch]`}>
+            {headline}
+          </h2>
+          <p className={`${FOUNDATION_SECTION_SUBHEAD} max-w-[620px]`}>
+            {subhead}
+          </p>
+        </div>
+
+        <div className="flex flex-col">
+          {essays.map((essay, i) => (
+            <a
+              key={essay.num + essay.title}
+              href={essay.href}
+              className={`reveal reveal-delay-${Math.min(i + 1, 3)} group grid grid-cols-[80px_1fr_auto] items-start gap-6 border-t border-[var(--color-foundation-divider-soft)] py-8 transition-all hover:border-accent/40 hover:pl-3 md:grid-cols-[110px_1fr_36px] md:gap-8 md:py-11 md:hover:pl-4`}
+            >
+              <div className={FOUNDATION_OUTLINED_INDEX}>{essay.num}</div>
+              <div>
+                <div className="font-label text-label-sm font-semibold tracking-[0.12em] uppercase text-theme-light mb-2">
+                  {essay.series}
+                </div>
+                <h3 className="font-display text-[24px] md:text-[34px] tracking-[-1px] leading-[1.05] text-theme">
+                  {essay.title}
+                </h3>
+                <p className="mt-3 text-body-xs md:text-body-sm text-theme-muted max-w-[620px]">
+                  {essay.teaser}
+                </p>
+              </div>
+              <div className="pt-1 md:pt-3 font-display text-[28px] md:text-[34px] text-accent transition-transform group-hover:translate-x-1">
+                →
+              </div>
+            </a>
+          ))}
+          <div className="border-t border-white/8 pt-8 md:pt-10">
+            <Button href={ctaHref} variant="secondary">
+              {ctaLabel}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+};

package/src/sections/styles.ts

@@ -0,0 +1,13 @@
+export const FOUNDATION_SECTION_HEADER = "mb-10 md:mb-12";
+export const FOUNDATION_SECTION_EYEBROW_ROW =
+  "mb-4 flex items-center gap-3 text-accent";
+export const FOUNDATION_SECTION_EYEBROW_RULE = "block h-px w-8 bg-accent/80";
+export const FOUNDATION_SECTION_EYEBROW_TEXT =
+  "font-label text-label-md font-semibold uppercase tracking-[0.16em]";
+export const FOUNDATION_SECTION_HEADLINE =
+  "font-display text-[32px] text-theme tracking-[-1px] leading-[1.08] md:text-display-md";
+export const FOUNDATION_SECTION_SUBHEAD =
+  "mt-4 text-body-sm text-theme-muted md:text-body-md";
+
+export const FOUNDATION_OUTLINED_INDEX =
+  "font-display text-[38px] leading-none tracking-[-1.5px] text-transparent md:text-[54px] [-webkit-text-stroke:1.2px_var(--color-accent)]";

package/src/sections/support/layout.tsx

@@ -0,0 +1,86 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Section } from "@rizom/site-rizom";
+import {
+  FOUNDATION_SECTION_EYEBROW_ROW,
+  FOUNDATION_SECTION_EYEBROW_RULE,
+  FOUNDATION_SECTION_EYEBROW_TEXT,
+  FOUNDATION_SECTION_HEADER,
+  FOUNDATION_SECTION_HEADLINE,
+} from "../styles";
+interface SupportCard {
+  tone: "amber" | "purple";
+  label: string;
+  headline: string;
+  body: string;
+  linkLabel: string;
+  linkHref: string;
+}
+
+interface SupportContent {
+  kicker: string;
+  headline: string;
+  cards: SupportCard[];
+}
+
+const CARD_BASE =
+  "flex flex-col items-start gap-5 rounded-2xl border px-6 py-8 md:p-10 transition-[transform,border-color,box-shadow] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-1";
+
+const CARD_BY_TONE = {
+  amber: `${CARD_BASE} bg-[image:var(--color-card-rover-bg)] border-[var(--color-card-rover-border)] hover:border-[var(--color-foundation-support-amber-hover-border)] hover:shadow-[0_20px_60px_-20px_var(--color-foundation-support-amber-hover-shadow)]`,
+  purple: `${CARD_BASE} bg-[image:var(--color-card-relay-bg)] border-[var(--color-card-relay-border)] hover:border-[var(--color-foundation-support-purple-hover-border)] hover:shadow-[0_20px_60px_-20px_var(--color-foundation-support-purple-hover-shadow)]`,
+};
+
+const TEXT_BY_TONE = {
+  amber: "text-accent",
+  purple: "text-secondary",
+};
+
+export const SupportLayout = ({
+  kicker,
+  headline,
+  cards,
+}: SupportContent): JSX.Element => {
+  return (
+    <Section id="support" className="reveal py-section">
+      <div className="mx-auto max-w-[1120px]">
+        <div className={FOUNDATION_SECTION_HEADER}>
+          <div className={FOUNDATION_SECTION_EYEBROW_ROW}>
+            <span className={FOUNDATION_SECTION_EYEBROW_RULE} />
+            <span className={FOUNDATION_SECTION_EYEBROW_TEXT}>{kicker}</span>
+          </div>
+          <h2 className={`${FOUNDATION_SECTION_HEADLINE} max-w-[14ch]`}>
+            {headline}
+          </h2>
+        </div>
+
+        <div className="mt-12 grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
+          {cards.map((card, i) => (
+            <div
+              key={card.label + card.headline}
+              className={`reveal reveal-delay-${i + 1} ${CARD_BY_TONE[card.tone]}`}
+            >
+              <span
+                className={`font-nav text-[18px] font-bold ${TEXT_BY_TONE[card.tone]}`}
+              >
+                {card.label}
+              </span>
+              <h3 className="font-display text-[clamp(26px,3vw,36px)] leading-[1.2] tracking-[-0.5px] text-theme">
+                {card.headline}
+              </h3>
+              <p className="text-body-xs md:text-body-sm text-theme-muted">
+                {card.body}
+              </p>
+              <a
+                href={card.linkHref}
+                className={`mt-2 font-body text-body-sm font-medium ${TEXT_BY_TONE[card.tone]} hover:opacity-75`}
+              >
+                {card.linkLabel}
+              </a>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Section>
+  );
+};

package/src/site-content.ts

@@ -0,0 +1,209 @@
+import type { SiteContentDefinition } from "@rizom/site";
+import { HeroLayout } from "./sections/hero/layout";
+import { PullQuoteLayout } from "./sections/pull-quote/layout";
+import { ResearchLayout } from "./sections/research/layout";
+import { EventsLayout } from "./sections/events/layout";
+import { SupportLayout } from "./sections/support/layout";
+import { OwnershipLayout } from "./sections/ownership/layout";
+import { MissionLayout } from "./sections/mission/layout";
+import { EcosystemLayout } from "./sections/ecosystem";
+
+const foundationSiteContent: SiteContentDefinition = {
+  namespace: "landing-page",
+  sections: {
+    hero: {
+      description: "Rizom foundation hero — centered editorial manifesto intro",
+      title: "Hero Section",
+      layout: HeroLayout,
+      fields: {
+        volumeLabel: { label: "Volume label", type: "string" },
+        yearLabel: { label: "Year label", type: "string" },
+        metaLabel: { label: "Meta label", type: "string" },
+        headline: { label: "Headline", type: "string" },
+        headlineTail: { label: "Headline tail", type: "string" },
+        tagline: { label: "Tagline", type: "string" },
+        subtitle: { label: "Subtitle", type: "string" },
+        primaryCtaLabel: { label: "Primary CTA label", type: "string" },
+        primaryCtaHref: { label: "Primary CTA href", type: "string" },
+        secondaryCtaLabel: { label: "Secondary CTA label", type: "string" },
+        secondaryCtaHref: { label: "Secondary CTA href", type: "string" },
+        scrollLabel: { label: "Scroll label", type: "string" },
+        scrollHref: { label: "Scroll href", type: "string" },
+        colophon: {
+          label: "Colophon lines",
+          type: "array",
+          minItems: 1,
+          items: { label: "Colophon line", type: "string" },
+        },
+      },
+    },
+    "pull-quote": {
+      description: "Rizom pull-quote section — centered editorial quote block",
+      title: "Pull Quote Section",
+      layout: PullQuoteLayout,
+      fields: {
+        quote: { label: "Quote", type: "string" },
+        attribution: { label: "Attribution", type: "string" },
+      },
+    },
+    research: {
+      description: "Rizom research section — editorial essay index",
+      title: "Research Section",
+      layout: ResearchLayout,
+      fields: {
+        kicker: { label: "Kicker", type: "string" },
+        headline: { label: "Headline", type: "string" },
+        subhead: { label: "Subhead", type: "string" },
+        essays: {
+          label: "Essays",
+          type: "array",
+          minItems: 1,
+          items: {
+            label: "Essay",
+            type: "object",
+            fields: {
+              num: { label: "Number", type: "string" },
+              series: { label: "Series", type: "string" },
+              title: { label: "Title", type: "string" },
+              teaser: { label: "Teaser", type: "string" },
+              href: { label: "Href", type: "string" },
+            },
+          },
+        },
+        ctaLabel: { label: "CTA label", type: "string" },
+        ctaHref: { label: "CTA href", type: "string" },
+      },
+    },
+    events: {
+      description: "Rizom events section — editorial event index",
+      title: "Events Section",
+      layout: EventsLayout,
+      fields: {
+        kicker: { label: "Kicker", type: "string" },
+        headline: { label: "Headline", type: "string" },
+        subhead: { label: "Subhead", type: "string" },
+        events: {
+          label: "Events",
+          type: "array",
+          minItems: 1,
+          items: {
+            label: "Event",
+            type: "object",
+            fields: {
+              num: { label: "Number", type: "string" },
+              city: { label: "City", type: "string" },
+              description: { label: "Description", type: "string" },
+              date: { label: "Date", type: "string" },
+              anchor: { label: "Anchor", type: "string" },
+              actionLabel: { label: "Action label", type: "string" },
+              href: { label: "Href", type: "string" },
+            },
+          },
+        },
+        primaryCtaLabel: { label: "Primary CTA label", type: "string" },
+        primaryCtaHref: { label: "Primary CTA href", type: "string" },
+        secondaryCtaLabel: { label: "Secondary CTA label", type: "string" },
+        secondaryCtaHref: { label: "Secondary CTA href", type: "string" },
+      },
+    },
+    support: {
+      description: "Rizom support section — two-card funding/support grid",
+      title: "Support Section",
+      layout: SupportLayout,
+      fields: {
+        kicker: { label: "Kicker", type: "string" },
+        headline: { label: "Headline", type: "string" },
+        cards: {
+          label: "Cards",
+          type: "array",
+          length: 2,
+          items: {
+            label: "Card",
+            type: "object",
+            fields: {
+              tone: {
+                label: "Tone",
+                type: "enum",
+                options: ["amber", "purple"],
+              },
+              label: { label: "Label", type: "string" },
+              headline: { label: "Headline", type: "string" },
+              body: { label: "Body", type: "string" },
+              linkLabel: { label: "Link label", type: "string" },
+              linkHref: { label: "Link href", type: "string" },
+            },
+          },
+        },
+      },
+    },
+    ownership: {
+      description: "Rizom ownership section — people and community cards",
+      title: "Ownership Section",
+      layout: OwnershipLayout,
+      fields: {
+        badge: { label: "Badge", type: "string" },
+        headline: { label: "Headline", type: "string" },
+        features: {
+          label: "Features",
+          type: "array",
+          minItems: 1,
+          items: {
+            label: "Feature",
+            type: "object",
+            fields: {
+              icon: { label: "Icon", type: "string" },
+              title: { label: "Title", type: "string" },
+              body: { label: "Body", type: "string" },
+            },
+          },
+        },
+      },
+    },
+    mission: {
+      description: "Rizom mission section — newsletter and follow CTA",
+      title: "Mission Section",
+      layout: MissionLayout,
+      fields: {
+        preamble: { label: "Preamble", type: "string" },
+        headlineStart: { label: "Headline start", type: "string" },
+        headlineHighlight: { label: "Headline highlight", type: "string" },
+        post: { label: "Post", type: "string" },
+        primaryCtaLabel: { label: "Primary CTA label", type: "string" },
+        primaryCtaHref: { label: "Primary CTA href", type: "string" },
+        secondaryCtaLabel: { label: "Secondary CTA label", type: "string" },
+        secondaryCtaHref: { label: "Secondary CTA href", type: "string" },
+      },
+    },
+    ecosystem: {
+      description: "Rizom ecosystem section — sibling site cards",
+      title: "Ecosystem Section",
+      layout: EcosystemLayout,
+      fields: {
+        eyebrow: { label: "Eyebrow", type: "string" },
+        headline: { label: "Headline", type: "string" },
+        cards: {
+          label: "Cards",
+          type: "array",
+          minItems: 1,
+          items: {
+            label: "Card",
+            type: "object",
+            fields: {
+              suffix: {
+                label: "Suffix",
+                type: "enum",
+                options: ["ai", "foundation", "work"],
+              },
+              title: { label: "Title", type: "string" },
+              body: { label: "Body", type: "string" },
+              linkLabel: { label: "Link label", type: "string" },
+              linkHref: { label: "Link href", type: "string" },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export default foundationSiteContent;

package/src/site.ts

@@ -0,0 +1,17 @@
+import type { SiteDefinition } from "@rizom/site";
+import { createRizomSite } from "@rizom/site-rizom";
+import { FoundationLayout } from "./layout";
+import { foundationRoutes } from "./routes";
+import foundationSiteContent from "./site-content";
+import themeOverride from "./theme.css" with { type: "text" };
+
+export const rizomFoundationSite: SiteDefinition = createRizomSite({
+  packageName: "@rizom/site-rizom-foundation",
+  themeProfile: "editorial",
+  layout: FoundationLayout,
+  routes: foundationRoutes,
+  content: foundationSiteContent,
+  themeOverride,
+});
+
+export default rizomFoundationSite;

package/src/theme.css

@@ -0,0 +1,28 @@
+@layer theme {
+  :root {
+    --color-foundation-meta-rule: rgb(from var(--color-accent) r g b / 0.4);
+    --color-foundation-divider-soft: rgb(from var(--color-text) r g b / 0.06);
+    --color-foundation-support-amber-hover-border: rgb(
+      from var(--color-accent) r g b / 0.5
+    );
+    --color-foundation-support-amber-hover-shadow: rgb(
+      from var(--color-accent) r g b / 0.25
+    );
+    --color-foundation-support-purple-hover-border: rgb(
+      from var(--color-secondary) r g b / 0.5
+    );
+    --color-foundation-support-purple-hover-shadow: rgb(
+      from var(--color-secondary) r g b / 0.25
+    );
+  }
+
+  [data-theme="light"] {
+    --color-bg: #f5efe3;
+    --color-bg-subtle: #eee7d6;
+    --color-bg-card: #f0e9d8;
+  }
+}
+
+@layer theme-override {
+  /* Foundation editorial polish */
+}

package/src/types.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+  const content: string;
+  export default content;
+}