@breathe-ds/ui 0.6.10 → 0.6.12

package/README.md

@@ -207,6 +207,10 @@ from color, not from extra markup.
 - **TestimonialsSection**: the testimonials block, as on ttcab (the standard): "Depoimentos /
   Histórias de sucesso" (pt/en/es), masonry in two columns, video first, pull-quote cards that
   open the side panel. Sites pass only `items`.
+- **EvidenceSection**: the evidence block, as on ttcab (the standard): "Evidência /
+  Referências científicas" (pt/en/es), heading sticky on the left, article rows on the right,
+  authors joined by " · " and cleaned (`authorNames`, `authorLine`). Sites pass `items`,
+  `allHref` and the `lead` (what the collection is about).
 - **Texture & rhythm (opt-in)**: `.cg-grain` adds a barely-there paper grain (noise in
   the ink color) to any background — the body, a band. `bg-surface-alt` (token
   `--cg-surface-alt`, falls back to `surface`) is a band one step deeper than the page,
@@ -220,6 +224,11 @@ from color, not from extra markup.
   centred) + **FilterBar** (thin sticky bar of compact filters — `SelectField density="sm"` —
   with the count and "clear" on the right; it publishes its height as `--cg-filterbar-h`, so
   `StickyGroupHeading stickyTop="top-[calc(80px+var(--cg-filterbar-h,0px))]"` sticks right below).
+- **Directory hero with people** (0.6.12): `PageHero photos={[…]}` — the photo wall from
+  metodorta's professionals page: real portraits (4:5) in three columns drifting up on the right
+  half, fading into the band; a strip of faces on phones. Decorative, still with reduced motion,
+  needs ≥ 6 photos, replaces the watermark. `tone="callout"` gives the panel the Callout's
+  colour ("info well"), as on metodorta.
 - **Callout** (a.k.a. info well): a secondary invitation under a page's main control
   (location invite under the professionals search, a tip under the articles search), at
   most one action. Never for errors or warnings. Default `tone="wash"`: no border, the

package/components/EvidenceSection.tsx

@@ -0,0 +1,107 @@
+import type { ReactNode } from "react";
+import { Button } from "./Button";
+import { SectionHeading } from "./Heading";
+import { LinkRow, RowList } from "./Rows";
+
+/**
+ * Evidence block of the family (0.6.11, 06/11/2026): the ttcab section made the
+ * standard. Two columns: heading, lead and "see all" on the left (sticky while
+ * reading), the articles on the right, one row each: title in bold, authors
+ * below joined by " · ", without affiliation marks or degrees. Sites pass the
+ * articles, the link to the full list and the lead (what the collection is
+ * about); the eyebrow, title and link text are the ones validated on ttcab.
+ * Put it inside your section's Container.
+ */
+const COPY = {
+  pt: { eyebrow: "Evidência", title: "Referências científicas", all: "Ver todos os artigos" },
+  en: { eyebrow: "Evidence", title: "Scientific references", all: "See all articles" },
+  es: { eyebrow: "Evidencia", title: "Referencias científicas", all: "Ver todos los artículos" },
+} as const;
+
+// degrees the PDFs glue to the names ("Nathan Watemberg MDa", "Stephanie Nichter, DPT, PT, CCI1")
+const DEGREES = new Set(["MD", "MDa", "PhD", "PT", "DPT", "MS", "MSN", "MSPT", "RN", "CRNP", "AuD", "AS", "CCI", "R.T.", "(R)", "(CT)", "RT"]);
+
+/**
+ * Authors as a clean list (the ttcab cleaning): no affiliation numbers or
+ * symbols (1,2 * †), no loose affiliation letters (",a"), no degrees, and the
+ * mixed separators of the records (& • · ; , and e) unified.
+ */
+export function authorNames(raw: string | undefined): string[] {
+  if (!raw) return [];
+  const clean = raw
+    .replace(/[\d*†‡§]+/g, "")
+    .replace(/,\s*[a-d](?=[\s,]|$)/g, ",")
+    .replace(/\s+/g, " ");
+  return clean
+    .split(/\s*(?:;|•|·|&|,\s*(?:and|e)\s+|\s+and\s+|\s+e\s+(?=[A-ZÀ-Ú])|,)\s*/)
+    .map((name) =>
+      name
+        .split(" ")
+        .filter((w) => w && !DEGREES.has(w) && !DEGREES.has(w.replace(/[,.]$/, "")))
+        .join(" ")
+        .replace(/[,.\s]+$/, "")
+        .trim(),
+    )
+    .filter((name) => name.split(" ").length >= 2 || /^[A-ZÀ-Ú][a-zà-ú]+[A-Z]/.test(name));
+}
+
+/** "Ana Lima1, Beto Souza PhD e Caio Reis." → "Ana Lima · Beto Souza · Caio Reis" */
+export const authorLine = (raw: string | string[] | undefined) =>
+  (Array.isArray(raw) ? raw : authorNames(raw)).join(" · ");
+
+export type EvidenceArticle = {
+  href: string;
+  title: string;
+  /** Raw authors from the record, or an already clean list. */
+  authors?: string | string[];
+  /** Language of the title when it differs from the page (e.g. "en"). */
+  lang?: string;
+};
+
+type Props = {
+  items: EvidenceArticle[];
+  /** Where "see all" points (the site's article list). */
+  allHref: string;
+  /** What the collection is about (one sentence, from the site). */
+  lead?: ReactNode;
+  locale?: "pt" | "en" | "es";
+  /** Override only when the client asks; the default is the standard. */
+  eyebrow?: string;
+  title?: string;
+  allLabel?: string;
+  headingId?: string;
+};
+
+export function EvidenceSection({ items, allHref, lead, locale = "pt", eyebrow, title, allLabel, headingId }: Props) {
+  const c = COPY[locale];
+  return (
+    <div className="grid grid-cols-[minmax(0,1fr)] gap-8 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-16">
+      <div className="lg:sticky lg:top-44 lg:self-start">
+        <SectionHeading id={headingId} eyebrow={eyebrow ?? c.eyebrow} title={title ?? c.title} lead={lead} />
+        <div className="mt-6">
+          <Button variant="link" href={allHref}>
+            {allLabel ?? c.all} →
+          </Button>
+        </div>
+      </div>
+      <RowList>
+        {items.map((a) => {
+          const authors = authorLine(a.authors);
+          return (
+            <LinkRow
+              key={a.href}
+              className="py-4"
+              href={a.href}
+              label={
+                <>
+                  <span className="block" lang={a.lang}>{a.title}</span>
+                  {authors && <span className="mt-1 block text-sm font-normal text-ink-soft">{authors}</span>}
+                </>
+              }
+            />
+          );
+        })}
+      </RowList>
+    </div>
+  );
+}

package/components/PageHero.tsx

@@ -16,15 +16,54 @@ type Props = {
    *  6% in `ink`). Decorative: rendered aria-hidden. */
   watermark?: ReactNode;
   /** `alt` (default): the section band colour (`surface-alt`), light, ink
-   *  text at full contrast (8.85:1 on ttcab). `card`: white. */
-  tone?: "alt" | "card";
+   *  text at full contrast (8.85:1 on ttcab). `card`: white. `callout`: the
+   *  colour of the Callout ("info well"), a step deeper (0.6.12). */
+  tone?: "alt" | "card" | "callout";
   /** `panel` (default): the rounded band with the tools inside. `centered`: the
    *  Apple search page — no box, title and lead centred, one search below on the
    *  page colour; refining filters live outside, after the results begin. */
   variant?: "panel" | "centered";
+  /** Photo wall (0.6.12, from metodorta's professionals page): real portraits
+   *  (4:5) in three columns drifting slowly up on the right half of the panel,
+   *  fading into the band on the left so the title sits on a clean background;
+   *  on phones, one strip of faces moving sideways at the top. Decorative
+   *  (aria-hidden, alt=""), still with prefers-reduced-motion. Needs ≥ 6 photos;
+   *  replaces the watermark. `panel` variant only. */
+  photos?: string[];
   className?: string;
 };
 
+/** The photo wall of `PageHero` (CSS animation, no JS: 70–95 s a lap, the
+ *  middle column the other way). Content is doubled, so the loop has no jump. */
+function PhotoWall({ photos }: { photos: string[] }) {
+  const columns = [0, 1, 2].map((c) => photos.filter((_, i) => i % 3 === c));
+  const speed = ["animate-[cg-wall-up_80s_linear_infinite]", "animate-[cg-wall-up_95s_linear_infinite_reverse]", "animate-[cg-wall-up_70s_linear_infinite]"];
+  return (
+    <div aria-hidden="true" className="pointer-events-none">
+      <div className="absolute inset-y-0 right-0 hidden w-[52%] grid-cols-3 gap-3 px-3 [mask-image:linear-gradient(to_right,transparent,black_38%),linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)] [mask-composite:intersect] lg:grid">
+        {columns.map((col, c) => (
+          <div key={c} className="overflow-hidden">
+            <div className={`flex flex-col [&>img]:mb-3 motion-reduce:!animate-none ${speed[c]}`}>
+              {[...col, ...col].map((src, i) => (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img key={i} src={src} alt="" width={384} height={480} decoding="async" className="aspect-[4/5] w-full rounded-[20px] object-cover" />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="relative overflow-hidden pt-4 [mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] lg:hidden">
+        <div className="flex w-max [&>img]:mr-2 motion-reduce:!animate-none animate-[cg-wall-side_60s_linear_infinite]">
+          {[...photos.slice(0, 12), ...photos.slice(0, 12)].map((src, i) => (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img key={i} src={src} alt="" width={384} height={480} decoding="async" className="aspect-[4/5] w-24 shrink-0 rounded-2xl object-cover sm:w-28" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 /**
  * PageHero — the opening panel of an inner page (a library, a directory).
  * Wide, in novo.creeta's proportion (up to 1600px, 16/24px from the screen
@@ -35,7 +74,8 @@ type Props = {
  * and the panel groups title, explanation and controls (common region)
  * without the weight of a dark panel.
  */
-export function PageHero({ title, lead, note, breadcrumb, children, watermark, tone = "alt", variant = "panel", className = "" }: Props) {
+export function PageHero({ title, lead, note, breadcrumb, children, watermark, tone = "alt", variant = "panel", photos, className = "" }: Props) {
+  const wall = photos && photos.length >= 6 ? photos : null;
   if (variant === "centered") {
     return (
       <section className={`px-4 pt-[clamp(40px,7vw,96px)] pb-[clamp(28px,4vw,48px)] text-center md:px-6 ${className}`}>
@@ -53,20 +93,23 @@ export function PageHero({ title, lead, note, breadcrumb, children, watermark, t
   }
   return (
     <div className={`px-4 pt-2 md:px-6 md:pt-4 ${className}`}>
-      <section className={`relative isolate mx-auto max-w-[1600px] overflow-hidden rounded-[28px] md:rounded-[32px] ${tone === "card" ? "bg-card" : "bg-surface-alt"}`}>
-        {watermark && (
+      <section className={`relative isolate mx-auto max-w-[1600px] overflow-hidden rounded-[28px] md:rounded-[32px] ${tone === "card" ? "bg-card" : tone === "callout" ? "bg-callout" : "bg-surface-alt"}`}>
+        {wall && <PhotoWall photos={wall} />}
+        {watermark && !wall && (
           <span aria-hidden="true" className="pointer-events-none absolute -right-10 -bottom-16 -z-10 hidden w-[min(34vw,420px)] md:block">
             {watermark}
           </span>
         )}
-        <div className="mx-auto w-full max-w-6xl px-5 py-[clamp(36px,6vw,72px)] sm:px-6 lg:px-8">
+        <div className={`relative mx-auto w-full max-w-6xl px-5 sm:px-6 lg:px-8 ${wall ? "pt-[clamp(28px,5vw,88px)] pb-[clamp(32px,5vw,88px)] lg:min-h-[30rem]" : "py-[clamp(36px,6vw,72px)]"}`}>
           {breadcrumb && <div className="mb-6">{breadcrumb}</div>}
-          <Heading as="h1" size="display" className="text-balance">
-            {title}
-          </Heading>
-          {lead && <p className="m-0 mt-4 max-w-xl text-lg leading-relaxed text-ink-body">{lead}</p>}
-          {note && <p className="m-0 mt-3 max-w-xl text-sm leading-relaxed text-ink-soft">{note}</p>}
-          {children && <div className="mt-[clamp(24px,4vw,40px)]">{children}</div>}
+          <div className={wall ? "max-w-xl lg:max-w-[46%]" : undefined}>
+            <Heading as="h1" size="display" className="text-balance">
+              {title}
+            </Heading>
+            {lead && <p className="m-0 mt-4 max-w-xl text-lg leading-relaxed text-ink-body">{lead}</p>}
+            {note && <p className="m-0 mt-3 max-w-xl text-sm leading-relaxed text-ink-soft">{note}</p>}
+          </div>
+          {children && <div className={`mt-[clamp(24px,4vw,40px)] ${wall ? "lg:max-w-[52%]" : ""}`}>{children}</div>}
         </div>
       </section>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.6.10",
+  "version": "0.6.12",
   "description": "Breathe DS — the design system of the Cuidado Global family of sites (creeta, ttcab, metodorta). Themeable tokens + React components.",
   "license": "MIT",
   "type": "module",
@@ -102,6 +102,7 @@
     "./components/ProfileSpotlight": "./components/ProfileSpotlight.tsx",
     "./components/FounderSpotlight": "./components/FounderSpotlight.tsx",
     "./components/TestimonialsSection": "./components/TestimonialsSection.tsx",
+    "./components/EvidenceSection": "./components/EvidenceSection.tsx",
     "./components/FilterBar": "./components/FilterBar.tsx",
     "./components/Callout": "./components/Callout.tsx",
     "./components/KenBurnsImage": "./components/KenBurnsImage.tsx"

package/theme.css

@@ -321,3 +321,8 @@
   mix-blend-mode: lighten;
 }
 
+
+/* PageHero photo wall (0.6.12): columns drift up, the phone strip drifts sideways.
+   Half the track, because the content is doubled: the loop has no jump. */
+@keyframes cg-wall-up { to { transform: translateY(-50%); } }
+@keyframes cg-wall-side { to { transform: translateX(-50%); } }