@breathe-ds/ui 0.3.0 → 0.5.1

package/components/PhotoSequence.tsx

@@ -0,0 +1,99 @@
+import type { CSSProperties } from "react";
+import { Pause, Play } from "lucide-react";
+
+export type SequencePhoto = { src: string; alt: string; srcSet?: string; sizes?: string };
+
+type Labels = {
+  /** sr-only of the pause control. */
+  pause: string;
+};
+const EN: Labels = { pause: "Pause the photos" };
+
+type Props = {
+  photos: SequencePhoto[];
+  /** Unique in the page: ties the pause control to the sequence. */
+  id: string;
+  /** Seconds each photo stays, not counting the fade. */
+  seconds?: number;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/** Seconds of fade between one photo and the next. */
+const FADE = 1;
+/** Ken Burns: how much the photo grows while it shows. */
+const ZOOM = 1.08;
+const CURVE = "cubic-bezier(0.77, 0, 0.175, 1)";
+const pct = (n: number) => `${Number(n.toFixed(3))}%`;
+
+/** Keyframes for a sequence of `n` photos. The cycle lasts n × seconds and
+ *  each photo owns its slice: middle ones fade in, stay and vanish at once
+ *  when the next has covered them; the last fades out revealing the first;
+ *  the zoom grows while the photo shows and resets while hidden. */
+export function sequenceKeyframes(n: number, seconds: number): string {
+  const cycle = n * seconds;
+  const enter = (FADE / cycle) * 100;
+  const stay = (seconds / cycle) * 100;
+  const leave = ((seconds + FADE) / cycle) * 100;
+  return [
+    `@keyframes cg-seq-mid-${n}{0%{opacity:0}${pct(enter)}{opacity:1}${pct(leave)}{opacity:1}${pct(leave + 0.01)},100%{opacity:0}}`,
+    `@keyframes cg-seq-end-${n}{0%{opacity:0}${pct(enter)}{opacity:1}${pct(stay)}{opacity:1}${pct(leave)},100%{opacity:0}}`,
+    `@keyframes cg-seq-zoom-${n}{0%{transform:scale(1)}${pct(leave)}{transform:scale(${ZOOM})}${pct(leave + 0.01)},100%{transform:scale(1)}}`,
+  ].join("");
+}
+
+/** Photos that alternate with a fade and slowly zoom in, no JavaScript
+ *  (creeta's `SequenciaFotos`). Only opacity and transform. Content that moves
+ *  by itself for more than 5s must be pausable (WCAG 2.2.2): the hidden
+ *  checkbox does it through CSS (theme.css). Reduced motion: first photo, still. */
+export function PhotoSequence({ photos, id, seconds = 4, labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  const n = photos.length;
+  const cycle = n * seconds;
+
+  const animation = (i: number): CSSProperties => {
+    const zoom = `cg-seq-zoom-${n} ${cycle}s linear infinite`;
+    if (i === 0) return { animation: zoom };
+    const fade = `${i === n - 1 ? `cg-seq-end-${n}` : `cg-seq-mid-${n}`} ${cycle}s ${CURVE} infinite`;
+    return { animation: `${fade}, ${zoom}`, animationDelay: `${i * seconds}s` };
+  };
+
+  // position and radius are defaults: a className with `absolute` or `rounded-*`
+  // (filling a CareSteps frame) takes their place instead of fighting them
+  const position = /\babsolute\b|\bfixed\b/.test(className) ? "" : "relative";
+  const radius = /\brounded/.test(className) ? "" : "rounded-[28px]";
+  return (
+    <div className={`${position} ${radius} overflow-hidden bg-ink ${className}`}>
+      {n > 1 && <style dangerouslySetInnerHTML={{ __html: sequenceKeyframes(n, seconds) }} />}
+      <input id={id} type="checkbox" className="cg-seq-pause peer sr-only" />
+
+      <div className="cg-seq absolute inset-0">
+        {photos.map((p, i) => (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            key={p.src}
+            src={p.src}
+            srcSet={p.srcSet}
+            sizes={p.sizes}
+            alt={p.alt}
+            loading="lazy"
+            decoding="async"
+            style={n > 1 ? animation(i) : undefined}
+            className="absolute inset-0 h-full w-full object-cover"
+          />
+        ))}
+      </div>
+
+      {n > 1 && (
+        <label
+          htmlFor={id}
+          className="cg-seq-control absolute bottom-3 right-3 flex h-11 w-11 cursor-pointer items-center justify-center rounded-full bg-ink/85 text-surface backdrop-blur-md peer-checked:[&_.cg-on-pause]:block peer-checked:[&_.cg-on-play]:hidden peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-surface"
+        >
+          <Pause aria-hidden="true" size={18} strokeWidth={2} className="cg-on-play" />
+          <Play aria-hidden="true" size={18} strokeWidth={2} className="cg-on-pause ml-0.5 hidden" />
+          <span className="sr-only">{t.pause}</span>
+        </label>
+      )}
+    </div>
+  );
+}

package/components/PlanTimeline.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import { useOnAppear } from "./useOnAppear";
+import { PauseButton } from "./PauseButton";
+
+type Labels = {
+  /** Completes the pause button's name: "Pause the plan animation". */
+  pause: string;
+};
+const EN: Labels = { pause: "the plan animation" };
+
+type Props = {
+  /** The three stages, short ("Short", "Medium", "Long"). Three: the keyframes
+   *  in theme.css light one dot at a time, and there are three sets. */
+  names: [string, string, string];
+  /** Only from md, glued to the name: " term" → "Short term". */
+  suffix?: string;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/**
+ * Step 3 of the care flow (creeta's `Prazos`): the three stages of the plan.
+ * The line comes down and each dot lights up when it reaches it; after a rest
+ * everything goes off and restarts (6s loop, keyframes in theme.css).
+ * - Starts when on screen and only runs while on screen.
+ * - Moves by itself for more than 5s: pause button (WCAG 2.2.2).
+ * - Without JavaScript or with reduced motion: still, the three dots lit, no button.
+ * Fills its box (absolute inset-0): put it in a frame with a height.
+ */
+export function PlanTimeline({ names, suffix, labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  const { ref, state, onScreen } = useOnAppear<HTMLDivElement>();
+  const [paused, setPaused] = useState(false);
+
+  return (
+    <div ref={ref} data-state={state} data-stopped={paused || !onScreen ? "" : undefined} className={`cg-plan absolute inset-0 ${className}`}>
+      <div aria-hidden="true" className="absolute inset-y-3 left-3 right-0 flex flex-col justify-center rounded-l-2xl bg-card pl-3 md:inset-y-5 md:left-5 md:pl-5">
+        {/* the track, light, and over it the line that comes down */}
+        <span className="absolute bottom-[22%] left-[17.5px] top-[22%] w-px bg-ink-soft/25 md:left-[25.5px]" />
+        <span className="cg-plan-line absolute bottom-[22%] left-[17.5px] top-[22%] w-px origin-top bg-ink-soft md:left-[25.5px]" />
+        {names.map((name, i) => (
+          <span
+            key={name}
+            data-n={i + 1}
+            className={`cg-plan-step flex flex-1 items-center gap-2.5 text-[0.8125rem] font-medium text-ink md:gap-3.5 md:text-[0.9375rem] ${i > 0 ? "border-t border-ink/10" : ""}`}
+          >
+            <span className="relative h-3 w-3 shrink-0 rounded-full border-2 border-ink-soft bg-card">
+              <span className="cg-plan-dot absolute -inset-0.5 rounded-full bg-ink-soft" />
+            </span>
+            {/* on the phone the frame is 134px and the pause button takes the corner: name only */}
+            <span className="cg-plan-name">
+              {name}
+              {suffix && <span className="max-md:hidden">{suffix}</span>}
+            </span>
+          </span>
+        ))}
+      </div>
+
+      {state !== "whole" && (
+        <PauseButton paused={paused} onToggle={() => setPaused((p) => !p)} what={t.pause} bubble="surface" className="bottom-3 right-0 md:bottom-5 md:right-1" />
+      )}
+    </div>
+  );
+}

package/components/PostArticle.tsx

@@ -0,0 +1,102 @@
+import type { ReactNode } from "react";
+import type { PostDate } from "./PostCard";
+
+type Labels = {
+  /** sr-only before the date. */
+  publishedOn: string;
+  /** sr-only heading of the aside (the video). */
+  aside: string;
+};
+const EN: Labels = { publishedOn: "Published on", aside: "Watch" };
+
+type Props = {
+  /** The trail above the title (a Breadcrumb). */
+  trail?: ReactNode;
+  title: ReactNode;
+  /** Who signs (a PersonChip). */
+  signature?: ReactNode;
+  date?: PostDate;
+  /** The text, one entry per paragraph: the first one is the lead, larger. */
+  paragraphs: ReactNode[];
+  /** Small line under a hairline at the end of the text ("This text guides, but…"). */
+  notice?: ReactNode;
+  /** Right column from md, sticky: the video the text came from (a VideoStoryCard). */
+  aside?: ReactNode;
+  /** The video's speech, in full, open: here it is the body of the page, not an extra. */
+  transcript?: { title: ReactNode; note?: ReactNode; paragraphs: ReactNode[]; lang?: string };
+  /** After the article: "other posts" (a heading and a grid of PostCard), the final call… */
+  children?: ReactNode;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/**
+ * Post page of the Cuidado Global family — creeta's `OrientacaoTela`, by
+ * tokens. Order: the trail, the title, who signs and when; the text, which
+ * answers at once; the video the text came from and, in full, what is said in
+ * it. On the phone they come in reading order (text, video, transcript); from
+ * md the video goes to the right column, sticky, and follows the reading.
+ */
+export function PostArticle({ trail, title, signature, date, paragraphs, notice, aside, transcript, children, labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  return (
+    <article className={className}>
+      {trail}
+
+      <header className="mt-3 max-w-3xl md:mt-5">
+        <h1 className="font-heading text-[2rem] font-medium leading-[1.08] tracking-[-0.02em] text-ink md:text-5xl">{title}</h1>
+        {(signature || date) && (
+          <div className="mt-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-ink-body">
+            {signature}
+            {date && (
+              <time dateTime={date.iso}>
+                <span className="sr-only">{t.publishedOn} </span>
+                {date.label}
+              </time>
+            )}
+          </div>
+        )}
+      </header>
+
+      {/* Three pieces in a grid. On the phone in reading order: the text (the
+          answer), the video, the transcript. From md the video takes the right
+          column and follows the reading of the other two. The two text pieces
+          share one column (`contents` on the phone, a stack from md): in two
+          grid rows the taller video stretched the first row and opened a gap
+          above the transcript (2026-10-29). */}
+      <div className="mt-8 grid gap-3 md:mt-10 md:grid-cols-[minmax(0,7fr)_minmax(0,4fr)] md:items-start md:gap-5">
+        <div className="contents md:col-start-1 md:row-start-1 md:flex md:flex-col md:gap-5">
+          <section className="rounded-[28px] bg-card p-6 md:p-10">
+            {paragraphs.map((p, i) => (
+              <p key={i} className={i === 0 ? "text-lg leading-relaxed text-ink md:text-xl" : "mt-4 leading-relaxed text-ink-body"}>
+                {p}
+              </p>
+            ))}
+            {notice && <p className="mt-6 border-t border-ink/10 pt-4 text-sm text-ink-body">{notice}</p>}
+          </section>
+
+          {transcript && transcript.paragraphs.length > 0 && (
+            <section className="rounded-[28px] bg-card p-6 max-md:order-2 md:p-10">
+              <h2 className="font-heading text-[1.375rem] font-medium leading-snug text-ink md:text-2xl">{transcript.title}</h2>
+              {transcript.note && <p className="mt-2 text-sm font-medium text-ink">{transcript.note}</p>}
+              <div lang={transcript.lang} className="mt-4 space-y-4 leading-relaxed text-ink-body">
+                {transcript.paragraphs.map((p, i) => (
+                  <p key={i}>{p}</p>
+                ))}
+              </div>
+            </section>
+          )}
+        </div>
+
+        {aside && (
+          <aside className="max-md:order-1 md:sticky md:top-28 md:col-start-2 md:row-start-1">
+            <h2 className="sr-only">{t.aside}</h2>
+            {aside}
+          </aside>
+        )}
+      </div>
+
+      {children}
+    </article>
+  );
+}

package/components/PostCard.tsx

@@ -0,0 +1,69 @@
+import type { ElementType, ReactNode } from "react";
+
+export type PostCover = { src: string; srcSet?: string; sizes?: string };
+export type PostDate = { iso: string; label: ReactNode };
+
+type Labels = {
+  /** Decorative line at the foot ("Read the guidance"); the link is the title. */
+  read: ReactNode;
+};
+const EN: Labels = { read: "Read more" };
+
+type Props = {
+  /** 4:3 at the top, decorative (the title says the subject). */
+  cover: PostCover;
+  /** Small line above the title ("Respiratory treatment"). */
+  category?: ReactNode;
+  title: ReactNode;
+  href: string;
+  /** The first paragraph, clamped to three lines. */
+  excerpt: ReactNode;
+  author: ReactNode;
+  date: PostDate;
+  headingLevel?: "h2" | "h3";
+  linkComponent?: ElementType;
+  labels?: Partial<Labels>;
+  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>
+);
+
+/**
+ * Post card of the Cuidado Global family — creeta's `OrientacaoCartao`, by
+ * tokens: the card of one article in the list and in "other posts". The whole
+ * card is clickable (the title's link stretches over it) but the link's name
+ * stays the title: that is what the screen reader hears.
+ */
+export function PostCard({ cover, category, title, href, excerpt, author, date, headingLevel: Title = "h2", linkComponent, labels, className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  const t = { ...EN, ...labels };
+  return (
+    <article className={`group relative flex h-full flex-col overflow-hidden rounded-[28px] bg-card transition-transform duration-200 ease-out active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100 ${className}`}>
+      <div className="relative aspect-[4/3] overflow-hidden">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={cover.src} srcSet={cover.srcSet} sizes={cover.sizes} 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-7">
+        {category && <p className="mb-2 text-sm font-semibold text-ink-soft">{category}</p>}
+        <Title className="font-heading text-xl font-medium leading-snug text-ink md:text-[1.375rem]">
+          <L href={href} className="after:absolute after:inset-0 after:rounded-[28px] focus-visible:outline-none focus-visible:after:outline focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-ink">
+            {title}
+          </L>
+        </Title>
+        <p className="mt-3 line-clamp-3 leading-relaxed text-ink-body">{excerpt}</p>
+        <p className="mt-auto pt-5 text-sm text-ink-body">
+          <span className="font-semibold text-ink">{author}</span>
+          <span aria-hidden="true"> · </span>
+          <time dateTime={date.iso}>{date.label}</time>
+        </p>
+        {/* decoration: the link is the title */}
+        <p aria-hidden="true" className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-ink-soft">
+          {t.read}
+          <ArrowUpRight />
+        </p>
+      </div>
+    </article>
+  );
+}

package/components/ProfessionalCard.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState, type ElementType, type ReactNode } from "react";
 import { initials } from "./Avatar";
 import { ProfessionalModal, type ProfessionalModalLabels, type ProfessionalPresentation } from "./ProfessionalModal";
-import { CollapseRow, LinkRow, RowList } from "./Rows";
+import { CollapseRow, LinkRow, RowList, type RowLink } from "./Rows";
 
 export type ProfessionalPhoto = {
   src: string;
@@ -22,28 +22,50 @@ export type ProfessionalLiving = {
   poster: string;
 };
 
-export type ProfessionalGuidance = { label: ReactNode; href: string };
+/**
+ * One row at the foot of the full card (RowList). Generic: the site decides
+ * what the rows are. On novo.creeta they are "Trajetória" (collapse with the
+ * bio), "Orientações" (collapse with the links the person signs, with
+ * `openOnArrival`) and "Instagram" (link with icon, new tab).
+ */
+export type ProfessionalCardRow =
+  | {
+      kind: "collapse";
+      label: ReactNode;
+      /** sr-only right after the label, e.g. " of Person name". */
+      srLabel?: ReactNode;
+      /** Text content (a string becomes one paragraph). */
+      content?: ReactNode;
+      /** Or a list of links, with the count beside the label. */
+      links?: RowLink[];
+      count?: number;
+      /** Marks the row with `data-cg-open-on-arrival`: the site opens it when
+       *  the page is reached by the card's anchor (creeta's `abre-ao-chegar`). */
+      openOnArrival?: boolean;
+    }
+  | {
+      kind: "link";
+      label: ReactNode;
+      href: string;
+      srLabel?: ReactNode;
+      /** ↗ another page (default) or ↓ an anchor on this page. */
+      arrow?: "go" | "down";
+      /** Opens in a new tab. */
+      external?: boolean;
+      /** Replaces the arrow (an 18px glyph): the Instagram icon, for instance. */
+      icon?: ReactNode;
+    };
 
 export type ProfessionalCardLabels = ProfessionalModalLabels & {
   /** alt of the portrait. */
   portrait: (name: string) => string;
-  trajectory: string;
-  /** The row of the guidance the person signs; the count goes beside it. */
-  guidance: string;
-  /** sr-only, right after "Trajectory" and "Guidance": " of {name}". */
-  of: (name: string) => string;
-  instagram: string;
-  /** sr-only, right after "Instagram". */
-  instagramOf: (name: string) => string;
+  /** The small badge on the medium card's photo, on hover ("Conhecer"). */
+  meet: string;
 };
 
 const EN: Omit<ProfessionalCardLabels, keyof ProfessionalModalLabels> = {
   portrait: (name) => `Portrait of ${name}`,
-  trajectory: "Trajectory",
-  guidance: "Guidance",
-  of: (name) => ` of ${name}`,
-  instagram: "Instagram",
-  instagramOf: (name) => ` of ${name} (opens in a new tab)`,
+  meet: "Meet",
 };
 
 const SIZES = "(min-width: 1024px) 30vw, (min-width: 640px) 45vw, 92vw";
@@ -52,6 +74,9 @@ const SIZES = "(min-width: 1024px) 30vw, (min-width: 640px) 45vw, 92vw";
 const ZOOM =
   "aspect-[4/5] h-auto w-full object-cover transition-transform duration-500 ease-[var(--ease-cg)] motion-reduce:transition-none";
 const ZOOM_CARD = `${ZOOM} [@media(hover:hover)_and_(pointer:fine)]:group-hover/card:scale-[1.03] motion-reduce:[@media(hover:hover)_and_(pointer:fine)]:group-hover/card:scale-100`;
+/* medium card: the 3:4 portrait, zoom with the mouse over the link */
+const ZOOM_MEDIUM =
+  "aspect-[3/4] h-auto w-full object-cover transition-transform duration-500 ease-[var(--ease-cg)] motion-reduce:transition-none [@media(hover:hover)_and_(pointer:fine)]:group-hover:scale-[1.04] motion-reduce:[@media(hover:hover)_and_(pointer:fine)]:group-hover:scale-100";
 /* inside the modal trigger only the photo button is the hover target */
 const ZOOM_PHOTO = `${ZOOM} [@media(hover:hover)_and_(pointer:fine)]:group-hover/photo:scale-[1.03] motion-reduce:[@media(hover:hover)_and_(pointer:fine)]:group-hover/photo:scale-100`;
 
@@ -224,15 +249,25 @@ type Props = {
   living?: ProfessionalLiving;
   /** With a presentation video the portrait opens the modal (ProfessionalModal). */
   presentation?: ProfessionalPresentation;
-  /** The bio: a string (one paragraph) or your own paragraphs. Opens in place
-   *  under "Trajectory". */
+  /** The full bio, shown in the presentation modal: a string (one paragraph)
+   *  or your own paragraphs. To show it on the card too, put it in a
+   *  `rows` collapse. */
   bio?: ReactNode;
-  /** The guidance pages the person signs: the row lists them, with the count. */
-  guidance?: ProfessionalGuidance[];
-  /** Instagram profile URL (outbound row). */
-  instagram?: string;
-  /** Anchor of the card (the authorship link of a guidance page lands here). */
+  /** The rows at the foot of the card (full size): collapses with text or
+   *  links, links with an arrow or an icon. See ProfessionalCardRow. */
+  rows?: ProfessionalCardRow[];
+  /** Anchor of the card (a link elsewhere on the site lands here). */
   id?: string;
+  /** `full` (default): the team-page card. `medium`: the home's tile — a
+   *  white card with the 3:4 portrait and the name, a link to the full card
+   *  (living portrait and "Meet" badge on hover). `micro`: the "who treats"
+   *  row — 72px photo, name and role, also a link. The small sizes render the
+   *  link as the root; wrap them in your <li> (RailItem). */
+  size?: "full" | "medium" | "micro";
+  /** Where the small sizes lead: the full card on the team page ("/team/#slug"). */
+  href?: string;
+  /** Name shown on the medium card (the site uses the first two words). */
+  shortName?: string;
   /** h2 on the team page (default), h3 inside a section that already has an h2. */
   headingLevel?: "h2" | "h3";
   /** Root element. Default <article>. */
@@ -248,13 +283,14 @@ type Props = {
  * (components/professional-card.tsx) with the Breathe tokens. A `card`
  * surface with the portrait on top (plain, living, or opening the video
  * presentation), the name, role and registration, then one list of equal
- * rows separated by hairlines: Trajectory (opens the bio in place), Guidance
- * (opens the links in place) and Instagram (outbound). Six open bios used to
- * make the page 6,700px tall on a phone, hence the rows.
+ * rows separated by hairlines (`rows`): collapses that open in place (a text,
+ * or a list of links with the count) and links (arrow or icon). On creeta:
+ * Trajectory, Guidance and Instagram. Six open bios used to make the page
+ * 6,700px tall on a phone, hence the collapses.
  *
- * The Guidance row carries `data-cg-open-on-arrival`: the site opens it when
- * the page is reached by the card's anchor (creeta's `abre-ao-chegar.tsx`,
- * not part of the DS).
+ * A collapse with `openOnArrival` carries `data-cg-open-on-arrival`: the site
+ * opens it when the page is reached by the card's anchor (creeta's
+ * `abre-ao-chegar.tsx`, not part of the DS).
  */
 export function ProfessionalCard({
   name,
@@ -265,9 +301,11 @@ export function ProfessionalCard({
   living,
   presentation,
   bio,
-  guidance,
-  instagram,
+  rows,
   id,
+  size = "full",
+  href = "#",
+  shortName,
   headingLevel: Heading = "h2",
   as: As = "article",
   linkComponent,
@@ -279,6 +317,69 @@ export function ProfessionalCard({
   const alt = photo?.alt ?? t.portrait(name);
   const hasPortrait = Boolean(photo || media || living);
 
+  if (size === "micro") {
+    // the "who treats" row of a treatment page (creeta telas/tratamento.tsx):
+    // the text beside says who it is, so the photo is decoration
+    return (
+      <L
+        href={href}
+        id={id}
+        className={`flex items-center gap-4 rounded-[22px] bg-card p-3 pr-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink ${className}`}
+      >
+        {photo ? (
+          <img src={photo.src} srcSet={photo.srcSet} sizes="72px" alt="" loading="lazy" decoding="async" className="h-[72px] w-[72px] shrink-0 rounded-2xl object-cover" />
+        ) : media ? (
+          <span className="block h-[72px] w-[72px] shrink-0 overflow-hidden rounded-2xl">{media}</span>
+        ) : (
+          <span aria-hidden="true" className="flex h-[72px] w-[72px] shrink-0 items-center justify-center rounded-2xl bg-ink/[0.12] font-heading text-xl font-medium text-ink">
+            {initials(name)}
+          </span>
+        )}
+        <span>
+          <span className="block font-heading font-medium leading-snug text-ink">{name}</span>
+          {role && <span className="mt-0.5 block text-sm text-ink-soft">{role}</span>}
+        </span>
+      </L>
+    );
+  }
+
+  if (size === "medium") {
+    // the home's team tile (creeta telas/home.tsx): a white card with the
+    // photo and the name inside — without the card the name sat loose under
+    // the photo, with no "close". Mouse over: the clip plays, the photo zooms
+    // a little and a discreet "Meet" shows in the corner; on tap the card shrinks.
+    return (
+      <L
+        href={href}
+        id={id}
+        data-cg-professional-card=""
+        className={`group block h-full rounded-[26px] bg-card p-2 pb-4 transition-transform duration-200 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}`}
+      >
+        <span className="relative block overflow-hidden rounded-[20px]">
+          {hasPortrait ? (
+            <Portrait name={name} photo={photo ? { ...photo, sizes: photo.sizes ?? "(min-width: 768px) 16vw, 42vw" } : undefined} media={media} living={living} alt={alt} decorative className={ZOOM_MEDIUM} />
+          ) : (
+            <span aria-hidden="true" className="flex aspect-[3/4] w-full items-center justify-center bg-ink/[0.12] font-heading text-3xl font-medium text-ink">
+              {initials(name)}
+            </span>
+          )}
+          {/* only where a mouse exists, and with keyboard focus; the link
+              already has its name, so it is decoration */}
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute bottom-2 left-2 inline-flex translate-y-1 items-center gap-1.5 rounded-full border border-white/15 bg-ink/80 px-3 py-2 text-xs font-medium text-white opacity-0 backdrop-blur-md transition duration-200 ease-out group-focus-visible:translate-y-0 group-focus-visible:opacity-100 motion-reduce:translate-y-0 motion-reduce:transition-none [@media(hover:hover)_and_(pointer:fine)]:group-hover:translate-y-0 [@media(hover:hover)_and_(pointer:fine)]:group-hover:opacity-100"
+          >
+            {t.meet}
+            <svg aria-hidden="true" viewBox="0 0 24 24" width={14} height={14} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+          </span>
+        </span>
+        <span className="mt-3 block px-1.5 font-heading text-sm font-medium leading-snug text-ink transition-colors duration-150 group-hover:text-ink-soft motion-reduce:transition-none">
+          {shortName ?? name}
+        </span>
+      </L>
+    );
+  }
+
   return (
     <As id={id} data-cg-professional-card="" className={`group/card scroll-mt-24 rounded-2xl bg-card p-3 pb-6 ${className}`}>
       {hasPortrait && presentation ? (
@@ -315,26 +416,30 @@ export function ProfessionalCard({
             <p className="mt-1 text-xs text-ink/80">{registration}</p>
           </>
         )}
-        {/* Trajectory, guidance and Instagram: one list, of equal rows. They
-            used to be three things with three designs (an open button, a loose
-            list of links and a magenta link at the end). The first two open in
-            place: six open bios made 6,700px of page on a phone. */}
-        <RowList className="mt-4">
-          {bio && (
-            <CollapseRow label={t.trajectory} srLabel={t.of(name)}>
-              {bio}
-            </CollapseRow>
-          )}
-
-          {/* What the person signs: it is what makes this card the destination
-              of the authorship link of the guidance pages. Whoever arrives by
-              that link finds this block open (site-side, data-cg-open-on-arrival). */}
-          {guidance && guidance.length > 0 && (
-            <CollapseRow label={t.guidance} srLabel={t.of(name)} links={guidance} linkComponent={L} data-cg-open-on-arrival="" />
-          )}
-
-          {instagram && <LinkRow label={t.instagram} srLabel={t.instagramOf(name)} href={instagram} external />}
-        </RowList>
+        {/* One list of equal rows. On creeta they used to be three things
+            with three designs (an open button, a loose list of links and a
+            magenta link at the end); the collapses open in place. */}
+        {rows && rows.length > 0 && (
+          <RowList className="mt-4">
+            {rows.map((row, i) =>
+              row.kind === "collapse" ? (
+                <CollapseRow
+                  key={i}
+                  label={row.label}
+                  srLabel={row.srLabel}
+                  count={row.count}
+                  links={row.links}
+                  linkComponent={L}
+                  {...(row.openOnArrival ? { "data-cg-open-on-arrival": "" } : {})}
+                >
+                  {row.content}
+                </CollapseRow>
+              ) : (
+                <LinkRow key={i} label={row.label} srLabel={row.srLabel} href={row.href} arrow={row.arrow} external={row.external} icon={row.icon} linkComponent={L} />
+              ),
+            )}
+          </RowList>
+        )}
       </div>
     </As>
   );