@breathe-ds/ui 0.1.0 → 0.2.0

package/components/BackgroundVideo.tsx

@@ -3,31 +3,31 @@
 import { useEffect, useRef, useState } from "react";
 
 type Props = {
-  /** Clipe curto, sem som, em repetição (arquivo do próprio site). */
+  /** Short, muted, looping clip (file hosted by the site itself). */
   src: string;
-  /** Versão maior, baixada só em telas largas (a partir de `from`). */
+  /** Larger version, downloaded only on wide screens (from `from` up). */
   srcLarge?: string;
-  /** Largura mínima (px) para a versão maior. 1024 por padrão. */
+  /** Minimum width (px) for the larger version. Defaults to 1024. */
   from?: 768 | 1024;
-  /** Quadro parado: aparece antes de o vídeo carregar, sem JS e com movimento reduzido. */
+  /** Still frame: shown before the video loads, without JS, and with reduced motion. */
   poster: string;
-  /** Quadro parado da versão maior, quando ela é outro vídeo (ex.: vertical no celular, deitado no desktop). */
+  /** Still frame of the larger version, when it is a different video (e.g. vertical on mobile, landscape on desktop). */
   posterLarge?: string;
-  /** Aproxima o vídeo para cortar bordas gravadas no arquivo. */
+  /** Zooms the video in to crop edges baked into the file. */
   trimEdges?: boolean;
-  /** object-position do vídeo (ex.: "center 20%" p/ manter o rosto num clipe vertical). */
+  /** object-position of the video (e.g. "center 20%" to keep the face in a vertical clip). */
   objectPosition?: string;
-  /** Rótulos do botão de pausa (injetáveis p/ i18n). */
+  /** Pause button labels (injectable for i18n). */
   labels?: { pause?: string; play?: string };
   className?: string;
 };
 
 /**
- * Vídeo de fundo da família Cuidado Global — espelha o `VideoFundo` do creeta
- * com os tokens do Breathe (ink/surface). Clipe mudo em repetição, é enfeite:
- * fica fora da leitura de tela (aria-hidden). Não usa o atributo `autoplay`:
- * só começa depois de conferir prefers-reduced-motion e economia de dados
- * (save-data). Tem botão de pausa (WCAG 2.2.2) no canto superior-direito.
+ * Background video of the Cuidado Global family — mirrors creeta's `VideoFundo`
+ * with the Breathe tokens (ink/surface). Muted looping clip, purely decorative:
+ * hidden from screen readers (aria-hidden). Does not use the `autoplay`
+ * attribute: it only starts after checking prefers-reduced-motion and data
+ * saver (save-data). Has a pause button (WCAG 2.2.2) in the top-right corner.
  */
 export function BackgroundVideo({
   src,
@@ -93,7 +93,7 @@ export function BackgroundVideo({
       <button
         type="button"
         onClick={toggle}
-        aria-label={running ? labels?.pause ?? "Pausar vídeo" : labels?.play ?? "Reproduzir vídeo"}
+        aria-label={running ? labels?.pause ?? "Pause video" : labels?.play ?? "Play 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"
       >
         {running ? (

package/components/BottomNav.tsx

@@ -2,75 +2,75 @@
 
 import { useEffect, useId, useRef, useState, type ComponentType, type ElementType, type ReactNode } from "react";
 
-/** Ícone no padrão lucide (o componente, não o nó): a barra decide o tamanho. */
+/** Icon in the lucide pattern (the component, not the node): the bar decides the size. */
 export type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
 
-/** Uma página do site, em ordem de importância. As primeiras ficam na barra;
- *  as que não couberem vão para o "Mais". */
+/** One page of the site, in order of importance. The first ones stay on the bar;
+ *  those that don't fit go into "More". */
 export type BottomPage = {
   href: string;
   label: ReactNode;
   Icon: IconType;
-  /** A página atual é esta? (o app decide: rota/idioma são dele) */
+  /** Is this the current page? (the app decides: route/locale are its own) */
   active?: boolean;
 };
 
-/** Saída extra do painel "Mais" (ex.: cursos em outro site): endereço escrito
- *  embaixo e seta para fora, como no novo.creeta. */
+/** Extra exit in the "More" panel (e.g. courses on another site): address written
+ *  underneath and an outward arrow, as on novo.creeta. */
 export type BottomExtra = {
   href: string;
   label: ReactNode;
   Icon: IconType;
-  /** Linha menor sob o rótulo (ex.: o domínio). Com `external` e sem isto, mostra o domínio do href. */
+  /** Smaller line under the label (e.g. the domain). With `external` and without this, shows the href's domain. */
   description?: ReactNode;
   external?: boolean;
   active?: boolean;
 };
 
 type Labels = {
-  /** aria-label da barra */
+  /** aria-label of the bar */
   nav: string;
-  /** rótulo da aba "Mais" */
+  /** label of the "More" tab */
   more: string;
-  /** aria-label do painel */
+  /** aria-label of the panel */
   morePages: string;
-  /** sr-only depois de "Mais": "mais páginas" */
+  /** sr-only after "More": "more pages" */
   morePagesSr: string;
-  /** sr-only quando a página atual está no "Mais" */
+  /** sr-only when the current page is inside "More" */
   currentHere: string;
-  /** sr-only em link externo */
+  /** sr-only on an external link */
   newTab: string;
 };
 
-const PT: Labels = {
-  nav: "Navegação principal",
-  more: "Mais",
-  morePages: "Mais páginas",
-  morePagesSr: "mais páginas",
-  currentHere: "(a página atual está aqui)",
-  newTab: "(abre em outra aba)",
+const EN: Labels = {
+  nav: "Main navigation",
+  more: "More",
+  morePages: "More pages",
+  morePagesSr: "more pages",
+  currentHere: "(the current page is here)",
+  newTab: "(opens in a new tab)",
 };
 
 type Props = {
   pages: BottomPage[];
   extras?: BottomExtra[];
-  /** 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;
-  /** A partir de que largura o header assume e a barra some. creeta: `md`; ttcab: `lg`. */
+  /** From which width the header takes over and the bar disappears. creeta: `md`; ttcab: `lg`. */
   hideFrom?: "md" | "lg";
-  /** Textos (padrão pt-BR); o app passa os do idioma. */
+  /** Strings (English defaults); the app passes the ones for its locale. */
   labels?: Partial<Labels>;
-  /** Embutida num contêiner `relative` (demo, moldura de celular): barra, véu e
-   *  painel ficam `absolute` dentro dele e aparecem em qualquer largura. */
+  /** Embedded in a `relative` container (demo, phone frame): bar, veil and
+   *  panel are `absolute` inside it and show at any width. */
   embedded?: boolean;
 };
 
-/** Largura mínima de uma aba, em px: abaixo disso o rótulo não cabe. */
+/** Minimum width of a tab, in px: below this the label doesn't fit. */
 export const TAB_MIN_WIDTH = 64;
 
-/** Quantas páginas aparecem direto na barra, para uma largura útil. A última
- *  aba é sempre o "Mais" (é nele que ficam as páginas que não couberam e as
- *  saídas extras), então cabe uma página a menos que o número de abas. */
+/** How many pages show directly on the bar, for a given usable width. The last
+ *  tab is always "More" (that's where the pages that didn't fit and the extra
+ *  exits live), so one page fewer than the number of tabs fits. */
 export function howManyFit(width: number, total: number): number {
   const tabs = Math.floor(width / TAB_MIN_WIDTH);
   return Math.max(2, Math.min(total, tabs - 1));
@@ -83,9 +83,9 @@ const ArrowUpRight = () => (
   <svg aria-hidden="true" viewBox="0 0 24 24" className="h-[18px] w-[18px] shrink-0" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
 );
 
-// Aba: coluna ícone+rótulo. Ativa ganha FORMA (pílula clara), não só cor —
-// legível pra quem não distingue cor. Encolhe no toque, como botão de app.
-// O nome de transição faz o destaque deslizar entre as abas na troca de página.
+// Tab: icon+label column. The active one gets a SHAPE (light pill), not just color —
+// readable for people who can't tell colors apart. Shrinks on touch, like an app button.
+// The view-transition name makes the highlight slide between tabs on page change.
 const tab = (active: boolean) =>
   [
     "flex h-14 w-full flex-col items-center justify-center gap-1 rounded-[20px] px-1 text-[10.5px] font-medium leading-none tracking-tight",
@@ -101,29 +101,29 @@ const row = (active?: boolean) =>
 const bubble = "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] text-ink";
 
 /**
- * Navegação principal no celular: barra flutuante ao alcance do polegar, como
- * em app. É o código da BarraNavegacao do novo.creeta (e do BottomNav do
- * ttcab), neutro por tokens: `ink` na barra, `surface` na aba ativa.
+ * Main navigation on mobile: floating bar within thumb reach, app-like. It is
+ * the code of novo.creeta's BarraNavegacao (and ttcab's BottomNav), made
+ * neutral through tokens: `ink` on the bar, `surface` on the active tab.
  *
- * - Dinâmica: mostra quantas páginas couberem na largura (ResizeObserver,
- *   64px por aba). A última aba é sempre o "Mais", com o resto e as saídas
- *   extras. Num celular comum são quatro páginas e o "Mais".
- * - Véu atrás da barra: o conteúdo some aos poucos antes de chegar nela.
- * - O painel "Mais" é um popover nativo: fecha com Esc e com toque fora,
- *   devolve o foco ao botão e abre mesmo sem JavaScript. Embutido (demo),
- *   vira um painel absoluto dentro da moldura, com a mesma entrada.
- * - Some a partir de `hideFrom` (md no creeta, lg no ttcab), onde o header assume.
+ * - Dynamic: shows as many pages as fit the width (ResizeObserver, 64px per
+ *   tab). The last tab is always "More", holding the rest and the extra
+ *   exits. On a typical phone that's four pages plus "More".
+ * - Veil behind the bar: content fades out gradually before reaching it.
+ * - The "More" panel is a native popover: closes on Esc and on tap outside,
+ *   returns focus to the button and opens even without JavaScript. Embedded
+ *   (demo), it becomes an absolute panel inside the frame, with the same entrance.
+ * - Hidden from `hideFrom` up (md on creeta, lg on ttcab), where the header takes over.
  */
 export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg", labels, embedded = false }: Props) {
   const L: ElementType = linkComponent ?? "a";
-  const t = { ...PT, ...labels };
+  const t = { ...EN, ...labels };
   const list = useRef<HTMLUListElement>(null);
   const panel = useRef<HTMLDivElement>(null);
   const wrap = useRef<HTMLDivElement>(null);
   const panelId = useId();
-  // antes de medir: o caso do celular comum (5 abas = 4 páginas + Mais)
+  // before measuring: the typical phone case (5 tabs = 4 pages + More)
   const [visible, setVisible] = useState(() => howManyFit(5 * TAB_MIN_WIDTH, pages.length));
-  const [open, setOpen] = useState(false); // só no modo embutido
+  const [open, setOpen] = useState(false); // embedded mode only
 
   useEffect(() => {
     const ul = list.current;
@@ -145,15 +145,15 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
     try {
       if (el?.matches(":popover-open")) el.hidePopover?.();
     } catch {
-      /* navegador sem popover: não há o que fechar */
+      /* browser without popover support: nothing to close */
     }
   };
 
-  // Trocou de página: o painel fecha.
+  // Page changed: the panel closes.
   const activeHref = pages.find((p) => p.active)?.href;
   useEffect(close, [activeHref]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Embutido: fecha com Esc e com toque fora (o popover nativo faz isso sozinho).
+  // Embedded: closes on Esc and on tap outside (the native popover does this by itself).
   useEffect(() => {
     if (!embedded || !open) return;
     const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
@@ -173,11 +173,12 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
   const inMore = pages.slice(visible);
   const moreActive = inMore.some((p) => p.active) || extras.some((x) => x.active);
   const pos = embedded ? "absolute" : "fixed";
-  const hide = embedded ? "" : ` ${hideFrom}:hidden`;
+  // full class names (Tailwind only generates what it finds written in the code)
+  const hide = embedded ? "" : hideFrom === "md" ? " md:hidden" : " lg:hidden";
 
   const panelInner = (
     <nav aria-label={t.morePages}>
-      {/* Um item por linha: em duas colunas o painel ficava confuso. */}
+      {/* One item per row: in two columns the panel got confusing. */}
       {inMore.length > 0 && (
         <ul className="grid list-none gap-1">
           {inMore.map(({ href, label, Icon, active }, i) => (
@@ -223,8 +224,8 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
   return (
     <div ref={wrap} className={embedded ? "contents" : undefined}>
       <style>{CSS}</style>
-      {/* Véu atrás da barra: o conteúdo que rola some aos poucos antes de
-          chegar nela, em vez de aparecer cortado pelas bordas. */}
+      {/* Veil behind the bar: scrolling content fades out gradually before
+          reaching it, instead of showing up clipped by the edges. */}
       <div
         aria-hidden="true"
         className={`pointer-events-none ${pos} inset-x-0 bottom-0 z-40 h-28 bg-gradient-to-t from-surface from-35% via-surface/85 via-65% to-transparent [view-transition-name:veu]${hide}`}
@@ -246,7 +247,7 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
             </li>
           ))}
           <li className="min-w-0 flex-1">
-            {/* popovertarget em minúsculas: o React 18 não conhece o atributo e o repassa como está. */}
+            {/* popovertarget in lowercase: React 18 doesn't know the attribute and passes it through as is. */}
             <button
               type="button"
               {...(embedded ? { "aria-expanded": open, "aria-controls": panelId, onClick: () => setOpen((o) => !o) } : { popovertarget: panelId })}
@@ -262,12 +263,12 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
 
       {embedded ? (
         open && (
-          <div id={panelId} className="cg-mais-painel cg-mais-painel--embutido">
+          <div id={panelId} className="cg-more-panel cg-more-panel--embedded">
             {panelInner}
           </div>
         )
       ) : (
-        <div ref={panel} id={panelId} {...{ popover: "auto" }} className={`cg-mais-painel cg-mais-painel--${hideFrom}`}>
+        <div ref={panel} id={panelId} {...{ popover: "auto" }} className={`cg-more-panel cg-more-panel--${hideFrom}`}>
           {panelInner}
         </div>
       )}
@@ -275,10 +276,10 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
   );
 }
 
-/* Painel "Mais": logo acima da barra; entra crescendo a partir do canto do
-   botão "Mais", em 0,18s (igual ao .mais-painel do novo.creeta). */
+/* "More" panel: right above the bar; enters growing from the corner of the
+   "More" button, in 0.18s (same as novo.creeta's .mais-painel). */
 const CSS = `
-.cg-mais-painel{
+.cg-more-panel{
   position:fixed; inset:auto .75rem calc(5.75rem + env(safe-area-inset-bottom)) .75rem;
   width:auto; margin:0; border:0; border-radius:26px; padding:.5rem;
   background:#fff; color:var(--color-ink);
@@ -286,15 +287,15 @@ const CSS = `
   opacity:0; transform:translateY(8px) scale(.97); transform-origin:88% 100%;
   transition:opacity 180ms cubic-bezier(.23,1,.32,1), transform 180ms cubic-bezier(.23,1,.32,1), overlay 180ms allow-discrete, display 180ms allow-discrete;
 }
-.cg-mais-painel:popover-open, .cg-mais-painel--embutido{ opacity:1; transform:none; }
-@starting-style{ .cg-mais-painel:popover-open, .cg-mais-painel--embutido{ opacity:0; transform:translateY(8px) scale(.97); } }
-.cg-mais-painel::backdrop{ background:transparent; }
-.cg-mais-painel--embutido{ position:absolute; z-index:50; }
+.cg-more-panel:popover-open, .cg-more-panel--embedded{ opacity:1; transform:none; }
+@starting-style{ .cg-more-panel:popover-open, .cg-more-panel--embedded{ opacity:0; transform:translateY(8px) scale(.97); } }
+.cg-more-panel::backdrop{ background:transparent; }
+.cg-more-panel--embedded{ position:absolute; z-index:50; }
 @media (prefers-reduced-motion:reduce){
-  .cg-mais-painel{ transform:none; transition:opacity 120ms ease; }
-  @starting-style{ .cg-mais-painel:popover-open, .cg-mais-painel--embutido{ transform:none; } }
+  .cg-more-panel{ transform:none; transition:opacity 120ms ease; }
+  @starting-style{ .cg-more-panel:popover-open, .cg-more-panel--embedded{ transform:none; } }
 }
-/* A partir do breakpoint a barra não existe: o painel também não. */
-@media (min-width:768px){ .cg-mais-painel--md{ display:none !important; } }
-@media (min-width:1024px){ .cg-mais-painel--lg{ display:none !important; } }
+/* From the breakpoint up the bar doesn't exist: neither does the panel. */
+@media (min-width:768px){ .cg-more-panel--md{ display:none !important; } }
+@media (min-width:1024px){ .cg-more-panel--lg{ display:none !important; } }
 `;

package/components/BreatheMark.tsx

@@ -1,21 +1,22 @@
 type Props = {
-  /** Lado em px (quadrado). É o tamanho do glifo visível: a caixa do SVG é
-   *  justa ao anel + ponto, sem ar interno (o espaço entre símbolo e nome
-   *  fica a cargo do layout). */
+  /** Side in px (square). This is the size of the visible glyph: the SVG box
+   *  is tight to the ring + dot, with no inner padding (the space between
+   *  symbol and name is up to the layout). */
   size?: number;
-  /** Segundos de um ciclo respiratório completo (inspira+expira). */
+  /** Seconds of one full breathing cycle (inhale + exhale). */
   duration?: number;
-  /** Anima? (ainda respeita prefers-reduced-motion). */
+  /** Animate? (still respects prefers-reduced-motion). */
   animated?: boolean;
   className?: string;
   title?: string;
 };
 
 /**
- * Símbolo vivo do Breathe — um anel aberto (gesto fluido, contínuo) com um
- * ponto no respiro, abstração do logotipo do creeta (forma redonda + ponto).
- * NEUTRO: usa currentColor, herda a cor do contexto (a paleta vem de cada app).
- * "Respira" num pulso suave de escala; respeita prefers-reduced-motion.
+ * Living symbol of Breathe: an open ring (a fluid, continuous gesture) with a
+ * dot at the breath gap, an abstraction of the creeta logo (round shape + dot).
+ * NEUTRAL: uses currentColor and inherits the color from context (the palette
+ * comes from each app). It "breathes" with a soft scale pulse; respects
+ * prefers-reduced-motion.
  */
 export function BreatheMark({
   size = 96,
@@ -50,7 +51,7 @@ export function BreatheMark({
         style={{ ["--breathe-dur" as string]: `${duration}s` }}
       >
         <g className="breathe-mark__g">
-          {/* anel aberto — gesto contínuo com um respiro no topo */}
+          {/* open ring: a continuous gesture with a breath gap at the top */}
           <path
             d="M 42 17.5 A 17 17 0 1 1 22 17.5"
             fill="none"
@@ -58,7 +59,7 @@ export function BreatheMark({
             strokeWidth="8.5"
             strokeLinecap="round"
           />
-          {/* ponto do respiro */}
+          {/* the breath dot */}
           <circle cx="32" cy="14.5" r="4.4" fill="currentColor" />
         </g>
       </svg>

package/components/Button.tsx

@@ -6,18 +6,18 @@ type Size = "sm" | "md" | "lg";
 const pillBase =
   "inline-flex items-center justify-center gap-2 rounded-pill font-body font-semibold whitespace-nowrap transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink active:scale-[0.97] motion-reduce:transition-none motion-reduce:active:scale-100 disabled:pointer-events-none disabled:opacity-50";
 
-/* Variante `link`: ação de texto sublinhada (não é pílula) — o irmão leve do
-   botão, mesma tipografia (font-body semibold). Herda a cor do contexto
-   (currentColor), então funciona no claro e sobre fundo escuro. O sublinhado
-   fica a 50% e fecha no hover; uma seta (ícone passado nos filhos) dá um passo
-   pra cima-e-direita. Ignora `size` (é inline, sem pílula). */
+/* `link` variant: underlined text action (not a pill) — the button's lightweight
+   sibling, same typography (font-body semibold). Inherits the color from the
+   context (currentColor), so it works on light and on dark backgrounds. The
+   underline sits at 50% and goes solid on hover; an arrow (icon passed as a
+   child) nudges up-and-right. Ignores `size` (it is inline, no pill). */
 const linkBase =
   "group inline-flex items-center gap-1.5 font-body font-semibold underline decoration-[1.5px] decoration-current/50 underline-offset-4 transition-[text-decoration-color,text-underline-offset] duration-200 hover:decoration-current hover:underline-offset-[5px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink rounded-[2px] disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&>svg]:transition-transform [&>svg]:duration-200 hover:[&>svg]:-translate-y-0.5 hover:[&>svg]:translate-x-0.5 motion-reduce:[&>svg]:transform-none";
 
 const variants: Record<Exclude<Variant, "link">, string> = {
-  // petróleo sólido, texto creme (ex.: "Falar com a equipe")
+  // solid petrol, cream text (e.g. "Falar com a equipe")
   solid: "bg-ink text-surface hover:-translate-y-0.5 shadow-[0_6px_18px_rgba(20,71,83,0.28)]",
-  // cor de ação (laranja/magenta) + texto on-action (do token, varia por site)
+  // action color (orange/magenta) + on-action text (from the token, varies per site)
   accent: "bg-action text-on-action hover:-translate-y-0.5 shadow-[0_6px_18px_rgba(20,71,83,0.22)]",
   outline: "border border-line text-ink hover:bg-ink/[0.05]",
   ghost: "text-ink hover:bg-ink/[0.06]",
@@ -40,11 +40,11 @@ type ButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement> & { hre
 type LinkProps = CommonProps & AnchorHTMLAttributes<HTMLAnchorElement> & { href: string };
 
 /**
- * Button da família Cuidado Global. Polimórfico: com `href` vira `<a>`
- * (injete seu Link via wrapper se precisar de roteador), senão `<button>`.
- * Variantes: solid (petróleo), accent (cor de ação), outline, ghost e
- * `link` (ação de texto sublinhada — ex.: "Ver todos", "Ação secundária",
- * "Ver no Google Maps"; herda a cor, serve no claro e no escuro).
+ * Button of the Cuidado Global family. Polymorphic: with `href` it renders an
+ * `<a>` (inject your Link via a wrapper if you need a router), otherwise a
+ * `<button>`. Variants: solid (petrol), accent (action color), outline, ghost
+ * and `link` (underlined text action — e.g. "See all", "Secondary action",
+ * "View on Google Maps"; inherits the color, works on light and dark).
  */
 export function Button(props: ButtonProps | LinkProps) {
   const { variant = "solid", size = "md", className = "", children, ...rest } = props;

package/components/Card.tsx

@@ -2,17 +2,17 @@ import type { ReactNode } from "react";
 
 type Props = {
   children: ReactNode;
-  /** Vira link se href for passado. */
+  /** Renders as a link when href is passed. */
   href?: string;
-  /** Eleva no hover (para cards clicáveis). */
+  /** Lifts on hover (for clickable cards). */
   interactive?: boolean;
   className?: string;
 };
 
 /**
- * Card base da família — estilo decidido no DS: **borda discreta + sombra
- * discreta**, raio 2xl (28px), fundo surface. Com `href` vira link; com
- * `interactive` eleva no hover. Nada de borda forte ou sombra pesada.
+ * Base card of the family — style decided in the DS: **subtle border + subtle
+ * shadow**, 2xl radius (28px), surface background. With `href` it becomes a
+ * link; with `interactive` it lifts on hover. No strong borders or heavy shadows.
  */
 export function Card({ children, href, interactive, className = "" }: Props) {
   const cls = `block rounded-2xl border border-line bg-surface p-[clamp(20px,3vw,32px)] shadow-[0_2px_12px_rgba(20,71,83,0.06)] ${

package/components/Container.tsx

@@ -2,15 +2,15 @@ import type { ReactNode } from "react";
 
 type Props = {
   children: ReactNode;
-  /** Largura máxima. "content" (padrão) p/ leitura; "wide" p/ heros/rodapé. */
+  /** Max width. "content" (default) for reading; "wide" for heroes/footer. */
   width?: "content" | "wide";
   className?: string;
 };
 
 /**
- * Container da família Cuidado Global — largura máxima + gutter lateral
- * consistente (16px no celular). "content" para texto/seções, "wide" para
- * blocos full-bleed (heros, rodapé).
+ * Container of the Cuidado Global family — max width + consistent side gutter
+ * (16px on mobile). "content" for text/sections, "wide" for full-bleed blocks
+ * (heroes, footer).
  */
 export function Container({ children, width = "content", className = "" }: Props) {
   const max = width === "wide" ? "max-w-[1600px]" : "max-w-[1120px]";