@breathe-ds/ui 0.6.8 → 0.6.10

package/README.md

@@ -198,6 +198,15 @@ from color, not from extra markup.
   portrait on the left (photo or `living`, the team pages' living portrait), then
   eyebrow, name, role, registration, bio and `actions`. `variant` `plain` (on the page
   color) or `card` (white card). Stacks on phones.
+- **FounderSpotlight**: the family founder (Mariangela, creator of RTA and TTCAB) in one
+  block: `ProfileSpotlight` card + living portrait on hover, filled with the text validated
+  on ttcab (pt/en/es), her Instagram and the courses link. `<FounderSpotlight locale="pt" />`.
+  Media live in each site's `public/` (`/images/mariangela.png`, `/equipe/vivas/mariangela.mp4|.webp`).
+  Her bio lives HERE (source of truth); `[[rta:…]]`/`[[ttcab:…]]` link each method's site;
+  pass `site="rta"|"ttcab"` so a site does not link to itself. `founderBio(locale)` = plain text.
+- **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`.
 - **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,

package/components/FounderSpotlight.tsx

@@ -0,0 +1,142 @@
+import type { ReactNode } from "react";
+import { ProfileSpotlight } from "./ProfileSpotlight";
+import { IconGraduationCap, IconInstagram } from "./icons";
+
+/**
+ * The founder of the family: Mariangela Pinheiro de Lima, who created the RTA
+ * Method and TTCAB. One block, one text, for every site of the family (ttcab,
+ * metodorta, creeta…), so she reads the same everywhere. The text is the one
+ * validated on the ttcab site (06/11/2026), in pt, en and es. THIS FILE IS THE
+ * SOURCE OF TRUTH of her bio: change it here, publish, bump the sites.
+ * In the bio, [[rta:…]] and [[ttcab:…]] become links to each method's site
+ * (the site you are on is not linked to itself: see `site`).
+ *
+ * Media stay in each site's `public/` (the package ships no binaries); copy them
+ * from the ttcab site, or pass your own paths:
+ *   /images/mariangela.png               still portrait (4:5)
+ *   /equipe/vivas/mariangela.mp4 + .webp living portrait (plays on hover)
+ */
+export const FOUNDER = {
+  name: "Mariangela Pinheiro de Lima",
+  registration: "CREFITO-10/2894-F",
+  instagram: "https://www.instagram.com/mariangela.rta/",
+  courses: "https://metodorta.com.br/cursos-e-eventos/",
+  /** Sites of each method, linked from the bio ([[rta:…]] / [[ttcab:…]] in the text). */
+  sites: { rta: "https://metodorta.com.br/", ttcab: "https://torcicoloseassimetrias.com.br/" },
+  pt: {
+    eyebrow: "Idealizadora",
+    role: "Criadora do método Reequilíbrio Toracoabdominal e fundadora da Escola Brasileira de RTA e Biomecânica Respiratória",
+    roleShort: "Criadora do Método RTA e do TTCAB",
+    bio: "Mariangela tem mais de 40 anos de carreira na Fisioterapia, com experiências marcantes na área pediátrica e respiratória. Iniciou como professora na PUCPR e atuou por sete anos nos hospitais Pequeno Príncipe e César Pernetta, em Curitiba. Especializou-se no Método Bobath, com influência de Oacy Veronesi e Sherry Arndt. Seu interesse em Fisioterapia Respiratória a levou a criar o [[rta:Método Reequilíbrio Toracoabdominal (RTA)]], difundido há mais de três décadas por todo o Brasil. Também idealizou o [[ttcab:TTCAB]], a formação para o tratamento do torcicolo congênito e de outras assimetrias no bebê.",
+    instagram: "Instagram da Mariangela",
+    courses: "Cursos no site do Método RTA",
+    newTab: "(abre em nova aba)",
+  },
+  en: {
+    eyebrow: "Founder",
+    role: "Creator of the Reequilíbrio Toracoabdominal method and founder of the Escola Brasileira de RTA e Biomecânica Respiratória",
+    roleShort: "Creator of the RTA Method and of TTCAB",
+    bio: "Mariangela has a career of more than 40 years in Physiotherapy, with remarkable experience in paediatrics and respiratory care. She began as a lecturer at PUCPR and worked for seven years at the Pequeno Príncipe and César Pernetta hospitals in Curitiba. She specialised in the Bobath Concept, influenced by Oacy Veronesi and Sherry Arndt. Her interest in Respiratory Physiotherapy led her to create the [[rta:Thoracoabdominal Rebalancing Method (RTA)]], taught across Brazil for more than three decades. She also created [[ttcab:TTCAB]], the training in the treatment of congenital torticollis and other asymmetries in babies.",
+    instagram: "Mariangela's Instagram",
+    courses: "Courses on the Método RTA website",
+    newTab: "(opens in a new tab)",
+  },
+  es: {
+    eyebrow: "Idealizadora",
+    role: "Creadora del método Reequilíbrio Toracoabdominal y fundadora de la Escola Brasileira de RTA e Biomecânica Respiratória",
+    roleShort: "Creadora del Método RTA y del TTCAB",
+    bio: "Mariangela tiene más de 40 años de carrera en la Fisioterapia, con experiencias destacadas en el área pediátrica y respiratoria. Comenzó como profesora en la PUCPR y trabajó durante siete años en los hospitales Pequeno Príncipe y César Pernetta, en Curitiba. Se especializó en el Método Bobath, con influencia de Oacy Veronesi y Sherry Arndt. Su interés por la Fisioterapia Respiratoria la llevó a crear el [[rta:Método Reequilibrio Toracoabdominal (RTA)]], difundido desde hace más de tres décadas en todo Brasil. También ideó el [[ttcab:TTCAB]], la formación para el tratamiento de la tortícolis congénita y otras asimetrías en el bebé.",
+    instagram: "Instagram de Mariangela",
+    courses: "Cursos en el sitio del Método RTA",
+    newTab: "(se abre en una pestaña nueva)",
+  },
+} as const;
+
+export type FounderLocale = "pt" | "en" | "es";
+
+type Props = {
+  locale?: FounderLocale;
+  /** The site showing the block: its own method is not linked to itself. */
+  site?: "rta" | "ttcab";
+  /** Where "courses" points (default: the Método RTA courses page). */
+  coursesHref?: string;
+  /** Media paths in the site's public/ (defaults above). */
+  photo?: string;
+  living?: { src: string; poster: string } | false;
+  /** Your own image element (e.g. next/image) in place of the photo. */
+  media?: ReactNode;
+  /** Links or buttons at the foot, after the text. */
+  actions?: ReactNode;
+  variant?: "plain" | "card";
+  headingLevel?: "h2" | "h3";
+  id?: string;
+  className?: string;
+};
+
+/**
+ * Founder spotlight: `ProfileSpotlight` (card, living portrait on hover) filled
+ * with the founder's validated text, her Instagram and the courses link. Sites
+ * only drop it in: `<FounderSpotlight locale="pt" />`.
+ */
+/** Bio as plain text (JSON-LD, llms.txt, meta): the markers removed. */
+export function founderBio(locale: FounderLocale = "pt"): string {
+  return FOUNDER[locale].bio.replace(/\[\[(?:rta|ttcab):([^\]]+)\]\]/g, "$1");
+}
+
+/** Bio with the method names as links (same tab: these are family sites). */
+function BioLinks({ text, site }: { text: string; site?: "rta" | "ttcab" }) {
+  const parts = text.split(/(\[\[(?:rta|ttcab):[^\]]+\]\])/g);
+  return (
+    <>
+      {parts.map((p, i) => {
+        const m = p.match(/^\[\[(rta|ttcab):([^\]]+)\]\]$/);
+        if (!m) return p;
+        const key = m[1] as "rta" | "ttcab";
+        if (key === site) return m[2];
+        return (
+          <a key={i} href={FOUNDER.sites[key]} className="font-semibold text-ink underline decoration-1 underline-offset-4 hover:decoration-2">
+            {m[2]}
+          </a>
+        );
+      })}
+    </>
+  );
+}
+
+export function FounderSpotlight({
+  locale = "pt",
+  site,
+  coursesHref = FOUNDER.courses,
+  photo = "/images/mariangela.png",
+  living = { src: "/equipe/vivas/mariangela.mp4", poster: "/equipe/vivas/mariangela.webp" },
+  media,
+  actions,
+  variant = "card",
+  headingLevel = "h2",
+  id,
+  className,
+}: Props) {
+  const t = FOUNDER[locale];
+  return (
+    <ProfileSpotlight
+      variant={variant}
+      headingLevel={headingLevel}
+      id={id}
+      className={className}
+      eyebrow={t.eyebrow}
+      name={FOUNDER.name}
+      role={t.role}
+      registration={FOUNDER.registration}
+      bio={<p><BioLinks text={t.bio} site={site} /></p>}
+      photo={{ src: photo, alt: FOUNDER.name }}
+      living={living || undefined}
+      media={media}
+      actions={actions}
+      social={[
+        { label: t.instagram, href: FOUNDER.instagram, Icon: IconInstagram },
+        { label: t.courses, href: coursesHref, Icon: IconGraduationCap },
+      ]}
+      newTabLabel={t.newTab}
+    />
+  );
+}

package/components/TestimonialsSection.tsx

@@ -0,0 +1,60 @@
+import type { ComponentProps } from "react";
+import { SectionHeading } from "./Heading";
+import { TestimonialCard } from "./TestimonialCard";
+
+/**
+ * Testimonials block of the family (0.6.10, 06/11/2026): the ttcab section made
+ * the standard. Heading "Depoimentos / Histórias de sucesso", cards in two
+ * masonry columns (short and long quotes have different heights), the video
+ * testimonial first, every card a pull quote that opens the whole testimonial in
+ * the side panel. Sites pass only the testimonials; the copy and the settings
+ * are the ones validated on ttcab. Put it inside your section's Container.
+ */
+const COPY = {
+  pt: { eyebrow: "Depoimentos", title: "Histórias de sucesso", panel: "Depoimento", readMore: "Ler depoimento completo", watchFull: "Assistir ao depoimento", close: "Fechar", newTab: " (abre em nova aba)", and: " e " },
+  en: { eyebrow: "Testimonials", title: "Success stories", panel: "Testimonial", readMore: "Read the full testimonial", watchFull: "Watch the testimonial", close: "Close", newTab: " (opens in a new tab)", and: " and " },
+  es: { eyebrow: "Testimonios", title: "Historias de éxito", panel: "Testimonio", readMore: "Leer el testimonio completo", watchFull: "Ver el testimonio", close: "Cerrar", newTab: " (se abre en una pestaña nueva)", and: " y " },
+} as const;
+
+type CardProps = ComponentProps<typeof TestimonialCard>;
+
+/** One testimonial: what the card needs (the settings come from the block). */
+export type Testimonial = Pick<CardProps, "quote" | "excerpt" | "excerptMarks" | "author" | "authorPhoto" | "authors" | "role" | "video" | "photo"> & { id: string | number };
+
+type Props = {
+  items: Testimonial[];
+  locale?: "pt" | "en" | "es";
+  /** Override the heading only when the client asks; the default is the standard. */
+  eyebrow?: string;
+  title?: string;
+  /** Override labels (e.g. close from the site's own dictionary). */
+  labels?: CardProps["labels"];
+  /** id for the heading (aria-labelledby of the section). */
+  headingId?: string;
+};
+
+export function TestimonialsSection({ items, locale = "pt", eyebrow, title, labels, headingId }: Props) {
+  const c = COPY[locale];
+  // o vídeo primeiro (como no ttcab); o resto na ordem recebida
+  const sorted = [...items].sort((a, b) => Number(Boolean(b.video)) - Number(Boolean(a.video)));
+  return (
+    <>
+      <SectionHeading id={headingId} eyebrow={eyebrow ?? c.eyebrow} title={title ?? c.title} />
+      <ul className="mt-10 list-none gap-4 p-0 md:columns-2">
+        {sorted.map(({ id, ...item }) => (
+          <TestimonialCard
+            key={id}
+            as="li"
+            className="mb-4 break-inside-avoid"
+            {...item}
+            joiners={{ sep: ", ", last: c.and }}
+            mediaPlacement="panel"
+            clampLines={5}
+            panel={{ eyebrow: c.panel }}
+            labels={{ watch: "{description}", readMore: c.readMore, watchFull: c.watchFull, close: c.close, newTab: c.newTab, ...labels }}
+          />
+        ))}
+      </ul>
+    </>
+  );
+}

package/package.json

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