@breathe-ds/ui 0.1.1 → 0.3.0

package/components/Footer.tsx

@@ -1,115 +1,207 @@
-import type { ReactNode } from "react";
+import type { ComponentType, ElementType, ReactNode } from "react";
+import { LanguageSwitcher, type Language } from "./LanguageSwitcher";
+import { List } from "./List";
 
-export type FooterColumn = { title: ReactNode; items: ReactNode[] };
+/** lucide-style icon component (the footer sets the size). */
+type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
+
+export type FooterLink = { href: string; label: ReactNode };
+export type FooterContact = { href: string; label: ReactNode; Icon: IconType; external?: boolean };
+export type FooterLanguage = Language;
+
+type Labels = {
+  /** aria-label of the pages nav */
+  pagesNav: string;
+  /** aria-label of the contacts list */
+  contacts: string;
+  /** aria-label of the languages nav */
+  languages: string;
+  /** sr-only after an external link */
+  newTab: string;
+};
+const EN: Labels = { pagesNav: "Footer pages", contacts: "Contacts", languages: "Language", newTab: "(opens in a new tab)" };
 
 type Props = {
-  /** Marca (passe o seu <img>/logo). */
+  /** Signed brand: the Lockup (horizontal + tagline) or the site's own svg. */
   logo: ReactNode;
-  /** Frase/assinatura sob a marca. */
-  tagline?: ReactNode;
-  /** Colunas de navegação (o consumidor passa seus próprios <Link>). */
-  columns: FooterColumn[];
-  /** Bloco de contato/endereço (título + linhas + ações como "Ver no mapa"). */
-  contact: { title?: ReactNode; lines: ReactNode[]; actions?: ReactNode };
-  /** Bloco opcional em destaque (ex.: "Plano de saúde: atendemos por reembolso"). */
-  notice?: ReactNode;
-  /** Linha legal (CNPJ, copyright…). */
-  legal?: ReactNode;
-  /** Chips de contato (telefone/WhatsApp/e-mail/Instagram) — o consumidor passa os links. */
-  chips?: ReactNode[];
-  /** Seletor de idioma (slot). */
-  localeSwitcher?: ReactNode;
+  /** Full institutional name for screen readers (the logo is an image). */
+  brandName?: string;
+  /** The brand sentence, shown in quotes under the logo. */
+  quote?: ReactNode;
+  /** "Pages": title on the first line, links in two columns below. Optional:
+   *  a footer with no internal links drops the column (two-column grid). */
+  pages?: { title: ReactNode; links: FooterLink[] };
+  /** "Where we are": address lines, opening hours, and the directions links
+   *  ("Directions ↗ · Waze ↗", external). */
+  where: { title: ReactNode; address: ReactNode[]; hours?: ReactNode; directions?: FooterLink[] };
+  /** Optional notice band (e.g. "Health insurance: we work by reimbursement"):
+   *  title, one sentence per item (corner arrow), a CTA and a footnote. */
+  notice?: { title: ReactNode; items: ReactNode[]; action?: ReactNode; footnote?: ReactNode; id?: string };
+  /** Legal line. REQUIRED in the family: institutional name · CNPJ (company registration). */
+  legal: ReactNode;
+  /** Contact chips: phone, WhatsApp, e-mail, Instagram… only the real ones. */
+  contacts?: FooterContact[];
+  /** Language links, side by side, no JavaScript. The current one gets a ✓ and aria-current. */
+  languages?: FooterLanguage[];
+  /** Small credits line at the very end (photo authors…). */
+  credits?: ReactNode;
+  /** Link component of the app (e.g. next-intl Link). Default: <a>. */
+  linkComponent?: ElementType;
+  /** Breakpoint from which the BottomNav is gone (md on creeta, lg on ttcab):
+   *  below it the card keeps room at the bottom for the floating bar. */
+  navHiddenFrom?: "md" | "lg";
+  labels?: Partial<Labels>;
+  className?: string;
 };
 
+const ArrowUpRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={18} height={18} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+);
+
+const title = "font-heading text-lg font-medium text-ink";
+const link =
+  "flex min-h-11 items-center text-ink/80 underline decoration-transparent underline-offset-4 transition-[color,text-decoration-color] duration-150 hover:text-ink hover:decoration-ink motion-reduce:transition-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";
+const strongLink =
+  "inline-flex min-h-11 items-center gap-1.5 font-semibold text-ink underline underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";
+const chip =
+  "inline-flex min-h-11 items-center gap-2 rounded-full bg-ink/[0.08] px-4 text-sm font-medium text-ink transition-colors duration-200 hover:bg-ink hover:text-surface motion-reduce:transition-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";
+
 /**
- * Footer da família Cuidado Global. Cartão grande arredondado em `surface`,
- * com marca + navegação + contato, um bloco opcional em destaque, e a barra
- * inferior com legal, chips de contato e idiomas. 100% data-driven e sem
- * dependência de app (Link/ícones/logo vêm por props). Tokens: ink/ink-soft
- * sobre surface, hairlines `line`.
+ * Footer of the Cuidado Global family — the site-footer of novo.creeta, by
+ * tokens, edge to edge like the Header (the card version was dropped on 2026-10-29):
+ * signed logo + the brand sentence, "Pages" (title on the first line, links in
+ * two columns), "Where we are" (address, hours, "Directions ↗ · Waze ↗" — the
+ * map only loads on tap, elsewhere), an optional notice band on `surface`
+ * (page color), then the legal line with the CNPJ (always) and the contact
+ * chips, and the languages as plain links (work without JavaScript).
+ * Below the BottomNav breakpoint the card leaves room at the bottom for the bar.
  */
 export function Footer({
   logo,
-  tagline,
-  columns,
-  contact,
+  brandName,
+  quote,
+  pages,
+  where,
   notice,
   legal,
-  chips,
-  localeSwitcher,
+  contacts = [],
+  languages,
+  credits,
+  linkComponent,
+  navHiddenFrom = "lg",
+  labels,
+  className = "",
 }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  const t = { ...EN, ...labels };
+  // whole class names: Tailwind only generates what it finds written in the code
+  // Edge to edge like the Header (family decision 2026-10-29), same inner width
+  // and side padding (px-4 md:px-6). Below the BottomNav breakpoint the bottom
+  // padding leaves room for the floating bar.
+  const outer = navHiddenFrom === "md" ? "mt-16 pb-28 md:mt-24 md:pb-14" : "mt-16 pb-28 lg:mt-24 lg:pb-14";
+  const noticeId = notice?.id ?? "footer-notice";
+
   return (
-    <footer className="px-3 pb-3 md:px-4 md:pb-4">
-      <div className="mx-auto overflow-hidden rounded-[clamp(24px,3vw,36px)] bg-surface px-[clamp(24px,5vw,72px)] py-[clamp(40px,5vw,64px)] text-ink">
-        {/* Topo: marca · colunas · contato */}
-        <div className="grid gap-[clamp(32px,5vw,64px)] lg:grid-cols-[1.2fr_1.4fr_1fr]">
+    <footer className={`${outer} bg-card py-10 text-ink md:py-14 ${className}`}>
+      <div className="mx-auto max-w-[1600px] px-4 md:px-6">
+        {/* without the pages column, "where" keeps to the right edge (auto width) */}
+        <div className={`grid gap-x-10 gap-y-10 ${pages ? "md:grid-cols-[minmax(0,4fr)_minmax(0,5fr)_minmax(0,3fr)]" : "md:grid-cols-[minmax(0,1fr)_auto]"}`}>
           <div>
-            <div className="mb-5">{logo}</div>
-            {tagline && (
-              <p className="max-w-[28ch] text-[1.02rem] leading-[1.5] text-ink-soft">
-                {tagline}
-              </p>
+            {logo}
+            {brandName && <p className="sr-only">{brandName}</p>}
+            {quote && (
+              <p className="mt-6 max-w-[18rem] font-heading text-xl leading-snug text-ink-body">“{quote}”</p>
             )}
           </div>
 
-          <div className="grid grid-cols-2 gap-x-6 gap-y-3">
-            {columns.map((col, i) => (
-              <div key={i} className={columns.length === 1 ? "col-span-2" : ""}>
-                <p className="mb-4 font-body text-[0.78rem] font-semibold tracking-[0.18em] text-ink-soft uppercase">
-                  {col.title}
-                </p>
-                {/* links herdam hover-underline: sublinhado some→aparece suave,
-                    agnóstico ao que o site passa (<a> ou <Link>) */}
-                <ul className="flex flex-col gap-3 [&_a]:underline [&_a]:decoration-transparent [&_a]:underline-offset-[5px] [&_a]:transition-[text-decoration-color] [&_a]:duration-200 [&_a:hover]:decoration-current">
-                  {col.items.map((item, j) => (
-                    <li key={j} className="text-[1.02rem] leading-snug text-ink">
-                      {item}
-                    </li>
-                  ))}
-                </ul>
+          {pages && (
+            <nav aria-label={t.pagesNav}>
+              <h2 className={title}>{pages.title}</h2>
+              <div className="mt-3 grid gap-x-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2">
+                {pages.links.map((p, i) => (
+                  <L key={`${i}-${p.href}`} href={p.href} className={link}>
+                    {p.label}
+                  </L>
+                ))}
               </div>
-            ))}
-          </div>
+            </nav>
+          )}
 
           <div>
-            {contact.title && (
-              <p className="mb-4 font-body text-[0.78rem] font-semibold tracking-[0.18em] text-ink-soft uppercase">
-                {contact.title}
+            <h2 className={title}>{where.title}</h2>
+            <address className="mt-3 not-italic leading-relaxed text-ink/80">
+              {where.address.map((line, i) => (
+                <span key={i}>
+                  {i > 0 && <br />}
+                  {line}
+                </span>
+              ))}
+            </address>
+            {where.hours && <p className="mt-2 leading-relaxed text-ink/80">{where.hours}</p>}
+            {where.directions && where.directions.length > 0 && (
+              <p className="mt-2">
+                {where.directions.map((d, i) => (
+                  <span key={`${i}-${d.href}`}>
+                    {i > 0 && <span aria-hidden="true" className="mx-2 text-ink/80">·</span>}
+                    <a href={d.href} target="_blank" rel="noopener noreferrer" className={strongLink}>
+                      {d.label}
+                      <ArrowUpRight />
+                      <span className="sr-only"> {t.newTab}</span>
+                    </a>
+                  </span>
+                ))}
               </p>
             )}
-            <div className="space-y-2 text-[1.02rem] leading-[1.5] text-ink-soft">
-              {contact.lines.map((line, i) => (
-                <p key={i}>{line}</p>
-              ))}
-            </div>
-            {contact.actions && <div className="mt-4">{contact.actions}</div>}
           </div>
         </div>
 
-        {/* Bloco opcional em destaque */}
+        {/* Notice band: `surface` (the page color) over the white card. One
+            sentence per item, with the corner arrow; the arrow is decoration,
+            the <ul> is what says "list". Always at reading width (max-w-6xl),
+            narrower than the full-width columns. */}
         {notice && (
-          <div className="mt-[clamp(32px,4vw,48px)] rounded-2xl bg-ink/[0.04] p-[clamp(24px,3.5vw,44px)]">
-            {notice}
-          </div>
+          <section aria-labelledby={noticeId} className="mx-auto mt-10 max-w-6xl rounded-[24px] bg-surface px-6 py-8 text-ink md:mt-12 md:px-10 md:py-10">
+            <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between lg:gap-10">
+              <div>
+                <h2 id={noticeId} className="font-heading text-2xl font-medium leading-snug md:text-[1.75rem]">
+                  {notice.title}
+                </h2>
+                <List marker="arrow" className="mt-4" items={notice.items.map((label) => ({ label }))} />
+              </div>
+              {notice.action && <div className="w-full shrink-0 sm:w-auto sm:self-start lg:self-center [&>*]:w-full [&>*]:justify-center sm:[&>*]:w-auto">{notice.action}</div>}
+            </div>
+            {notice.footnote && <p className="mt-6 border-t border-ink/10 pt-4 text-xs text-ink/80">{notice.footnote}</p>}
+          </section>
         )}
 
-        {/* Barra inferior: legal + chips */}
-        <div className="mt-[clamp(32px,4vw,48px)] flex flex-col gap-5 border-t border-line pt-[clamp(20px,2.5vw,28px)] md:flex-row md:items-center md:justify-between">
-          {legal && <p className="text-sm text-ink-soft">{legal}</p>}
-          {chips && chips.length > 0 && (
-            <div className="flex flex-wrap items-center gap-2.5">
-              {chips.map((chip, i) => (
-                <span key={i}>{chip}</span>
+        {/* Legal line (institutional name · CNPJ) + contact chips */}
+        <div className="mt-10 flex flex-col gap-5 border-t border-ink/10 pt-6 md:mt-12 md:flex-row md:items-center md:justify-between">
+          <p className="text-sm text-ink/80">{legal}</p>
+          {contacts.length > 0 && (
+            <ul aria-label={t.contacts} className="flex list-none flex-wrap gap-2">
+              {contacts.map(({ href, label, Icon, external }, i) => (
+                <li key={`${i}-${href}`}>
+                  <a className={chip} href={href} {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}>
+                    <Icon aria-hidden="true" size={17} strokeWidth={2} />
+                    {label}
+                    {external && <span className="sr-only"> {t.newTab}</span>}
+                  </a>
+                </li>
               ))}
-            </div>
+            </ul>
           )}
         </div>
 
-        {/* Idiomas */}
-        {localeSwitcher && (
-          <div className="mt-[clamp(20px,2.5vw,28px)]">{localeSwitcher}</div>
+        {/* Languages as plain links: they work without JavaScript */}
+        {languages && languages.length > 0 && (
+          <div className="mt-4 border-t border-ink/10 pt-2">
+            <LanguageSwitcher mode="list" languages={languages} labels={{ nav: t.languages }} />
+          </div>
         )}
+
+        {credits && <p className="mt-4 text-xs text-ink/80">{credits}</p>}
       </div>
     </footer>
   );
 }
+

package/components/Header.tsx

@@ -12,26 +12,40 @@ export type NavItem = {
   label: ReactNode;
   href?: string;
   active?: boolean;
-  /** Ícone antes do rótulo (ex.: casa no "Início"). */
+  /** Icon before the label (e.g. a house on "Home"). */
   icon?: ReactNode;
-  /** Só o ícone aparece; o rótulo fica para leitor de tela (padrão dos sites: "Início" é a casa). */
+  /** Only the icon shows; the label is left for screen readers (site convention: "Home" is the house). */
   iconOnly?: boolean;
   children?: NavChild[];
-  /** Link final do dropdown. Seta → (vai para outra página do site); com
-   *  `external` vira ↗ (sai para outro site), como nos demais componentes. */
+  /** Final link of the dropdown. Arrow → (goes to another page of the site); with
+   *  `external` it becomes ↗ (leaves to another site), as in the other components. */
   seeAll?: { label: ReactNode; href: string; external?: boolean };
 };
 
+type Labels = {
+  /** aria-label of the desktop nav */
+  nav: string;
+  /** aria-label of the chevron button that toggles a dropdown */
+  openSubmenu: string;
+};
+
+const EN: Labels = {
+  nav: "Main",
+  openSubmenu: "Open submenu",
+};
+
 type Props = {
-  /** Marca (passe o seu logo, já com link para a home se quiser). */
+  /** Brand (pass your own logo, already linked to the home page if you want). */
   logo: ReactNode;
   items: NavItem[];
-  /** Componente de link do app (ex.: next-intl Link). Default: <a>. */
+  /** The app's link component (e.g. next-intl Link). Default: <a>. */
   linkComponent?: ElementType;
-  /** CTA à direita (ex.: Agendar/WhatsApp). */
+  /** CTA on the right (e.g. Book/WhatsApp). */
   cta?: ReactNode;
-  /** Seletor de idioma (slot). */
+  /** Locale switcher (slot). */
   localeSwitcher?: ReactNode;
+  /** Strings (English defaults); the app passes the ones for its locale. */
+  labels?: Partial<Labels>;
 };
 
 function Chevron({ open }: { open: boolean }) {
@@ -56,7 +70,7 @@ const linkCls = (active?: boolean) =>
     active ? "decoration-ink" : "decoration-transparent hover:decoration-ink/40"
   } transition-[text-decoration-color] duration-150 motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ink`;
 
-function Dropdown({ item, L }: { item: NavItem; L: ElementType }) {
+function Dropdown({ item, L, t }: { item: NavItem; L: ElementType; t: Labels }) {
   const [open, setOpen] = useState(false);
   return (
     <div
@@ -79,7 +93,7 @@ function Dropdown({ item, L }: { item: NavItem; L: ElementType }) {
         <button
           type="button"
           aria-expanded={open}
-          aria-label="Abrir submenu"
+          aria-label={t.openSubmenu}
           onClick={() => setOpen((o) => !o)}
           className="flex min-h-11 items-center rounded-md px-0.5 text-ink/70 transition-colors hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
         >
@@ -137,22 +151,23 @@ function Dropdown({ item, L }: { item: NavItem; L: ElementType }) {
 }
 
 /**
- * Header da família Cuidado Global. No desktop (lg+): marca + nav com dropdowns
- * (hover/teclado, ícones nos subitens) + idioma + CTA. No mobile: marca +
- * idioma + CTA (a navegação vai para o BottomNav). Deps injetáveis: `logo`,
- * `cta`, `localeSwitcher` por slot; o `Link` do app por `linkComponent`.
+ * Header of the Cuidado Global family. On desktop (lg+): brand + nav with
+ * dropdowns (hover/keyboard, icons on sub-items) + locale + CTA. On mobile:
+ * brand + locale + CTA (navigation moves to the BottomNav). Injectable deps:
+ * `logo`, `cta`, `localeSwitcher` as slots; the app's `Link` via `linkComponent`.
  */
-export function Header({ logo, items, linkComponent, cta, localeSwitcher }: Props) {
+export function Header({ logo, items, linkComponent, cta, localeSwitcher, labels }: Props) {
   const L: ElementType = linkComponent ?? "a";
+  const t = { ...EN, ...labels };
   return (
     <header className="sticky top-0 z-50 bg-surface/90 backdrop-blur">
       <div className="mx-auto flex h-20 w-full max-w-[1600px] items-center justify-between gap-3 px-4 md:px-6">
         <div className="shrink-0">{logo}</div>
 
-        <nav aria-label="Principal" className="hidden items-center gap-6 lg:flex xl:gap-7">
+        <nav aria-label={t.nav} className="hidden items-center gap-6 lg:flex xl:gap-7">
           {items.map((item, i) =>
             item.children?.length ? (
-              <Dropdown key={i} item={item} L={L} />
+              <Dropdown key={i} item={item} L={L} t={t} />
             ) : (
               <L key={i} href={item.href} aria-current={item.active ? "page" : undefined} className={linkCls(item.active)}>
                 {item.icon && <span aria-hidden="true" className="flex">{item.icon}</span>}

package/components/Heading.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from "react";
+
+type Level = "h1" | "h2" | "h3" | "h4";
+/** The family's heading scale (novo.creeta):
+ *  display — page title (SectionHeading as h1) · hero — title over a full-bleed photo/video
+ *  section — section title (h2) · card — title inside a card · small — h3 */
+export type HeadingSize = "display" | "hero" | "section" | "card" | "small";
+
+export const HEADING_SIZE: Record<HeadingSize, string> = {
+  display: "text-[2.5rem] leading-[1.04] tracking-[-0.02em] md:text-6xl",
+  hero: "text-[2rem] leading-[1.06] tracking-[-0.02em] md:text-5xl xl:text-6xl xl:leading-[1.04]",
+  section: "text-[1.75rem] leading-[1.12] tracking-[-0.01em] md:text-4xl",
+  card: "text-[1.375rem] leading-snug md:text-2xl",
+  small: "text-xl leading-snug",
+};
+const DEFAULT_SIZE: Record<Level, HeadingSize> = { h1: "display", h2: "section", h3: "small", h4: "small" };
+
+type HeadingProps = {
+  as?: Level;
+  size?: HeadingSize;
+  children: ReactNode;
+  /** Second sentence of the same heading, on its own line, one tone below
+   *  (`ink-soft`): "Aprenda com quem atende. / Quem criou o método explica." */
+  accent?: ReactNode;
+  id?: string;
+  className?: string;
+};
+
+/**
+ * Heading — Quicksand medium in `ink`; the optional `accent` sentence sits on
+ * the next line in `ink-soft`. Two tones, same heading: the hierarchy comes
+ * from color, not from a second element.
+ */
+export function Heading({ as: Tag = "h2", size, children, accent, id, className = "" }: HeadingProps) {
+  const s = size ?? DEFAULT_SIZE[Tag];
+  return (
+    <Tag id={id} className={`m-0 font-heading font-medium text-ink ${HEADING_SIZE[s]} ${className}`}>
+      {children}
+      {accent && (
+        <>
+          {" "}
+          <span className="block text-ink-soft">{accent}</span>
+        </>
+      )}
+    </Tag>
+  );
+}
+
+type SectionHeadingProps = {
+  /** `h1` on an inner page (its main title), `h2` for a home section. */
+  as?: "h1" | "h2";
+  /** Only when the content really is a sequence ("01"). */
+  number?: string;
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  /** Second sentence, one tone below. */
+  accent?: ReactNode;
+  /** Supporting paragraph right under the title. */
+  lead?: ReactNode;
+  id?: string;
+  className?: string;
+};
+
+/**
+ * SectionHeading — the SectionHeading of novo.creeta: eyebrow/number line in
+ * `ink-soft` semibold, the title (display as h1, section as h2) with its
+ * accent sentence, and the lead (text-lg, reading width). Carries the bottom
+ * margin of a section opening.
+ */
+export function SectionHeading({ as: Tag = "h2", number, eyebrow, title, accent, lead, id, className = "" }: SectionHeadingProps) {
+  const main = Tag === "h1";
+  return (
+    <div className={`${main ? "mb-8 md:mb-12" : "mb-6 md:mb-9"} ${className}`}>
+      {(number || eyebrow) && (
+        <p className="m-0 mb-3 flex items-center gap-2 text-sm font-semibold text-ink-soft">
+          {number && <span>{number}</span>}
+          {eyebrow && <span>{eyebrow}</span>}
+        </p>
+      )}
+      <Heading as={Tag} size={main ? "display" : "section"} accent={accent} id={id}>
+        {title}
+      </Heading>
+      {lead && <p className="m-0 mt-4 max-w-xl text-lg leading-relaxed text-ink-body">{lead}</p>}
+    </div>
+  );
+}

package/components/InfoCard.tsx

@@ -0,0 +1,116 @@
+import type { ComponentType, ElementType, ReactNode } from "react";
+
+/** lucide-style icon component (the card sets the size). */
+type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
+
+export type InfoCardLink = {
+  href: string;
+  label: ReactNode;
+  /** Opens in a new tab (always a plain <a>) with an sr-only note after the label. */
+  external?: boolean;
+};
+
+type Props = {
+  /** Icon in the tinted bubble above the title (lucide, 20px, stroke 1.75). */
+  Icon: IconType;
+  title: ReactNode;
+  /** h2 on a page section (default), h3 inside a section that already has an h2. */
+  headingLevel?: "h2" | "h3";
+  /** Address lines: one <address> block, lines separated by <br>. */
+  address?: ReactNode[];
+  /** Body: one paragraph per item. */
+  lines?: ReactNode[];
+  /** Smaller closing line (e.g. "Outside these hours, by appointment"). */
+  note?: ReactNode;
+  /** Custom body, rendered after `address`/`lines`/`note`. */
+  children?: ReactNode;
+  /** Action links at the bottom ("Directions ↗ · Waze ↗"): underlined semibold,
+   *  outbound arrow, separated by a middle dot. */
+  links?: InfoCardLink[];
+  /** Wrapper element. `section` by default; `li` inside a list of cards. */
+  as?: "section" | "div" | "li" | "article";
+  /** Link component of the app for page links (external links always use <a>). */
+  linkComponent?: ElementType;
+  /** sr-only after an external link. */
+  newTabLabel?: string;
+  className?: string;
+};
+
+const ArrowUpRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={18} height={18} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+);
+
+const body = "mt-2 leading-relaxed text-ink/80";
+const link =
+  "mt-4 inline-flex min-h-11 items-center gap-1.5 font-semibold text-ink underline underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";
+
+/**
+ * Info card of the Cuidado Global family — the three white cards of the
+ * novo.creeta clinic page ("Address", "Opening hours", "Where we see
+ * patients") and the contact page: a 44px tinted bubble with the icon, the
+ * title, the body (address lines, paragraphs, a smaller note) and, at the
+ * bottom, the action links with the outbound arrow, separated by a middle
+ * dot ("Directions ↗ · Waze ↗"). White on the page color (`surface`), 28px
+ * radius, 24px padding (32px from md).
+ */
+export function InfoCard({
+  Icon,
+  title,
+  headingLevel: Heading = "h2",
+  address,
+  lines,
+  note,
+  children,
+  links,
+  as: Tag = "section",
+  linkComponent,
+  newTabLabel = "(opens in a new tab)",
+  className = "",
+}: Props) {
+  const L: ElementType = linkComponent ?? "a";
+
+  return (
+    <Tag className={`rounded-2xl bg-card p-6 md:p-8 ${className}`}>
+      <span aria-hidden="true" className="flex h-11 w-11 items-center justify-center rounded-full bg-ink/[0.12] text-ink">
+        <Icon size={20} strokeWidth={1.75} />
+      </span>
+      <Heading className="mt-4 font-heading text-xl font-medium text-ink">{title}</Heading>
+
+      {address && address.length > 0 && (
+        <address className={`${body} not-italic`}>
+          {address.map((line, i) => (
+            <span key={i}>
+              {i > 0 && <br />}
+              {line}
+            </span>
+          ))}
+        </address>
+      )}
+      {lines?.map((line, i) => (
+        <p key={i} className={body}>
+          {line}
+        </p>
+      ))}
+      {note && <p className={`${body} text-sm`}>{note}</p>}
+      {children}
+
+      {links?.map((l, i) => (
+        <span key={`${i}-${l.href}`}>
+          {i > 0 && <span aria-hidden="true" className="mx-2 text-ink/80">·</span>}
+          {l.external ? (
+            <a href={l.href} target="_blank" rel="noopener noreferrer" className={link}>
+              {l.label}
+              <ArrowUpRight />
+              <span className="sr-only"> {newTabLabel}</span>
+            </a>
+          ) : (
+            <L href={l.href} className={link}>
+              {l.label}
+              <ArrowUpRight />
+            </L>
+          )}
+        </span>
+      ))}
+    </Tag>
+  );
+}