@breathe-ds/ui 0.2.0 → 0.4.0

package/components/CareSteps.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from "react";
+
+export type CareStep = {
+  title: ReactNode;
+  /** What fits the phone card (two columns). */
+  summary: ReactNode;
+  /** The full text, from lg. */
+  text: ReactNode;
+  /** The drawing above the text: a ChatPreview, a photo, a PlanTimeline, a
+   *  PhotoSequence… It fills the frame (absolute inset-0). Decorative: it
+   *  repeats what the text says; only a pause button should reach the keyboard. */
+  visual: ReactNode;
+};
+
+type Labels = {
+  /** sr-only before the title: "Step 1: ". The number on screen is decoration. */
+  step: (n: number) => string;
+};
+const EN: Labels = { step: (n) => `Step ${n}: ` };
+
+type Props = {
+  steps: CareStep[];
+  /** The last tile, on the dark panel: the sentence and the action (a WhatsApp link, a Button). */
+  invite: { text: ReactNode; action: ReactNode };
+  /** Heading level of the step titles. */
+  headingLevel?: "h2" | "h3";
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/** The frame of each drawing: surface colour, corner concentric with the
+ *  card's (28px minus the 12px of breathing room). */
+const FRAME = "relative h-32 overflow-hidden rounded-2xl bg-surface md:h-52";
+
+/**
+ * How the care works, from the first contact to the treatment — creeta's
+ * `Passos`, by tokens. A bento mosaic: each step has its drawing above and
+ * its text below; the first takes two columns and the invite closes the
+ * sequence:
+ *
+ *   [ 01, wide ]  02          phone:  [ 01, wide ]
+ *    03   04   invite                  02   03
+ *                                      04   invite
+ *
+ * The invite comes last: it is the conclusion of the steps.
+ */
+export function CareSteps({ steps, invite, headingLevel: Title = "h3", labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  return (
+    <div className={`grid grid-cols-2 gap-3 md:grid-cols-3 md:gap-5 ${className}`}>
+      {/* contents: the <li> become tiles of the mosaic and the list stays a list */}
+      <ol className="contents">
+        {steps.map((s, i) => (
+          <li key={i} className={`flex flex-col rounded-[28px] bg-card p-3 ${i === 0 ? "col-span-2 md:flex-row-reverse" : ""}`}>
+            {i === 0 ? (
+              <div className="relative overflow-hidden rounded-2xl bg-surface md:w-1/2">{s.visual}</div>
+            ) : (
+              <div className={FRAME}>{s.visual}</div>
+            )}
+
+            <div className="flex flex-1 flex-col px-2 pb-2 pt-4 md:px-3 md:pb-3 md:pt-5 lg:px-5 lg:pb-5 lg:pt-6">
+              {/* The number is visual reinforcement; the order goes as text for the screen reader. */}
+              <span aria-hidden="true" className="font-heading text-[1.75rem] font-normal leading-none tracking-[-0.04em] text-ink-soft md:text-[2.5rem]">
+                {String(i + 1).padStart(2, "0")}
+              </span>
+              {/* 16px on the phone: the column has 141px, and at 18px titles broke into three lines */}
+              <Title className={`mt-2 font-heading text-base font-medium leading-snug text-ink md:text-xl ${i === 0 ? "md:mt-auto md:pt-6" : "md:mt-3"}`}>
+                <span className="sr-only">{t.step(i + 1)}</span>
+                {s.title}
+              </Title>
+              {/* the full text only when the column fits it: up to lg it has less than 180px */}
+              <p className="mt-1.5 text-sm leading-relaxed text-ink-body lg:hidden">{s.summary}</p>
+              <p className="mt-2 hidden leading-relaxed text-ink-body lg:block">{s.text}</p>
+            </div>
+          </li>
+        ))}
+      </ol>
+
+      {/* The invite closes the mosaic: it is the last tile. */}
+      <div className="flex min-h-[200px] flex-col justify-between gap-6 rounded-[28px] bg-surface-panel p-5 text-surface md:p-6 lg:p-8">
+        <p className="font-heading text-[1.375rem] font-medium leading-[1.15] md:text-[2rem] md:leading-[1.12]">{invite.text}</p>
+        <div className="self-start">{invite.action}</div>
+      </div>
+    </div>
+  );
+}

package/components/ChatPreview.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from "react";
+import { Clock } from "lucide-react";
+import { reducedMotion, useOnAppear } from "./useOnAppear";
+import { PauseButton } from "./PauseButton";
+
+export type ChatMessage = { from: "person" | "clinic"; text: string };
+
+type Labels = {
+  /** Completes the pause button's name: "Pause the sample conversation". */
+  pause: string;
+};
+const EN: Labels = { pause: "the sample conversation" };
+
+type Props = {
+  messages: ChatMessage[];
+  /** Small line at the top, with a clock: the opening hours. */
+  hours?: string;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/** How long the clinic is "typing" before each reply, in ms. */
+const TYPING = 1100;
+/** At the end the conversation rests this long, fades out and restarts. */
+const REST = 3200;
+const EXIT = 350;
+/** Time to read the previous message before the next: grows with its length, 0.9s to 1.9s. */
+export const readingTime = (previous?: ChatMessage) =>
+  previous ? Math.min(1900, Math.max(900, 600 + previous.text.length * 28)) : 400;
+
+const BUBBLE = "cg-bubble max-w-[15rem] rounded-[20px] px-4 py-3 text-sm leading-snug lg:text-[0.9375rem]";
+const CURVE = "cubic-bezier(0.23, 1, 0.32, 1)";
+
+/**
+ * Step 1 of the care flow (creeta's `Conversa`): a sample conversation, bubble
+ * by bubble. The person writes, the clinic "types" and answers.
+ * - Starts when half of it is on screen and loops: at the end rests 3.2s,
+ *   fades and restarts. Only runs while on screen.
+ * - Works like a real chat: fixed height, new bubbles come in at the bottom,
+ *   old ones slide up and vanish at the top. Nothing pushes the page.
+ * - Moves by itself for more than 5s, so it has a pause button (WCAG 2.2.2).
+ * - Without JavaScript, IntersectionObserver or with reduced motion, the whole
+ *   conversation shows still, without the button.
+ * - The chat is decoration (aria-hidden): the step's text already says what
+ *   matters. The button stays outside it, for the keyboard and screen reader.
+ */
+export function ChatPreview({ messages, hours, labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  const { ref, state, onScreen } = useOnAppear<HTMLDivElement>();
+  const stack = useRef<HTMLDivElement>(null);
+  const height = useRef(0);
+  const [shown, setShown] = useState(0);
+  const [typing, setTyping] = useState(false);
+  const [paused, setPaused] = useState(false);
+  const [leaving, setLeaving] = useState(false);
+
+  const visible = state === "whole" ? messages : state === "waiting" ? [] : messages.slice(0, shown);
+
+  // The clock: one message at a time, and back to the start.
+  useEffect(() => {
+    if (state !== "playing" || paused || !onScreen) return;
+    const wait = readingTime(messages[shown - 1]);
+    const timer =
+      shown >= messages.length
+        ? leaving
+          ? setTimeout(() => {
+              setShown(0);
+              setLeaving(false);
+            }, EXIT)
+          : setTimeout(() => setLeaving(true), REST)
+        : messages[shown].from === "person"
+          ? setTimeout(() => setShown((v) => v + 1), wait + 300)
+          : typing
+            ? setTimeout(() => {
+                setTyping(false);
+                setShown((v) => v + 1);
+              }, TYPING)
+            : setTimeout(() => setTyping(true), wait);
+    return () => clearTimeout(timer);
+  }, [state, paused, onScreen, shown, typing, leaving, messages]);
+
+  // New bubble at the bottom: the stack grows upward at once. To slide the old
+  // ones up, it starts offset by the height it gained and returns (transform only).
+  useLayoutEffect(() => {
+    const el = stack.current;
+    if (!el) return;
+    const gained = el.offsetHeight - height.current;
+    height.current = el.offsetHeight;
+    if (state !== "playing" || gained <= 0 || reducedMotion() || !el.animate) return;
+    el.animate([{ transform: `translateY(${gained}px)` }, { transform: "translateY(0)" }], { duration: 320, easing: CURVE });
+  }, [state, shown, typing]);
+
+  return (
+    <div ref={ref} data-state={state} data-paused={paused ? "" : undefined} className={`cg-chat relative h-full min-h-[17.5rem] md:min-h-[20rem] ${className}`}>
+      <div aria-hidden="true">
+        {hours && (
+          <span className="absolute left-4 top-0 flex h-11 items-center gap-1.5 text-xs font-medium text-ink/80 lg:left-7">
+            <Clock size={13} strokeWidth={2} />
+            {hours}
+          </span>
+        )}
+        {/* the chat window: what goes past the top fades out */}
+        <div className="absolute inset-x-0 bottom-0 top-11 overflow-hidden [mask-image:linear-gradient(to_bottom,transparent,black_2rem)]">
+          <div
+            ref={stack}
+            className={`absolute inset-x-0 bottom-0 flex flex-col gap-2.5 px-4 pb-4 transition-opacity duration-300 ease-out motion-reduce:transition-none lg:px-7 lg:pb-7 ${leaving ? "opacity-0" : ""}`}
+          >
+            {visible.map((m, i) => (
+              <span
+                key={i}
+                className={
+                  m.from === "person"
+                    ? `${BUBBLE} origin-bottom-right self-end rounded-br-md bg-ink text-surface`
+                    : `${BUBBLE} origin-bottom-left self-start rounded-bl-md bg-card text-ink`
+                }
+              >
+                {m.text}
+              </span>
+            ))}
+            {typing && (
+              <span className="cg-bubble cg-typing flex origin-bottom-left gap-1 self-start rounded-[20px] rounded-bl-md bg-card px-4 py-3.5">
+                {[0, 1, 2].map((n) => (
+                  <i key={n} style={{ "--n": n } as CSSProperties} className="h-1.5 w-1.5 rounded-full bg-ink-soft" />
+                ))}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {state !== "whole" && (
+        <PauseButton paused={paused} onToggle={() => setPaused((p) => !p)} what={t.pause} className="right-0 top-0 lg:right-2" />
+      )}
+    </div>
+  );
+}

package/components/CtaCard.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import { VideoInviteCard, type VideoInviteCardProps } from "./VideoInviteCard";
+
+type Props = {
+  /** The question that closes the page, e.g. "Shall we find out what your body needs?". */
+  title: ReactNode;
+  /** Supporting line under the title. Omit it to drop the paragraph. */
+  lead?: ReactNode;
+  /** The call to action — pass the DS `Button` (variant="accent" on the family's sites). */
+  action: ReactNode;
+  /** Side card with the speaker's video (VideoInviteCard props). Omit for the text card alone. */
+  video?: Omit<VideoInviteCardProps, "className">;
+  /** Any other side media (e.g. a still photo), placed in the same frame as the video. */
+  media?: ReactNode;
+  className?: string;
+};
+
+/** Side frame: 3:2 on mobile (video on top), free height from md on, same radius as the text card. */
+const sideFrame = "aspect-[3/2] md:order-2 md:aspect-auto md:min-h-[340px]";
+
+/**
+ * Final call of the Cuidado Global family — mirrors the `ChamadaFinal` of
+ * novo.creeta with the Breathe tokens: every page ends with the same
+ * invitation, in the same place.
+ *
+ * Two cards side by side, on the same grid as the site's other card pairs
+ * (gap-3, gap-5 from md): the text on a white card — title, lead and the CTA —
+ * and the video on another, each with its own four corners (28px). On mobile
+ * the video comes first. Without video/media it is a single card.
+ *
+ * The white card keeps ink text (10.21:1 on creeta); the lead is ink at 80%
+ * (5.78:1 on white). The CTA is a slot: the site passes its own Button/link.
+ */
+export function CtaCard({ title, lead, action, video, media, className = "" }: Props) {
+  const hasSide = Boolean(video || media);
+
+  return (
+    <section className={`text-ink ${hasSide ? "grid gap-3 md:grid-cols-2 md:gap-5" : ""} ${className}`}>
+      {video ? (
+        <VideoInviteCard {...video} className={sideFrame} />
+      ) : media ? (
+        <div className={`relative overflow-hidden rounded-2xl ${sideFrame}`}>{media}</div>
+      ) : null}
+      <div className="flex flex-col justify-center rounded-2xl bg-card px-6 py-10 md:px-10 md:py-14">
+        <h2 className="max-w-xl font-heading text-3xl leading-[1.1] font-medium md:text-4xl">{title}</h2>
+        {lead && <p className="mt-4 max-w-md text-ink/80">{lead}</p>}
+        {/* The button follows the site's pattern (accent on white), same as the header's "Book". */}
+        <div className="mt-7">{action}</div>
+      </div>
+    </section>
+  );
+}

package/components/FactStrip.tsx

@@ -0,0 +1,55 @@
+import type { ComponentType, ReactNode } from "react";
+
+type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
+
+export type Fact = {
+  Icon: IconType;
+  /** First line, strong ("Monday to Friday"). */
+  title: ReactNode;
+  /** Second line, lighter ("8 am to 6 pm"). */
+  text?: ReactNode;
+  /** Read between the two lines by screen readers only, so the sentence
+   *  still reads whole (", " or " "). Default: ", ". */
+  separator?: string;
+};
+
+type Props = {
+  facts: Fact[];
+  /** aria-label of the list ("How we see patients"). */
+  label?: string;
+  className?: string;
+};
+
+/**
+ * Fact strip — the three facts under the hero of novo.creeta ("Monday to
+ * Friday / 8 am to 6 pm", "At the clinic / or at home", "Individual care /
+ * from babies to the elderly"). Each fact is an icon bubble plus two lines of
+ * equal visual weight, so none wraps differently from the others. On desktop
+ * a thin line separates the columns; on phones it separates the rows.
+ */
+export function FactStrip({ facts, label, className = "" }: Props) {
+  const cols = facts.length === 2 ? "md:grid-cols-2" : facts.length === 4 ? "md:grid-cols-4" : "md:grid-cols-3";
+  return (
+    <ul
+      aria-label={label}
+      className={`m-0 list-none divide-y divide-ink/10 rounded-2xl bg-card px-6 md:grid ${cols} md:divide-x md:divide-y-0 md:px-0 md:py-7 ${className}`}
+    >
+      {facts.map(({ Icon, title, text, separator = ", " }, i) => (
+        <li key={i} className="flex items-center gap-4 py-5 md:px-8 md:py-0 lg:px-10">
+          <span aria-hidden="true" className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] text-ink">
+            <Icon size={22} strokeWidth={1.75} />
+          </span>
+          <p className="m-0 leading-snug">
+            <span className="block font-heading text-lg font-medium text-ink">{title}</span>
+            {text && (
+              <>
+                <span className="sr-only">{separator}</span>
+                <span className="block text-[0.9375rem] text-ink/80">{text}</span>
+              </>
+            )}
+          </p>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/components/FeaturedPosts.tsx

@@ -0,0 +1,80 @@
+import type { ElementType, ReactNode } from "react";
+import { Byline, type Person } from "./Byline";
+import type { PostCover } from "./PostCard";
+
+export type FeaturedPost = {
+  cover: PostCover;
+  title: ReactNode;
+  /** The post's own page. */
+  href: string;
+  text: ReactNode;
+  /** Who said it (name, portrait): the text is their words, only cut. */
+  speaker: Person;
+  /** Link to the video the text came from ("Watch the video ↗"). */
+  video?: { href: string; label?: ReactNode; external?: boolean };
+};
+
+type Props = {
+  posts: FeaturedPost[];
+  headingLevel?: "h2" | "h3";
+  /** Default label of the video link. */
+  watchLabel?: ReactNode;
+  newTabLabel?: string;
+  linkComponent?: ElementType;
+  className?: string;
+};
+
+/**
+ * Featured posts of the Cuidado Global family — creeta's `Temas` ("in the
+ * words of who treats you"): what the team explains in the videos, as text.
+ * Each card: the cover above, the title and the text, and at the foot who
+ * said it (with the portrait) and the link to the video, because the text is
+ * their speech, only with cuts. Bento: the first post takes two columns with
+ * the cover beside the text; if the last would sit alone in its row, it too.
+ */
+export function FeaturedPosts({ posts, headingLevel: Title = "h3", watchLabel = "Watch the video", newTabLabel, linkComponent, className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  return (
+    <ul className={`grid list-none gap-3 md:grid-cols-2 md:gap-5 ${className}`}>
+      {posts.map((p, i) => {
+        const wide = i === 0 || (i === posts.length - 1 && (posts.length - 1) % 2 === 1);
+        return (
+          <li key={i} className={`flex flex-col overflow-hidden rounded-[28px] bg-card ${wide ? "md:col-span-2 md:grid md:grid-cols-5" : ""}`}>
+            {/* cover: decoration (4:3); the title says the subject */}
+            <div className={`relative overflow-hidden ${wide ? "aspect-[4/3] md:col-span-2 md:aspect-auto md:min-h-[320px]" : "aspect-[4/3]"}`}>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={p.cover.src}
+                srcSet={p.cover.srcSet}
+                sizes={p.cover.sizes ?? (wide ? "(min-width: 1152px) 440px, (min-width: 768px) 40vw, 92vw" : "(min-width: 1152px) 540px, (min-width: 768px) 46vw, 92vw")}
+                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-8 ${wide ? "md:col-span-3 md:justify-center" : ""}`}>
+              <Title className="font-heading text-xl font-medium leading-snug text-ink md:text-[1.375rem]">
+                <L
+                  href={p.href}
+                  className="underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ink motion-reduce:transition-none"
+                >
+                  {p.title}
+                </L>
+              </Title>
+              <p className="mt-3 leading-relaxed text-ink-body">{p.text}</p>
+              <Byline
+                className="mt-auto pt-6"
+                people={[p.speaker]}
+                action={p.video ? { label: p.video.label ?? watchLabel, href: p.video.href, external: p.video.external } : undefined}
+                newTabLabel={newTabLabel}
+                linkComponent={linkComponent}
+              />
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/components/Footer.tsx

@@ -1,10 +1,13 @@
 import type { ComponentType, ElementType, ReactNode } from "react";
 import { LanguageSwitcher, type Language } from "./LanguageSwitcher";
+import { List } from "./List";
 
 /** 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 };
+/** A titled column of links, for footers with many pages ("Foundations", "Cards…"). */
+export type FooterLinkGroup = { title: ReactNode; links: FooterLink[] };
 export type FooterContact = { href: string; label: ReactNode; Icon: IconType; external?: boolean };
 export type FooterLanguage = Language;
 
@@ -28,8 +31,11 @@ type Props = {
   /** 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[] };
+   *  a footer with no internal links drops the column (two-column grid).
+   *  Many links (a dozen or more): pass `groups` instead of `links` — each
+   *  group is a column with a small heading, up to four side by side, so the
+   *  list gets wider instead of taller (the 44px rows stay). */
+  pages?: { title: ReactNode; links?: FooterLink[]; groups?: FooterLinkGroup[] };
   /** "Where we are": address lines, opening hours, and the directions links
    *  ("Directions ↗ · Waze ↗", external). */
   where: { title: ReactNode; address: ReactNode[]; hours?: ReactNode; directions?: FooterLink[] };
@@ -56,11 +62,16 @@ type Props = {
 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 CornerDownRight = () => (
-  <svg aria-hidden="true" viewBox="0 0 24 24" width={18} height={18} className="mt-[0.2rem] shrink-0" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 10 5 5-5 5" /><path d="M4 4v7a4 4 0 0 0 4 4h12" /></svg>
-);
 
 const title = "font-heading text-lg font-medium text-ink";
+const groupTitle = "text-xs font-semibold uppercase tracking-[0.12em] text-ink-soft";
+// whole class names: as many columns as groups, up to four
+const groupCols: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-2 lg:grid-cols-4",
+};
 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 =
@@ -102,13 +113,19 @@ export function Footer({
   // 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";
+  const groups = pages?.groups?.length ? pages.groups : undefined;
+  // grouped pages need the room: the pages column grows and the brand column shrinks
+  const columns = !pages
+    ? "md:grid-cols-[minmax(0,1fr)_auto]"
+    : groups
+      ? "md:grid-cols-[minmax(0,3.5fr)_minmax(0,6.5fr)_minmax(0,3fr)]"
+      : "md:grid-cols-[minmax(0,4fr)_minmax(0,5fr)_minmax(0,3fr)]";
 
   return (
-    <footer className={`${outer} bg-white py-10 text-ink md:py-14 ${className}`}>
-      <style>{CSS}</style>
+    <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 className={`grid gap-x-10 gap-y-10 ${columns}`}>
           <div>
             {logo}
             {brandName && <p className="sr-only">{brandName}</p>}
@@ -120,13 +137,30 @@ export function Footer({
           {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>
+              {groups ? (
+                <div className={`mt-5 grid gap-x-6 gap-y-8 ${groupCols[Math.min(groups.length, 4)]}`}>
+                  {groups.map((g, gi) => (
+                    <div key={gi}>
+                      <h3 className={groupTitle}>{g.title}</h3>
+                      <div className="mt-2">
+                        {g.links.map((p, i) => (
+                          <L key={`${i}-${p.href}`} href={p.href} className={link}>
+                            {p.label}
+                          </L>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <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>
+              )}
             </nav>
           )}
 
@@ -169,14 +203,7 @@ export function Footer({
                 <h2 id={noticeId} className="font-heading text-2xl font-medium leading-snug md:text-[1.75rem]">
                   {notice.title}
                 </h2>
-                <ul className="mt-4 list-none space-y-2 leading-relaxed text-ink/80">
-                  {notice.items.map((item, i) => (
-                    <li key={i} className="flex gap-2.5">
-                      <CornerDownRight />
-                      <span>{item}</span>
-                    </li>
-                  ))}
-                </ul>
+                <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>
@@ -215,10 +242,3 @@ export function Footer({
   );
 }
 
-/* Outbound arrow: takes a small step toward where the link goes, on hover. */
-const CSS = `
-@media (prefers-reduced-motion:no-preference){
-  .cg-arrow-go{ transition:transform 150ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)); }
-  a:hover .cg-arrow-go{ transform:translate(2px,-2px); }
-}
-`;

package/components/Header.tsx

@@ -112,7 +112,9 @@ function Dropdown({ item, L, t }: { item: NavItem; L: ElementType; t: Labels })
               <L
                 href={c.href}
                 onClick={() => setOpen(false)}
-                className="flex items-start gap-3 rounded-xl px-2.5 py-2 transition-colors hover:bg-ink/[0.05] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
+                // with a description the icon sits with the label's first line (creeta);
+                // label only: centred on the bubble, and a two-line label stays tight
+                className={`flex ${c.description ? "items-start" : "items-center"} gap-3 rounded-xl px-2.5 py-2 transition-colors hover:bg-ink/[0.05] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink`}
               >
                 {c.icon && (
                   <span className="flex h-9 w-9 flex-none items-center justify-center rounded-full bg-ink/[0.08] text-ink">
@@ -120,7 +122,7 @@ function Dropdown({ item, L, t }: { item: NavItem; L: ElementType; t: Labels })
                   </span>
                 )}
                 <span>
-                  <span className="block font-heading text-[0.95rem] font-semibold text-ink">
+                  <span className="block font-heading text-[0.95rem] leading-snug font-semibold text-ink">
                     {c.label}
                   </span>
                   {c.description && (

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>
+  );
+}