@breathe-ds/ui 0.1.1 → 0.3.0

package/components/MediaCard.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { useEffect, useRef, useState, type ComponentType, type ElementType, type ReactNode } from "react";
+
+/** lucide-style icon component (the badge sets the size). */
+type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
+
+/** Event the card videos listen to when the person pauses/resumes them all
+ *  (dispatch it on `window` after toggling the attribute below). */
+export const MEDIA_CARD_VIDEO_PAUSE_EVENT = "cg-media-card-videos";
+/** Attribute on <html> while the card videos are paused (WCAG 2.2.2: what
+ *  moves for more than 5s must be pausable; the button lives outside the
+ *  card, which is one whole link). */
+export const MEDIA_CARD_VIDEO_PAUSED_ATTR = "data-media-card-videos-paused";
+
+export type MediaCardVideo = {
+  src: string;
+  poster?: string;
+  /** `always` (default): loops while the card is on screen (a quarter in view
+   *  counts). `hover`: only with the mouse over, or keyboard focus on, the
+   *  card; on touch the photo stays. */
+  when?: "always" | "hover";
+};
+
+type Props = {
+  href: string;
+  title: ReactNode;
+  /** Supporting text. Accepts elements, to break the line where it makes sense. */
+  text?: ReactNode;
+  /** Top-left corner, over dark glass: a MediaCardBadge (icon, label, address). */
+  badge?: ReactNode;
+  /** Small line above the title ("Who created the method"), lighter. */
+  eyebrow?: ReactNode;
+  /** Text link line under the text ("See the team ↗"). The card is already the
+   *  link, so this is a label with the arrow, not a second anchor. */
+  linkLabel?: ReactNode;
+  /** The round arrow button top-right. Off for the portrait card, which says
+   *  where it goes with `linkLabel` instead. */
+  arrowButton?: boolean;
+  /** h2 on list pages, h3 inside a section that already has an h2. */
+  headingLevel?: "h2" | "h3";
+  /** Background media rendered to cover the card: an <img>, a video element or
+   *  the app's next/image (with `fill`, pass it `className="object-cover"`). */
+  media?: ReactNode;
+  /** Plain image alternative to `media`. Decorative by default (`alt=""`): the
+   *  card already has title and text. */
+  src?: string;
+  alt?: string;
+  srcSet?: string;
+  sizes?: string;
+  /** true only when the card is the page's LCP: eager + high fetch priority. */
+  priority?: boolean;
+  /** Short muted clip that plays over the photo. Without it, or if it does not
+   *  play, the photo stands. */
+  video?: MediaCardVideo;
+  /** Aspect-ratio class of the card. Default `aspect-[3/4]`; replaces the
+   *  default instead of fighting it (e.g. `aspect-[4/5] md:aspect-auto md:min-h-[460px]`). */
+  aspect?: string;
+  /** Padding class of the card. Default `p-4` (e.g. `p-6 md:p-8`). */
+  padding?: string;
+  /** Link component of the app (e.g. next-intl Link). Default: <a>. */
+  linkComponent?: ElementType;
+  className?: string;
+};
+
+/**
+ * Media card of the Cuidado Global family — the `CartaoFoto` of novo.creeta
+ * ("Get to know the clinic", the treatment cards) with the Breathe tokens. A
+ * tall card with the photo (or video) bleeding to the edges and the text over
+ * it; the whole card is the link. The ink film at the bottom keeps the text
+ * readable over any photo. On hover (mouse only) the photo zooms in slowly
+ * and steadily, like a Ken Burns: 2.5s to reach 107%; it comes back in half a
+ * second and does not move for people who asked for less motion. The round
+ * arrow button turns `action` on hover.
+ */
+export function MediaCard({
+  href,
+  title,
+  text,
+  badge,
+  eyebrow,
+  linkLabel,
+  arrowButton = true,
+  headingLevel: Heading = "h3",
+  media,
+  src,
+  alt = "",
+  srcSet,
+  sizes,
+  priority = false,
+  video,
+  aspect = "aspect-[3/4]",
+  padding = "p-4",
+  linkComponent,
+  className = "",
+}: Props) {
+  const L: ElementType = linkComponent ?? "a";
+
+  return (
+    <L
+      href={href}
+      className={`group relative isolate flex ${aspect} flex-col justify-between overflow-hidden rounded-2xl bg-ink ${padding} text-white transition-transform duration-200 ease-out active:scale-[0.98] motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink ${className}`}
+    >
+      {/* Zooms in slowly with the mouse over, at a constant pace, like a Ken
+          Burns: 2.5s to reach 107%. Only where there is a mouse: on a phone
+          the tap would fire a false "hover". Comes back in half a second, and
+          stays still for people who asked for less motion. */}
+      <div
+        className="absolute inset-0 -z-20 transition-transform duration-500 ease-[var(--ease-cg)] motion-reduce:transition-none [@media(hover:hover)_and_(pointer:fine)]:group-hover:scale-[1.07] [@media(hover:hover)_and_(pointer:fine)]:group-hover:duration-[2500ms] [@media(hover:hover)_and_(pointer:fine)]:group-hover:ease-linear motion-reduce:[@media(hover:hover)_and_(pointer:fine)]:group-hover:scale-100 [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>video]:h-full [&>video]:w-full [&>video]:object-cover"
+      >
+        {media ??
+          (src && (
+            <img
+              src={src}
+              srcSet={srcSet}
+              sizes={sizes}
+              alt={alt}
+              loading={priority ? "eager" : "lazy"}
+              decoding="async"
+              // React 18 only knows the lowercase attribute (19 accepts fetchPriority too)
+              {...({ fetchpriority: priority ? "high" : undefined } as Record<string, unknown>)}
+            />
+          ))}
+      </div>
+      {/* between the photo and the film: the text keeps the same contrast */}
+      {video && <CardVideo {...video} className="absolute inset-0 -z-20" />}
+      <span aria-hidden="true" className="absolute inset-0 -z-10 bg-gradient-to-t from-ink via-ink/75 via-40% to-ink/15" />
+
+      {(badge || arrowButton) && (
+        <div className="flex items-start justify-between gap-3">
+          <div>{badge}</div>
+          {arrowButton && (
+            <span
+              aria-hidden="true"
+              className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-card text-ink transition-colors duration-200 group-hover:bg-action group-hover:text-on-action motion-reduce:transition-none"
+            >
+              <svg viewBox="0 0 24 24" width={20} height={20} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+            </span>
+          )}
+        </div>
+      )}
+
+      <div className={badge || arrowButton ? "" : "mt-auto"}>
+        {eyebrow && <span className="block text-sm text-white/75">{eyebrow}</span>}
+        <Heading className={`font-heading text-2xl font-medium leading-tight ${eyebrow ? "mt-1" : ""}`}>{title}</Heading>
+        {text && <p className="m-0 mt-2 text-sm leading-relaxed text-white/85">{text}</p>}
+        {linkLabel && (
+          <span className="mt-3 inline-flex items-center gap-1.5 text-sm font-semibold underline underline-offset-4">
+            {linkLabel}
+            <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>
+          </span>
+        )}
+      </div>
+    </L>
+  );
+}
+
+/**
+ * Badge for the corner of the card. Dark glass, not light: over the bright
+ * part of a photo, white text on white glass measured 1.59:1. With `Icon`
+ * alone (no children) it becomes a 44px round icon badge.
+ */
+export function MediaCardBadge({ Icon, children, className = "" }: { Icon?: IconType; children?: ReactNode; className?: string }) {
+  const iconOnly = Boolean(Icon) && children === undefined;
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full border border-white/15 bg-ink/80 px-3 py-2 text-xs font-medium text-white backdrop-blur-md ${iconOnly ? "h-11 w-11 justify-center p-0" : ""} ${className}`}
+    >
+      {Icon && <Icon aria-hidden="true" size={iconOnly ? 20 : 14} strokeWidth={2} />}
+      {children}
+    </span>
+  );
+}
+
+/**
+ * Short muted clip over the photo of a card (creeta's `VideoDoCartao`).
+ *
+ * Invisible until it has frames to show, then fades in: without this it would
+ * flash black while the file arrives. If it does not play, the card is the
+ * usual one, with the photo.
+ *
+ * Does not play, in either mode: for people who asked for less motion; with
+ * data saver on (the video is not even requested: `preload="none"`); while
+ * the person has paused the card videos (MEDIA_CARD_VIDEO_PAUSED_ATTR on <html>).
+ *
+ * In `always`, pauses when the card leaves the screen: three videos running
+ * with nobody watching waste battery for nothing.
+ *
+ * Muted, no controls, out of the screen-reader flow: it is decoration, the
+ * card already has title and text. The card is the link (<a>) around it.
+ */
+function CardVideo({ src, poster, when = "always", className = "" }: MediaCardVideo & { className?: string }) {
+  const video = useRef<HTMLVideoElement>(null);
+  const [playing, setPlaying] = useState(false);
+
+  useEffect(() => {
+    const v = video.current;
+    const card = v?.closest("a") ?? v?.parentElement;
+    if (!v || !card || typeof window.matchMedia !== "function") return;
+
+    const saveData = (navigator as Navigator & { connection?: { saveData?: boolean } }).connection?.saveData === true;
+    const lessMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const paused = () => document.documentElement.hasAttribute(MEDIA_CARD_VIDEO_PAUSED_ATTR);
+    const play = () => {
+      if (lessMotion() || saveData || paused()) return;
+      v.play()
+        .then(() => setPlaying(true))
+        .catch(() => {});
+    };
+    const stop = () => {
+      setPlaying(false);
+      v.pause();
+    };
+
+    if (when === "hover") {
+      const withMouse = () => window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+      const enter = () => withMouse() && play();
+      card.addEventListener("pointerenter", enter);
+      card.addEventListener("pointerleave", stop);
+      card.addEventListener("focusin", enter);
+      card.addEventListener("focusout", stop);
+      return () => {
+        card.removeEventListener("pointerenter", enter);
+        card.removeEventListener("pointerleave", stop);
+        card.removeEventListener("focusin", enter);
+        card.removeEventListener("focusout", stop);
+      };
+    }
+
+    if (typeof IntersectionObserver !== "function") return;
+    let onScreen = false;
+    // a quarter of the card in view already counts
+    const watcher = new IntersectionObserver(
+      ([e]) => {
+        onScreen = e.isIntersecting;
+        if (onScreen) play();
+        else stop();
+      },
+      { threshold: 0.25 },
+    );
+    watcher.observe(card);
+    // the person paused or resumed the videos
+    const onNotice = () => (paused() || !onScreen ? stop() : play());
+    window.addEventListener(MEDIA_CARD_VIDEO_PAUSE_EVENT, onNotice);
+    return () => {
+      watcher.disconnect();
+      window.removeEventListener(MEDIA_CARD_VIDEO_PAUSE_EVENT, onNotice);
+    };
+  }, [when]);
+
+  return (
+    <video
+      ref={video}
+      src={src}
+      poster={poster}
+      muted
+      loop
+      playsInline
+      preload="none"
+      aria-hidden="true"
+      tabIndex={-1}
+      data-media-card-video={when}
+      className={`pointer-events-none h-full w-full object-cover transition-opacity duration-500 ease-out motion-reduce:transition-none ${playing ? "opacity-100" : "opacity-0"} ${className}`}
+    />
+  );
+}

package/components/PageVideoHero.tsx

@@ -5,7 +5,7 @@ import { BackgroundVideo } from "./BackgroundVideo";
 
 type Panel = { kicker?: ReactNode; title: ReactNode; lead?: ReactNode };
 
-/** Clipe de fundo local (modo loop), sem som, em repetição. */
+/** Local background clip (loop mode): muted, looping. */
 type LoopPreview = {
   src: string;
   srcLarge?: string;
@@ -15,40 +15,40 @@ type LoopPreview = {
   objectPosition?: string;
 };
 
-/** Dois tipos de hero com vídeo:
- *  - loop:   um clipe local em repetição (sem player). Fundo = BackgroundVideo.
- *  - player: o PRÓPRIO vídeo do YouTube roda mudo, em repetição, como fundo
- *            (16:9, cobrindo o cartão, sem corte/zoom). Ao apertar o som ele
- *            remonta do zero — com áudio e controles — e surge a barra de
- *            fechar no pé. Mantém a consistência: a prévia e o vídeo são o
- *            mesmo material. */
+/** Two kinds of video hero:
+ *  - loop:   a local clip on repeat (no player). Background = BackgroundVideo.
+ *  - player: the YouTube video ITSELF plays muted, on repeat, as the background
+ *            (16:9, covering the card, no false crop/zoom). Turning the sound on
+ *            remounts it from zero — with audio and controls — and the close bar
+ *            appears at the bottom. Keeps things consistent: the preview and the
+ *            video are the same footage. */
 type VideoLoop = { mode: "loop"; preview: LoopPreview };
 type VideoPlayer = {
   mode: "player";
   youtubeId: string;
-  /** Quadro parado (movimento reduzido / economia de dados). Sem ele, usa a
-   *  miniatura do próprio YouTube (maxresdefault). */
+  /** Still frame (reduced motion / data saver). Without it, uses YouTube's own
+   *  thumbnail (maxresdefault). */
   poster?: string;
-  legenda?: ReactNode;
+  playerCaption?: ReactNode;
 };
 
 type Props = {
-  /** Fundo em vídeo — define o tipo do hero (loop ou player). */
+  /** Video background — defines the hero kind (loop or player). */
   video: VideoLoop | VideoPlayer;
-  /** Slot no topo-esquerdo (selo de local, "← voltar" + ícone). */
+  /** Top-left slot (location badge, "← back" + icon). */
   topLeft?: ReactNode;
-  /** Legenda curta no canto inferior-esquerdo (pílula) — versão simples. */
+  /** Short caption in the bottom-left corner (pill) — simple version. */
   caption?: ReactNode;
-  /** Painel de conteúdo inferior-esquerdo (kicker + título + lead). */
+  /** Bottom-left content panel (kicker + title + lead). */
   panel?: Panel;
-  /** CTAs no canto inferior-direito. No modo player, sem isto mostra "Assistir
-   *  ao vídeo"; null esconde. No modo loop, só aparece o que vier aqui. */
+  /** CTAs in the bottom-right corner. In player mode, omitting this shows
+   *  "Watch the video"; null hides it. In loop mode, only what is passed here appears. */
   actions?: ReactNode | null;
-  /** Rótulo + meta do botão padrão "Assistir ao vídeo" (modo player). */
+  /** Label + meta of the default "Watch the video" button (player mode). */
   watch?: { label?: string; meta?: ReactNode };
-  /** Rótulo do botão de fechar na barra inferior (modo player tocando). */
+  /** Label of the close button in the bottom bar (player mode, playing). */
   closeLabel?: string;
-  /** Rótulos do botão de pausa do fundo (modo player, prévia muda). */
+  /** Labels of the background pause button (player mode, muted preview). */
   previewLabels?: { pause?: string; play?: string };
   videoTitle?: string;
 };
@@ -61,13 +61,13 @@ function XGlyph({ size = 18 }: { size?: number }) {
 }
 
 /**
- * Fundo em vídeo do YouTube rodando MUDO, em repetição, cobrindo o cartão
- * (modo player, antes de o som começar). É enfeite: fica fora da leitura de
- * tela. Respeita movimento reduzido e economia de dados (aí fica no quadro
- * parado, sem pedir o vídeo). O "cover" é feito com unidades de container
- * (cqw/cqh), então a proporção 16:9 nunca é distorcida nem cortada em falso.
- * Tem botão de pausa (WCAG 2.2.2). O clique passa reto (pointer-events-none):
- * quem recebe o toque é o botão de assistir, por cima.
+ * YouTube video background playing MUTED, on repeat, covering the card
+ * (player mode, before the sound starts). It is decorative: hidden from screen
+ * readers. Respects reduced motion and data saver (then it stays on the still
+ * frame without requesting the video). The "cover" is done with container units
+ * (cqw/cqh), so the 16:9 ratio is never distorted or falsely cropped.
+ * Has a pause button (WCAG 2.2.2). Clicks pass through (pointer-events-none):
+ * the watch button on top is what receives the tap.
  */
 function YouTubeBackground({
   id,
@@ -88,14 +88,14 @@ function YouTubeBackground({
     const lessMotion =
       typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     const saveData = (navigator as Navigator & { connection?: { saveData?: boolean } }).connection?.saveData;
-    if (lessMotion || saveData) return; // fica no quadro parado
+    if (lessMotion || saveData) return; // stay on the still frame
     setShow(true);
   }, []);
 
   function toggle() {
     const w = frame.current?.contentWindow;
     if (!w) return;
-    // API do YouTube por postMessage (enablejsapi=1): pausa/retoma sem carregar o script.
+    // YouTube API via postMessage (enablejsapi=1): pause/resume without loading the script.
     w.postMessage(JSON.stringify({ event: "command", func: paused ? "playVideo" : "pauseVideo", args: [] }), "*");
     setPaused((p) => !p);
   }
@@ -107,7 +107,7 @@ function YouTubeBackground({
       {show ? (
         <iframe
           ref={frame}
-          title={title ?? "Vídeo"}
+          title={title ?? "Video"}
           tabIndex={-1}
           aria-hidden="true"
           src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1&mute=1&loop=1&playlist=${id}&controls=0&disablekb=1&fs=0&modestbranding=1&rel=0&playsinline=1&iv_load_policy=3&enablejsapi=1`}
@@ -116,7 +116,7 @@ function YouTubeBackground({
           style={{ width: "max(100cqw, 177.78cqh)", height: "max(100cqh, 56.25cqw)" }}
         />
       ) : (
-        // miniatura do próprio YouTube (16:9) quando não se toca o vídeo
+        // YouTube's own thumbnail (16:9) when the video is not playing
         // eslint-disable-next-line @next/next/no-img-element
         <img src={posterSrc} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />
       )}
@@ -124,7 +124,7 @@ function YouTubeBackground({
         <button
           type="button"
           onClick={toggle}
-          aria-label={paused ? labels?.play ?? "Reproduzir vídeo" : labels?.pause ?? "Pausar vídeo"}
+          aria-label={paused ? labels?.play ?? "Play video" : labels?.pause ?? "Pause video"}
           className="absolute top-4 right-4 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-ink/85 text-surface backdrop-blur-md transition-colors duration-200 hover:bg-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface motion-reduce:transition-none"
         >
           {paused ? (
@@ -139,15 +139,15 @@ function YouTubeBackground({
 }
 
 /**
- * Hero full-bleed da família Cuidado Global — espelha o "TopoVideo" do
- * novo.creeta (tamanhos/espaçamentos exatos: max-w-1600, rounded-32,
- * min-h 560/820), com a linguagem do Breathe (tokens: ink/surface).
+ * Full-bleed hero of the Cuidado Global family — mirrors the "TopoVideo" of
+ * novo.creeta (exact sizes/spacing: max-w-1600, rounded-32, min-h 560/820),
+ * in the Breathe language (tokens: ink/surface).
  *
- * - loop:   o fundo é um clipe local em repetição (BackgroundVideo).
- * - player: o fundo é o PRÓPRIO vídeo do YouTube rodando mudo, em repetição.
- *           Ao apertar o som, ele remonta do zero (com áudio e controles) no
- *           próprio cartão e abre a barra de fechar no pé (legenda à esquerda,
- *           "Fechar" à direita).
+ * - loop:   the background is a local clip on repeat (BackgroundVideo).
+ * - player: the background is the YouTube video ITSELF playing muted, on repeat.
+ *           Turning the sound on remounts it from zero (with audio and controls)
+ *           inside the card and opens the close bar at the bottom (caption on
+ *           the left, "Close" on the right).
  */
 export function PageVideoHero({
   video,
@@ -156,7 +156,7 @@ export function PageVideoHero({
   panel,
   actions,
   watch,
-  closeLabel = "Fechar o vídeo",
+  closeLabel = "Close video",
   previewLabels,
   videoTitle,
 }: Props) {
@@ -165,23 +165,23 @@ export function PageVideoHero({
   const watchRef = useRef<HTMLButtonElement>(null);
   const playedOnce = useRef(false);
 
-  // Ao fechar, o foco volta para o botão de assistir.
+  // On close, focus returns to the watch button.
   useEffect(() => {
     if (playing) playedOnce.current = true;
     else if (playedOnce.current) watchRef.current?.focus();
   }, [playing]);
 
-  const legenda = isPlayer ? (video as VideoPlayer).legenda : undefined;
+  const playerCaption = isPlayer ? (video as VideoPlayer).playerCaption : undefined;
 
   return (
     <div className="px-4 pt-2 md:px-6 md:pt-6">
       <section className="relative isolate mx-auto flex min-h-[min(calc(100svh-7.5rem),560px)] max-w-[1600px] flex-col justify-end overflow-hidden rounded-[32px] bg-ink text-surface lg:min-h-[min(calc(100svh-7.5rem),820px)]">
-        {/* mídia — fundo (prévia) ou, tocando, o vídeo inteiro com som */}
+        {/* media — background (preview) or, when playing, the full video with sound */}
         <div className={`absolute inset-x-0 top-0 ${playing ? "bottom-[4.5rem]" : "bottom-0 -z-10"}`}>
           {playing ? (
             <iframe
-              key="cg-hero-som"
-              title={videoTitle ?? "Vídeo"}
+              key="cg-hero-sound"
+              title={videoTitle ?? "Video"}
               src={`https://www.youtube-nocookie.com/embed/${(video as VideoPlayer).youtubeId}?autoplay=1&mute=0&start=0&rel=0&modestbranding=1&playsinline=1&iv_load_policy=3`}
               allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
               allowFullScreen
@@ -208,7 +208,7 @@ export function PageVideoHero({
                   className="absolute inset-0"
                 />
               )}
-              {/* véus — legibilidade do texto (base) e dos elementos do topo */}
+              {/* scrims — legibility of the text (bottom) and of the top elements */}
               <div aria-hidden="true" className="pointer-events-none absolute inset-0 bg-gradient-to-t from-ink/70 via-ink/10 to-transparent" />
               <div aria-hidden="true" className="pointer-events-none absolute inset-x-0 top-0 h-28 bg-gradient-to-b from-ink/35 to-transparent" />
             </>
@@ -217,10 +217,10 @@ export function PageVideoHero({
 
         {!playing && (
           <>
-            {/* topo-esquerdo */}
+            {/* top-left */}
             {topLeft && <div className="absolute top-4 left-4 z-10">{topLeft}</div>}
 
-            {/* painel / legenda — no fluxo (justify-end), m-6 */}
+            {/* panel / caption — in flow (justify-end), m-6 */}
             <div className="relative z-10 p-6 md:m-6 md:p-0">
               {panel ? (
                 <div className="inline-flex max-w-full items-center rounded-[24px] bg-ink/75 px-6 py-4 backdrop-blur-md md:max-w-[calc(100%-16rem)] lg:px-7 lg:py-5">
@@ -239,7 +239,7 @@ export function PageVideoHero({
               ) : null}
             </div>
 
-            {/* ação inferior-direita */}
+            {/* bottom-right action */}
             {actions === null ? null : actions ? (
               <div className="absolute right-4 bottom-4 z-10 flex flex-wrap items-center justify-end gap-2 md:right-6 md:bottom-6">{actions}</div>
             ) : isPlayer ? (
@@ -253,7 +253,7 @@ export function PageVideoHero({
                   <PlayGlyph size={20} />
                 </span>
                 <span className="flex flex-col items-start leading-tight">
-                  {watch?.label ?? "Assistir ao vídeo"}
+                  {watch?.label ?? "Watch the video"}
                   {watch?.meta && <span className="text-sm font-normal text-surface/80">{watch.meta}</span>}
                 </span>
               </button>
@@ -261,10 +261,10 @@ export function PageVideoHero({
           </>
         )}
 
-        {/* barra de fechar — pé do vídeo tocando (legenda à esquerda, fechar à direita) */}
+        {/* close bar — bottom of the playing video (caption on the left, close on the right) */}
         {playing && (
           <div className="relative z-10 flex h-[4.5rem] items-center justify-between gap-6 bg-ink px-6">
-            <p className="min-w-0 truncate text-sm text-surface/80">{legenda}</p>
+            <p className="min-w-0 truncate text-sm text-surface/80">{playerCaption}</p>
             <button
               type="button"
               onClick={() => setPlaying(false)}

package/components/PersonChip.tsx

@@ -0,0 +1,49 @@
+import type { ElementType, ReactNode } from "react";
+import { Avatar } from "./Avatar";
+
+type Props = {
+  name: string;
+  /** Second line: role · registration ("Physiotherapist · CREFITO-10/…"). The
+   *  family rule: a health professional always shows the council number. */
+  description?: ReactNode;
+  photo?: string;
+  avatar?: ReactNode;
+  /** With an href the chip is a link (to the person's card) and shows the arrow bubble. */
+  href?: string;
+  linkComponent?: ElementType;
+  className?: string;
+};
+
+/**
+ * Person chip — the "who signs" of a novo.creeta article: one pill with the
+ * portrait, the name and, below, role and registration. With a link it leads
+ * to the person's card and the arrow says so, like the site's shortcuts.
+ */
+export function PersonChip({ name, description, photo, avatar, href, linkComponent, className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  const inner = (
+    <>
+      <Avatar name={name} photo={photo} size={44}>{avatar}</Avatar>
+      <span className="leading-snug">
+        <span className="block font-semibold text-ink">{name}</span>
+        {description && <span className="block text-[0.8125rem] text-ink/80">{description}</span>}
+      </span>
+    </>
+  );
+  /* The avatar (photo or initials) always sits 6px from the edge, like the
+     arrow bubble on the other side; a chip that ends in text gets 20px (Pill). */
+  const box = "inline-flex min-h-11 items-center gap-3 rounded-full bg-card py-1.5 pl-1.5";
+  if (!href) return <p className={`m-0 ${box} pr-5 ${className}`}>{inner}</p>;
+  return (
+    <L
+      href={href}
+      className={`${box} pr-1.5 transition-transform duration-150 ease-out active:scale-[0.98] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none motion-reduce:active:scale-100 ${className}`}
+    >
+      {inner}
+      <span aria-hidden="true" className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] text-ink">
+        <svg viewBox="0 0 24 24" width={15} height={15} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+      </span>
+    </L>
+  );
+}
+

package/components/Pill.tsx

@@ -0,0 +1,42 @@
+import type { ElementType, ReactNode } from "react";
+
+type Props = {
+  href: string;
+  children: ReactNode;
+  /** Lighter supporting info after the label, e.g. "4 videos". */
+  meta?: ReactNode;
+  /** Link component of the app for page links (anchors always use <a>). */
+  linkComponent?: ElementType;
+  className?: string;
+};
+
+/**
+ * Pill that leads somewhere — the Atalho of novo.creeta, the site's only white
+ * pill (information-only pills are labels, not this).
+ *
+ * What says "tap me" is not the color, it is the shape: a full pill, 44px
+ * tall, with an arrow in a circle. The arrow also says where it goes: down
+ * when it is on the same page (an anchor), diagonal when it opens another page.
+ */
+export function Pill({ href, children, meta, linkComponent, className = "" }: Props) {
+  const onPage = href.startsWith("#");
+  const L: ElementType = onPage ? "a" : linkComponent ?? "a";
+  const classes = `group inline-flex min-h-11 items-center gap-2 rounded-full bg-card py-1.5 pl-4 pr-1.5 text-sm font-medium text-ink shadow-[0_1px_2px_rgba(0,0,0,0.12)] transition duration-200 hover:bg-ink hover:text-surface active:scale-[0.98] motion-reduce:active:scale-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none ${className}`;
+  return (
+    <L href={href} className={classes}>
+      <span>{children}</span>
+      {meta && <span className="font-normal text-ink/80 group-hover:text-surface/85">{meta}</span>}
+      <span
+        aria-hidden="true"
+        data-arrow={onPage ? "down" : "other-page"}
+        className="ml-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] transition-colors duration-200 group-hover:bg-surface/15 motion-reduce:transition-none"
+      >
+        {onPage ? (
+          <svg viewBox="0 0 24 24" width={16} height={16} className="cg-arrow-down" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M19 12l-7 7-7-7" /></svg>
+        ) : (
+          <svg 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>
+        )}
+      </span>
+    </L>
+  );
+}