@breathe-ds/ui 0.3.0 → 0.4.0

package/README.md

@@ -69,7 +69,17 @@ hidden behind the sticky Header or the BottomNav (WCAG 2.4.11).
 | `ink-body` | reading body text | `--cg-ink-body` |
 | `action` | CTA / highlight — **never plain text** | `--cg-action` |
 | `action-text` | text in the action color (AA) | `--cg-action-text` |
+| `on-action` | text ON the action color (the accent button) | `--cg-on-action` |
+| `action-tint` | highlighted panel or card: a 6% wash of the action color over the surface | `--cg-action-tint` |
+| `action-line` | border of a highlighted card (closed tone, 3:1 on the surface; pure ttcab orange is 1.91:1) | `--cg-action-line` |
 | `line` | hairlines / borders | `--cg-line` |
+
+**Dose of the action color** (what brands with a hot accent do, Cloudflare orange,
+Airbnb red): the action color is the fill of ONE element per block, with
+`on-action` text on it; links stay in `ink`/`ink-soft` with an underline; a
+highlighted card is `action-tint` + `action-line`, not the full color; the
+color as text only as `action-text`. The "Action dose" section of the playground
+shows the disciplined and the loud version side by side.
 | `font-heading` / `font-body` | typography | `--cg-font-*` |
 | `radius-xl/2xl/pill` · `ease-cg` | radius and motion curve | fixed |
 
@@ -82,10 +92,11 @@ Values from the standard WCAG formula (the same ones `preview/` computes live):
 | surface `#fbf5e9` / ink `#144753` | 9.41:1 | AAA |
 | surface `#fbf5e9` / ink-soft `#54707a` | 4.86:1 | AA |
 | surface `#fbf5e9` / ink-body `#1e4f5b` | 8.32:1 | AAA |
-| surface `#fbf5e9` / action-text `#9a5d07` | 4.90:1 | AA |
+| surface `#fbf5e9` / action-text `#bd3f0c` | 4.98:1 | AA |
+| action `#e8541e` / on-action `#ffffff` (accent button) | 3.67:1 | 3:1 UI component; below AA text, conscious exception |
 | surface-panel `#144753` / cream text | 9.41:1 | AAA |
 
-`action` `#f6a22a` is decorative/CTA only — do not use it as text on cream.
+`action` `#e8541e` is a vivid red-orange with white text, the Cloudflare/Airbnb route: 3.67:1 passes the 3:1 of UI components, not the 4.5:1 of normal text. A conscious exception, limited to the accent Button (one per block, same type scale as the other buttons so they never look mismatched); small controls (chips, tabs, segments) use `ink` or `action-tint` + `action-text` instead. The UI orange does not match the logo's `#f6a22a` on purpose. As text, use `action-text`.
 
 ## Family typography
 
@@ -200,9 +211,17 @@ from color, not from extra markup.
   replace the arrow). The ProfessionalCard is built on them.
 - **ProfessionalCard** / **ProfessionalModal** / **CaptionBand**: the team card of
   novo.creeta — portrait (plain, living clip on hover, or with the "Presentation"
-  chip), name, role, registration (**always**: COFFITO 414/2012), trajectory /
-  guidance / Instagram rows; the modal plays the presentation with sound, the
-  live caption band (active WebVTT cue) above the name, and the full bio.
+  chip), name, role, registration (**always**: COFFITO 414/2012) and generic
+  `rows` (collapse with text or links, link with arrow or icon — on creeta:
+  trajectory, guidance, Instagram); the modal plays the presentation with sound,
+  the live caption band (active WebVTT cue) above the name, and the full `bio`.
+  Three sizes (`size`): `full` (team page), `medium` (the home's tile — 3:4
+  portrait, name, "Meet" badge on hover, a link to the full card; `shortName`,
+  `href`) and `micro` (the "who treats" row — 72px photo, name, role, link).
+- **Rail** / **RailItem**: novo.creeta's `Trilho` — on the phone a snapping
+  horizontal rail with a progress bar underneath (shown only when it scrolls),
+  a grid from md (`grid` classes written in full). RailItem presets the phone
+  width: `wide` (treatments, videos) or `narrow` (team).
 - **Byline** / **PersonChip** / **Avatar**: who signs or explains content
   (novo.creeta) — stacked portraits + eyebrow + linked names, or portrait + name
   + "Watch the video ↗"; the person chip (portrait, name, role · registration,
@@ -234,9 +253,33 @@ from color, not from extra markup.
 - **CtaCard** / **VideoInviteCard**: the final call of a novo.creeta page — white
   card (title, lead, CTA slot) beside a video card: muted loop with the speaker's
   name over it, pause control, play button that plays the full video with sound.
+- **CareSteps**: "how the care works" of novo.creeta — a bento mosaic of
+  numbered steps (drawing above, text below; the first takes two columns) with
+  the invite on the dark panel closing the sequence. The drawings are slots:
+  **ChatPreview** (a sample chat, bubble by bubble, the clinic "types"; loops
+  while on screen, pause button), **PlanTimeline** (three stages, the line comes
+  down and each dot lights up; 6s loop, pause button), **PhotoSequence** (photos
+  with fade and a slow zoom, CSS only, paused by a hidden checkbox), or a still
+  image. All stand still and whole with reduced motion. `useOnAppear` (animate
+  when half on screen, only while on screen) and `PauseButton` (44px, 32px
+  circle) are exported for your own drawings.
+- **Blog**: creeta's "guidance" area — **PostCard** (the card of the list:
+  cover, category, title as the link stretched over the card, excerpt in three
+  lines, author · date), **FeaturedPosts** ("in the words of who treats you":
+  bento, the first post wide with the cover beside the text, a Byline with the
+  speaker and "Watch the video ↗" at the foot) and **PostArticle** (the page:
+  trail, title, PersonChip and date, the text with its notice, the video beside
+  it sticky from md, the transcript open; children for "other posts" and the
+  final call).
+- **StoryPanel**: creeta's "origin" block — one dark panel (surface-panel)
+  grouping a story: media at the top with a film that fades into the panel, the
+  logo at its base, title, lead, three pillars in columns with a hairline above
+  each, and the outbound links. For "who we are" and "why us" blocks.
 - **Footer**: the site-footer of novo.creeta, by tokens — full width like the
   Header, with the signed brand + sentence, "Pages" (title on the first line, links in two
-  columns), "Where we are" (address, hours, "Directions ↗ · Waze ↗"), an optional
+  columns; with many pages, `pages.groups` — titled columns, up to four side by
+  side, so the list gets wider instead of taller), "Where we are" (address, hours,
+  "Directions ↗ · Waze ↗"), an optional
   notice band on `surface`, the legal line with the **CNPJ (always required in
   the family)** plus the contact chips, and the languages as plain links.
   `navHiddenFrom` keeps room at the bottom for the BottomNav.
@@ -264,7 +307,7 @@ from color, not from extra markup.
       **Data rule:** every professional MUST have a **CREFITO** attached (COFFITO requirement).
 - [x] **Pill / PillList** — the Atalho of novo.creeta (white 44px pill, arrow bubble: ↓ anchor, ↗ other page, optional meta); wrapping row + "See all"
 - [x] **AnchorNav** (floating capsule of anchors, scroll-spy + sliding indicator) — extracted from ttcab (10/29)
-- [x] **Footer** · **PageVideoHero** (loop and player) · **Header** (dropdown, house) · **BottomNav** · **Curtain** · **Lockup** (5 arrangements) · **BreatheMark**
+- [x] **Footer** · **PageVideoHero** (loop, and player from a YouTube id or the site's own mp4) · **Header** (dropdown, house) · **BottomNav** · **Curtain** · **Lockup** (5 arrangements) · **BreatheMark**
 - [x] **Site brand marks** (`components/marks/`): real symbol + wordmark for TTCAB and Creeta (10/29)
 - [ ] **ThreadRail** (side graphic device — a thread running down the left linking sections) — approved,
       **already exists in ttcab** → extract.

package/components/AnchorNav.tsx

@@ -36,7 +36,8 @@ type Props = {
  * The active signal = the indicator (ink/12 fill + outline), NOT text color:
  * the text is always `ink` on `surface`, with no low-contrast frame.
  * prefers-reduced-motion removes the slide. Target sections need a
- * `scroll-mt-*` compatible with the sticky offset (e.g. `scroll-mt-40`).
+ * `scroll-mt-*` that, added to the theme's `scroll-padding-top` (96px), clears
+ * the header plus the capsule (e.g. `scroll-mt-20` with an 80px header).
  */
 export function AnchorNav({ items, stickyTop = "top-20", linkComponent, className = "", labels }: Props) {
   const L: ElementType = linkComponent ?? "a";
@@ -45,6 +46,10 @@ export function AnchorNav({ items, stickyTop = "top-20", linkComponent, classNam
   const listRef = useRef<HTMLUListElement>(null);
   const linkRefs = useRef<Record<string, HTMLAnchorElement | null>>({});
   const [pill, setPill] = useState({ x: 0, y: 0, w: 0, h: 0, ready: false });
+  // Stable key of the items: sites pass the array inline, so a new reference
+  // on every render. Keyed by reference, the arrival effect below re-ran on
+  // every page scroll and kept dragging the page back to the hash.
+  const key = items.map((it) => it.id).join("|");
 
   // Scroll-spy
   useEffect(() => {
@@ -63,11 +68,13 @@ export function AnchorNav({ items, stickyTop = "top-20", linkComponent, classNam
     );
     sections.forEach((s) => io.observe(s));
     return () => io.disconnect();
-  }, [items]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
 
   // Arriving with a #hash via client-side navigation: scrolls to the anchor (on
   // a full load the browser already does it; here it's idempotent). Reapplies a
-  // few times to beat the router's late scroll reset.
+  // few times to beat the router's late scroll reset. Runs once, on arrival:
+  // the hash the person sets by clicking a pill is the browser's job.
   useEffect(() => {
     const hash = window.location.hash.slice(1);
     if (!hash || !items.some((it) => it.id === hash)) return;
@@ -80,7 +87,8 @@ export function AnchorNav({ items, stickyTop = "top-20", linkComponent, classNam
       if (++tries >= 4) window.clearInterval(id);
     }, 60);
     return () => window.clearInterval(id);
-  }, [items]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
 
   const measure = () => {
     const el = linkRefs.current[active];

package/components/Button.tsx

@@ -15,10 +15,17 @@ const linkBase =
   "group inline-flex items-center gap-1.5 font-body font-semibold underline decoration-[1.5px] decoration-current/50 underline-offset-4 transition-[text-decoration-color,text-underline-offset] duration-200 hover:decoration-current hover:underline-offset-[5px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink rounded-[2px] disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&>svg]:transition-transform [&>svg]:duration-200 hover:[&>svg]:-translate-y-0.5 hover:[&>svg]:translate-x-0.5 motion-reduce:[&>svg]:transform-none";
 
 const variants: Record<Exclude<Variant, "link">, string> = {
-  // solid petrol, cream text (e.g. "Falar com a equipe")
-  solid: "bg-ink text-surface hover:-translate-y-0.5 shadow-[0_6px_18px_rgba(20,71,83,0.28)]",
-  // action color (orange/magenta) + on-action text (from the token, varies per site)
-  accent: "bg-action text-on-action hover:-translate-y-0.5 shadow-[0_6px_18px_rgba(20,71,83,0.22)]",
+  // Flat, as the pill buttons of novo.creeta: no drop shadow, no lift; the hover
+  // is a change of fill and the tap scales the pill (pillBase). A shadow under a
+  // hot action color read as a grey halo (2026-10-29).
+  // solid petrol, cream text (e.g. "Falar com a equipe"): hover goes to ink-soft (creeta's teal-escuro)
+  solid: "bg-ink text-surface hover:bg-ink-soft",
+  // action color (orange/magenta) + on-action text (from the token, varies per site).
+  // Same type scale as the other variants: buttons side by side must share a size.
+  // On ttcab (white on the vivid red-orange) that is 3.67:1, a conscious exception
+  // (Cloudflare and Airbnb ship the same): passes the 3:1 of UI components, not
+  // the 4.5:1 of normal text. Keep the accent for ONE large button per block.
+  accent: "bg-action text-on-action hover:brightness-[0.92]",
   outline: "border border-line text-ink hover:bg-ink/[0.05]",
   ghost: "text-ink hover:bg-ink/[0.06]",
 };

package/components/Byline.tsx

@@ -51,11 +51,13 @@ export function Byline({ people, eyebrow, action, joiners = { sep: ", ", last: "
       )}
     </span>
   ));
+  // min-h-11 keeps the 44px tap target; -my-3 takes those extra 12px out of the
+  // flow, so when the link wraps under the names the two lines read as one caption
   const actionEl = action ? (
     <L
       href={action.href}
       {...(action.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
-      className="inline-flex min-h-11 items-center gap-1 font-semibold text-ink underline underline-offset-4"
+      className="-my-3 inline-flex min-h-11 items-center gap-1 font-semibold text-ink underline underline-offset-4"
     >
       {action.label}
       <ArrowUpRight />

package/components/CareSteps.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from "react";
+
+export type CareStep = {
+  title: ReactNode;
+  /** What fits the phone card (two columns). */
+  summary: ReactNode;
+  /** The full text, from lg. */
+  text: ReactNode;
+  /** The drawing above the text: a ChatPreview, a photo, a PlanTimeline, a
+   *  PhotoSequence… It fills the frame (absolute inset-0). Decorative: it
+   *  repeats what the text says; only a pause button should reach the keyboard. */
+  visual: ReactNode;
+};
+
+type Labels = {
+  /** sr-only before the title: "Step 1: ". The number on screen is decoration. */
+  step: (n: number) => string;
+};
+const EN: Labels = { step: (n) => `Step ${n}: ` };
+
+type Props = {
+  steps: CareStep[];
+  /** The last tile, on the dark panel: the sentence and the action (a WhatsApp link, a Button). */
+  invite: { text: ReactNode; action: ReactNode };
+  /** Heading level of the step titles. */
+  headingLevel?: "h2" | "h3";
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/** The frame of each drawing: surface colour, corner concentric with the
+ *  card's (28px minus the 12px of breathing room). */
+const FRAME = "relative h-32 overflow-hidden rounded-2xl bg-surface md:h-52";
+
+/**
+ * How the care works, from the first contact to the treatment — creeta's
+ * `Passos`, by tokens. A bento mosaic: each step has its drawing above and
+ * its text below; the first takes two columns and the invite closes the
+ * sequence:
+ *
+ *   [ 01, wide ]  02          phone:  [ 01, wide ]
+ *    03   04   invite                  02   03
+ *                                      04   invite
+ *
+ * The invite comes last: it is the conclusion of the steps.
+ */
+export function CareSteps({ steps, invite, headingLevel: Title = "h3", labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  return (
+    <div className={`grid grid-cols-2 gap-3 md:grid-cols-3 md:gap-5 ${className}`}>
+      {/* contents: the <li> become tiles of the mosaic and the list stays a list */}
+      <ol className="contents">
+        {steps.map((s, i) => (
+          <li key={i} className={`flex flex-col rounded-[28px] bg-card p-3 ${i === 0 ? "col-span-2 md:flex-row-reverse" : ""}`}>
+            {i === 0 ? (
+              <div className="relative overflow-hidden rounded-2xl bg-surface md:w-1/2">{s.visual}</div>
+            ) : (
+              <div className={FRAME}>{s.visual}</div>
+            )}
+
+            <div className="flex flex-1 flex-col px-2 pb-2 pt-4 md:px-3 md:pb-3 md:pt-5 lg:px-5 lg:pb-5 lg:pt-6">
+              {/* The number is visual reinforcement; the order goes as text for the screen reader. */}
+              <span aria-hidden="true" className="font-heading text-[1.75rem] font-normal leading-none tracking-[-0.04em] text-ink-soft md:text-[2.5rem]">
+                {String(i + 1).padStart(2, "0")}
+              </span>
+              {/* 16px on the phone: the column has 141px, and at 18px titles broke into three lines */}
+              <Title className={`mt-2 font-heading text-base font-medium leading-snug text-ink md:text-xl ${i === 0 ? "md:mt-auto md:pt-6" : "md:mt-3"}`}>
+                <span className="sr-only">{t.step(i + 1)}</span>
+                {s.title}
+              </Title>
+              {/* the full text only when the column fits it: up to lg it has less than 180px */}
+              <p className="mt-1.5 text-sm leading-relaxed text-ink-body lg:hidden">{s.summary}</p>
+              <p className="mt-2 hidden leading-relaxed text-ink-body lg:block">{s.text}</p>
+            </div>
+          </li>
+        ))}
+      </ol>
+
+      {/* The invite closes the mosaic: it is the last tile. */}
+      <div className="flex min-h-[200px] flex-col justify-between gap-6 rounded-[28px] bg-surface-panel p-5 text-surface md:p-6 lg:p-8">
+        <p className="font-heading text-[1.375rem] font-medium leading-[1.15] md:text-[2rem] md:leading-[1.12]">{invite.text}</p>
+        <div className="self-start">{invite.action}</div>
+      </div>
+    </div>
+  );
+}

package/components/ChatPreview.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from "react";
+import { Clock } from "lucide-react";
+import { reducedMotion, useOnAppear } from "./useOnAppear";
+import { PauseButton } from "./PauseButton";
+
+export type ChatMessage = { from: "person" | "clinic"; text: string };
+
+type Labels = {
+  /** Completes the pause button's name: "Pause the sample conversation". */
+  pause: string;
+};
+const EN: Labels = { pause: "the sample conversation" };
+
+type Props = {
+  messages: ChatMessage[];
+  /** Small line at the top, with a clock: the opening hours. */
+  hours?: string;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/** How long the clinic is "typing" before each reply, in ms. */
+const TYPING = 1100;
+/** At the end the conversation rests this long, fades out and restarts. */
+const REST = 3200;
+const EXIT = 350;
+/** Time to read the previous message before the next: grows with its length, 0.9s to 1.9s. */
+export const readingTime = (previous?: ChatMessage) =>
+  previous ? Math.min(1900, Math.max(900, 600 + previous.text.length * 28)) : 400;
+
+const BUBBLE = "cg-bubble max-w-[15rem] rounded-[20px] px-4 py-3 text-sm leading-snug lg:text-[0.9375rem]";
+const CURVE = "cubic-bezier(0.23, 1, 0.32, 1)";
+
+/**
+ * Step 1 of the care flow (creeta's `Conversa`): a sample conversation, bubble
+ * by bubble. The person writes, the clinic "types" and answers.
+ * - Starts when half of it is on screen and loops: at the end rests 3.2s,
+ *   fades and restarts. Only runs while on screen.
+ * - Works like a real chat: fixed height, new bubbles come in at the bottom,
+ *   old ones slide up and vanish at the top. Nothing pushes the page.
+ * - Moves by itself for more than 5s, so it has a pause button (WCAG 2.2.2).
+ * - Without JavaScript, IntersectionObserver or with reduced motion, the whole
+ *   conversation shows still, without the button.
+ * - The chat is decoration (aria-hidden): the step's text already says what
+ *   matters. The button stays outside it, for the keyboard and screen reader.
+ */
+export function ChatPreview({ messages, hours, labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  const { ref, state, onScreen } = useOnAppear<HTMLDivElement>();
+  const stack = useRef<HTMLDivElement>(null);
+  const height = useRef(0);
+  const [shown, setShown] = useState(0);
+  const [typing, setTyping] = useState(false);
+  const [paused, setPaused] = useState(false);
+  const [leaving, setLeaving] = useState(false);
+
+  const visible = state === "whole" ? messages : state === "waiting" ? [] : messages.slice(0, shown);
+
+  // The clock: one message at a time, and back to the start.
+  useEffect(() => {
+    if (state !== "playing" || paused || !onScreen) return;
+    const wait = readingTime(messages[shown - 1]);
+    const timer =
+      shown >= messages.length
+        ? leaving
+          ? setTimeout(() => {
+              setShown(0);
+              setLeaving(false);
+            }, EXIT)
+          : setTimeout(() => setLeaving(true), REST)
+        : messages[shown].from === "person"
+          ? setTimeout(() => setShown((v) => v + 1), wait + 300)
+          : typing
+            ? setTimeout(() => {
+                setTyping(false);
+                setShown((v) => v + 1);
+              }, TYPING)
+            : setTimeout(() => setTyping(true), wait);
+    return () => clearTimeout(timer);
+  }, [state, paused, onScreen, shown, typing, leaving, messages]);
+
+  // New bubble at the bottom: the stack grows upward at once. To slide the old
+  // ones up, it starts offset by the height it gained and returns (transform only).
+  useLayoutEffect(() => {
+    const el = stack.current;
+    if (!el) return;
+    const gained = el.offsetHeight - height.current;
+    height.current = el.offsetHeight;
+    if (state !== "playing" || gained <= 0 || reducedMotion() || !el.animate) return;
+    el.animate([{ transform: `translateY(${gained}px)` }, { transform: "translateY(0)" }], { duration: 320, easing: CURVE });
+  }, [state, shown, typing]);
+
+  return (
+    <div ref={ref} data-state={state} data-paused={paused ? "" : undefined} className={`cg-chat relative h-full min-h-[17.5rem] md:min-h-[20rem] ${className}`}>
+      <div aria-hidden="true">
+        {hours && (
+          <span className="absolute left-4 top-0 flex h-11 items-center gap-1.5 text-xs font-medium text-ink/80 lg:left-7">
+            <Clock size={13} strokeWidth={2} />
+            {hours}
+          </span>
+        )}
+        {/* the chat window: what goes past the top fades out */}
+        <div className="absolute inset-x-0 bottom-0 top-11 overflow-hidden [mask-image:linear-gradient(to_bottom,transparent,black_2rem)]">
+          <div
+            ref={stack}
+            className={`absolute inset-x-0 bottom-0 flex flex-col gap-2.5 px-4 pb-4 transition-opacity duration-300 ease-out motion-reduce:transition-none lg:px-7 lg:pb-7 ${leaving ? "opacity-0" : ""}`}
+          >
+            {visible.map((m, i) => (
+              <span
+                key={i}
+                className={
+                  m.from === "person"
+                    ? `${BUBBLE} origin-bottom-right self-end rounded-br-md bg-ink text-surface`
+                    : `${BUBBLE} origin-bottom-left self-start rounded-bl-md bg-card text-ink`
+                }
+              >
+                {m.text}
+              </span>
+            ))}
+            {typing && (
+              <span className="cg-bubble cg-typing flex origin-bottom-left gap-1 self-start rounded-[20px] rounded-bl-md bg-card px-4 py-3.5">
+                {[0, 1, 2].map((n) => (
+                  <i key={n} style={{ "--n": n } as CSSProperties} className="h-1.5 w-1.5 rounded-full bg-ink-soft" />
+                ))}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {state !== "whole" && (
+        <PauseButton paused={paused} onToggle={() => setPaused((p) => !p)} what={t.pause} className="right-0 top-0 lg:right-2" />
+      )}
+    </div>
+  );
+}

package/components/FeaturedPosts.tsx

@@ -0,0 +1,80 @@
+import type { ElementType, ReactNode } from "react";
+import { Byline, type Person } from "./Byline";
+import type { PostCover } from "./PostCard";
+
+export type FeaturedPost = {
+  cover: PostCover;
+  title: ReactNode;
+  /** The post's own page. */
+  href: string;
+  text: ReactNode;
+  /** Who said it (name, portrait): the text is their words, only cut. */
+  speaker: Person;
+  /** Link to the video the text came from ("Watch the video ↗"). */
+  video?: { href: string; label?: ReactNode; external?: boolean };
+};
+
+type Props = {
+  posts: FeaturedPost[];
+  headingLevel?: "h2" | "h3";
+  /** Default label of the video link. */
+  watchLabel?: ReactNode;
+  newTabLabel?: string;
+  linkComponent?: ElementType;
+  className?: string;
+};
+
+/**
+ * Featured posts of the Cuidado Global family — creeta's `Temas` ("in the
+ * words of who treats you"): what the team explains in the videos, as text.
+ * Each card: the cover above, the title and the text, and at the foot who
+ * said it (with the portrait) and the link to the video, because the text is
+ * their speech, only with cuts. Bento: the first post takes two columns with
+ * the cover beside the text; if the last would sit alone in its row, it too.
+ */
+export function FeaturedPosts({ posts, headingLevel: Title = "h3", watchLabel = "Watch the video", newTabLabel, linkComponent, className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  return (
+    <ul className={`grid list-none gap-3 md:grid-cols-2 md:gap-5 ${className}`}>
+      {posts.map((p, i) => {
+        const wide = i === 0 || (i === posts.length - 1 && (posts.length - 1) % 2 === 1);
+        return (
+          <li key={i} className={`flex flex-col overflow-hidden rounded-[28px] bg-card ${wide ? "md:col-span-2 md:grid md:grid-cols-5" : ""}`}>
+            {/* cover: decoration (4:3); the title says the subject */}
+            <div className={`relative overflow-hidden ${wide ? "aspect-[4/3] md:col-span-2 md:aspect-auto md:min-h-[320px]" : "aspect-[4/3]"}`}>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={p.cover.src}
+                srcSet={p.cover.srcSet}
+                sizes={p.cover.sizes ?? (wide ? "(min-width: 1152px) 440px, (min-width: 768px) 40vw, 92vw" : "(min-width: 1152px) 540px, (min-width: 768px) 46vw, 92vw")}
+                alt=""
+                loading="lazy"
+                decoding="async"
+                className="absolute inset-0 h-full w-full object-cover object-[50%_30%]"
+              />
+            </div>
+
+            <div className={`flex flex-1 flex-col p-6 md:p-8 ${wide ? "md:col-span-3 md:justify-center" : ""}`}>
+              <Title className="font-heading text-xl font-medium leading-snug text-ink md:text-[1.375rem]">
+                <L
+                  href={p.href}
+                  className="underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ink motion-reduce:transition-none"
+                >
+                  {p.title}
+                </L>
+              </Title>
+              <p className="mt-3 leading-relaxed text-ink-body">{p.text}</p>
+              <Byline
+                className="mt-auto pt-6"
+                people={[p.speaker]}
+                action={p.video ? { label: p.video.label ?? watchLabel, href: p.video.href, external: p.video.external } : undefined}
+                newTabLabel={newTabLabel}
+                linkComponent={linkComponent}
+              />
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/components/Footer.tsx

@@ -6,6 +6,8 @@ import { List } from "./List";
 type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
 
 export type FooterLink = { href: string; label: ReactNode };
+/** A titled column of links, for footers with many pages ("Foundations", "Cards…"). */
+export type FooterLinkGroup = { title: ReactNode; links: FooterLink[] };
 export type FooterContact = { href: string; label: ReactNode; Icon: IconType; external?: boolean };
 export type FooterLanguage = Language;
 
@@ -29,8 +31,11 @@ type Props = {
   /** The brand sentence, shown in quotes under the logo. */
   quote?: ReactNode;
   /** "Pages": title on the first line, links in two columns below. Optional:
-   *  a footer with no internal links drops the column (two-column grid). */
-  pages?: { title: ReactNode; links: FooterLink[] };
+   *  a footer with no internal links drops the column (two-column grid).
+   *  Many links (a dozen or more): pass `groups` instead of `links` — each
+   *  group is a column with a small heading, up to four side by side, so the
+   *  list gets wider instead of taller (the 44px rows stay). */
+  pages?: { title: ReactNode; links?: FooterLink[]; groups?: FooterLinkGroup[] };
   /** "Where we are": address lines, opening hours, and the directions links
    *  ("Directions ↗ · Waze ↗", external). */
   where: { title: ReactNode; address: ReactNode[]; hours?: ReactNode; directions?: FooterLink[] };
@@ -59,6 +64,14 @@ const ArrowUpRight = () => (
 );
 
 const title = "font-heading text-lg font-medium text-ink";
+const groupTitle = "text-xs font-semibold uppercase tracking-[0.12em] text-ink-soft";
+// whole class names: as many columns as groups, up to four
+const groupCols: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-2 lg:grid-cols-4",
+};
 const link =
   "flex min-h-11 items-center text-ink/80 underline decoration-transparent underline-offset-4 transition-[color,text-decoration-color] duration-150 hover:text-ink hover:decoration-ink motion-reduce:transition-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";
 const strongLink =
@@ -100,12 +113,19 @@ export function Footer({
   // padding leaves room for the floating bar.
   const outer = navHiddenFrom === "md" ? "mt-16 pb-28 md:mt-24 md:pb-14" : "mt-16 pb-28 lg:mt-24 lg:pb-14";
   const noticeId = notice?.id ?? "footer-notice";
+  const groups = pages?.groups?.length ? pages.groups : undefined;
+  // grouped pages need the room: the pages column grows and the brand column shrinks
+  const columns = !pages
+    ? "md:grid-cols-[minmax(0,1fr)_auto]"
+    : groups
+      ? "md:grid-cols-[minmax(0,3.5fr)_minmax(0,6.5fr)_minmax(0,3fr)]"
+      : "md:grid-cols-[minmax(0,4fr)_minmax(0,5fr)_minmax(0,3fr)]";
 
   return (
     <footer className={`${outer} bg-card py-10 text-ink md:py-14 ${className}`}>
       <div className="mx-auto max-w-[1600px] px-4 md:px-6">
         {/* without the pages column, "where" keeps to the right edge (auto width) */}
-        <div className={`grid gap-x-10 gap-y-10 ${pages ? "md:grid-cols-[minmax(0,4fr)_minmax(0,5fr)_minmax(0,3fr)]" : "md:grid-cols-[minmax(0,1fr)_auto]"}`}>
+        <div className={`grid gap-x-10 gap-y-10 ${columns}`}>
           <div>
             {logo}
             {brandName && <p className="sr-only">{brandName}</p>}
@@ -117,13 +137,30 @@ export function Footer({
           {pages && (
             <nav aria-label={t.pagesNav}>
               <h2 className={title}>{pages.title}</h2>
-              <div className="mt-3 grid gap-x-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2">
-                {pages.links.map((p, i) => (
-                  <L key={`${i}-${p.href}`} href={p.href} className={link}>
-                    {p.label}
-                  </L>
-                ))}
-              </div>
+              {groups ? (
+                <div className={`mt-5 grid gap-x-6 gap-y-8 ${groupCols[Math.min(groups.length, 4)]}`}>
+                  {groups.map((g, gi) => (
+                    <div key={gi}>
+                      <h3 className={groupTitle}>{g.title}</h3>
+                      <div className="mt-2">
+                        {g.links.map((p, i) => (
+                          <L key={`${i}-${p.href}`} href={p.href} className={link}>
+                            {p.label}
+                          </L>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="mt-3 grid gap-x-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2">
+                  {(pages.links ?? []).map((p, i) => (
+                    <L key={`${i}-${p.href}`} href={p.href} className={link}>
+                      {p.label}
+                    </L>
+                  ))}
+                </div>
+              )}
             </nav>
           )}
 

package/components/Header.tsx

@@ -112,7 +112,9 @@ function Dropdown({ item, L, t }: { item: NavItem; L: ElementType; t: Labels })
               <L
                 href={c.href}
                 onClick={() => setOpen(false)}
-                className="flex items-start gap-3 rounded-xl px-2.5 py-2 transition-colors hover:bg-ink/[0.05] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
+                // with a description the icon sits with the label's first line (creeta);
+                // label only: centred on the bubble, and a two-line label stays tight
+                className={`flex ${c.description ? "items-start" : "items-center"} gap-3 rounded-xl px-2.5 py-2 transition-colors hover:bg-ink/[0.05] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink`}
               >
                 {c.icon && (
                   <span className="flex h-9 w-9 flex-none items-center justify-center rounded-full bg-ink/[0.08] text-ink">
@@ -120,7 +122,7 @@ function Dropdown({ item, L, t }: { item: NavItem; L: ElementType; t: Labels })
                   </span>
                 )}
                 <span>
-                  <span className="block font-heading text-[0.95rem] font-semibold text-ink">
+                  <span className="block font-heading text-[0.95rem] leading-snug font-semibold text-ink">
                     {c.label}
                   </span>
                   {c.description && (