@coralreefventures/site 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Coral Reef Ventures, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,114 @@
+# @coralreefventures/site
+
+The shell a Coral Reef public site is built in: the frame every page shares (skip link, header, main, footer), the
+section and split layouts, the closing call to action, the screenshot frame, the status tag, the social-card builder,
+the metadata helpers and the server-only test helper. Everything is a server component: nothing here is a client
+module or imports one, so a page built on it can ship no script at all. Mantine is never imported; the shell reads
+the theme's CSS variables (`--mantine-primary-color-*`, radii, font sizes) and the site's own tokens.
+
+Driftline's `apps/site` began as a copy of Streamlane's, and the two drifted. What differs between the sites as a
+product difference (name, URL, navigation, actions, footer lines, the brand's mark, the cards) is a `SiteConfig`
+the product passes once; what differed by drift was settled here, one way, and is listed at the end.
+
+## Using it
+
+Bind the shell to the site's config in one module, and import from there:
+
+```tsx
+// lib/site.tsx
+import { createSite } from "@coralreefventures/site";
+import { Lockup } from "@/components/brand/Lockup";
+import { socialMark } from "@/components/brand/social-mark";
+import { brand } from "@streamlane/theme";
+
+export const site = createSite({
+  name: "Streamlane",
+  url: "https://streamlane.app",
+  description: "Docs, work, ideas, and delivery in one place. Delivery state comes from GitHub, never from a person.",
+  nav: [
+    { key: "product", label: "Product", href: "/product/" },
+    { key: "docs", label: "Docs", href: "/docs/" },
+    // ...
+  ],
+  lockup: <Lockup height={24} />,
+  actions: [
+    { label: "Sign in", href: "https://app.streamlane.app", kind: "link", hideBelow: "md" },
+    { label: "Start free", href: "/pricing/", kind: "primary" },
+  ],
+  footer: {
+    maker: <>Streamlane · made by <a href="https://coralreefventures.com/">Coral Reef Ventures</a> · source on <a href="...">GitHub</a></>,
+    links: [{ label: "Docs", href: "/docs/" }, { label: "Changelog", href: "/changelog/" } /* ... */],
+    trademarks: ["Jira", "Confluence", "Linear", "Notion", "GitLab", "Plane"],
+  },
+  cards: { "/": { headline: "...", sentence: "..." }, "/pricing/": { headline: "..." } },
+  socialCard: { background: brand.ink, text: brand.white, muted: brand.paper, accent: brand.signal, mark: socialMark },
+  icons: { icon: [{ url: "/brand/favicon-32.png", sizes: "32x32", type: "image/png" }] },
+  themeColor: brand.ink,
+});
+
+export const { SiteFrame, pageMetadata } = site;
+```
+
+```tsx
+// app/(site)/pricing/page.tsx
+import { page, Section } from "@coralreefventures/site";
+import { pageMetadata, SiteFrame } from "@/lib/site";
+
+export const metadata = pageMetadata({ title: "Pricing", description: "...", path: "/pricing/" });
+
+const PricingPage = () => (
+  <SiteFrame active="pricing">
+    <Section size="hero">
+      <h1 className={page.title}>One plan.</h1>
+    </Section>
+  </SiteFrame>
+);
+```
+
+`active` is typed to the config's nav keys. The root layout takes `site.rootMetadata()` and `site.rootViewport()`;
+`app/robots.ts` returns `site.robots()`, `app/sitemap.ts` returns `site.sitemap()` (with the docs pages added, for a
+site that has them); and `app/og/[...card]/route.tsx` keeps its two literals and takes the rest:
+
+```ts
+export const dynamic = "force-static";
+export const dynamicParams = false;
+export const { generateStaticParams, GET } = site.socialCardRoute();
+```
+
+Import `@coralreefventures/site/base.css` in the root layout before the site's own `globals.css`. It carries the
+shared rules (body, inline links, focus ring, skip link) and the layout tokens; `globals.css` keeps the colors:
+`--site-text`, `--site-muted`, `--site-border`, `--site-paper`, `--site-link-underline`, `--site-shadow`, and for
+the status tag's attention tone `--site-attention-tint`, `--site-attention-edge`, `--site-attention-text`.
+
+## Installing
+
+Ships TypeScript and CSS modules as source, with `exports` pointing at `src/`, and no build step. Add it to Next's
+`transpilePackages` beside the product's theme:
+
+```ts
+transpilePackages: ["@streamlane/theme", "@coralreefventures/site"],
+```
+
+`react`, `react-dom`, `next` and `@mantine/core` are peers at the versions both sites use. Nothing here imports
+Mantine; the peer says which theme variables the stylesheets expect.
+
+## The server-only rule
+
+`@coralreefventures/site/testing` exports `clientReach(entry, { root })`, the walk both sites' `server-only.test.ts`
+ran: every "use client" module and every import of a client package (`@mantine/*`, `next/link`, `next/image`,
+`next/script`, `next/dynamic`) reachable from an entry. A product's test keeps asserting it is empty for the root
+layout and the 404 page, and not empty for a page that uses Mantine. This package's own test runs it over every file
+in `src/`.
+
+## What was settled, where the two sites had drifted
+
+- The status tag is plain by default with an `attention` tone (Driftline's), rather than always colored
+  (Streamlane's). Streamlane's `InsightCount` renders as `<Status tone="attention">9 insights · 4 companies</Status>`.
+- The header's primary action can leave the bar on phones (`hideBelow: "sm"`, which Driftline added for its long
+  label); any hidden action is listed in the folded menu, so it stays reachable. Streamlane's "Start free" fits and
+  stays.
+- The closing call to action takes `tone="band"` for Driftline's tinted ground under a rule; Streamlane's is plain.
+- The social card's headline wraps at 920 px, Driftline's later width; Streamlane's was 880.
+- The footer's trademark list is set by `Intl.ListFormat`, as Driftline's was; Streamlane's hand-written list reads
+  the same.
+- The font cache for the social card is `.next/cache/coral-reef/fonts`, shared, since both set Noto Sans.

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@coralreefventures/site",
+  "version": "0.1.0",
+  "description": "The shell a Coral Reef public site is built in: header, footer, sections, the social-card builder and the metadata helpers, as server components, parametrized by one SiteConfig.",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=24"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Coral-Reef-Ventures/reef.git",
+    "directory": "packages/site"
+  },
+  "homepage": "https://coralreefventures.com/",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "next",
+    "react",
+    "server-components",
+    "mantine",
+    "coral-reef"
+  ],
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./testing": "./src/testing/index.ts",
+    "./base.css": "./src/base.css"
+  },
+  "peerDependencies": {
+    "@mantine/core": "9.6.3",
+    "next": "16.3.6",
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "next": "16.3.6",
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  }
+}

package/src/Screenshot.module.css

@@ -0,0 +1,28 @@
+.frame {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 0;
+  padding: 24px;
+  box-sizing: border-box;
+  border: 1px solid var(--site-border);
+  border-radius: var(--mantine-radius-lg);
+  background: var(--mantine-color-gray-0);
+}
+
+.caption {
+  max-width: 44ch;
+  font-size: var(--mantine-font-size-xs);
+  line-height: 1.55;
+  text-align: center;
+  color: var(--site-muted);
+}
+
+.image {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 1px solid var(--site-border);
+  border-radius: var(--mantine-radius-lg);
+}

package/src/Screenshot.tsx

@@ -0,0 +1,67 @@
+import { existsSync, readFileSync } from "node:fs";
+import path from "node:path";
+
+import classes from "./Screenshot.module.css";
+
+/**
+ * The file a screenshot is captured to, under public/screens: its name (the caption in the copy) as a slug, so
+ * "Release v2.3 page: …" is release-v2-3-page-….png. A product's capture script writes the same names.
+ */
+export const screenshotFile = (name: string) =>
+  `${name
+    .normalize("NFKD")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "")}.png`;
+
+// A PNG's width and height are the first two fields of its IHDR chunk, at bytes 16–23.
+const pngSize = (file: string) => {
+  const header = readFileSync(file).subarray(16, 24);
+  return { width: header.readUInt32BE(0), height: header.readUInt32BE(4) };
+};
+
+type ScreenshotProps = {
+  /** The caption from the copy; it names the file and is the image's alt text. */
+  name: string;
+  /** The placeholder's shape until the image exists, as a CSS aspect ratio. */
+  aspect?: string;
+  /** Load at once: the screenshot is in the first screen of the page. */
+  priority?: boolean;
+  /** Where screenshots are kept; the app's public/screens by default. */
+  directory?: string;
+};
+
+/**
+ * A screen from the product. Until public/screens/<name>.png exists (screens are captured by a script, never made
+ * by hand), it renders a labeled gray frame with the caption. A server component: it checks for the file at build.
+ */
+export const Screenshot = ({
+  name,
+  aspect = "16 / 10",
+  priority = false,
+  directory = path.join(process.cwd(), "public", "screens"),
+}: ScreenshotProps) => {
+  const file = screenshotFile(name);
+  const onDisk = path.join(directory, file);
+  if (existsSync(onDisk)) {
+    const { width, height } = pngSize(onDisk);
+    return (
+      // biome-ignore lint/performance/noImgElement: next/image is a client component, and a static export serves the file as it is.
+      <img
+        className={classes.image}
+        src={`/screens/${file}`}
+        alt={name}
+        width={width}
+        height={height}
+        loading={priority ? "eager" : "lazy"}
+        fetchPriority={priority ? "high" : "auto"}
+        decoding="async"
+      />
+    );
+  }
+  return (
+    <figure className={classes.frame} style={{ aspectRatio: aspect }} data-screenshot={file}>
+      <figcaption className={classes.caption}>{name}</figcaption>
+    </figure>
+  );
+};

package/src/Status.module.css

@@ -0,0 +1,24 @@
+/*
+ * Plain is a neutral tag. Attention is the site's one attention color, which globals.css names as three tokens
+ * (the attention hue's palest shade, a mid shade for the edge, its darkest for the text); the primary scale stands
+ * in where a site sets none.
+ */
+.status {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border: 1px solid var(--site-border);
+  border-radius: 999px;
+  background: var(--site-paper);
+  color: var(--site-text);
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 500;
+  line-height: 1.6;
+  white-space: nowrap;
+
+  &[data-tone="attention"] {
+    border-color: var(--site-attention-edge, var(--mantine-primary-color-3));
+    background: var(--site-attention-tint, var(--mantine-primary-color-0));
+    color: var(--site-attention-text, var(--mantine-primary-color-9));
+  }
+}

package/src/Status.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+
+import classes from "./Status.module.css";
+
+/**
+ * When a capability ships, beside the section that describes it ("Ships with the GitHub integration", "Later"). A
+ * Coral Reef site describes how a product works and never says a feature is available, so anything not yet shipped
+ * carries one of these. `attention` draws it in the site's attention color (--site-attention-*). A server component.
+ */
+export const Status = ({ children, tone = "plain" }: { children: ReactNode; tone?: "plain" | "attention" }) => (
+  <span className={classes.status} data-tone={tone}>
+    {children}
+  </span>
+);

package/src/base.css

@@ -0,0 +1,77 @@
+/*
+ * The rules every Coral Reef site shares, outside Mantine's layer so they win over its baseline without raising
+ * specificity. Import it in the root layout before the site's own globals.css, which sets the colors:
+ *
+ *   --site-text, --site-muted, --site-border, --site-paper, --site-link-underline,
+ *   --site-shadow (the folded menu's shadow, a tint of the darkest color), and
+ *   --site-attention-tint, --site-attention-edge, --site-attention-text (the Status tag's attention tone).
+ *
+ * The layout tokens below are the shell's own and the same on every site. Media queries use Mantine's breakpoints
+ * as literals (sm 48em, md 62em), since custom properties cannot appear in them.
+ */
+
+:root {
+  --site-max-width: 1200px;
+  --site-gutter: 24px;
+  --site-section-space: 72px;
+
+  @media (max-width: 48em) {
+    --site-gutter: 16px;
+    --site-section-space: 48px;
+  }
+}
+
+/* The text color the theme's components read; the default is pure black. */
+:root[data-mantine-color-scheme="light"] {
+  --mantine-color-text: var(--site-text);
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--mantine-color-white);
+  color: var(--site-text);
+  overflow-wrap: break-word;
+}
+
+/*
+ * Inline links (anchors without a class; components style their own) are text-colored with the site's underline
+ * color: an accent on white is too light to read as text.
+ */
+a:not([class]) {
+  color: var(--site-text);
+  text-decoration-line: underline;
+  text-decoration-color: var(--site-link-underline);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+}
+
+a:not([class]):hover {
+  text-decoration-color: var(--mantine-primary-color-filled);
+}
+
+:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
+}
+
+/* The skip link is visible only when focused. */
+.skip-link {
+  position: absolute;
+  left: 8px;
+  top: -48px;
+  z-index: 10;
+  padding: 8px 12px;
+  border-radius: var(--mantine-radius-sm);
+  background: var(--mantine-primary-color-filled);
+  color: var(--mantine-color-white);
+  text-decoration: none;
+}
+
+.skip-link:focus {
+  top: 8px;
+}

package/src/cards.ts

@@ -0,0 +1,15 @@
+import type { Card } from "./config";
+
+export type { Card };
+
+/** Where a page's card is published: "/" is /og/home.png, "/docs/concepts/teams/" is /og/docs/concepts/teams.png. */
+export const cardPath = (pagePath: string) => `/og/${pagePath.replace(/^\/|\/$/g, "") || "home"}.png`;
+
+/** The route segments of a card's path, as app/og/[...card] receives them. */
+export const cardSegments = (pagePath: string) =>
+  cardPath(pagePath)
+    .replace(/^\/og\//, "")
+    .split("/");
+
+/** The social card is 1200 × 630, the size every network reads. */
+export const socialCardSize = { width: 1200, height: 630 };

package/src/config.ts

@@ -0,0 +1,61 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+/** A header section: `key` is what a page passes as `active` to mark it current. */
+export type NavItem<Key extends string = string> = { key: Key; label: string; href: string };
+
+/**
+ * A header action beside the navigation. `primary` is the filled button (Start free, Request early access); `link`
+ * is a plain link (Sign in). An action with `hideBelow` leaves the bar at that breakpoint (`sm` 36em, `md` 62em) and
+ * is listed in the folded menu instead, so it stays reachable on a phone.
+ */
+export type HeaderAction = { label: string; href: string; kind: "primary" | "link"; hideBelow?: "sm" | "md" };
+
+export type FooterLink = { label: string; href: string };
+
+/** A page's social card: its headline and one sentence from its copy. */
+export type Card = { headline: string; sentence?: string };
+
+/**
+ * How the social card is drawn (1200 × 630): the ground, the headline's color, the sentence's, the domain's, and the
+ * product's mark at 72 px, each from the brand. `domain` is the site's host unless another is given.
+ */
+export type SocialCardStyle = {
+  background: string;
+  text: string;
+  muted: string;
+  accent: string;
+  mark: ReactNode;
+  domain?: string;
+  /** The Google Fonts family the card is set in; Noto Sans, the family's wordmark face, by default. */
+  font?: string;
+};
+
+export type SiteConfig<Key extends string = string> = {
+  /** The product: the title template, the footer's trademark line, the social card's wordmark. */
+  name: string;
+  /** The public origin, no trailing slash; canonical URLs and the social cards are absolute against it. */
+  url: string;
+  /** The default description, for the root layout and any page that gives none. */
+  description: string;
+  /** The header's sections, in order. */
+  nav: readonly NavItem<Key>[];
+  /** The lockup the header shows at 24 px, the way home. The product's own component, since the mark is the brand. */
+  lockup: ReactNode;
+  /** The header's actions, in order. */
+  actions: readonly HeaderAction[];
+  footer: {
+    /** The footer's first line: who makes the product and where its source is. */
+    maker: ReactNode;
+    links: readonly FooterLink[];
+    /** The vendors the site names, disclaimed in the footer: "X, Y, and Z are trademarks of their owners". */
+    trademarks: readonly string[];
+  };
+  /** Each page's social card by path (`"/"`, `"/pricing/"`); every page in the sitemap has one. */
+  cards: Record<string, Card>;
+  socialCard: SocialCardStyle;
+  /** The favicon set, as the root layout's metadata lists it. */
+  icons: Metadata["icons"];
+  /** The browser chrome's color on a phone. */
+  themeColor: string;
+};

package/src/create-site.tsx

@@ -0,0 +1,37 @@
+import type { MetadataRoute } from "next";
+import type { ReactNode } from "react";
+
+import type { Card, SiteConfig } from "./config";
+import { type PageMetadataInput, pageMetadata, rootMetadata, rootViewport } from "./metadata";
+import { SiteFooter } from "./shell/SiteFooter";
+import { SiteFrame } from "./shell/SiteFrame";
+import { SiteHeader } from "./shell/SiteHeader";
+import { socialCard, socialCardRoute } from "./social-card";
+
+/**
+ * The shell bound to one site's config, which a product does once in its `lib/site.tsx` and imports from there:
+ * `const { SiteFrame, pageMetadata } = createSite({ ... })`. Server components need no provider, so binding is a
+ * closure, and `active` is typed to the config's nav keys.
+ */
+export const createSite = <const Key extends string>(config: SiteConfig<Key>) => ({
+  config,
+  SiteFrame: ({ active, children }: { active?: Key | undefined; children: ReactNode }) => (
+    <SiteFrame site={config} active={active}>
+      {children}
+    </SiteFrame>
+  ),
+  SiteHeader: ({ active }: { active?: Key | undefined }) => <SiteHeader site={config} active={active} />,
+  SiteFooter: () => <SiteFooter site={config} />,
+  pageMetadata: (page: PageMetadataInput) => pageMetadata(config, page),
+  rootMetadata: () => rootMetadata(config),
+  rootViewport: () => rootViewport(config),
+  /** Everything is public; the sitemap lists every page. */
+  robots: (): MetadataRoute.Robots => ({ rules: { userAgent: "*", allow: "/" }, sitemap: `${config.url}/sitemap.xml` }),
+  /** Every page with a card, and any more the product lists (docs pages). */
+  sitemap: (more: readonly string[] = []): MetadataRoute.Sitemap =>
+    [...new Set([...Object.keys(config.cards), ...more])].map((path) => ({ url: `${config.url}${path}` })),
+  socialCard: (card: Card) => socialCard(config, card),
+  socialCardRoute: (more?: () => Promise<readonly (readonly [string, Card])[]>) => socialCardRoute(config, more),
+});
+
+export type Site<Key extends string = string> = ReturnType<typeof createSite<Key>>;

package/src/css-modules.d.ts

@@ -0,0 +1,5 @@
+// For this repository's own type check and tests. A Next consumer has the same declaration from next/types/global.
+declare module "*.module.css" {
+  const classes: Record<string, string>;
+  export default classes;
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+import page from "./page/Page.module.css";
+
+export { type Card, cardPath, cardSegments, socialCardSize } from "./cards";
+export type { FooterLink, HeaderAction, NavItem, SiteConfig, SocialCardStyle } from "./config";
+export { createSite, type Site } from "./create-site";
+export { type PageMetadataInput, pageMetadata, rootMetadata, rootViewport } from "./metadata";
+export { CtaBand } from "./page/CtaBand";
+export { Screenshot, screenshotFile } from "./Screenshot";
+export { Status } from "./Status";
+export { Section, Split } from "./shell/Section";
+export { SiteFooter } from "./shell/SiteFooter";
+export { SiteFrame } from "./shell/SiteFrame";
+export { SiteHeader } from "./shell/SiteHeader";
+export { socialCard, socialCardElement, socialCardRoute } from "./social-card";
+
+/** The marketing pages' type scale (display, title, lead, h2, h3, subhead, body, small, actions, card, eyebrow). */
+export { page };

package/src/metadata.ts

@@ -0,0 +1,46 @@
+import type { Metadata, Viewport } from "next";
+
+import { type Card, cardPath, socialCardSize } from "./cards";
+import type { SiteConfig } from "./config";
+
+export type PageMetadataInput = {
+  title: string;
+  description: string;
+  /** The page's path, with its trailing slash. */
+  path: string;
+  /** The social card's headline; the pages in the config's `cards` have theirs there. */
+  card?: Card | undefined;
+};
+
+/**
+ * A page's title, description, canonical URL, and social card. URLs are absolute against metadataBase (the site's
+ * origin), with the trailing slash every page's URL has. A page's openGraph replaces the root layout's rather than
+ * merging with it, so the site-wide fields are repeated here.
+ */
+export const pageMetadata = (
+  site: SiteConfig,
+  { title, description, path, card = site.cards[path] }: PageMetadataInput,
+): Metadata => {
+  const images = [{ url: cardPath(path), ...socialCardSize, type: "image/png", alt: card?.headline ?? title }];
+  return {
+    title: path === "/" ? { absolute: title } : title,
+    description,
+    alternates: { canonical: path },
+    openGraph: { siteName: site.name, type: "website", locale: "en_US", title, description, url: path, images },
+    twitter: { card: "summary_large_image", title, description, images },
+  };
+};
+
+/** The root layout's metadata: the title template, the default description, the icons, and the site-wide card fields. */
+export const rootMetadata = (site: SiteConfig): Metadata => ({
+  metadataBase: new URL(site.url),
+  title: { default: site.name, template: `%s · ${site.name}` },
+  description: site.description,
+  applicationName: site.name,
+  openGraph: { siteName: site.name, type: "website", locale: "en_US" },
+  twitter: { card: "summary_large_image" },
+  icons: site.icons,
+});
+
+/** The root layout's viewport: the brand's color in the browser chrome, and a light-only site. */
+export const rootViewport = (site: SiteConfig): Viewport => ({ themeColor: site.themeColor, colorScheme: "light" });

package/src/page/CtaBand.module.css

@@ -0,0 +1,43 @@
+.band {
+  padding-block: 56px;
+
+  &[data-tone="band"] {
+    background: var(--site-paper);
+    border-top: 1px solid var(--site-border);
+  }
+}
+
+.inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px 48px;
+  max-width: var(--site-max-width);
+  margin-inline: auto;
+  padding-inline: var(--site-gutter);
+  box-sizing: border-box;
+}
+
+.copy {
+  flex: 1 1 28rem;
+}
+
+.title {
+  margin: 0;
+  font-size: 24px;
+  line-height: 1.3;
+}
+
+.text {
+  margin: 6px 0 0;
+  font-size: var(--mantine-font-size-md);
+  line-height: 1.55;
+  color: var(--site-muted);
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}

package/src/page/CtaBand.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+
+import classes from "./CtaBand.module.css";
+
+/**
+ * The closing call to action on Home and Product: a heading and a sentence, with the buttons to the right. `band`
+ * sets it on the tinted ground under a rule, as Driftline's pages do.
+ */
+export const CtaBand = ({
+  title,
+  text,
+  actions,
+  tone = "plain",
+}: {
+  title: string;
+  text: string;
+  actions: ReactNode;
+  tone?: "plain" | "band";
+}) => (
+  <section className={classes.band} data-tone={tone} aria-labelledby="cta-title">
+    <div className={classes.inner}>
+      <div className={classes.copy}>
+        <h2 id="cta-title" className={classes.title}>
+          {title}
+        </h2>
+        <p className={classes.text}>{text}</p>
+      </div>
+      <div className={classes.actions}>{actions}</div>
+    </div>
+  </section>
+);