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

package/package.json

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

package/src/index.ts

@@ -0,0 +1 @@
+export { rizomWorkSite, rizomWorkSite as default } from "./site";

package/src/layout.tsx

@@ -0,0 +1,82 @@
+/** @jsxImportSource preact */
+import type { JSX, ComponentChildren } from "preact";
+import type { RizomLink, SiteLayoutInfo } from "@rizom/site";
+import {
+  Footer,
+  Header,
+  RizomFrame,
+  SideNav,
+  socialLinksToRizomLinks,
+} from "@rizom/site-rizom";
+import { isNewTabHref, BOOKING_HREF, QUIZ_HREF } from "./link-targets";
+
+interface WorkLayoutProps {
+  sections: ComponentChildren;
+  siteInfo: Pick<SiteLayoutInfo, "socialLinks"> & {
+    copyright?: string;
+    cta?: {
+      buttonLink: string;
+      buttonText: string;
+    };
+  };
+}
+
+const NAV_LINKS: RizomLink[] = [
+  { href: "#workshop", label: "Workshop" },
+  { href: "#cta", label: "Contact" },
+  { href: "#about", label: "About" },
+];
+
+const PRIMARY_CTA: RizomLink = {
+  href: QUIZ_HREF,
+  label: "Take the quiz",
+  external: true,
+};
+
+const FOOTER_LINKS: RizomLink[] = [
+  { href: "#workshop", label: "The workshops" },
+  { href: "https://rizom.foundation", label: "The research" },
+  { href: "https://rizom.ai", label: "The platform" },
+];
+
+const SIDE_NAV_ITEMS = [
+  { href: "#hero", label: "Intro" },
+  { href: "#problem", label: "Problem" },
+  { href: "#workshop", label: "Workshop" },
+  { href: "#methodology", label: "Methodology" },
+  { href: "#personas", label: "Fit" },
+  { href: "#proof", label: "Proof" },
+  { href: "#about", label: "About" },
+];
+
+export const WorkLayout = ({
+  sections,
+  siteInfo,
+}: WorkLayoutProps): JSX.Element => (
+  <RizomFrame>
+    <Header
+      brandSuffix="work"
+      navLinks={NAV_LINKS}
+      primaryCta={
+        siteInfo.cta
+          ? {
+              href: siteInfo.cta.buttonLink,
+              label: siteInfo.cta.buttonText,
+              external: isNewTabHref(siteInfo.cta.buttonLink),
+            }
+          : PRIMARY_CTA
+      }
+    />
+    <SideNav items={SIDE_NAV_ITEMS} />
+    <main>{sections}</main>
+    <Footer
+      brandSuffix="work"
+      metaLabel={siteInfo.copyright ?? ""}
+      links={[
+        ...FOOTER_LINKS,
+        ...socialLinksToRizomLinks(siteInfo, ["linkedin"]),
+        { href: BOOKING_HREF, label: "Email", external: true },
+      ]}
+    />
+  </RizomFrame>
+);

package/src/link-targets.tsx

@@ -0,0 +1,25 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Button, type ButtonProps } from "@rizom/site-rizom";
+
+export const QUIZ_HREF = "https://form.typeform.com/to/NGqo9Fnf";
+export const BOOKING_HREF = "mailto:contact@rizom.ai";
+
+const NEW_TAB_HREFS = new Set([QUIZ_HREF, BOOKING_HREF]);
+
+export function isNewTabHref(href: string): boolean {
+  return NEW_TAB_HREFS.has(href);
+}
+
+export function newTabProps(href: string): { target?: string; rel?: string } {
+  return isNewTabHref(href)
+    ? { target: "_blank", rel: "noopener noreferrer" }
+    : {};
+}
+
+export type WorkButtonVariant = NonNullable<ButtonProps["variant"]>;
+export type WorkButtonSize = NonNullable<ButtonProps["size"]>;
+
+export const WorkButton = (props: ButtonProps): JSX.Element => (
+  <Button {...newTabProps(props.href)} {...props} />
+);

package/src/routes.ts

@@ -0,0 +1,61 @@
+import type { RouteDefinitionInput } from "@rizom/site";
+
+export const workRoutes: 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: "workshop",
+        template: "landing-page:workshop",
+        content: {},
+      },
+      {
+        id: "credibility",
+        template: "landing-page:credibility",
+        content: {},
+      },
+      {
+        id: "personas",
+        template: "landing-page:personas",
+        content: {},
+      },
+      {
+        id: "proof",
+        template: "landing-page:proof",
+        content: {},
+      },
+      {
+        id: "ownership",
+        template: "landing-page:ownership",
+        content: {},
+      },
+      {
+        id: "mission",
+        template: "landing-page:closer",
+        content: {},
+      },
+      {
+        id: "ecosystem",
+        template: "landing-page:ecosystem",
+        content: {},
+      },
+    ],
+  },
+];

package/src/sections/bridge/layout.tsx

@@ -0,0 +1,31 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Section } from "@rizom/site-rizom";
+import { WORK_KICKER, WORK_RULE } from "../styles";
+import type { BridgeContent } from "./schema";
+
+export const BridgeLayout = ({
+  kicker,
+  body,
+  linkLabel,
+  linkHref,
+}: BridgeContent): JSX.Element => {
+  return (
+    <Section
+      id="bridge"
+      className="reveal pt-20 pb-24 text-center max-[768px]:pt-14 max-[768px]:pb-[72px]"
+    >
+      <div className={`${WORK_RULE} mb-12`} />
+      <span className={`${WORK_KICKER} mb-4 justify-center`}>{kicker}</span>
+      <p className="mx-auto mb-7 max-w-[760px] font-display text-[clamp(22px,2.6vw,32px)] italic leading-[1.4] text-theme max-[768px]:text-[19px] max-[768px]:leading-[1.42]">
+        {body}
+      </p>
+      <a
+        href={linkHref}
+        className="inline-flex border-b border-accent pb-[3px] font-body text-[15px] font-medium text-accent transition-all hover:pb-[5px]"
+      >
+        {linkLabel}
+      </a>
+    </Section>
+  );
+};

package/src/sections/bridge/schema.ts

@@ -0,0 +1,11 @@
+/**
+ * Runtime schema/formatter for bridge 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 BridgeContent {
+  kicker: string;
+  body: string;
+  linkLabel: string;
+  linkHref: string;
+}

package/src/sections/closer/layout.tsx

@@ -0,0 +1,50 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import type { CloserContent } from "./schema";
+import { Section, renderHighlightedText } from "@rizom/site-rizom";
+import { WorkButton } from "../../link-targets";
+import { WORK_RULE } from "../styles";
+
+const HIGHLIGHT_CLS = "italic text-accent font-normal";
+
+export const CloserLayout = ({
+  preamble,
+  headline,
+  primaryCtaLabel,
+  primaryCtaHref,
+  secondaryCtaLabel,
+  secondaryCtaHref,
+}: CloserContent): JSX.Element => {
+  return (
+    <Section
+      id="cta"
+      className="reveal pt-[128px] pb-[144px] text-center max-[768px]:pt-20 max-[768px]:pb-24"
+    >
+      <div className={`${WORK_RULE} mb-12 max-[768px]:mb-9`} />
+      {preamble && (
+        <p className="mx-auto mb-10 max-w-[560px] font-body text-[18px] italic leading-[1.7] text-theme-light max-[768px]:mb-7 max-[768px]:text-[15px]">
+          {preamble}
+        </p>
+      )}
+      <h2 className="font-display text-[clamp(40px,6vw,80px)] font-[520] leading-[0.98] tracking-[-2px] text-theme max-[768px]:text-[35px] max-[768px]:leading-[1.04] max-[768px]:tracking-[-1px]">
+        {renderHighlightedText(headline, HIGHLIGHT_CLS)}
+      </h2>
+      <div className="mt-14 flex flex-wrap justify-center gap-5 max-[768px]:mt-10 max-[768px]:flex-col max-[768px]:items-stretch max-[768px]:gap-3 max-[768px]:[&_.rizom-btn]:w-full max-[768px]:[&_.rizom-btn]:justify-center max-[768px]:[&_.rizom-btn]:px-6 max-[768px]:[&_.rizom-btn]:py-4 max-[768px]:[&_.rizom-btn]:text-[16px]">
+        <WorkButton
+          href={primaryCtaHref}
+          variant="primary"
+          className="text-[18px] md:px-11 md:py-5"
+        >
+          {primaryCtaLabel}
+        </WorkButton>
+        <WorkButton
+          href={secondaryCtaHref}
+          variant="secondary"
+          className="text-[18px] md:px-11 md:py-5"
+        >
+          {secondaryCtaLabel}
+        </WorkButton>
+      </div>
+    </Section>
+  );
+};

package/src/sections/closer/schema.ts

@@ -0,0 +1,13 @@
+/**
+ * Runtime schema/formatter for closer 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 CloserContent {
+  preamble: string;
+  headline: string;
+  primaryCtaLabel: string;
+  primaryCtaHref: string;
+  secondaryCtaLabel: string;
+  secondaryCtaHref: string;
+}

package/src/sections/credibility/layout.tsx

@@ -0,0 +1,45 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Section } from "@rizom/site-rizom";
+import { WORK_KICKER, WORK_RULE } from "../styles";
+import type { CredibilityContent } from "./schema";
+
+export const CredibilityLayout = ({
+  kicker,
+  headline,
+  cards,
+}: CredibilityContent): JSX.Element => {
+  return (
+    <Section id="methodology" className="reveal py-[128px] max-[768px]:py-20">
+      <div
+        className={`${WORK_RULE} mb-16 -mt-16 max-[768px]:-mt-10 max-[768px]:mb-12`}
+      />
+
+      <div className="mx-auto mb-20 max-w-[760px] text-center max-[768px]:mb-14">
+        <span className={`${WORK_KICKER} mb-3`}>{kicker}</span>
+        <h2 className="mt-3 font-display text-[clamp(34px,4.8vw,60px)] font-[520] leading-[1.04] tracking-[-1.5px] text-theme max-[768px]:text-[31px] max-[768px]:tracking-[-1px]">
+          {headline}
+        </h2>
+      </div>
+
+      <div className="mx-auto grid max-w-[1120px] grid-cols-2 gap-6 max-[768px]:grid-cols-1 max-[768px]:gap-4">
+        {cards.map((card, index) => (
+          <article
+            key={card.title}
+            className={`reveal reveal-delay-${Math.min(index + 1, 3)} rounded-2xl border border-[var(--color-work-divider-soft)] bg-white/[0.025] p-7 max-[768px]:rounded-xl max-[768px]:p-5`}
+          >
+            <div className="mb-4 font-label text-[11px] font-semibold uppercase tracking-[2.5px] text-accent">
+              {String(index + 1).padStart(2, "0")}
+            </div>
+            <h3 className="mb-3 font-display text-[24px] font-[520] leading-[1.15] tracking-[-0.5px] text-theme max-[768px]:text-[20px]">
+              {card.title}
+            </h3>
+            <p className="font-body text-[16px] leading-[1.72] text-theme-muted max-[768px]:text-[14.5px] max-[768px]:leading-[1.68]">
+              {card.body}
+            </p>
+          </article>
+        ))}
+      </div>
+    </Section>
+  );
+};

package/src/sections/credibility/schema.ts

@@ -0,0 +1,10 @@
+export interface CredibilityCard {
+  title: string;
+  body: string;
+}
+
+export interface CredibilityContent {
+  kicker: string;
+  headline: string;
+  cards: CredibilityCard[];
+}

package/src/sections/hero/layout.tsx

@@ -0,0 +1,170 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import type { WorkHeroContent } from "./schema";
+import { Section, renderHighlightedText } from "@rizom/site-rizom";
+import { WorkButton, newTabProps } from "../../link-targets";
+
+const HIGHLIGHT_CLS = "italic text-accent";
+const RADAR_OUTER_RING_CLASS = "fill-none stroke-white/26 [stroke-width:1.5]";
+const RADAR_SHAPE_CLASS =
+  "fill-accent/20 stroke-accent [stroke-width:2.5] [stroke-linejoin:round]";
+const RADAR_NODE_CLASS = "fill-white stroke-[var(--color-bg)] [stroke-width:2]";
+const RADAR_LABEL_CLASS =
+  "font-mono text-[10px] font-semibold uppercase tracking-[1.6px] fill-white/64";
+
+const RADAR_OUTER_POINTS = "180,50 266.60,200 93.40,200";
+const RADAR_DATA_POINTS = "180,95 233.69,181 150.56,167";
+
+const RADAR_NODES = [
+  { cx: "180", cy: "95" },
+  { cx: "233.69", cy: "181" },
+  { cx: "150.56", cy: "167" },
+] as const;
+
+const RADAR_LABELS = [
+  { x: "180", y: "34", textAnchor: "middle", name: "Specialization" },
+  { x: "252", y: "222", textAnchor: "start", name: "Credibility" },
+  { x: "108", y: "222", textAnchor: "end", name: "Coordination" },
+] as const;
+
+export const WorkHeroLayout = ({
+  kicker,
+  headline,
+  subtitle,
+  primaryCtaLabel,
+  primaryCtaHref,
+  secondaryCtaLabel,
+  secondaryCtaHref,
+  verdictLabel,
+  verdictValue,
+  findingsLabel,
+  findings,
+  diagnosticCtaLabel,
+  diagnosticCtaHref,
+}: WorkHeroContent): JSX.Element => {
+  return (
+    <Section
+      id="hero"
+      className="relative overflow-hidden lg:flex lg:min-h-[100dvh] lg:items-center lg:pt-[120px] lg:pb-16"
+    >
+      <div className="grid w-full gap-7 lg:grid-cols-[0.95fr_1.05fr] lg:grid-rows-[auto_auto] lg:items-center lg:gap-x-16 lg:gap-y-0">
+        <div className="flex min-h-[100dvh] flex-col pt-[104px] pb-10 lg:contents">
+          <div className="flex flex-1 flex-col justify-center gap-7 lg:contents">
+            <div className="relative z-[2] lg:col-start-1 lg:row-start-1">
+              <div className="mb-5 inline-flex items-center gap-[14px] font-label text-[11px] font-semibold uppercase text-accent opacity-0 animate-hero-rise [animation-delay:0.1s] [letter-spacing:2.8px] before:block before:h-px before:w-8 before:bg-accent before:opacity-80 before:content-[''] max-[768px]:gap-3 max-[768px]:text-[10px] max-[768px]:tracking-[2.4px] max-[768px]:before:w-6 md:mb-6">
+                <span>{kicker}</span>
+              </div>
+              <h1 className="mb-6 max-w-full font-display text-[34px] font-[520] leading-[1.04] tracking-[-0.9px] text-theme opacity-0 animate-hero-rise [animation-delay:0.2s] min-[420px]:text-[36px] md:mb-7 md:text-[clamp(36px,5.2vw,76px)] md:leading-none md:tracking-[-2px] lg:max-w-[14ch]">
+                {renderHighlightedText(headline, HIGHLIGHT_CLS)}
+              </h1>
+              <p className="max-w-[500px] font-body text-[15.5px] leading-[1.68] text-theme-muted opacity-0 animate-hero-rise [animation-delay:0.4s] md:mb-10 md:text-[18px] md:leading-[1.65]">
+                {subtitle}
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-3 opacity-0 animate-hero-rise [animation-delay:0.6s] md:flex-row md:flex-wrap md:gap-[14px] max-[768px]:[&_.rizom-btn]:w-full max-[768px]:[&_.rizom-btn]:justify-center max-[768px]:[&_.rizom-btn]:px-6 max-[768px]:[&_.rizom-btn]:py-[15px] lg:col-start-1 lg:row-start-2">
+              <WorkButton href={primaryCtaHref} variant="primary" block>
+                {primaryCtaLabel}
+              </WorkButton>
+              <WorkButton href={secondaryCtaHref} variant="secondary" block>
+                {secondaryCtaLabel}
+              </WorkButton>
+            </div>
+          </div>
+        </div>
+
+        <div
+          id="hero-diagnostic"
+          className="rizom-diagnostic-panel relative z-[2] w-full max-w-[500px] rounded-[14px] border border-accent/30 px-[18px] py-5 opacity-0 animate-hero-rise [animation-delay:0.75s] md:rounded-2xl md:px-[30px] md:pt-5 md:pb-[26px] max-[1100px]:mx-auto max-[1100px]:max-w-[480px] max-[768px]:mb-14 max-[380px]:px-4 lg:ml-auto lg:col-start-2 lg:row-start-1 lg:row-span-2"
+        >
+          <div className="rizom-diagnostic-panel-bar absolute inset-x-0 top-0 h-[2px] rounded-t-2xl" />
+
+          <div className="relative pb-2 md:pb-3">
+            <svg
+              viewBox="0 4 360 248"
+              className="block h-auto w-full"
+              role="img"
+              aria-label="Three-axis TMS radar — Specialization, Credibility, Coordination"
+            >
+              <polygon
+                className={RADAR_OUTER_RING_CLASS}
+                points={RADAR_OUTER_POINTS}
+              />
+              <polygon
+                className={RADAR_SHAPE_CLASS}
+                points={RADAR_DATA_POINTS}
+              />
+              {RADAR_NODES.map(({ cx, cy }) => (
+                <circle
+                  key={`${cx}-${cy}`}
+                  className={RADAR_NODE_CLASS}
+                  cx={cx}
+                  cy={cy}
+                  r="4"
+                />
+              ))}
+              {RADAR_LABELS.map(({ x, y, textAnchor, name }) => (
+                <text
+                  key={name}
+                  className={RADAR_LABEL_CLASS}
+                  x={x}
+                  y={y}
+                  textAnchor={textAnchor}
+                >
+                  {name}
+                </text>
+              ))}
+            </svg>
+          </div>
+
+          <div className="flex items-baseline justify-between gap-4 border-t border-white/12 py-[18px] max-[420px]:flex-col max-[420px]:items-start max-[420px]:gap-1.5 max-[420px]:py-4">
+            <span className="whitespace-nowrap font-mono text-[10px] uppercase tracking-[0.18em] text-theme-light">
+              {verdictLabel}
+            </span>
+            <span className="whitespace-nowrap text-right font-display italic text-[22px] font-medium leading-[1.05] tracking-[-0.015em] text-theme [font-variation-settings:'opsz'_96] max-[420px]:text-left max-[420px]:text-[20px] max-[360px]:text-[18px]">
+              {verdictValue}
+            </span>
+          </div>
+
+          <div className="border-t border-white/12 pt-2.5 md:pt-5">
+            <div className="flex items-baseline justify-between gap-3">
+              <span className="font-mono text-[8px] uppercase tracking-[0.22em] text-theme-light md:text-[9.5px] md:tracking-[0.2em]">
+                {findingsLabel}
+              </span>
+              <span className="flex items-baseline gap-1.5 font-mono text-[8px] uppercase tracking-[0.18em] text-theme-light md:text-[9.5px]">
+                <span aria-hidden className="text-theme-light/60">
+                  →
+                </span>
+                <span className="text-accent/85">Coordination</span>
+                <span className="tabular-nums text-accent/85">
+                  34<span className="opacity-60">/100</span>
+                </span>
+              </span>
+            </div>
+            <ul className="mt-3 flex flex-col gap-2 md:mt-4 md:gap-3">
+              {findings.map((finding, index) => (
+                <li
+                  key={finding}
+                  className="flex items-baseline gap-3 text-[11.5px] leading-[1.38] text-white/84 md:text-body-xs md:leading-[1.5]"
+                >
+                  <span className="min-w-[26px] font-mono text-[9px] font-semibold uppercase tracking-[0.1em] text-accent/80 md:text-[10px]">
+                    {`[${String(index + 1).padStart(2, "0")}]`}
+                  </span>
+                  <span>{finding}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <a
+            href={diagnosticCtaHref}
+            {...newTabProps(diagnosticCtaHref)}
+            className="mt-3 inline-flex w-full items-center justify-center rounded-[10px] border border-white/18 px-3 py-2.5 font-mono text-[8.5px] uppercase tracking-[0.18em] text-white/88 transition-colors hover:border-accent/60 hover:bg-accent/8 hover:text-theme md:mt-5 md:px-4 md:py-3 md:text-[10.5px]"
+          >
+            {diagnosticCtaLabel}
+          </a>
+        </div>
+      </div>
+    </Section>
+  );
+};

package/src/sections/hero/schema.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 WorkHeroContent {
+  kicker: string;
+  headline: string;
+  subtitle: string;
+  primaryCtaLabel: string;
+  primaryCtaHref: string;
+  secondaryCtaLabel: string;
+  secondaryCtaHref: string;
+  verdictLabel: string;
+  verdictValue: string;
+  findingsLabel: string;
+  findings: string[];
+  diagnosticCtaLabel: string;
+  diagnosticCtaHref: string;
+}

package/src/sections/ownership/layout.tsx

@@ -0,0 +1,76 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Section } from "@rizom/site-rizom";
+import { WORK_KICKER, WORK_RULE } from "../styles";
+import type { OwnershipContent } from "./schema";
+
+const renderBody = (body: string): JSX.Element => {
+  const marker = "rizom.foundation";
+  const index = body.indexOf(marker);
+
+  if (index === -1) return <>{body}</>;
+
+  return (
+    <>
+      {body.slice(0, index)}
+      <a
+        href="https://rizom.foundation"
+        className="border-b border-transparent text-accent transition-colors hover:border-accent"
+      >
+        {marker}
+      </a>
+      {body.slice(index + marker.length)}
+    </>
+  );
+};
+
+export const OwnershipLayout = ({
+  kicker,
+  headline,
+  cards,
+}: OwnershipContent): JSX.Element => {
+  return (
+    <Section id="about" className="reveal py-[128px] max-[768px]:py-20">
+      <div
+        className={`${WORK_RULE} mb-16 -mt-16 max-[768px]:-mt-10 max-[768px]:mb-12`}
+      />
+
+      <div className="mx-auto flex max-w-[1160px] items-start gap-[88px] max-[1100px]:gap-12 max-[768px]:flex-col max-[768px]:gap-10">
+        <div className="w-[42%] max-[768px]:w-full">
+          <span className={`${WORK_KICKER} mb-4`}>{kicker}</span>
+          <h2 className="mt-4 font-display text-[clamp(32px,4.2vw,52px)] font-[520] leading-[1.05] tracking-[-1.4px] text-theme max-[768px]:mt-3 max-[768px]:text-[30px]">
+            {headline}
+          </h2>
+        </div>
+        <div className="flex w-[58%] flex-col gap-10 pt-16 max-[768px]:w-full max-[768px]:gap-8 max-[768px]:pt-0">
+          {cards.map((card, index) => {
+            const badge =
+              card.badge.trim() ||
+              (card.title.startsWith("A network") ? "+" : "");
+            const body = card.body.trim();
+            return (
+              <div
+                key={card.title}
+                className={`reveal reveal-delay-${index + 1} flex items-start gap-[22px] max-[768px]:gap-[18px]`}
+              >
+                <div className="flex h-12 min-w-12 items-center justify-center rounded-lg border border-accent px-3 font-display text-[16px] font-semibold tracking-[-0.3px] text-accent max-[768px]:h-11 max-[768px]:min-w-11 max-[768px]:text-[15px]">
+                  {badge}
+                </div>
+                <div>
+                  <div className="mb-1.5 font-display text-[20px] font-[520] text-theme max-[768px]:text-[18px]">
+                    {card.title}
+                  </div>
+                  {body ? (
+                    <p className="font-body text-[15px] leading-[1.72] text-theme-muted max-[768px]:text-[14px] max-[768px]:leading-[1.68]">
+                      {renderBody(body)}
+                    </p>
+                  ) : null}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </Section>
+  );
+};

package/src/sections/ownership/schema.ts

@@ -0,0 +1,11 @@
+export interface OwnershipCard {
+  badge: string;
+  title: string;
+  body: string;
+}
+
+export interface OwnershipContent {
+  kicker: string;
+  headline: string;
+  cards: OwnershipCard[];
+}