@breathe-ds/ui 0.2.0 → 0.3.0

package/README.md

@@ -52,12 +52,18 @@ For a site without a ready-made token file, define the roles on `:root` itself:
 }
 ```
 
+`theme.css` also sets the family's base behaviour: smooth scrolling for anchors
+(`html { scroll-behavior: smooth }`, switched off under `prefers-reduced-motion`)
+and `scroll-padding` (6rem top, 7rem bottom) so keyboard focus never lands
+hidden behind the sticky Header or the BottomNav (WCAG 2.4.11).
+
 ## Token roles
 
 | Token (Tailwind) | Role | `--cg-*` |
 |---|---|---|
 | `surface` | base background | `--cg-surface` |
 | `surface-panel` | dark panel (footer, final CTA) | `--cg-surface-panel` |
+| `card` | raised surface: cards, pills, menus over the page (white on all three palettes) | `--cg-card` |
 | `ink` | primary text / headings | `--cg-ink` |
 | `ink-soft` | secondary text | `--cg-ink-soft` |
 | `ink-body` | reading body text | `--cg-ink-body` |
@@ -147,6 +153,17 @@ edited by hand: it is the one from each brand's manual.
 novo.creeta: symbol, then name, then tagline; with reduced motion it becomes
 a short fade.
 
+## Typography
+
+The family's scale, from novo.creeta, as components: `Heading` (sizes
+`display` 2.5rem→6xl · `hero` · `section` 1.75rem→4xl · `card` · `small`;
+Quicksand medium in `ink`) with an optional `accent` — the second sentence of
+the same heading on its own line, one tone below in `ink-soft` — and
+`SectionHeading` (eyebrow/number line, title + accent, lead). `Text` for
+paragraphs (`lead`, `body`, `small`, `eyebrow`, Figtree) and `Prose` for a run
+of paragraphs at reading width. Two tones, one element: the hierarchy comes
+from color, not from extra markup.
+
 ## Navigation
 
 - **Header**: brand (the app passes the link to the home page) · items · item with dropdown
@@ -168,6 +185,55 @@ a short fade.
   the code, opens the three languages; header) or `list` (plain links; the Footer
   uses it). Same page in the other language, each language written in itself,
   current marked by ✓ and `aria-current`.
+- **List**: the family's list with a marker in front of each item (novo.creeta):
+  `marker="check"` (24px bubble, "what we assess / what we treat") or
+  `marker="arrow"` (corner arrow, one sentence per item, as in the Footer
+  notice). An item with `href` is a link: semibold, underline, outbound arrow.
+- **Timeline**: the "Como cuidamos" of novo.creeta — ordered steps, each with a
+  44px icon bubble, a title and a paragraph; a thin line links the drawings. A
+  step may end with a link (strong link + outbound arrow).
+- **RowList** / **CollapseRow** / **LinkRow**: the list of equal rows at the foot
+  of a card (the Trajectory / Guidance / Instagram block of the ProfessionalCard),
+  generic. 48px rows with hairlines; a CollapseRow is a native `<details>` with a
+  text or a list of links (`links`, count beside the label); a LinkRow goes
+  somewhere (↗ another page, ↓ anchor, `external` for a new tab, `icon` to
+  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.
+- **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,
+  arrow bubble when it links to the person's card). No photo → initials bubble.
+- **Breadcrumb**: the article trail "← Section › Parent" (current page not listed).
+- **FactStrip**: the three facts under the hero of novo.creeta — icon bubble +
+  two lines of equal weight per fact, thin dividers between columns (rows on
+  phones); the separator between the lines is read by screen readers only.
+- **InfoCard**: the white info cards of the clinic page (icon bubble, title,
+  lines/address, note, outbound links "Directions ↗ · Waze ↗").
+- **MediaCard**: photo or muted clip behind a title, badge top-left, arrow button
+  top-right, whole card a link; Ken Burns zoom on hover (mouse only), clip plays
+  while visible or on hover; pause hooks exported for a page-level pause button.
+  The portrait variant ("Who created the method"): `eyebrow` + title + `linkLabel`
+  ("See the team ↗") with `arrowButton={false}`.
+- **VideoStoryCard**: the vertical Instagram-style video card (poster, play
+  button, duration badge; gradient grows and the lead appears on hover/focus;
+  tap plays with sound in place; optional muted hover preview). When the clip
+  ends the card returns to the poster with a "Watched" badge (check + word,
+  top-right): `watched` sets it from the site, `onWatched` fires once at the end,
+  `remember` keeps the set of watched clips in localStorage (by `src`). Exports
+  the page-level pause contract (`CARD_VIDEOS_PAUSE_EVENT` / `CARD_VIDEOS_PAUSED_ATTR`).
+- **TestimonialCard**: clip with a play button on the left, quote + author +
+  outbound link on the right ("Famílias contam").
+- **MapCard**: the Mapa of novo.creeta — a still preview fading into the card,
+  the address, "View the map" and the outbound "Directions" link; Google is only
+  called after the tap (no consent banner, lighter page). Open, the map fills
+  the card with the same close bar as the hero video.
+- **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.
 - **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
@@ -182,7 +248,7 @@ a short fade.
 ## Roadmap
 
 - [x] v0.1 — tokens (preset + ttcab/creeta palettes) + preview
-- [x] Accordion (1st component; injectable-deps pattern)
+- [x] Accordion (1st component; injectable-deps pattern) — the Perguntas of novo.creeta: white card (`bg-card`), 22px radius, no border
 - [x] Family typography (Quicksand + Figtree, free fonts only)
 - [ ] **novo.creeta scales** (full reference, approved): **typography** (sizes/weights/line-height)
       **+ spacing/rhythm** (section padding, gaps) **+ default border-radius** → become DS tokens
@@ -190,17 +256,13 @@ a short fade.
       import/inject it (without each site depending on lucide directly)
 - [ ] **MediaCard** (video/image behind + icon badge + title + lead + arrow;
       **horizontal carousel on mobile** variant with progress bar + pause) — approved
-- [ ] **TestimonialCard** — approved. Variants: **quote** (text card),
-      **video hero** (full-bleed with overlaid quote), **video beside** ("Famílias contam": video + text).
-      Consider a **mix** of the two. **Already exists in ttcab** (TestimonialVideoHero/Card) → extract/generalize.
-- [ ] **VideoStoryCard** (short vertical video) — approved. Play + duration badge +
-      title + lead + **"Read the transcript"** (collapsible, reuses the Accordion). Pattern of the Videos page.
-      _Note: the card can still improve in a future update (fine to leave for later)._
-- [ ] **ProfessionalCard** (team) — approved. Two versions: **small** (photo + name, in a row)
+- [x] **TestimonialCard** — from novo.creeta (10/29): clip + play on the left, quote/author/link on the right. The "video hero" and "video beside" variants from ttcab are still open
+- [x] **VideoStoryCard** — from novo.creeta (10/29): vertical card, play + duration badge, lead on hover/focus, plays with sound in place; "Read the transcript" goes in `children` (Accordion)
+- [x] **ProfessionalCard** (team) — from novo.creeta (10/29): small = PersonChip/Byline, big = the card with living portrait, presentation modal + captions. Original note: Two versions: **small** (photo + name, in a row)
       and **big** (photo + name + role + CREFITO + "Trajetória"/"Orientações" accordions).
       **Video** variant: "Apresentação" badge, hover plays the video, and a **modal** (video + bio).
       **Data rule:** every professional MUST have a **CREFITO** attached (COFFITO requirement).
-- [x] **PillList** (chips like "Condições que atendemos": label + arrow, wrapping grid, "View all" link)
+- [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] **Site brand marks** (`components/marks/`): real symbol + wordmark for TTCAB and Creeta (10/29)

package/components/Accordion.tsx

@@ -51,7 +51,8 @@ export function Accordion({ items, defaultOpenId, single = true }: Props) {
         return (
           <div
             key={it.id}
-            className="overflow-hidden rounded-2xl border border-line bg-surface"
+            // the Perguntas of novo.creeta: a white card (bg-card), 22px radius, no border — it reads by tone over the page
+            className="overflow-hidden rounded-[22px] bg-card px-5 md:px-7"
           >
             <h3 className="m-0">
               <button
@@ -60,13 +61,13 @@ export function Accordion({ items, defaultOpenId, single = true }: Props) {
                 aria-expanded={isOpen}
                 aria-controls={panelId}
                 onClick={() => toggle(it.id)}
-                className="flex w-full items-center justify-between gap-4 px-[clamp(18px,3vw,28px)] py-[clamp(16px,2.4vw,22px)] text-left font-heading text-[1.05rem] font-semibold text-ink transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ink"
+                className="flex min-h-14 w-full items-center justify-between gap-4 py-1 text-left font-heading text-lg font-medium text-ink transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
               >
                 <span>{it.title}</span>
                 <svg
                   aria-hidden="true"
                   viewBox="0 0 24 24"
-                  className={`h-5 w-5 flex-none text-ink-soft transition-transform duration-200 ease-[cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none ${
+                  className={`h-5 w-5 flex-none text-ink transition-transform duration-200 ease-[cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none ${
                     isOpen ? "rotate-180" : ""
                   }`}
                   fill="none"
@@ -91,7 +92,8 @@ export function Accordion({ items, defaultOpenId, single = true }: Props) {
               }`}
             >
               <div className="min-h-0 overflow-hidden">
-                <div className="px-[clamp(18px,3vw,28px)] pt-0 pb-[clamp(18px,2.6vw,26px)] text-ink-body">
+                {/* full-width item, reading-width body (max-w-2xl), as the Perguntas of novo.creeta */}
+                <div className="max-w-2xl pb-5 leading-relaxed text-ink/80">
                   {it.content}
                 </div>
               </div>

package/components/Avatar.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+
+type Props = {
+  /** Person's name: the initials fallback and nothing else (the image is decorative). */
+  name: string;
+  /** Photo src. Without it, the initials in a tinted bubble (as the team cards of novo.creeta). */
+  photo?: string;
+  /** Your own image element (e.g. next/image), replaces `photo`. */
+  children?: ReactNode;
+  /** Side in px. */
+  size?: number;
+  /** White ring, for stacked groups. */
+  ring?: boolean;
+  className?: string;
+};
+
+export const initials = (name: string) =>
+  name
+    .trim()
+    .split(/\s+/)
+    .filter((w) => w.length > 2 || w === name)
+    .slice(0, 2)
+    .map((w) => w[0]?.toUpperCase() ?? "")
+    .join("");
+
+/** Round portrait, decorative (the name is written next to it). */
+export function Avatar({ name, photo, children, size = 40, ring = false, className = "" }: Props) {
+  const style = { width: size, height: size, fontSize: Math.round(size * 0.36) };
+  const base = `inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full ${ring ? "ring-2 ring-card" : ""} ${className}`;
+  if (children) return <span aria-hidden="true" className={base} style={style}>{children}</span>;
+  if (photo) return <img src={photo} alt="" loading="lazy" decoding="async" className={`${base} object-cover`} style={style} />;
+  return (
+    <span aria-hidden="true" className={`${base} bg-ink/[0.12] font-heading font-bold text-ink`} style={style}>
+      {initials(name)}
+    </span>
+  );
+}

package/components/BottomNav.tsx

@@ -282,7 +282,7 @@ const CSS = `
 .cg-more-panel{
   position:fixed; inset:auto .75rem calc(5.75rem + env(safe-area-inset-bottom)) .75rem;
   width:auto; margin:0; border:0; border-radius:26px; padding:.5rem;
-  background:#fff; color:var(--color-ink);
+  background:var(--color-card); color:var(--color-ink);
   box-shadow:0 20px 48px -16px rgb(0 0 0 / .35), 0 1px 2px rgb(0 0 0 / .1);
   opacity:0; transform:translateY(8px) scale(.97); transform-origin:88% 100%;
   transition:opacity 180ms cubic-bezier(.23,1,.32,1), transform 180ms cubic-bezier(.23,1,.32,1), overlay 180ms allow-discrete, display 180ms allow-discrete;

package/components/Breadcrumb.tsx

@@ -0,0 +1,45 @@
+import type { ElementType, ReactNode } from "react";
+
+export type Crumb = { label: ReactNode; href: string };
+
+type Props = {
+  /** From the section the page belongs to down to the parent of the current page. */
+  items: Crumb[];
+  linkComponent?: ElementType;
+  /** aria-label of the nav. */
+  label?: string;
+  className?: string;
+};
+
+// trail link: no resting underline (two underlines side by side weighed too much);
+// it shows on hover and on focus
+const link =
+  "inline-flex min-h-11 items-center text-ink underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-ink focus-visible:decoration-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none";
+
+/**
+ * Breadcrumb — the trail of a novo.creeta article: "← Section › Parent", so
+ * the text starts right away. The first crumb carries the back arrow; the
+ * current page is not listed (its title follows).
+ */
+export function Breadcrumb({ items, linkComponent, label = "Trail", className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  return (
+    <nav aria-label={label} className={className}>
+      <ol className="m-0 flex list-none flex-wrap items-center gap-x-2 p-0 text-sm font-semibold text-ink/80">
+        {items.map((c, i) => (
+          <li key={`${i}-${c.href}`} className="flex items-center gap-x-2">
+            {i > 0 && (
+              <svg aria-hidden="true" viewBox="0 0 24 24" width={14} height={14} className="text-ink/50" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6" /></svg>
+            )}
+            <L href={c.href} className={`${link} ${i === 0 ? "gap-1.5" : ""}`}>
+              {i === 0 && (
+                <svg aria-hidden="true" viewBox="0 0 24 24" width={16} height={16} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m12 19-7-7 7-7M19 12H5" /></svg>
+              )}
+              {c.label}
+            </L>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

package/components/BreatheMark.tsx

@@ -27,19 +27,6 @@ export function BreatheMark({
 }: Props) {
   return (
     <span className={className} style={{ display: "inline-flex", lineHeight: 0 }}>
-      <style>{`
-        @keyframes breathe-mark-inhale {
-          0%, 100% { transform: scale(0.93); }
-          50%      { transform: scale(1.05); }
-        }
-        .breathe-mark__g {
-          transform-box: fill-box;
-          transform-origin: center;
-          animation: breathe-mark-inhale var(--breathe-dur, 6s) cubic-bezier(0.37, 0, 0.63, 1) infinite;
-        }
-        .breathe-mark--static .breathe-mark__g { animation: none; }
-        @media (prefers-reduced-motion: reduce) { .breathe-mark__g { animation: none; } }
-      `}</style>
       <svg
         width={size}
         height={size}

package/components/Byline.tsx

@@ -0,0 +1,103 @@
+import type { ElementType, ReactNode } from "react";
+import { Avatar } from "./Avatar";
+
+export type Person = { name: string; href?: string; photo?: string; avatar?: ReactNode };
+
+type Props = {
+  people: Person[];
+  /** Small line above the names ("Who explains"). With it, the avatars stack
+   *  and the names go on their own line; without it, one inline line:
+   *  avatar · name · action. */
+  eyebrow?: ReactNode;
+  /** Link after the name(s) ("Watch the video ↗"). */
+  action?: { label: ReactNode; href: string; external?: boolean };
+  /** Joiners between names: ", " and " and ". */
+  joiners?: { sep: string; last: string };
+  /** Wrap the names in <cite> (a testimonial's author). */
+  cite?: boolean;
+  /** sr-only after an external action link. */
+  newTabLabel?: string;
+  linkComponent?: ElementType;
+  className?: string;
+};
+
+const ArrowUpRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={16} height={16} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+);
+
+const nameLink =
+  "underline decoration-ink/30 underline-offset-4 transition-colors duration-150 hover:decoration-ink motion-reduce:transition-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";
+
+/**
+ * Byline — who signs or explains a piece of content, from novo.creeta:
+ * - group ("Quem explica" under the timeline): stacked portraits, an eyebrow
+ *   and the names, each one a link to the person's card;
+ * - inline (under a topic card): portrait, name and "Watch the video ↗".
+ * Portraits are decorative: the names carry the information.
+ */
+export function Byline({ people, eyebrow, action, joiners = { sep: ", ", last: " and " }, cite = false, newTabLabel = "(opens in a new tab)", linkComponent, className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  // portraits stack with a ring (as on the site); initials would lose their letters, so they sit side by side
+  const stack = people.length > 1 && people.every((p) => p.photo || p.avatar);
+  const row = `flex shrink-0 ${stack ? "-space-x-2" : "gap-1.5"}`;
+  const Names: ElementType = cite ? "cite" : "span";
+  const names = people.map((p, i) => (
+    <span key={p.name}>
+      {i > 0 && (i === people.length - 1 ? joiners.last : joiners.sep)}
+      {p.href ? (
+        <L href={p.href} className={nameLink}>{p.name}</L>
+      ) : (
+        p.name
+      )}
+    </span>
+  ));
+  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"
+    >
+      {action.label}
+      <ArrowUpRight />
+      {action.external && <span className="sr-only"> {newTabLabel}</span>}
+    </L>
+  ) : null;
+
+  if (eyebrow) {
+    return (
+      <div className={`flex items-center gap-3 ${className}`}>
+          <span className={row}>
+          {people.map((p) => (
+            <Avatar key={p.name} name={p.name} photo={p.photo} size={36} ring={stack}>{p.avatar}</Avatar>
+          ))}
+        </span>
+        <div className="leading-snug">
+          <p className="m-0 text-sm text-ink/80">{eyebrow}</p>
+          <p className="m-0 mt-0.5 font-semibold text-ink">
+            <Names className="not-italic">{names}</Names>
+            {actionEl && <> · {actionEl}</>}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <p className={`m-0 flex items-center gap-3 text-sm text-ink/80 ${className}`}>
+      {people.length === 1 ? (
+        <Avatar name={people[0].name} photo={people[0].photo} size={40}>{people[0].avatar}</Avatar>
+      ) : (
+        <span className={row}>
+          {people.map((p) => (
+            <Avatar key={p.name} name={p.name} photo={p.photo} size={36} ring={stack}>{p.avatar}</Avatar>
+          ))}
+        </span>
+      )}
+      <span className="flex flex-wrap items-center gap-x-2">
+        <Names className="not-italic font-semibold text-ink">{names}</Names>
+        {actionEl}
+      </span>
+    </p>
+  );
+}
+

package/components/CaptionBand.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * The line being spoken right now, read from the video's WebVTT <track>
+ * (novo.creeta's `useLegenda`, components/legenda.tsx).
+ *
+ * The captions are not drawn over the picture: many of the site's videos
+ * already carry burned-in Portuguese captions, in positions that vary, and one
+ * on top of the other is unreadable. The track is the browser's (a hidden
+ * <track> it loads and syncs itself) and the text comes out beside/under the
+ * video, in `CaptionBand`.
+ *
+ * Usage: `const { line, attach } = useCaption()` and `<track ref={attach} … />`.
+ */
+export function useCaption() {
+  const [line, setLine] = useState("");
+
+  const attach = useCallback((el: HTMLTrackElement | null) => {
+    const track = el?.track;
+    if (!track) return;
+    // 'hidden': the browser loads the file and fires the events, but does not draw
+    track.mode = "hidden";
+    track.addEventListener("cuechange", () => {
+      const cue = track.activeCues?.[0] as VTTCue | undefined;
+      setLine(cue ? cue.text : "");
+    });
+  }, []);
+
+  return { line, attach };
+}
+
+type Props = {
+  /** The current cue text (from `useCaption`). Empty between cues: the band
+   *  stays, so the layout does not jump at every line. */
+  text: string;
+  /** BCP 47 tag of the captions ("en", "pt-BR"). */
+  lang: string;
+  className?: string;
+};
+
+/**
+ * Caption band of the Cuidado Global family (novo.creeta's `FaixaDeLegenda`).
+ * Fixed height of three lines so the page does not jump at every line. White
+ * on `ink` (creeta's petrol: 10.2:1). Hidden from screen readers: who neither
+ * hears nor sees uses the transcript on the page; here the text would change
+ * every two seconds.
+ *
+ * When it appears (the person pressed play) the page scrolls the least needed
+ * for the band to be in view: on phones it would be born behind the bottom
+ * bar, and the person would watch without knowing there are captions. The
+ * scroll margin is the bar's height.
+ */
+export function CaptionBand({ text, lang, className = "" }: Props) {
+  const band = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    const calm = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    band.current?.scrollIntoView?.({ block: "nearest", behavior: calm ? "auto" : "smooth" });
+  }, []);
+
+  return (
+    <p
+      ref={band}
+      aria-hidden="true"
+      lang={lang}
+      data-caption-band=""
+      className={`mt-2 flex min-h-[4.75rem] scroll-mb-28 items-center justify-center rounded-[20px] bg-ink px-4 py-2.5 text-center text-[0.9375rem] font-medium leading-snug text-white md:scroll-mb-6 ${className}`}
+    >
+      {text}
+    </p>
+  );
+}

package/components/CtaCard.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import { VideoInviteCard, type VideoInviteCardProps } from "./VideoInviteCard";
+
+type Props = {
+  /** The question that closes the page, e.g. "Shall we find out what your body needs?". */
+  title: ReactNode;
+  /** Supporting line under the title. Omit it to drop the paragraph. */
+  lead?: ReactNode;
+  /** The call to action — pass the DS `Button` (variant="accent" on the family's sites). */
+  action: ReactNode;
+  /** Side card with the speaker's video (VideoInviteCard props). Omit for the text card alone. */
+  video?: Omit<VideoInviteCardProps, "className">;
+  /** Any other side media (e.g. a still photo), placed in the same frame as the video. */
+  media?: ReactNode;
+  className?: string;
+};
+
+/** Side frame: 3:2 on mobile (video on top), free height from md on, same radius as the text card. */
+const sideFrame = "aspect-[3/2] md:order-2 md:aspect-auto md:min-h-[340px]";
+
+/**
+ * Final call of the Cuidado Global family — mirrors the `ChamadaFinal` of
+ * novo.creeta with the Breathe tokens: every page ends with the same
+ * invitation, in the same place.
+ *
+ * Two cards side by side, on the same grid as the site's other card pairs
+ * (gap-3, gap-5 from md): the text on a white card — title, lead and the CTA —
+ * and the video on another, each with its own four corners (28px). On mobile
+ * the video comes first. Without video/media it is a single card.
+ *
+ * The white card keeps ink text (10.21:1 on creeta); the lead is ink at 80%
+ * (5.78:1 on white). The CTA is a slot: the site passes its own Button/link.
+ */
+export function CtaCard({ title, lead, action, video, media, className = "" }: Props) {
+  const hasSide = Boolean(video || media);
+
+  return (
+    <section className={`text-ink ${hasSide ? "grid gap-3 md:grid-cols-2 md:gap-5" : ""} ${className}`}>
+      {video ? (
+        <VideoInviteCard {...video} className={sideFrame} />
+      ) : media ? (
+        <div className={`relative overflow-hidden rounded-2xl ${sideFrame}`}>{media}</div>
+      ) : null}
+      <div className="flex flex-col justify-center rounded-2xl bg-card px-6 py-10 md:px-10 md:py-14">
+        <h2 className="max-w-xl font-heading text-3xl leading-[1.1] font-medium md:text-4xl">{title}</h2>
+        {lead && <p className="mt-4 max-w-md text-ink/80">{lead}</p>}
+        {/* The button follows the site's pattern (accent on white), same as the header's "Book". */}
+        <div className="mt-7">{action}</div>
+      </div>
+    </section>
+  );
+}

package/components/FactStrip.tsx

@@ -0,0 +1,55 @@
+import type { ComponentType, ReactNode } from "react";
+
+type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
+
+export type Fact = {
+  Icon: IconType;
+  /** First line, strong ("Monday to Friday"). */
+  title: ReactNode;
+  /** Second line, lighter ("8 am to 6 pm"). */
+  text?: ReactNode;
+  /** Read between the two lines by screen readers only, so the sentence
+   *  still reads whole (", " or " "). Default: ", ". */
+  separator?: string;
+};
+
+type Props = {
+  facts: Fact[];
+  /** aria-label of the list ("How we see patients"). */
+  label?: string;
+  className?: string;
+};
+
+/**
+ * Fact strip — the three facts under the hero of novo.creeta ("Monday to
+ * Friday / 8 am to 6 pm", "At the clinic / or at home", "Individual care /
+ * from babies to the elderly"). Each fact is an icon bubble plus two lines of
+ * equal visual weight, so none wraps differently from the others. On desktop
+ * a thin line separates the columns; on phones it separates the rows.
+ */
+export function FactStrip({ facts, label, className = "" }: Props) {
+  const cols = facts.length === 2 ? "md:grid-cols-2" : facts.length === 4 ? "md:grid-cols-4" : "md:grid-cols-3";
+  return (
+    <ul
+      aria-label={label}
+      className={`m-0 list-none divide-y divide-ink/10 rounded-2xl bg-card px-6 md:grid ${cols} md:divide-x md:divide-y-0 md:px-0 md:py-7 ${className}`}
+    >
+      {facts.map(({ Icon, title, text, separator = ", " }, i) => (
+        <li key={i} className="flex items-center gap-4 py-5 md:px-8 md:py-0 lg:px-10">
+          <span aria-hidden="true" className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] text-ink">
+            <Icon size={22} strokeWidth={1.75} />
+          </span>
+          <p className="m-0 leading-snug">
+            <span className="block font-heading text-lg font-medium text-ink">{title}</span>
+            {text && (
+              <>
+                <span className="sr-only">{separator}</span>
+                <span className="block text-[0.9375rem] text-ink/80">{text}</span>
+              </>
+            )}
+          </p>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/components/Footer.tsx

@@ -1,5 +1,6 @@
 import type { ComponentType, ElementType, ReactNode } from "react";
 import { LanguageSwitcher, type Language } from "./LanguageSwitcher";
+import { List } from "./List";
 
 /** lucide-style icon component (the footer sets the size). */
 type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
@@ -56,9 +57,6 @@ type Props = {
 const ArrowUpRight = () => (
   <svg aria-hidden="true" viewBox="0 0 24 24" width={18} height={18} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
 );
-const CornerDownRight = () => (
-  <svg aria-hidden="true" viewBox="0 0 24 24" width={18} height={18} className="mt-[0.2rem] shrink-0" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 10 5 5-5 5" /><path d="M4 4v7a4 4 0 0 0 4 4h12" /></svg>
-);
 
 const title = "font-heading text-lg font-medium text-ink";
 const link =
@@ -104,8 +102,7 @@ export function Footer({
   const noticeId = notice?.id ?? "footer-notice";
 
   return (
-    <footer className={`${outer} bg-white py-10 text-ink md:py-14 ${className}`}>
-      <style>{CSS}</style>
+    <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]"}`}>
@@ -169,14 +166,7 @@ export function Footer({
                 <h2 id={noticeId} className="font-heading text-2xl font-medium leading-snug md:text-[1.75rem]">
                   {notice.title}
                 </h2>
-                <ul className="mt-4 list-none space-y-2 leading-relaxed text-ink/80">
-                  {notice.items.map((item, i) => (
-                    <li key={i} className="flex gap-2.5">
-                      <CornerDownRight />
-                      <span>{item}</span>
-                    </li>
-                  ))}
-                </ul>
+                <List marker="arrow" className="mt-4" items={notice.items.map((label) => ({ label }))} />
               </div>
               {notice.action && <div className="w-full shrink-0 sm:w-auto sm:self-start lg:self-center [&>*]:w-full [&>*]:justify-center sm:[&>*]:w-auto">{notice.action}</div>}
             </div>
@@ -215,10 +205,3 @@ export function Footer({
   );
 }
 
-/* Outbound arrow: takes a small step toward where the link goes, on hover. */
-const CSS = `
-@media (prefers-reduced-motion:no-preference){
-  .cg-arrow-go{ transition:transform 150ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)); }
-  a:hover .cg-arrow-go{ transform:translate(2px,-2px); }
-}
-`;