feat(cases): mídia no topo, títulos de busca curtos e CreativeWork

Case com mídia ao lado do título e play acessível; problema de cada cliente reescrito com base nos dados; serviços relacionados em 2 cards; FAQ antes do próximo passo e bloco 'Onde já apliquei isso'; Apolo citada em IoT e arquitetura. metaTitle até 43 caracteres e descrições até 155 com teste; JSON-LD CreativeWork; imagens de compartilhamento abaixo de 100 KB; 404 e robots corrigidos; server-only nos módulos com node:.

app/cases/[slug]/opengraph-image.paths.test.tsx

@@ -1,15 +1,50 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
 import { notFound } from "next/navigation";
 import { ImageResponse } from "next/og";
 import { isValidElement } from "react";
-import { OG_SIZE, OgCard } from "@/lib/og-card";
+import {
+  OG_IMAGE_MAX_BYTES,
+  OG_SIZE,
+  OgCard,
+  readProjectOgImage,
+} from "@/lib/og-card";
 import { caseStudies } from "@/lib/site-content";
-import Image from "./opengraph-image";
+import Image, { generateImageMetadata } from "./opengraph-image";
 
 /**
  * Testes de caminhos-base de Image (imagem de compartilhamento do case):
- * slug desconhecido, id da imagem diferente do case, case de cliente e projeto de laboratório.
+ * slug desconhecido, id da imagem diferente do case, case com capa gravada (entregue como está, em JPEG,
+ * abaixo de 150 KB), capa pesada demais (cartão simples) e projeto de laboratório.
  */
 
+/** O jsdom não tem `Response`; a rota roda no Node e devolve uma. Aqui basta guardar o corpo e os cabeçalhos. */
+class FakeResponse {
+  constructor(
+    readonly body: Uint8Array,
+    readonly init: { headers: Record<string, string> },
+  ) {}
+}
+
+beforeAll(() => {
+  Object.assign(globalThis, { Response: FakeResponse });
+});
+
+jest.mock("@/lib/og-card", () => {
+  const actual = jest.requireActual("@/lib/og-card");
+  return { ...actual, readProjectOgImage: jest.fn(actual.readProjectOgImage) };
+});
+
+const mockedReadProjectOgImage = jest.mocked(readProjectOgImage);
+const actualReadProjectOgImage =
+  jest.requireActual<typeof import("@/lib/og-card")>(
+    "@/lib/og-card",
+  ).readProjectOgImage;
+
+afterEach(() => {
+  mockedReadProjectOgImage.mockImplementation(actualReadProjectOgImage);
+});
+
 jest.mock("next/navigation", () => ({
   notFound: jest.fn(() => {
     throw new Error("NEXT_NOT_FOUND");
@@ -47,11 +82,32 @@ function sentCard() {
 }
 
 describe("opengraph-image Image", () => {
-  it("path: client case with the matching image id -> card labelled as a client case", async () => {
+  it("path: case with a recorded cover -> the cover itself, in JPEG, under 150 KB, and no generated card", async () => {
     const caseStudy = getCase("sev-modaintima");
-    await renderImage(caseStudy.id, caseStudy.id);
+    const response = (await renderImage(
+      caseStudy.id,
+      caseStudy.id,
+    )) as unknown as FakeResponse;
 
     expect(notFound).not.toHaveBeenCalled();
+    expect(mockedImageResponse).not.toHaveBeenCalled();
+    expect(response).toBeInstanceOf(FakeResponse);
+    expect(response.init.headers["Content-Type"]).toBe("image/jpeg");
+    const cover = readFileSync(
+      join(process.cwd(), "public/videos/sev-modaintima/og.jpg"),
+    );
+    expect(Buffer.from(response.body).equals(cover)).toBe(true);
+    expect(response.body.length).toBeLessThan(150_000);
+  });
+
+  it("path: cover that weighs 150 KB or more -> the plain generated card, with no background", async () => {
+    const caseStudy = getCase("sev-modaintima");
+    mockedReadProjectOgImage.mockReturnValue(undefined);
+    expect(OG_IMAGE_MAX_BYTES).toBe(150_000);
+
+    const response = await renderImage(caseStudy.id, caseStudy.id);
+
+    expect(response).not.toBeInstanceOf(FakeResponse);
     expect(mockedImageResponse).toHaveBeenCalledTimes(1);
     const { card, options } = sentCard();
     expect(card.type).toBe(OgCard);
@@ -60,10 +116,31 @@ describe("opengraph-image Image", () => {
       title: caseStudy.title,
       description: caseStudy.summary,
     });
-    expect(card.props.backgroundImage).toMatch(/^data:image\/jpeg;base64,/);
+    expect(card.props.backgroundImage).toBeUndefined();
     expect(options).toEqual(OG_SIZE);
   });
 
+  it("path: image metadata -> JPEG for covers, PNG for generated cards, and every case listed without a slug", () => {
+    const [sev] = generateImageMetadata({ params: { slug: "sev-modaintima" } });
+    const [twins] = generateImageMetadata({ params: { slug: "twins-lab" } });
+    expect(sev).toMatchObject({
+      id: "sev-modaintima",
+      contentType: "image/jpeg",
+      size: OG_SIZE,
+    });
+    expect(twins).toMatchObject({
+      id: "twins-lab",
+      contentType: "image/png",
+      size: OG_SIZE,
+    });
+
+    const all = generateImageMetadata({ params: {} });
+    expect(all.map(({ id }) => id)).toEqual(caseStudies.map(({ id }) => id));
+    expect(
+      all.filter(({ contentType }) => contentType === "image/jpeg"),
+    ).toHaveLength(5);
+  });
+
   it("path: unknown slug -> notFound() and no image", async () => {
     await expect(renderImage("nao-existe", "nao-existe")).rejects.toThrow(
       "NEXT_NOT_FOUND",

app/cases/[slug]/opengraph-image.tsx

@@ -2,9 +2,10 @@ import { notFound } from "next/navigation";
 import { ImageResponse } from "next/og";
 import {
   OG_CONTENT_TYPE,
+  OG_PHOTO_CONTENT_TYPE,
   OG_SIZE,
   OgCard,
-  readProjectOgBackground,
+  readProjectOgImage,
 } from "@/lib/og-card";
 import { caseStudies, isClientCase } from "@/lib/site-content";
 
@@ -12,12 +13,15 @@ function getCaseStudy(slug: string) {
   return caseStudies.find(({ id }) => id === slug);
 }
 
+// Quem tem a capa gravada (public/videos/<id>/og.jpg, abaixo de 150 KB) a entrega como está, em JPEG: o cartão em PNG com a capa de fundo passava de 270 KB.
 function getImageMetadata(caseStudy: (typeof caseStudies)[number]) {
   return {
     id: caseStudy.id,
     alt: `Case ${caseStudy.title} — Evandro Fonseca Junior`,
     size: OG_SIZE,
-    contentType: OG_CONTENT_TYPE,
+    contentType: readProjectOgImage(caseStudy.id)
+      ? OG_PHOTO_CONTENT_TYPE
+      : OG_CONTENT_TYPE,
   };
 }
 
@@ -46,6 +50,16 @@ export default async function Image({
   const caseStudy = getCaseStudy(slug);
   if (!caseStudy || imageId !== caseStudy.id) notFound();
 
+  const photo = readProjectOgImage(caseStudy.id);
+  if (photo) {
+    return new Response(new Uint8Array(photo), {
+      headers: {
+        "Content-Type": OG_PHOTO_CONTENT_TYPE,
+        "Cache-Control": "public, max-age=86400",
+      },
+    });
+  }
+
   return new ImageResponse(
     <OgCard
       eyebrow={
@@ -53,7 +67,6 @@ export default async function Image({
       }
       title={caseStudy.title}
       description={caseStudy.summary}
-      backgroundImage={readProjectOgBackground(caseStudy.id)}
     />,
     OG_SIZE,
   );

app/cases/[slug]/page.facts.paths.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+import { caseStudies } from "@/lib/site-content";
+import CasePage from "./page";
+
+/**
+ * Teste de caminhos-base de CasePage: os "fatos do projeto" no topo.
+ * O teste principal cobre a lista ausente (`undefined`) e a lista preenchida; aqui, a lista vazia (`[]`).
+ */
+
+jest.mock("next/navigation", () => ({ notFound: jest.fn() }));
+
+function getCase(id: string) {
+  const caseStudy = caseStudies.find((item) => item.id === id);
+  if (!caseStudy) throw new Error(`Missing case ${id}`);
+  return caseStudy;
+}
+
+describe("CasePage: fatos do projeto", () => {
+  it("path: empty facts list -> no list in the hero, summary stays", async () => {
+    const caseStudy = getCase("lavacao-047");
+    caseStudy.facts = [];
+    try {
+      const ui = await CasePage({
+        params: Promise.resolve({ slug: caseStudy.id }),
+      });
+      render(ui);
+
+      expect(
+        screen.queryByRole("list", { name: "Fatos do projeto" }),
+      ).toBeNull();
+      expect(screen.getByText(caseStudy.summary)).toBeVisible();
+    } finally {
+      delete caseStudy.facts;
+    }
+  });
+});

app/cases/[slug]/page.paths.test.tsx

@@ -66,12 +66,20 @@ describe("CasePage: caminhos que o teste principal não cobre", () => {
       screen.getByRole("heading", { level: 2, name: "Como ficou" }),
     ).toBeVisible();
     expect(
-      screen.getByLabelText(`Vídeo do site ${caseStudy.title} no celular`),
+      screen.getByRole("button", {
+        name: `Reproduzir o vídeo do site ${caseStudy.title} no celular`,
+      }),
     ).toBeInTheDocument();
     expect(
-      screen.queryByLabelText(`Vídeo do site ${caseStudy.title} no computador`),
+      screen.queryByRole("button", {
+        name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+      }),
     ).toBeNull();
+    // sem captura do computador, o topo fica em uma coluna, sem moldura de navegador
     expect(container.querySelector(".ds-bframe")).toBeNull();
+    expect(
+      container.querySelector("section")?.querySelector(".grid"),
+    ).toBeNull();
     expect(container.querySelector(".ds-phone")).not.toBeNull();
     expect(screen.queryByRole("link", { name: /^Abrir o site/ })).toBeNull();
   });
@@ -115,11 +123,12 @@ describe("CasePage: caminhos que o teste principal não cobre", () => {
     await renderCase(caseStudy.id);
 
     expect(screen.getByText(/Projeto de laboratório/)).toBeVisible();
+    expect(screen.queryByRole("link", { name: /^Ver o serviço:/ })).toBeNull();
+    expect(screen.queryByText("Serviços ligados a este projeto")).toBeNull();
     expect(
-      screen.queryByRole("link", { name: /^Ver serviço relacionado:/ }),
-    ).toBeNull();
-    expect(
-      screen.getByRole("link", { name: "Conversar sobre um projeto parecido" }),
+      screen.getByRole("link", {
+        name: "Tem um problema parecido? Vamos conversar.",
+      }),
     ).toBeVisible();
     expect(
       screen.getByRole("link", { name: "Ver outros cases" }),

app/cases/[slug]/page.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, within } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import { caseStudies, getRelatedServices, siteUrl } from "@/lib/site-content";
 import CasesPage from "../page";
 import CasePage, { generateMetadata, generateStaticParams } from "./page";
@@ -49,24 +49,34 @@ function readJsonLdEntities(container: HTMLElement): Record<string, unknown>[] {
   });
 }
 
-/** Nenhum link para /#contact nem para o GitHub; o contato é o WhatsApp com o contexto do case. */
-function expectContactAndNoDeadLinks(caseStudy: { title: string }) {
+/**
+ * Nenhum link para /#contact nem para o GitHub; o contato é o WhatsApp com o contexto do case.
+ * Case de cliente: "projeto parecido"; projeto de laboratório: "problema parecido".
+ */
+function expectContactAndNoDeadLinks(caseStudy: { id: string; title: string }) {
   const hrefs = screen
     .getAllByRole("link")
     .map((link) => link.getAttribute("href") ?? "");
   expect(hrefs).not.toContain("/#contact");
   expect(hrefs.some((href) => /github/i.test(href))).toBe(false);
 
+  const isClient = clientCaseIds.includes(caseStudy.id);
   const cta = screen.getByRole("link", {
-    name: "Conversar sobre um projeto parecido",
+    name: isClient
+      ? "Conversar sobre um projeto parecido"
+      : "Tem um problema parecido? Vamos conversar.",
   });
   const destination = new URL(cta.getAttribute("href") ?? "");
   expect(destination.origin).toBe("https://wa.me");
   expect(destination.searchParams.get("text")).toContain(
-    `um projeto parecido com o da ${caseStudy.title}`,
+    isClient
+      ? `um projeto parecido com o da ${caseStudy.title}`
+      : `um problema parecido com o do projeto ${caseStudy.title}`,
   );
   expect(cta).toHaveAttribute("target", "_blank");
   expect(cta).toHaveAttribute("rel", expect.stringContaining("noopener"));
+  // limão preenchido só no contato: o botão de play e os demais não o usam
+  expect(cta.className).toContain("bg-[var(--slash)]");
 }
 
 it("exposes the eight public cases, the two new client cases among them", async () => {
@@ -80,16 +90,16 @@ it("exposes the eight public cases, the two new client cases among them", async
   for (const id of ["sev-modaintima", "lavacao-047", "as-servicos"]) {
     const caseStudy = getCase(id);
     const url = `${siteUrl}/cases/${caseStudy.id}`;
-    const title = `${caseStudy.title}: ${caseStudy.subtitle}`;
+    const { metaTitle: title, metaDescription: description } = caseStudy;
     const metadata = await generateMetadata({
       params: Promise.resolve({ slug: caseStudy.id }),
     });
     expect(metadata).toMatchObject({
       title,
-      description: caseStudy.summary,
+      description,
       alternates: { canonical: url },
-      openGraph: { title, description: caseStudy.summary, url },
-      twitter: { title, description: caseStudy.summary },
+      openGraph: { title, description, url },
+      twitter: { title, description },
     });
     expect(metadata).not.toHaveProperty("keywords");
   }
@@ -101,7 +111,7 @@ it("renders a client case in the sales order, with media, contact and collapsed
 
   const heading = screen.getByRole("heading", { level: 1 });
   expect(heading).toHaveTextContent(caseStudy.headline);
-  expect(heading.nextElementSibling).toHaveTextContent(caseStudy.summary);
+  expect(isBefore(heading, screen.getByText(caseStudy.summary))).toBe(true);
   expect(screen.getByText(/Case de cliente/)).toBeVisible();
 
   const sectionNames = [
@@ -130,33 +140,28 @@ it("renders a client case in the sales order, with media, contact and collapsed
   // sem dado real, não há seção de resultado
   expect(screen.queryByRole("heading", { name: "Resultado" })).toBeNull();
 
-  // mídia: pôster e vídeo do computador e do celular
-  const desktopVideo = screen.getByLabelText(
-    `Vídeo do site ${caseStudy.title} no computador`,
+  // mídia: o pôster do computador e do celular com um botão de play; nenhum vídeo parado com controles
+  expect(container.querySelector("video")).toBeNull();
+  const desktopPlay = screen.getByRole("button", {
+    name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+  });
+  const mobilePlay = screen.getByRole("button", {
+    name: `Reproduzir o vídeo do site ${caseStudy.title} no celular`,
+  });
+  const mediaSection = screen
+    .getByRole("heading", { level: 2, name: "Como ficou" })
+    .closest("section");
+  expect(mediaSection?.querySelector(".ds-bframe")).toContainElement(
+    desktopPlay,
   );
-  const mobileVideo = screen.getByLabelText(
-    `Vídeo do site ${caseStudy.title} no celular`,
-  );
-  expect(desktopVideo).toHaveAttribute(
-    "poster",
-    `/videos/${caseStudy.id}/desktop.webp`,
-  );
-  expect(mobileVideo).toHaveAttribute(
-    "poster",
-    `/videos/${caseStudy.id}/mobile.webp`,
-  );
-  expect(
-    desktopVideo.querySelectorAll("source[src^='/videos/sev-modaintima/']"),
-  ).toHaveLength(2);
-  expect(container.querySelector(".ds-bframe")).toContainElement(desktopVideo);
-  expect(container.querySelector(".ds-phone")).toContainElement(mobileVideo);
+  expect(mediaSection?.querySelector(".ds-phone")).toContainElement(mobilePlay);
   expect(
     screen.getByRole("link", { name: `Abrir o site ${caseStudy.title}` }),
   ).toHaveAttribute("href", caseStudy.demoUrl);
 
   expectContactAndNoDeadLinks(caseStudy);
 
-  // detalhes técnicos: recolhidos, no fim da página
+  // detalhes técnicos: recolhidos, junto do conteúdo (logo depois do que foi feito), não numa faixa à parte
   const details = container.querySelector("details");
   if (!details) throw new Error("Missing technical details");
   expect(details).not.toHaveAttribute("open");
@@ -167,11 +172,16 @@ it("renders a client case in the sales order, with media, contact and collapsed
   for (const decision of caseStudy.decisions) {
     expect(within(details).getByText(decision)).not.toBeVisible();
   }
-  const contactHeading = sectionHeadings[sectionHeadings.length - 1];
-  expect(isBefore(contactHeading, details)).toBe(true);
+  const doneSection = sectionHeadings[2].closest("section");
+  expect(doneSection).toContainElement(details);
+  expect(isBefore(screen.getByText(caseStudy.deliveries[0]), details)).toBe(
+    true,
+  );
+  expect(isBefore(details, sectionHeadings[3])).toBe(true);
   expect(container.querySelectorAll("details")).toHaveLength(1);
-  const lastSection = container.querySelector("article")?.lastElementChild;
-  expect(lastSection).toContainElement(details);
+  expect(
+    container.querySelector("section[aria-label='Detalhes técnicos']"),
+  ).toBeNull();
 
   // o que saiu: desafio verificável, limites da evidência, fontes e commits
   for (const name of [
@@ -186,11 +196,14 @@ it("renders a client case in the sales order, with media, contact and collapsed
   expect(container.textContent).not.toMatch(/Commit:|[0-9a-f]{40}/);
 
   const graph = readJsonLdEntities(container);
-  expect(graph.map((node) => node["@type"])).toEqual(["BreadcrumbList"]);
+  expect(graph.map((node) => node["@type"])).toEqual([
+    "CreativeWork",
+    "BreadcrumbList",
+  ]);
   expect(JSON.stringify(graph)).not.toMatch(
     /Article|FAQPage|ProfessionalService|LocalBusiness/,
   );
-  const breadcrumb = graph[0] as {
+  const breadcrumb = graph[1] as {
     itemListElement: Array<{
       "@type": string;
       position: number;
@@ -216,7 +229,7 @@ it("renders a client case in the sales order, with media, contact and collapsed
   ]);
 
   const visibleBreadcrumb = screen.getByRole("navigation", {
-    name: "Breadcrumb",
+    name: "Trilha de navegação",
   });
   expect(
     within(visibleBreadcrumb)
@@ -253,7 +266,7 @@ it("renders the two new client cases from the portfolio data", async () => {
   }
 });
 
-it("labels a laboratory case, skips the media block and links its service", async () => {
+it("labels a laboratory case, skips the media block and shows its service as a card", async () => {
   const caseStudy = getCase("twins-lab");
   const { container } = await renderCase(caseStudy.id);
 
@@ -263,11 +276,12 @@ it("labels a laboratory case, skips the media block and links its service", asyn
   ).toBeVisible();
   expect(screen.queryByRole("heading", { name: "Como ficou" })).toBeNull();
   expect(container.querySelector("video")).toBeNull();
+  expect(container.querySelector(".ds-bframe")).toBeNull();
   expect(screen.queryByRole("link", { name: /^Abrir o site/ })).toBeNull();
   expect(screen.queryByText(/indispon/i)).toBeNull();
 
   const relatedLinks = screen.getAllByRole("link", {
-    name: /^Ver serviço relacionado:/,
+    name: /^Ver o serviço:/,
   });
   expect(relatedLinks.map((link) => link.getAttribute("href"))).toEqual(
     getRelatedServices(caseStudy.id).map(({ slug }) => `/servicos/${slug}`),
@@ -276,6 +290,24 @@ it("labels a laboratory case, skips the media block and links its service", asyn
   expectContactAndNoDeadLinks(caseStudy);
 });
 
+it("turns the contact of a laboratory case into the 'problema parecido' invitation", async () => {
+  for (const id of labCaseIds) {
+    const { unmount } = await renderCase(id);
+
+    expect(screen.queryByText("Quer um projeto parecido com este?")).toBeNull();
+    expect(
+      screen.queryByRole("link", {
+        name: "Conversar sobre um projeto parecido",
+      }),
+    ).toBeNull();
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Fale sobre o seu caso" }),
+    ).toBeVisible();
+    expectContactAndNoDeadLinks(getCase(id));
+    unmount();
+  }
+});
+
 it("shows the author's role and no site button for a client project without a public site", async () => {
   const caseStudy = getCase("as-servicos");
   expect(caseStudy.demoUrl).toBeNull();
@@ -289,7 +321,9 @@ it("shows the author's role and no site button for a client project without a pu
   expect(screen.queryByText(/indispon/i)).toBeNull();
   // a capa continua nas molduras
   expect(
-    screen.getByLabelText(`Vídeo do site ${caseStudy.title} no computador`),
+    screen.getByRole("button", {
+      name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+    }),
   ).toBeInTheDocument();
 });
 
@@ -327,26 +361,195 @@ it("shows the result section only when the case has real data", async () => {
   }
 });
 
-it("links every service related to a client case", async () => {
-  const caseStudy = getCase("sc-plus");
+it("shows at most two related services, as cards under the contact button", async () => {
+  // sev-modaintima tem quatro serviços ligados; só os dois primeiros viram cards
+  const sev = getCase("sev-modaintima");
+  const all = getRelatedServices(sev.id);
+  expect(all.length).toBeGreaterThan(2);
+  const { unmount } = await renderCase(sev.id);
+
+  const cards = screen.getAllByRole("link", { name: /^Ver o serviço:/ });
+  expect(cards).toHaveLength(2);
+  expect(cards.map((link) => link.getAttribute("href"))).toEqual(
+    all.slice(0, 2).map(({ slug }) => `/servicos/${slug}`),
+  );
+  for (const link of cards) {
+    const card = link.closest("article");
+    expect(card).toHaveClass("ds-card");
+    expect(
+      within(card as HTMLElement).getByRole("heading", { level: 3 }),
+    ).toBeVisible();
+  }
+  expect(
+    screen.queryByRole("link", { name: /^Ver serviço relacionado:/ }),
+  ).toBeNull();
+  const contact = screen.getByRole("link", {
+    name: "Conversar sobre um projeto parecido",
+  });
+  expect(isBefore(contact, cards[0])).toBe(true);
+  unmount();
+
+  // sc-plus tem dois; as-servicos, um
+  for (const [id, expected] of [
+    ["sc-plus", 2],
+    ["as-servicos", 1],
+  ] as const) {
+    const { unmount: unmountCase } = await renderCase(id);
+    const links = screen.getAllByRole("link", { name: /^Ver o serviço:/ });
+    expect(links).toHaveLength(expected);
+    expect(links.map((link) => link.getAttribute("href"))).toEqual(
+      getRelatedServices(id)
+        .slice(0, 2)
+        .map(({ slug }) => `/servicos/${slug}`),
+    );
+    expectContactAndNoDeadLinks(getCase(id));
+    unmountCase();
+  }
+});
+
+it("writes the CreativeWork of a client case with creator, client and keywords", async () => {
+  const caseStudy = getCase("lavacao-047");
   const { container } = await renderCase(caseStudy.id);
 
-  const relatedLinks = screen.getAllByRole("link", {
-    name: /^Ver serviço relacionado:/,
-  });
-  expect(
-    relatedLinks
-      .map((link) => link.getAttribute("href"))
-      .sort((a, b) => (a ?? "").localeCompare(b ?? "")),
-  ).toEqual(
-    getRelatedServices(caseStudy.id)
-      .map(({ slug }) => `/servicos/${slug}`)
-      .sort(),
+  const work = readJsonLdEntities(container).find(
+    (node) => node["@type"] === "CreativeWork",
   );
-  expectContactAndNoDeadLinks(caseStudy);
-  expect(readJsonLdEntities(container).map((node) => node["@type"])).toEqual([
-    "BreadcrumbList",
-  ]);
+  expect(work).toEqual({
+    "@type": "CreativeWork",
+    "@id": `${siteUrl}/cases/lavacao-047#creative-work`,
+    name: "Lavação 047: Site e painel para lavação automotiva",
+    description: caseStudy.metaDescription,
+    url: `${siteUrl}/cases/lavacao-047`,
+    image: `${siteUrl}/cases/lavacao-047/opengraph-image/lavacao-047`,
+    inLanguage: "pt-BR",
+    creator: { "@id": `${siteUrl}/#person` },
+    sourceOrganization: {
+      "@type": "Organization",
+      name: "Lavação 047",
+      url: "https://landing-page-lavacao047.vercel.app",
+    },
+    keywords: caseStudy.stack.join(", "),
+  });
+});
+
+it("writes the CreativeWork of a laboratory case without a client", async () => {
+  const caseStudy = getCase("twins-lab");
+  const { container } = await renderCase(caseStudy.id);
+
+  const work = readJsonLdEntities(container).find(
+    (node) => node["@type"] === "CreativeWork",
+  );
+  expect(work).toMatchObject({
+    name: "Twins Lab: Painel ao vivo de um reator simulado",
+    url: `${siteUrl}/cases/twins-lab`,
+    creator: { "@id": `${siteUrl}/#person` },
+    keywords: "Next.js, TypeScript, NextAuth, MongoDB, SSE",
+  });
+  expect(work).not.toHaveProperty("sourceOrganization");
+});
+
+it("puts the project cover next to the title, and below it on a phone, in a browser frame", async () => {
+  const caseStudy = getCase("sev-modaintima");
+  const { container } = await renderCase(caseStudy.id);
+
+  const hero = container.querySelector("section");
+  if (!hero) throw new Error("Missing hero");
+  const frame = hero.querySelector(".ds-bframe");
+  if (!frame) throw new Error("Missing hero frame");
+  expect(frame.querySelector("img")).toHaveAttribute(
+    "alt",
+    `Captura de tela do site ${caseStudy.title}`,
+  );
+  expect(frame.querySelector(".ds-bframe-url")).toHaveTextContent(
+    "sevmodaintima.com.br",
+  );
+  // a capa abre a página: carrega antes das demais imagens
+  expect(frame.querySelector("img")).not.toHaveAttribute("loading", "lazy");
+
+  // ordem do documento (a do celular): título, mídia, resumo
+  const heading = screen.getByRole("heading", { level: 1 });
+  const summary = screen.getByText(caseStudy.summary);
+  expect(hero).toContainElement(summary);
+  expect(isBefore(heading, frame)).toBe(true);
+  expect(isBefore(frame, summary)).toBe(true);
+  // no computador: duas colunas, texto à esquerda e mídia à direita
+  const grid = frame.closest(".grid");
+  expect(grid?.className).toContain("lg:grid-cols-[");
+  expect(frame.parentElement?.className).toContain("lg:col-start-2");
+  expect(heading.parentElement?.className).toContain("lg:col-start-1");
+});
+
+it("keeps the hero in one column when the case has no capture", async () => {
+  const { container } = await renderCase("twins-lab");
+
+  const hero = container.querySelector("section");
+  expect(hero?.querySelector(".ds-bframe")).toBeNull();
+  expect(hero?.querySelector(".grid")).toBeNull();
+});
+
+it("shows the optional facts only when they are filled in", async () => {
+  const caseStudy = getCase("lavacao-047");
+  const empty = await renderCase(caseStudy.id);
+  expect(screen.queryByRole("list", { name: "Fatos do projeto" })).toBeNull();
+  empty.unmount();
+
+  caseStudy.facts = ["Fato de teste um", "Fato de teste dois"];
+  try {
+    await renderCase(caseStudy.id);
+    const list = screen.getByRole("list", { name: "Fatos do projeto" });
+    expect(within(list).getAllByRole("listitem")).toHaveLength(2);
+    expect(within(list).getByText("Fato de teste um")).toBeVisible();
+    expect(isBefore(screen.getByText(caseStudy.summary), list)).toBe(true);
+  } finally {
+    delete caseStudy.facts;
+  }
+});
+
+it("starts the video only when the visitor presses play, and moves focus to it", async () => {
+  const caseStudy = getCase("sev-modaintima");
+  const { container } = await renderCase(caseStudy.id);
+
+  const play = screen.getByRole("button", {
+    name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+  });
+  expect(play).toBeVisible();
+  expect(play.className).not.toContain("--slash");
+  expect(container.querySelector("video")).toBeNull();
+
+  fireEvent.click(play);
+
+  const video = screen.getByLabelText(
+    `Vídeo do site ${caseStudy.title} no computador`,
+  );
+  expect(video.tagName).toBe("VIDEO");
+  expect(video).toHaveAttribute(
+    "poster",
+    `/videos/${caseStudy.id}/desktop.webp`,
+  );
+  expect(video).toHaveAttribute("controls");
+  expect(video).toHaveFocus();
+  expect(
+    video.querySelectorAll("source[src^='/videos/sev-modaintima/']"),
+  ).toHaveLength(2);
+  expect(video.closest(".ds-bframe")).not.toBeNull();
+  expect(
+    screen.queryByRole("button", {
+      name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+    }),
+  ).toBeNull();
+  // o celular continua com o pôster até a pessoa tocar nele
+  expect(
+    screen.getByRole("button", {
+      name: `Reproduzir o vídeo do site ${caseStudy.title} no celular`,
+    }),
+  ).toBeVisible();
+});
+
+it("gives the case page the same shell as the home, with no narrow max-width", async () => {
+  const { container } = await renderCase("sev-modaintima");
+  for (const shell of container.querySelectorAll(".ds-section-shell")) {
+    expect(shell.className).not.toMatch(/max-w-/);
+  }
 });
 
 it("lists client cases with a cover first, then the laboratory, and keeps the schema aligned", () => {
@@ -409,7 +612,7 @@ it("lists client cases with a cover first, then the laboratory, and keeps the sc
   expect(new URL(cta.getAttribute("href") ?? "").origin).toBe("https://wa.me");
 
   const visibleBreadcrumb = screen.getByRole("navigation", {
-    name: "Breadcrumb",
+    name: "Trilha de navegação",
   });
   expect(
     within(visibleBreadcrumb)

app/cases/[slug]/page.tsx

@@ -1,18 +1,15 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 import { notFound } from "next/navigation";
-import { Breadcrumb } from "@/app/components/Breadcrumb";
-import {
-  pageTop,
-  primaryButton,
-  secondaryButtonDark,
-} from "@/app/components/button-styles";
-import WhatsAppLink from "@/app/components/WhatsAppLink";
 import { safeJsonLd } from "@/lib/jsonld";
-import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
+import {
+  buildBreadcrumbList,
+  buildCaseJsonLd,
+  buildPageSocialMetadata,
+} from "@/lib/seo";
 import { caseStudies, isClientCase, siteUrl } from "@/lib/site-content";
+import { CaseContactSection } from "../_components/CaseContactSection";
+import { CaseHero } from "../_components/CaseHero";
 import { CaseMediaSection } from "../_components/CaseMediaSection";
-import { CaseRelatedServices } from "../_components/CaseRelatedServices";
 import { CaseResultSection } from "../_components/CaseResultSection";
 
 interface CasePageProps {
@@ -32,14 +29,13 @@ export async function generateMetadata({
   if (!caseStudy) return { title: "Case não encontrado" };
 
   const url = `${siteUrl}/cases/${caseStudy.id}`;
-  const title = `${caseStudy.title}: ${caseStudy.subtitle}`;
   return {
-    title,
-    description: caseStudy.summary,
+    title: caseStudy.metaTitle,
+    description: caseStudy.metaDescription,
     ...buildPageSocialMetadata({
       url,
-      title,
-      description: caseStudy.summary,
+      title: caseStudy.metaTitle,
+      description: caseStudy.metaDescription,
       type: "article",
     }),
   };
@@ -55,6 +51,7 @@ export default async function CasePage({ params }: CasePageProps) {
   const jsonLd = {
     "@context": "https://schema.org",
     "@graph": [
+      buildCaseJsonLd(caseStudy),
       buildBreadcrumbList(pageUrl, [
         ["Início", siteUrl],
         ["Cases", `${siteUrl}/cases`],
@@ -67,32 +64,12 @@ export default async function CasePage({ params }: CasePageProps) {
     <main>
       <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
       <article>
-        <section className={`ds-section ds-section-dark ${pageTop}`}>
-          <div className="ds-section-shell max-w-[960px]">
-            <Breadcrumb
-              items={[
-                { label: "Início", href: "/" },
-                { label: "Cases", href: "/cases" },
-                { label: caseStudy.title, href: `/cases/${caseStudy.id}` },
-              ]}
-            />
-            <p className="ds-eyebrow">
-              {isClient ? "Case de cliente" : "Projeto de laboratório"} ·{" "}
-              {caseStudy.title}
-            </p>
-            <h1 className="ds-section-title text-balance text-white">
-              {caseStudy.headline}
-            </h1>
-            <p className="ds-copy max-w-[68ch] !text-[rgba(255,255,255,.78)]">
-              {caseStudy.summary}
-            </p>
-          </div>
-        </section>
+        <CaseHero caseStudy={caseStudy} isClient={isClient} />
 
         <section className="ds-section" aria-labelledby="case-context">
-          <div className="ds-section-shell max-w-[960px]">
+          <div className="ds-section-shell">
             <div className="ds-grid-2 items-start">
-              <div>
+              <div className="max-w-[68ch]">
                 <h2 id="case-context" className="ds-card-title !mt-0">
                   {isClient
                     ? "O cliente e o contexto"
@@ -108,7 +85,7 @@ export default async function CasePage({ params }: CasePageProps) {
                   </p>
                 ) : null}
               </div>
-              <div>
+              <div className="max-w-[68ch]">
                 <h2 id="case-problem" className="ds-card-title !mt-0">
                   O problema
                 </h2>
@@ -119,15 +96,41 @@ export default async function CasePage({ params }: CasePageProps) {
         </section>
 
         <section className="ds-section" aria-labelledby="case-done">
-          <div className="ds-section-shell max-w-[960px]">
-            <h2 id="case-done" className="ds-card-title !mt-0">
-              O que foi feito
-            </h2>
-            <ul className="ds-list space-y-sp-3 pl-[1.15rem]">
-              {caseStudy.deliveries.map((delivery) => (
-                <li key={delivery}>{delivery}</li>
-              ))}
-            </ul>
+          <div className="ds-section-shell">
+            <div className="max-w-[860px]">
+              <h2 id="case-done" className="ds-card-title !mt-0">
+                O que foi feito
+              </h2>
+              <ul className="ds-list space-y-sp-3 pl-[1.15rem]">
+                {caseStudy.deliveries.map((delivery) => (
+                  <li key={delivery}>{delivery}</li>
+                ))}
+              </ul>
+              <details className="mt-sp-8 border border-[var(--border)] bg-white/70 p-sp-5 md:p-sp-6">
+                <summary className="cursor-pointer py-sp-2 text-base font-semibold leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--ink)]">
+                  Detalhes técnicos
+                </summary>
+                <div className="max-w-[80ch]">
+                  <p className="ds-kicker mt-sp-5">Tecnologias</p>
+                  <ul
+                    className="ds-tags !mt-sp-3 !pt-0"
+                    aria-label="Tecnologias do projeto"
+                  >
+                    {caseStudy.stack.map((item) => (
+                      <li key={item} className="ds-tag !whitespace-normal">
+                        {item}
+                      </li>
+                    ))}
+                  </ul>
+                  <p className="ds-kicker mt-sp-6">Decisões técnicas</p>
+                  <ul className="ds-list !mt-sp-3 space-y-sp-2">
+                    {caseStudy.decisions.map((decision) => (
+                      <li key={decision}>{decision}</li>
+                    ))}
+                  </ul>
+                </div>
+              </details>
+            </div>
           </div>
         </section>
 
@@ -135,62 +138,7 @@ export default async function CasePage({ params }: CasePageProps) {
 
         <CaseResultSection result={caseStudy.result} />
 
-        <section
-          className="ds-section ds-section-dark"
-          aria-labelledby="case-contact"
-        >
-          <div className="ds-section-shell max-w-[960px]">
-            <h2 id="case-contact" className="ds-card-title !mt-0 text-white">
-              Quer um projeto parecido com este?
-            </h2>
-            <p className="ds-copy max-w-[60ch]">
-              Conte o que você precisa. A conversa começa direto no WhatsApp,
-              sem formulário.
-            </p>
-            <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
-              <WhatsAppLink
-                service={`um projeto parecido com o da ${caseStudy.title}`}
-                placement="case_detail"
-                className={primaryButton}
-              >
-                Conversar sobre um projeto parecido
-              </WhatsAppLink>
-              <Link href="/cases" className={secondaryButtonDark}>
-                Ver outros cases
-              </Link>
-            </div>
-            <CaseRelatedServices caseId={caseStudy.id} />
-          </div>
-        </section>
-
-        <section className="ds-section" aria-label="Detalhes técnicos">
-          <div className="ds-section-shell max-w-[960px]">
-            <details className="border border-[var(--border)] bg-white/70 p-sp-5 md:p-sp-6">
-              <summary className="cursor-pointer py-sp-2 text-base font-semibold leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--ink)]">
-                Detalhes técnicos
-              </summary>
-              <div className="max-w-[80ch]">
-                <p className="ds-kicker mt-sp-5">Tecnologias</p>
-                <ul
-                  className="ds-tags !mt-sp-3 !pt-0"
-                  aria-label="Tecnologias do projeto"
-                >
-                  {caseStudy.stack.map((item) => (
-                    <li key={item} className="ds-tag !whitespace-normal">
-                      {item}
-                    </li>
-                  ))}
-                </ul>
-                <p className="ds-kicker mt-sp-6">Decisões técnicas</p>
-                <ul className="ds-list !mt-sp-3 space-y-sp-2">
-                  {caseStudy.decisions.map((decision) => (
-                    <li key={decision}>{decision}</li>
-                  ))}
-                </ul>
-              </div>
-            </details>
-          </div>
-        </section>
+        <CaseContactSection caseStudy={caseStudy} isClient={isClient} />
       </article>
     </main>
   );

app/cases/_components/CaseContactSection.paths.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from "@testing-library/react";
+import { getRelatedServices } from "@/lib/site-content";
+import { CaseContactSection } from "./CaseContactSection";
+
+/**
+ * Testes de caminhos-base de CaseContactSection: o convite de um case de cliente ("projeto parecido") e o de
+ * um projeto de laboratório ("problema parecido"), o link para a lista de cases e os serviços ligados.
+ */
+
+const sev = { id: "sev-modaintima", title: "SEV Moda Íntima" };
+const nutri = { id: "nutriscan", title: "NutriScan" };
+
+function messageOf(link: HTMLElement) {
+  return new URL(link.getAttribute("href") ?? "").searchParams.get("text");
+}
+
+describe("CaseContactSection", () => {
+  it("path: client case -> 'projeto parecido' invitation, WhatsApp with the case title, services listed", () => {
+    render(<CaseContactSection caseStudy={sev} isClient />);
+
+    expect(
+      screen.getByRole("heading", {
+        level: 2,
+        name: "Quer um projeto parecido com este?",
+      }),
+    ).toBeVisible();
+    const cta = screen.getByRole("link", {
+      name: "Conversar sobre um projeto parecido",
+    });
+    expect(cta).toHaveAttribute("target", "_blank");
+    expect(messageOf(cta)).toContain(
+      `Quero conversar sobre um projeto parecido com o da ${sev.title}.`,
+    );
+    expect(getRelatedServices(sev.id).length).toBeGreaterThan(0);
+    expect(
+      screen.getAllByRole("link", { name: /^Ver o serviço:/ }).length,
+    ).toBeGreaterThan(0);
+    expect(
+      screen.getByRole("link", { name: "Ver outros cases" }),
+    ).toHaveAttribute("href", "/cases");
+  });
+
+  it("path: laboratory case -> 'problema parecido' invitation and no mention of a similar project", () => {
+    render(<CaseContactSection caseStudy={nutri} isClient={false} />);
+
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Fale sobre o seu caso" }),
+    ).toBeVisible();
+    const cta = screen.getByRole("link", {
+      name: "Tem um problema parecido? Vamos conversar.",
+    });
+    expect(messageOf(cta)).toContain(
+      `Quero conversar sobre um problema parecido com o do projeto ${nutri.title}.`,
+    );
+    expect(
+      screen.queryByRole("link", {
+        name: "Conversar sobre um projeto parecido",
+      }),
+    ).toBeNull();
+    // o NutriScan não é citado por nenhum serviço: sem cartões, o convite continua
+    expect(getRelatedServices(nutri.id)).toHaveLength(0);
+    expect(screen.queryByRole("link", { name: /^Ver o serviço:/ })).toBeNull();
+    expect(
+      screen.getByRole("link", { name: "Ver outros cases" }),
+    ).toBeVisible();
+  });
+});

app/cases/_components/CaseContactSection.tsx

@@ -0,0 +1,64 @@
+import Link from "next/link";
+import {
+  primaryButton,
+  secondaryButtonDark,
+} from "@/app/components/button-styles";
+import WhatsAppLink from "@/app/components/WhatsAppLink";
+import type { CaseStudyContent } from "@/lib/site-content";
+import { CaseRelatedServices } from "./CaseRelatedServices";
+
+/** Textos do convite ao contato: o case de cliente fala de um projeto parecido; o de laboratório, de um problema parecido. */
+const contactCopy = {
+  client: {
+    title: "Quer um projeto parecido com este?",
+    action: "Conversar sobre um projeto parecido",
+    subject: (title: string) => `um projeto parecido com o da ${title}`,
+  },
+  lab: {
+    title: "Fale sobre o seu caso",
+    action: "Tem um problema parecido? Vamos conversar.",
+    subject: (title: string) =>
+      `um problema parecido com o do projeto ${title}`,
+  },
+} as const;
+
+/** Fecho do case: convite ao WhatsApp, volta para a lista de cases e os serviços ligados ao projeto. */
+export function CaseContactSection({
+  caseStudy,
+  isClient,
+}: {
+  caseStudy: Pick<CaseStudyContent, "id" | "title">;
+  isClient: boolean;
+}) {
+  const copy = contactCopy[isClient ? "client" : "lab"];
+
+  return (
+    <section
+      className="ds-section ds-section-dark"
+      aria-labelledby="case-contact"
+    >
+      <div className="ds-section-shell">
+        <h2 id="case-contact" className="ds-card-title !mt-0 text-white">
+          {copy.title}
+        </h2>
+        <p className="ds-copy max-w-[60ch]">
+          Conte o que você precisa. A conversa começa direto no WhatsApp, sem
+          formulário.
+        </p>
+        <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
+          <WhatsAppLink
+            service={copy.subject(caseStudy.title)}
+            placement="case_detail"
+            className={primaryButton}
+          >
+            {copy.action}
+          </WhatsAppLink>
+          <Link href="/cases" className={secondaryButtonDark}>
+            Ver outros cases
+          </Link>
+        </div>
+        <CaseRelatedServices caseId={caseStudy.id} />
+      </div>
+    </section>
+  );
+}

app/cases/_components/CaseCover.tsx

@@ -4,7 +4,6 @@ import {
   displayUrl,
 } from "@/app/components/showcase/BrowserFrame";
 import { getCaseMedia } from "./case-media";
-import "../../components/showcase/showcase.css";
 
 /** Capa do case: o pôster do site dentro de uma moldura de navegador. Sem captura gravada, não mostra nada. */
 export function CaseCover({

app/cases/_components/CaseCoverLink.paths.test.tsx

@@ -0,0 +1,102 @@
+import { render, screen } from "@testing-library/react";
+import { getShowcaseAssets } from "@/lib/project-showcase";
+import { CaseCoverLink } from "./CaseCoverLink";
+import { getCaseMedia } from "./case-media";
+
+/**
+ * Testes de caminhos-base de CaseCoverLink: sem captura (nada), com captura (link fora da leitura e do teclado,
+ * com a capa dentro), os valores padrão de `sizes`, `priority` e `prefetch`, e os valores dados.
+ */
+
+jest.mock("./case-media", () => ({ getCaseMedia: jest.fn() }));
+jest.mock("next/link", () => ({
+  __esModule: true,
+  default: ({
+    children,
+    prefetch,
+    ...props
+  }: { children?: React.ReactNode; prefetch?: boolean | null } & Record<
+    string,
+    unknown
+  >) => (
+    <a data-prefetch={String(prefetch)} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+const mockedGetCaseMedia = jest.mocked(getCaseMedia);
+const props = {
+  id: "sev-modaintima",
+  title: "SEV Moda Íntima",
+  demoUrl: "https://sevmodaintima.com.br",
+};
+
+afterEach(() => {
+  mockedGetCaseMedia.mockReset();
+});
+
+describe("CaseCoverLink", () => {
+  it("path: no desktop capture -> renders nothing, not even the link", () => {
+    mockedGetCaseMedia.mockReturnValue(undefined);
+    const { container } = render(<CaseCoverLink {...props} />);
+
+    expect(container).toBeEmptyDOMElement();
+    expect(mockedGetCaseMedia).toHaveBeenCalledWith(props.id, "desktop");
+  });
+
+  it("path: capture found -> a link to the case, out of reading order and tab order, around the cover", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    const { container } = render(<CaseCoverLink {...props} />);
+
+    const link = container.querySelector("a");
+    expect(link).toHaveAttribute("href", `/cases/${props.id}`);
+    expect(link).toHaveAttribute("aria-hidden", "true");
+    expect(link).toHaveAttribute("tabindex", "-1");
+    expect(link?.querySelector(".ds-bframe-url")).toHaveTextContent(
+      "sevmodaintima.com.br",
+    );
+    expect(
+      screen.getByAltText(`Captura de tela do site ${props.title}`),
+    ).toBeInTheDocument();
+  });
+
+  it("path: sizes, priority and prefetch omitted -> default sizes, lazy image and the link's own prefetch", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    const { container } = render(<CaseCoverLink {...props} />);
+
+    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
+    expect(image).toHaveAttribute("sizes", "(min-width: 1024px) 560px, 100vw");
+    expect(image).toHaveAttribute("loading", "lazy");
+    expect(container.querySelector("a")).toHaveAttribute(
+      "data-prefetch",
+      "undefined",
+    );
+  });
+
+  it("path: sizes, priority and prefetch given -> all of them are used", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    const { container } = render(
+      <CaseCoverLink {...props} sizes="320px" priority prefetch={false} />,
+    );
+
+    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
+    expect(image).toHaveAttribute("sizes", "320px");
+    expect(image).not.toHaveAttribute("loading", "lazy");
+    expect(container.querySelector("a")).toHaveAttribute(
+      "data-prefetch",
+      "false",
+    );
+  });
+
+  it("path: no demo address -> the browser bar falls back to the project title", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    const { container } = render(
+      <CaseCoverLink id={props.id} title={props.title} demoUrl={null} />,
+    );
+
+    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
+      props.title,
+    );
+  });
+});

app/cases/_components/CaseCoverLink.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { CaseCover } from "./CaseCover";
+import { getCaseMedia } from "./case-media";
+
+/**
+ * Capa do case dentro de um cartão: a imagem leva ao case, mas fica fora da leitura e da ordem de tabulação,
+ * porque o link de texto do mesmo cartão já leva ao mesmo lugar. Sem captura gravada, não mostra nada.
+ */
+export function CaseCoverLink({
+  id,
+  title,
+  demoUrl,
+  sizes = "(min-width: 1024px) 560px, 100vw",
+  priority = false,
+  prefetch,
+}: {
+  id: string;
+  title: string;
+  demoUrl?: string | null;
+  sizes?: string;
+  priority?: boolean;
+  prefetch?: boolean;
+}) {
+  if (!getCaseMedia(id, "desktop")) return null;
+
+  return (
+    <Link
+      href={`/cases/${id}`}
+      aria-hidden="true"
+      tabIndex={-1}
+      prefetch={prefetch}
+      className="mb-sp-5 block"
+    >
+      <CaseCover
+        id={id}
+        title={title}
+        demoUrl={demoUrl}
+        sizes={sizes}
+        priority={priority}
+      />
+    </Link>
+  );
+}

app/cases/_components/CaseHero.paths.test.tsx

@@ -0,0 +1,130 @@
+import { render, screen } from "@testing-library/react";
+import { getShowcaseAssets } from "@/lib/project-showcase";
+import { caseStudies } from "@/lib/site-content";
+import { CaseHero } from "./CaseHero";
+import { getCaseMedia } from "./case-media";
+
+/**
+ * Testes de caminhos-base de CaseHero e dos fatos do projeto: com e sem captura gravada, case de cliente e de
+ * laboratório, e a lista de fatos ausente, vazia ou preenchida. A existência da captura é simulada em getCaseMedia.
+ */
+
+jest.mock("./case-media", () => ({ getCaseMedia: jest.fn() }));
+
+const mockedGetCaseMedia = jest.mocked(getCaseMedia);
+
+function getCase(id: string) {
+  const caseStudy = caseStudies.find((item) => item.id === id);
+  if (!caseStudy) throw new Error(`Missing case ${id}`);
+  return caseStudy;
+}
+
+const client = getCase("sev-modaintima");
+const lab = getCase("twins-lab");
+
+function withCapture(has: boolean) {
+  mockedGetCaseMedia.mockImplementation((id, device) =>
+    has ? getShowcaseAssets(id, device) : undefined,
+  );
+}
+
+afterEach(() => {
+  mockedGetCaseMedia.mockReset();
+});
+
+describe("CaseHero: captura gravada e tipo de case", () => {
+  it("path: client case with a capture -> two columns, the cover on the right, the client eyebrow", () => {
+    withCapture(true);
+    const { container } = render(<CaseHero caseStudy={client} isClient />);
+
+    expect(container.querySelector(".ds-section-shell")).toHaveClass("grid");
+    expect(container.querySelector(".ds-bframe")).toBeInTheDocument();
+    expect(screen.getByText(/Case de cliente/)).toBeVisible();
+    expect(
+      screen.getByRole("heading", { level: 1, name: client.headline }),
+    ).toBeVisible();
+  });
+
+  it("path: client case without a capture -> one column and no cover", () => {
+    withCapture(false);
+    const { container } = render(<CaseHero caseStudy={client} isClient />);
+
+    expect(container.querySelector(".ds-section-shell")).not.toHaveClass(
+      "grid",
+    );
+    expect(container.querySelector(".ds-bframe")).toBeNull();
+    expect(screen.getByText(client.summary)).toBeVisible();
+  });
+
+  it("path: laboratory case with a capture -> the cover shows, with the laboratory eyebrow", () => {
+    withCapture(true);
+    const { container } = render(<CaseHero caseStudy={lab} isClient={false} />);
+
+    expect(container.querySelector(".ds-bframe")).toBeInTheDocument();
+    expect(screen.getByText(/Projeto de laboratório/)).toBeVisible();
+    expect(screen.queryByText(/Case de cliente/)).toBeNull();
+  });
+
+  it("path: laboratory case without a capture -> one column, laboratory eyebrow, title and summary", () => {
+    withCapture(false);
+    const { container } = render(<CaseHero caseStudy={lab} isClient={false} />);
+
+    expect(container.querySelector(".ds-section-shell")).not.toHaveClass(
+      "grid",
+    );
+    expect(container.querySelector(".ds-bframe")).toBeNull();
+    expect(screen.getByText(/Projeto de laboratório/)).toBeVisible();
+    expect(screen.getByText(lab.summary)).toBeVisible();
+  });
+
+  it("path: breadcrumb -> Início, Cases and the case itself as the current page", () => {
+    withCapture(false);
+    render(<CaseHero caseStudy={client} isClient />);
+
+    const links = screen.getAllByRole("link");
+    expect(links.map((link) => link.getAttribute("href"))).toEqual([
+      "/",
+      "/cases",
+      `/cases/${client.id}`,
+    ]);
+    expect(links[2]).toHaveAttribute("aria-current", "page");
+  });
+});
+
+describe("CaseHero: fatos do projeto", () => {
+  const withFacts = (facts: string[] | undefined) => ({
+    ...client,
+    facts,
+  });
+
+  it("path: no facts field -> no list", () => {
+    withCapture(false);
+    render(<CaseHero caseStudy={withFacts(undefined)} isClient />);
+
+    expect(screen.queryByRole("list", { name: "Fatos do projeto" })).toBeNull();
+  });
+
+  it("path: empty facts list -> no list", () => {
+    withCapture(false);
+    render(<CaseHero caseStudy={withFacts([])} isClient />);
+
+    expect(screen.queryByRole("list", { name: "Fatos do projeto" })).toBeNull();
+  });
+
+  it("path: filled facts -> one item each, after the summary", () => {
+    withCapture(false);
+    render(
+      <CaseHero
+        caseStudy={withFacts(["No ar desde 2025", "Dois painéis"])}
+        isClient
+      />,
+    );
+
+    const list = screen.getByRole("list", { name: "Fatos do projeto" });
+    expect(list.querySelectorAll("li")).toHaveLength(2);
+    expect(
+      screen.getByText(client.summary).compareDocumentPosition(list) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+});

app/cases/_components/CaseHero.tsx

@@ -0,0 +1,86 @@
+import { Breadcrumb } from "@/app/components/Breadcrumb";
+import { pageTop } from "@/app/components/button-styles";
+import type { CaseStudyContent } from "@/lib/site-content";
+import { CaseCover } from "./CaseCover";
+import { getCaseMedia } from "./case-media";
+
+/** Fatos verificáveis do projeto. Sem nenhum, a lista não aparece. */
+function CaseFacts({ facts }: { facts?: string[] }) {
+  if (!facts?.length) return null;
+
+  return (
+    <ul
+      className="mt-sp-5 flex flex-wrap gap-x-sp-6 gap-y-sp-2 text-[15px] leading-6 text-white/80"
+      aria-label="Fatos do projeto"
+    >
+      {facts.map((fact) => (
+        <li key={fact}>{fact}</li>
+      ))}
+    </ul>
+  );
+}
+
+/** Pôster do site na coluna da direita (no celular, logo abaixo do título). */
+function CaseHeroCover({ caseStudy }: { caseStudy: CaseStudyContent }) {
+  return (
+    <div className="min-w-0 lg:col-start-2 lg:row-span-2 lg:row-start-1">
+      <CaseCover
+        id={caseStudy.id}
+        title={caseStudy.title}
+        demoUrl={caseStudy.demoUrl}
+        sizes="(min-width: 1024px) 560px, 100vw"
+        priority
+      />
+    </div>
+  );
+}
+
+/**
+ * Topo do case: trilha, título, resumo e fatos. Com captura gravada, o texto fica à esquerda e o pôster à direita;
+ * no celular a mídia vem logo abaixo do título.
+ */
+export function CaseHero({
+  caseStudy,
+  isClient,
+}: {
+  caseStudy: CaseStudyContent;
+  isClient: boolean;
+}) {
+  const hasMedia = Boolean(getCaseMedia(caseStudy.id, "desktop"));
+
+  return (
+    <section className={`ds-section ds-section-dark ${pageTop}`}>
+      <div
+        className={`ds-section-shell ${
+          hasMedia
+            ? "grid items-center gap-y-sp-6 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] lg:gap-x-sp-16 lg:gap-y-0"
+            : ""
+        }`}
+      >
+        <div className="max-w-[860px] lg:col-start-1 lg:row-start-1 lg:self-end">
+          <Breadcrumb
+            items={[
+              { label: "Início", href: "/" },
+              { label: "Cases", href: "/cases" },
+              { label: caseStudy.title, href: `/cases/${caseStudy.id}` },
+            ]}
+          />
+          <p className="ds-eyebrow">
+            {isClient ? "Case de cliente" : "Projeto de laboratório"} ·{" "}
+            {caseStudy.title}
+          </p>
+          <h1 className="ds-section-title text-balance text-white">
+            {caseStudy.headline}
+          </h1>
+        </div>
+        {hasMedia ? <CaseHeroCover caseStudy={caseStudy} /> : null}
+        <div className="max-w-[68ch] lg:col-start-1 lg:row-start-2 lg:self-start">
+          <p className="ds-copy !text-[rgba(255,255,255,.78)]">
+            {caseStudy.summary}
+          </p>
+          <CaseFacts facts={caseStudy.facts} />
+        </div>
+      </div>
+    </section>
+  );
+}

app/cases/_components/CaseMedia.paths.test.tsx

@@ -1,10 +1,11 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { getShowcaseAssets } from "@/lib/project-showcase";
 import { CaseMedia } from "./CaseMedia";
 import { getCaseMedia } from "./case-media";
 
 /**
  * Testes de caminhos-base de CaseMedia: com computador e celular, só um dos dois, ou nenhum.
+ * Cada quadro mostra o pôster com um botão de play; o vídeo só aparece depois do clique.
  * A existência dos arquivos em disco é simulada em getCaseMedia, para o teste não depender de public/.
  */
 
@@ -23,8 +24,10 @@ const props = {
   title: "SEV Moda Íntima",
   demoUrl: "https://sevmodaintima.com.br",
 };
-const desktopLabel = `Vídeo do site ${props.title} no computador`;
-const mobileLabel = `Vídeo do site ${props.title} no celular`;
+const desktopPlay = `Reproduzir o vídeo do site ${props.title} no computador`;
+const mobilePlay = `Reproduzir o vídeo do site ${props.title} no celular`;
+const desktopVideo = `Vídeo do site ${props.title} no computador`;
+const mobileVideo = `Vídeo do site ${props.title} no celular`;
 
 afterEach(() => {
   mockedGetCaseMedia.mockReset();
@@ -36,10 +39,10 @@ describe("CaseMedia", () => {
     const { container } = render(<CaseMedia {...props} />);
 
     expect(container.querySelector(".ds-bframe")).toContainElement(
-      screen.getByLabelText(desktopLabel),
+      screen.getByRole("button", { name: desktopPlay }),
     );
     expect(container.querySelector(".ds-phone")).toContainElement(
-      screen.getByLabelText(mobileLabel),
+      screen.getByRole("button", { name: mobilePlay }),
     );
     expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
       "sevmodaintima.com.br",
@@ -63,8 +66,10 @@ describe("CaseMedia", () => {
     withCaptures(["mobile"]);
     const { container } = render(<CaseMedia {...props} />);
 
-    expect(screen.getByLabelText(mobileLabel)).toBeInTheDocument();
-    expect(screen.queryByLabelText(desktopLabel)).toBeNull();
+    expect(
+      screen.getByRole("button", { name: mobilePlay }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: desktopPlay })).toBeNull();
     expect(container.querySelector(".ds-bframe")).toBeNull();
     expect(container.querySelector(".ds-phone")).not.toBeNull();
     expect(screen.queryByText(/no computador\./)).toBeNull();
@@ -74,13 +79,47 @@ describe("CaseMedia", () => {
     withCaptures(["desktop"]);
     const { container } = render(<CaseMedia {...props} />);
 
-    expect(screen.getByLabelText(desktopLabel)).toBeInTheDocument();
-    expect(screen.queryByLabelText(mobileLabel)).toBeNull();
+    expect(
+      screen.getByRole("button", { name: desktopPlay }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: mobilePlay })).toBeNull();
     expect(container.querySelector(".ds-phone")).toBeNull();
     expect(container.querySelector(".ds-bframe")).not.toBeNull();
     expect(screen.queryByText("No celular.")).toBeNull();
   });
 
+  it("path: both captures -> no video until play, then only the pressed frame plays", () => {
+    withCaptures(["desktop", "mobile"]);
+    const { container } = render(<CaseMedia {...props} />);
+
+    expect(container.querySelector("video")).toBeNull();
+    // o pôster do computador vem com texto alternativo vazio: o botão já descreve o quadro
+    expect(container.querySelector(".ds-bframe img")).toHaveAttribute(
+      "alt",
+      "",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: mobilePlay }));
+
+    const phone = screen.getByLabelText(mobileVideo);
+    expect(container.querySelector(".ds-phone")).toContainElement(phone);
+    expect(phone).toHaveAttribute("poster", `/videos/${props.id}/mobile.webp`);
+    expect(phone.querySelectorAll("source")).toHaveLength(2);
+    expect(screen.queryByLabelText(desktopVideo)).toBeNull();
+    expect(
+      screen.getByRole("button", { name: desktopPlay }),
+    ).toBeInTheDocument();
+    expect(container.querySelectorAll("video")).toHaveLength(1);
+
+    fireEvent.click(screen.getByRole("button", { name: desktopPlay }));
+    expect(screen.getByLabelText(desktopVideo)).toHaveAttribute(
+      "poster",
+      `/videos/${props.id}/desktop.webp`,
+    );
+    expect(container.querySelectorAll("video")).toHaveLength(2);
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
   it("path: no demo address -> the browser bar falls back to the project title", () => {
     withCaptures(["desktop"]);
     const { container } = render(

app/cases/_components/CaseMedia.tsx

@@ -3,43 +3,13 @@ import {
   displayUrl,
 } from "@/app/components/showcase/BrowserFrame";
 import { PhoneFrame } from "@/app/components/showcase/PhoneFrame";
-import type { ShowcaseAssets } from "@/lib/project-showcase";
+import { CasePlayer } from "./CasePlayer";
 import { getCaseMedia } from "./case-media";
-import "../../components/showcase/showcase.css";
-
-function CaseVideo({
-  assets,
-  label,
-  className,
-}: {
-  assets: ShowcaseAssets;
-  label: string;
-  className: string;
-}) {
-  return (
-    <video
-      className={className}
-      controls
-      muted
-      loop
-      playsInline
-      preload="none"
-      poster={assets.poster}
-      width={assets.width}
-      height={assets.height}
-      aria-label={label}
-      disablePictureInPicture
-    >
-      {assets.sources.map((source) => (
-        <source key={source.src} src={source.src} type={source.type} />
-      ))}
-    </video>
-  );
-}
 
 /**
  * Pôster e vídeo do projeto: o site no computador (moldura de navegador) e no celular (moldura de celular).
- * O vídeo só baixa quando a pessoa aperta o play. Sem captura gravada, não mostra nada.
+ * Cada quadro mostra o pôster com um botão de play; o vídeo só baixa quando a pessoa aperta o botão.
+ * Sem captura gravada, não mostra nada.
  */
 export function CaseMedia({
   id,
@@ -55,16 +25,12 @@ export function CaseMedia({
   if (!desktop && !mobile) return null;
 
   return (
-    <div className="mt-sp-8 grid items-end gap-sp-8 md:grid-cols-[minmax(0,1fr)_auto]">
+    <div className="mt-sp-8 grid max-w-[1040px] items-end gap-sp-8 md:grid-cols-[minmax(0,1fr)_auto]">
       {desktop ? (
         <figure className="min-w-0">
           <BrowserFrame url={displayUrl({ demoUrl, title })}>
             <div className="relative aspect-[16/10] bg-[#0a0a0a]">
-              <CaseVideo
-                assets={desktop}
-                label={`Vídeo do site ${title} no computador`}
-                className="absolute inset-0 h-full w-full object-cover object-top"
-              />
+              <CasePlayer assets={desktop} title={title} device="desktop" />
             </div>
           </BrowserFrame>
           <figcaption className="mt-sp-3 font-[family-name:var(--font-body)] text-[15px] text-white/70">
@@ -75,11 +41,7 @@ export function CaseMedia({
       {mobile ? (
         <figure className="mx-auto w-[min(62vw,220px)] md:mx-0">
           <PhoneFrame poster={mobile.poster}>
-            <CaseVideo
-              assets={mobile}
-              label={`Vídeo do site ${title} no celular`}
-              className="absolute inset-0 h-full w-full object-cover object-top"
-            />
+            <CasePlayer assets={mobile} title={title} device="mobile" />
           </PhoneFrame>
           <figcaption className="mt-sp-3 text-center font-[family-name:var(--font-body)] text-[15px] text-white/70">
             No celular.

app/cases/_components/CaseMediaSection.tsx

@@ -28,7 +28,7 @@ export function CaseMediaSection({
       className="ds-section ds-section-dark"
       aria-labelledby="case-media"
     >
-      <div className="ds-section-shell max-w-[960px]">
+      <div className="ds-section-shell">
         <h2 id="case-media" className="ds-card-title !mt-0 text-white">
           Como ficou
         </h2>

app/cases/_components/CasePlayer.test.tsx

@@ -0,0 +1,85 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { getShowcaseAssets } from "@/lib/project-showcase";
+import { CasePlayer } from "./CasePlayer";
+
+const title = "SEV Moda Íntima";
+
+describe("CasePlayer", () => {
+  it("shows the poster and an accessible play button instead of a paused video", () => {
+    const { container } = render(
+      <div className="relative">
+        <CasePlayer
+          assets={getShowcaseAssets("sev-modaintima", "desktop")}
+          title={title}
+          device="desktop"
+        />
+      </div>,
+    );
+
+    expect(container.querySelector("video")).toBeNull();
+    // a imagem é decorativa: o botão já diz o que o quadro mostra
+    const poster = container.querySelector("img");
+    expect(poster).toHaveAttribute("alt", "");
+    expect(poster?.getAttribute("src")).toContain(
+      encodeURIComponent("/videos/sev-modaintima/desktop.webp"),
+    );
+    const button = screen.getByRole("button", {
+      name: `Reproduzir o vídeo do site ${title} no computador`,
+    });
+    expect(button).toHaveAttribute("type", "button");
+    // só botão de contato é limão: o de play é escuro, com contorno branco
+    expect(button.innerHTML).not.toContain("--slash");
+    expect(button.querySelector("[aria-hidden='true']")).not.toBeNull();
+  });
+
+  it("mounts the video with its sources only after the click, muted and looping, with focus on it", () => {
+    const assets = getShowcaseAssets("lavacao-047", "desktop");
+    render(
+      <div className="relative">
+        <CasePlayer assets={assets} title="Lavação 047" device="desktop" />
+      </div>,
+    );
+
+    fireEvent.click(screen.getByRole("button"));
+
+    const video = screen.getByLabelText(
+      "Vídeo do site Lavação 047 no computador",
+    );
+    expect(video).toHaveFocus();
+    expect(video).toHaveAttribute("controls");
+    expect(video).toHaveAttribute("poster", assets.poster);
+    expect(video).toHaveAttribute("width", String(assets.width));
+    expect(video).toHaveAttribute("height", String(assets.height));
+    expect((video as HTMLVideoElement).muted).toBe(true);
+    expect((video as HTMLVideoElement).loop).toBe(true);
+    expect(
+      [...video.querySelectorAll("source")].map((source) => [
+        source.getAttribute("src"),
+        source.getAttribute("type"),
+      ]),
+    ).toEqual(assets.sources.map(({ src, type }) => [src, type]));
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("leaves the poster to the phone frame on mobile and names the device in the labels", () => {
+    const { container } = render(
+      <div className="relative">
+        <CasePlayer
+          assets={getShowcaseAssets("sc-plus", "mobile")}
+          title="SC Plus Aquicultura"
+          device="mobile"
+        />
+      </div>,
+    );
+
+    expect(container.querySelector("img")).toBeNull();
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "Reproduzir o vídeo do site SC Plus Aquicultura no celular",
+      }),
+    );
+    expect(
+      screen.getByLabelText("Vídeo do site SC Plus Aquicultura no celular"),
+    ).toHaveAttribute("poster", "/videos/sc-plus/mobile.webp");
+  });
+});

app/cases/_components/CasePlayer.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { Play } from "lucide-react";
+import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+import type { Device, ShowcaseAssets } from "@/lib/project-showcase";
+
+const deviceLabel: Record<Device, string> = {
+  desktop: "no computador",
+  mobile: "no celular",
+};
+
+/**
+ * Pôster com um botão de play. O vídeo só é montado, e só baixa, quando a pessoa aperta o botão:
+ * antes disso a página mostra a imagem do site, não um vídeo parado em 0:00 com controles do navegador.
+ * Vai dentro de um quadro com `position: relative` (moldura de navegador ou de celular) que dá o tamanho.
+ */
+export function CasePlayer({
+  assets,
+  title,
+  device,
+  sizes = "(min-width: 1280px) 900px, 100vw",
+}: {
+  assets: ShowcaseAssets;
+  title: string;
+  device: Device;
+  sizes?: string;
+}) {
+  const [playing, setPlaying] = useState(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  // o botão sai de cena ao tocar: o foco vai para o vídeo, para quem usa o teclado não o perder
+  useEffect(() => {
+    if (playing) videoRef.current?.focus();
+  }, [playing]);
+
+  if (playing) {
+    return (
+      <video
+        ref={videoRef}
+        className="absolute inset-0 h-full w-full object-cover object-top"
+        autoPlay
+        controls
+        muted
+        loop
+        playsInline
+        poster={assets.poster}
+        width={assets.width}
+        height={assets.height}
+        tabIndex={0}
+        aria-label={`Vídeo do site ${title} ${deviceLabel[device]}`}
+        disablePictureInPicture
+      >
+        {assets.sources.map((source) => (
+          <source key={source.src} src={source.src} type={source.type} />
+        ))}
+      </video>
+    );
+  }
+
+  return (
+    <>
+      {/* o quadro do celular já mostra o pôster como fundo; no computador a imagem entra aqui */}
+      {device === "desktop" ? (
+        <Image
+          src={assets.poster}
+          alt=""
+          fill
+          sizes={sizes}
+          className="object-cover object-top"
+        />
+      ) : null}
+      <button
+        type="button"
+        onClick={() => setPlaying(true)}
+        aria-label={`Reproduzir o vídeo do site ${title} ${deviceLabel[device]}`}
+        className="group absolute inset-0 grid place-items-center focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-white"
+      >
+        <span
+          aria-hidden="true"
+          className="grid size-14 place-items-center rounded-full border border-white/70 bg-black/65 text-white transition-colors group-hover:bg-black/85 motion-reduce:transition-none sm:size-16"
+        >
+          <Play className="ml-1 size-6" fill="currentColor" />
+        </span>
+      </button>
+    </>
+  );
+}

app/cases/_components/CaseRelatedServices.tsx

@@ -1,23 +1,34 @@
 import Link from "next/link";
-import { textLink } from "@/app/components/button-styles";
+import { textLinkDark } from "@/app/components/button-styles";
 import { getRelatedServices } from "@/lib/site-content";
 
-/** Links para os serviços que citam este case. Sem serviço relacionado, não mostra nada. */
+/** Quantos serviços aparecem no fim do case: dois cards bastam para levar a pessoa ao serviço certo sem virar um menu. */
+export const MAX_RELATED_SERVICES = 2;
+
+/** Cards dos serviços que citam este case (no máximo dois), sobre fundo escuro. Sem serviço relacionado, não mostra nada. */
 export function CaseRelatedServices({ caseId }: { caseId: string }) {
-  const services = getRelatedServices(caseId);
+  const services = getRelatedServices(caseId).slice(0, MAX_RELATED_SERVICES);
   if (services.length === 0) return null;
 
   return (
-    <div className="mt-sp-6 flex flex-wrap gap-x-sp-6">
-      {services.map((service) => (
-        <Link
-          key={service.slug}
-          className={textLink}
-          href={`/servicos/${service.slug}`}
-        >
-          Ver serviço relacionado: {service.navLabel}
-        </Link>
-      ))}
+    <div className="mt-sp-10">
+      <p className="ds-kicker">Serviços ligados a este projeto</p>
+      <ul className="mt-sp-4 grid gap-sp-4 md:grid-cols-2">
+        {services.map((service) => (
+          <li key={service.slug} className="flex">
+            <article className="ds-card w-full">
+              <h3 className="ds-card-title !mt-0">{service.navLabel}</h3>
+              <p className="ds-copy">{service.intro}</p>
+              <Link
+                className={`${textLinkDark} mt-sp-4 self-start`}
+                href={`/servicos/${service.slug}`}
+              >
+                Ver o serviço: {service.navLabel}
+              </Link>
+            </article>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }

app/cases/_components/CaseResultSection.tsx

@@ -4,11 +4,11 @@ export function CaseResultSection({ result }: { result?: string[] }) {
 
   return (
     <section className="ds-section" aria-labelledby="case-result">
-      <div className="ds-section-shell max-w-[960px]">
+      <div className="ds-section-shell">
         <h2 id="case-result" className="ds-card-title !mt-0">
           Resultado
         </h2>
-        <ul className="ds-list space-y-sp-3 pl-[1.15rem]">
+        <ul className="ds-list max-w-[78ch] space-y-sp-3 pl-[1.15rem]">
           {result.map((item) => (
             <li key={item}>{item}</li>
           ))}

app/cases/_components/case-media.ts

@@ -1,3 +1,4 @@
+import "server-only";
 import { existsSync } from "node:fs";
 import { join } from "node:path";
 import {

app/cases/page.loading.test.tsx

@@ -0,0 +1,66 @@
+import { render } from "@testing-library/react";
+import type { ComponentProps } from "react";
+import { clientCases } from "@/lib/site-content";
+import CasesPage from "./page";
+
+/**
+ * Carregamento da lista de cases: a primeira capa (a maior imagem acima da dobra) tem prioridade,
+ * e os links das capas não pré-carregam as páginas dos cases sozinhos.
+ */
+
+type LinkProps = ComponentProps<typeof import("next/link").default>;
+
+/** Propriedades de cada `Link` renderizado: o `prefetch` não aparece no HTML, então a rota é espiada aqui. */
+const mockLinkProps: LinkProps[] = [];
+
+jest.mock("next/link", () => ({
+  __esModule: true,
+  default: ({ children, href, prefetch, ...anchor }: LinkProps) => {
+    mockLinkProps.push({ children, href, prefetch, ...anchor });
+    return (
+      <a href={String(href)} {...(anchor as Record<string, unknown>)}>
+        {children}
+      </a>
+    );
+  },
+}));
+
+beforeEach(() => {
+  mockLinkProps.length = 0;
+});
+
+function coverImages(container: HTMLElement) {
+  return clientCases.map((caseStudy) => {
+    const image = container
+      .querySelector(`a[href="/cases/${caseStudy.id}"][aria-hidden="true"]`)
+      ?.querySelector("img");
+    if (!image) throw new Error(`Missing cover of ${caseStudy.id}`);
+    return image;
+  });
+}
+
+describe("CasesPage: carregamento das capas", () => {
+  it("loads the first cover with priority and the others lazily", () => {
+    const { container } = render(<CasesPage />);
+
+    const [first, ...others] = coverImages(container);
+    expect(first).not.toHaveAttribute("loading", "lazy");
+    expect(others.length).toBeGreaterThan(0);
+    for (const image of others) {
+      expect(image).toHaveAttribute("loading", "lazy");
+    }
+  });
+
+  it("does not prefetch the case pages from the cover links, nor from the card buttons", () => {
+    render(<CasesPage />);
+
+    const toCases = mockLinkProps.filter(({ href }) =>
+      String(href).startsWith("/cases/"),
+    );
+    // uma capa e um botão por case de cliente, e um botão por projeto do laboratório
+    expect(toCases.length).toBeGreaterThanOrEqual(clientCases.length * 2);
+    for (const props of toCases) {
+      expect(props.prefetch).toBe(false);
+    }
+  });
+});

app/cases/page.tsx

@@ -17,13 +17,12 @@ import {
   labCases,
   siteUrl,
 } from "@/lib/site-content";
-import { CaseCover } from "./_components/CaseCover";
-import { getCaseMedia } from "./_components/case-media";
+import { CaseCoverLink } from "./_components/CaseCoverLink";
 
 const pageUrl = `${siteUrl}/cases`;
-const pageTitle = "Cases: Sites e Sistemas Feitos para Empresas";
+const pageTitle = "Cases: sites e sistemas para empresas";
 const pageDescription =
-  "Veja o que já foi feito para empresas: loja virtual com pedido pelo WhatsApp, site com painel para o dono, páginas institucionais e mais. Confira cada projeto e converse sobre o seu.";
+  "Veja o que já foi feito para empresas: loja virtual com pedido pelo WhatsApp, site com painel para o dono e páginas institucionais.";
 const allCases = [...clientCases, ...labCases];
 
 export const metadata: Metadata = {
@@ -41,33 +40,34 @@ function CaseCard({
   caseStudy,
   withCover,
   ctaLabel,
+  priority = false,
 }: {
   caseStudy: CaseStudyContent;
   withCover: boolean;
   ctaLabel: string;
+  /** Capa que abre a página (a primeira, o maior elemento visível): carrega antes das demais. */
+  priority?: boolean;
 }) {
   return (
     <article className="ds-card !h-auto">
-      {withCover && getCaseMedia(caseStudy.id, "desktop") ? (
-        <Link
-          href={`/cases/${caseStudy.id}`}
-          aria-hidden="true"
-          tabIndex={-1}
-          className="mb-sp-5 block"
-        >
-          <CaseCover
-            id={caseStudy.id}
-            title={caseStudy.title}
-            demoUrl={caseStudy.demoUrl}
-            sizes="(min-width: 1024px) 560px, 100vw"
-          />
-        </Link>
+      {withCover ? (
+        <CaseCoverLink
+          id={caseStudy.id}
+          title={caseStudy.title}
+          demoUrl={caseStudy.demoUrl}
+          priority={priority}
+          prefetch={false}
+        />
       ) : null}
       <div className="ds-kicker">{caseStudy.title}</div>
       <h3 className="ds-card-title">{caseStudy.headline}</h3>
       <p className="ds-copy">{caseStudy.summary}</p>
       <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
-        <Link href={`/cases/${caseStudy.id}`} className={secondaryButtonLight}>
+        <Link
+          href={`/cases/${caseStudy.id}`}
+          prefetch={false}
+          className={secondaryButtonLight}
+        >
           {ctaLabel}
         </Link>
         {caseStudy.demoUrl ? (
@@ -142,12 +142,13 @@ export default function CasesPage() {
             Projetos de clientes
           </h2>
           <div className="ds-grid-2 mt-sp-8 items-start">
-            {clientCases.map((caseStudy) => (
+            {clientCases.map((caseStudy, index) => (
               <CaseCard
                 key={caseStudy.id}
                 caseStudy={caseStudy}
                 withCover
                 ctaLabel="Ver o case"
+                priority={index === 0}
               />
             ))}
           </div>