@breathe-ds/ui 0.1.1 → 0.3.0

package/components/Button.tsx

@@ -6,18 +6,18 @@ type Size = "sm" | "md" | "lg";
 const pillBase =
   "inline-flex items-center justify-center gap-2 rounded-pill font-body font-semibold whitespace-nowrap transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink active:scale-[0.97] motion-reduce:transition-none motion-reduce:active:scale-100 disabled:pointer-events-none disabled:opacity-50";
 
-/* Variante `link`: ação de texto sublinhada (não é pílula) — o irmão leve do
-   botão, mesma tipografia (font-body semibold). Herda a cor do contexto
-   (currentColor), então funciona no claro e sobre fundo escuro. O sublinhado
-   fica a 50% e fecha no hover; uma seta (ícone passado nos filhos) dá um passo
-   pra cima-e-direita. Ignora `size` (é inline, sem pílula). */
+/* `link` variant: underlined text action (not a pill) — the button's lightweight
+   sibling, same typography (font-body semibold). Inherits the color from the
+   context (currentColor), so it works on light and on dark backgrounds. The
+   underline sits at 50% and goes solid on hover; an arrow (icon passed as a
+   child) nudges up-and-right. Ignores `size` (it is inline, no pill). */
 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> = {
-  // petróleo sólido, texto creme (ex.: "Falar com a equipe")
+  // 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)]",
-  // cor de ação (laranja/magenta) + texto on-action (do token, varia por site)
+  // 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)]",
   outline: "border border-line text-ink hover:bg-ink/[0.05]",
   ghost: "text-ink hover:bg-ink/[0.06]",
@@ -40,11 +40,11 @@ type ButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement> & { hre
 type LinkProps = CommonProps & AnchorHTMLAttributes<HTMLAnchorElement> & { href: string };
 
 /**
- * Button da família Cuidado Global. Polimórfico: com `href` vira `<a>`
- * (injete seu Link via wrapper se precisar de roteador), senão `<button>`.
- * Variantes: solid (petróleo), accent (cor de ação), outline, ghost e
- * `link` (ação de texto sublinhada — ex.: "Ver todos", "Ação secundária",
- * "Ver no Google Maps"; herda a cor, serve no claro e no escuro).
+ * Button of the Cuidado Global family. Polymorphic: with `href` it renders an
+ * `<a>` (inject your Link via a wrapper if you need a router), otherwise a
+ * `<button>`. Variants: solid (petrol), accent (action color), outline, ghost
+ * and `link` (underlined text action — e.g. "See all", "Secondary action",
+ * "View on Google Maps"; inherits the color, works on light and dark).
  */
 export function Button(props: ButtonProps | LinkProps) {
   const { variant = "solid", size = "md", className = "", children, ...rest } = props;

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/Card.tsx

@@ -2,17 +2,17 @@ import type { ReactNode } from "react";
 
 type Props = {
   children: ReactNode;
-  /** Vira link se href for passado. */
+  /** Renders as a link when href is passed. */
   href?: string;
-  /** Eleva no hover (para cards clicáveis). */
+  /** Lifts on hover (for clickable cards). */
   interactive?: boolean;
   className?: string;
 };
 
 /**
- * Card base da família — estilo decidido no DS: **borda discreta + sombra
- * discreta**, raio 2xl (28px), fundo surface. Com `href` vira link; com
- * `interactive` eleva no hover. Nada de borda forte ou sombra pesada.
+ * Base card of the family — style decided in the DS: **subtle border + subtle
+ * shadow**, 2xl radius (28px), surface background. With `href` it becomes a
+ * link; with `interactive` it lifts on hover. No strong borders or heavy shadows.
  */
 export function Card({ children, href, interactive, className = "" }: Props) {
   const cls = `block rounded-2xl border border-line bg-surface p-[clamp(20px,3vw,32px)] shadow-[0_2px_12px_rgba(20,71,83,0.06)] ${

package/components/Container.tsx

@@ -2,15 +2,15 @@ import type { ReactNode } from "react";
 
 type Props = {
   children: ReactNode;
-  /** Largura máxima. "content" (padrão) p/ leitura; "wide" p/ heros/rodapé. */
+  /** Max width. "content" (default) for reading; "wide" for heroes/footer. */
   width?: "content" | "wide";
   className?: string;
 };
 
 /**
- * Container da família Cuidado Global — largura máxima + gutter lateral
- * consistente (16px no celular). "content" para texto/seções, "wide" para
- * blocos full-bleed (heros, rodapé).
+ * Container of the Cuidado Global family — max width + consistent side gutter
+ * (16px on mobile). "content" for text/sections, "wide" for full-bleed blocks
+ * (heroes, footer).
  */
 export function Container({ children, width = "content", className = "" }: Props) {
   const max = width === "wide" ? "max-w-[1600px]" : "max-w-[1120px]";

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/Curtain.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { BreatheMark } from "./BreatheMark";
+
+type Props = {
+  /** Brand name (e.g. "creeta", "TTCAB", "Breathe"). */
+  name: ReactNode;
+  /** Line below the name (e.g. "Centro de Reequilíbrio Toracoabdominal"). */
+  tagline?: ReactNode;
+  /** Symbol next to the name. Default: the BreatheMark (ring + dot). Each
+   *  site injects its own logo here. */
+  logo?: ReactNode;
+  /** When `name` is an svg wordmark: its height as a fraction of the symbol
+   *  height, from the brand manual (e.g. `CREETA_LOCKUP.wordmarkPerSymbol`). */
+  wordmarkRatio?: number;
+  /** Which side the symbol sits on. Default `left`; TTCAB is `right` (`TTCAB_LOCKUP.symbolSide`). */
+  symbolSide?: "left" | "right";
+  /** sessionStorage key (when the head script is in place). */
+  storageKey?: string;
+  /** Called when the curtain finishes rising. */
+  onDone?: () => void;
+  className?: string;
+};
+
+/**
+ * Entrance curtain of the Cuidado Global family: full screen, in the site's
+ * colors (surface/ink tokens), with the logo + name forming in the center and
+ * the tagline below; then it rises and reveals the page. Mirrors creeta's
+ * `Curtain`, but neutral: palette and logo come from each app.
+ *
+ * - Pure CSS (inline styles): without JavaScript it still rises the same way,
+ *   so it never gets stuck in front of the site.
+ * - Takes no click or focus and does not exist for screen readers (aria-hidden).
+ * - With reduced motion (or print) it is not shown.
+ * - To show it only on the first visit of the session, put `curtainHeadScript()`
+ *   in the <head> (before paint): on a repeat visit the <html> is born with
+ *   data-cg-curtain="seen" and the curtain is never drawn, so there is no flash.
+ *
+ * When it finishes rising, the <html> gets data-cg-curtain-done (so page tops
+ * "land" only after it, never on a route change) and onDone is called.
+ */
+export function Curtain({ name, tagline, logo, wordmarkRatio, symbolSide = "left", storageKey, onDone, className }: Props) {
+  const el = useRef<HTMLDivElement>(null);
+  const [gone, setGone] = useState(false);
+
+  useEffect(() => {
+    const node = el.current;
+    if (!node) return;
+    const handleEnd = (e: AnimationEvent) => {
+      if (e.animationName !== "cg-curtain-rise") return;
+      document.documentElement.setAttribute("data-cg-curtain-done", "");
+      try {
+        if (storageKey) sessionStorage.setItem(storageKey, "1");
+      } catch {
+        /* sessionStorage blocked: the curtain just shows again, nothing breaks */
+      }
+      onDone?.();
+      setGone(true);
+    };
+    node.addEventListener("animationend", handleEnd);
+    return () => node.removeEventListener("animationend", handleEnd);
+  }, [onDone, storageKey]);
+
+  if (gone) return null;
+
+  return (
+    <div ref={el} className={`cg-curtain${className ? ` ${className}` : ""}`} aria-hidden="true">
+      <style>{CURTAIN_CSS}</style>
+      {/* Symbol on the left: it hugs the name+tagline block. On the right (TTCAB):
+          it sits next to the name, on the same line, with the tagline below;
+          otherwise the symbol would end up after the tagline, far from the wordmark. */}
+      {(() => {
+        const mark = <span className="cg-curtain__mark">{logo ?? <BreatheMark size={60} duration={5} />}</span>;
+        const nameEl = (
+          <span
+            className="cg-curtain__name"
+            style={wordmarkRatio ? ({ "--cg-wordmark": `calc(var(--cg-curtain-mark) * ${wordmarkRatio})` } as CSSProperties) : undefined}
+          >
+            {name}
+          </span>
+        );
+        const tag = tagline ? <span className="cg-curtain__tag">{tagline}</span> : null;
+        return symbolSide === "right" ? (
+          <div className="cg-curtain__lockup cg-curtain__lockup--right">
+            <span className="cg-curtain__row">{nameEl}{mark}</span>
+            {tag}
+          </div>
+        ) : (
+          <div className="cg-curtain__lockup">
+            {mark}
+            <span className="cg-curtain__text">{nameEl}{tag}</span>
+          </div>
+        );
+      })()}
+    </div>
+  );
+}
+
+/**
+ * Script for the <head> (before paint): marks the curtain as seen in this
+ * session, so it does not repeat on navigation or reload. Without it, the
+ * curtain shows on every load.
+ *   // Next (app/layout):
+ *   <script dangerouslySetInnerHTML={{ __html: curtainHeadScript("cg-curtain") }} />
+ */
+export function curtainHeadScript(storageKey = "cg-curtain") {
+  const k = JSON.stringify(storageKey);
+  return `try{var d=document.documentElement;if(sessionStorage.getItem(${k})){d.setAttribute('data-cg-curtain','seen')}else{sessionStorage.setItem(${k},'1')}}catch(e){}`;
+}
+
+const CURTAIN_CSS = `
+.cg-curtain{
+  --cg-curtain-mark: clamp(40px,7.4vw,60px); /* symbol height */
+  position:fixed; inset:0 0 -40px; padding-bottom:40px;
+  z-index:120; display:grid; place-items:center;
+  border-radius:0 0 32px 32px;
+  background:var(--color-surface,#fff); color:var(--color-ink,#14323a);
+  box-shadow:0 24px 60px -20px rgba(0,0,0,.28);
+  pointer-events:none;
+  animation:cg-curtain-rise 700ms cubic-bezier(.77,0,.175,1) 2200ms both;
+}
+/* gap ≈ 1/3 of the name's body size: the ring is curved, so the optical gap reads a bit larger than the geometric one */
+.cg-curtain__lockup{ display:flex; align-items:center; gap:clamp(10px,1.6vw,16px); padding:0 24px; }
+.cg-curtain__lockup--right{ flex-direction:column; align-items:flex-start; }
+.cg-curtain__row{ display:flex; align-items:center; gap:clamp(10px,1.6vw,16px); }
+.cg-curtain__lockup--right .cg-curtain__name{ animation-name:cg-curtain-name-right; }
+.cg-curtain__mark{ display:inline-flex; color:var(--color-ink,#14323a);
+  animation:cg-curtain-mark 700ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) both; }
+/* symbol ~1.25× the name's body size (the SVG box is tight to the glyph), fluid.
+   Sized by height: a non-square injected symbol (TTCAB) keeps its aspect ratio. */
+.cg-curtain__mark svg{ height:var(--cg-curtain-mark); width:auto; }
+.cg-curtain__text{ display:flex; flex-direction:column; min-width:0; }
+.cg-curtain__name{
+  font-family:var(--font-heading,system-ui,sans-serif);
+  font-weight:700; font-size:clamp(2rem,6vw,3rem); line-height:1; letter-spacing:-.02em;
+  animation:cg-curtain-name 600ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) 480ms both;
+}
+.cg-curtain__tag{
+  margin-top:.55rem; font-family:var(--font-body,system-ui,sans-serif);
+  font-size:clamp(.8rem,2.4vw,1rem); line-height:1.3; color:var(--color-ink-soft,#54707a);
+  animation:cg-curtain-tag 500ms ease 820ms both;
+}
+@keyframes cg-curtain-rise{ to{ transform:translateY(-100%); visibility:hidden; } }
+@keyframes cg-curtain-mark{ from{ opacity:0; transform:scale(.6) rotate(-16deg); } }
+@keyframes cg-curtain-name{ from{ opacity:0; transform:translateX(-8px); } }
+@keyframes cg-curtain-name-right{ from{ opacity:0; transform:translateX(8px); } }
+@keyframes cg-curtain-tag{ from{ opacity:0; transform:translateY(4px); } }
+html[data-cg-curtain="seen"] .cg-curtain{ display:none; }
+@media (prefers-reduced-motion:reduce){ .cg-curtain{ display:none; } }
+@media print{ .cg-curtain{ display:none; } }
+`;

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>
+  );
+}