feat(servicos): ofertas no topo de /servicos, capa por assunto e diagramas

/servicos abre com as 3 ofertas e depois outros serviços; H1 de criação de sites e de engenharia com o nome da oferta; capa de cada serviço pelo assunto (SEV fora do próprio case cai de ~11 para 2 imagens); diagrama de fluxo em SVG nos serviços sem case; cases com o que o cliente passou a poder fazer e contato logo depois de Como ficou; FAQ num componente só; lastmod por rota; ProfessionalService com areaServed.

app/servicos/[slug]/page.cover.paths.test.tsx

@@ -0,0 +1,162 @@
+import { render, screen } from "@testing-library/react";
+import { getCaseMedia } from "@/app/cases/_components/case-media";
+import { type Device, getShowcaseAssets } from "@/lib/project-showcase";
+import { getServicePage } from "@/lib/site-content";
+import ServicePage from "./page";
+
+/**
+ * Testes de caminhos-base da escolha da capa do topo em ServicePage (complemento de page.test.tsx), com as capturas
+ * gravadas controladas pelo teste (getCaseMedia trocado por um dublê que só "tem" o que o teste diz).
+ *
+ * A capa vale quando o serviço tem `heroCase` E existe captura gravada do aparelho pedido (heroCase.device); senão
+ * entra o `diagram` do serviço, se tiver; sem os dois, o topo vira uma coluna só e mais baixa.
+ * Caminhos: capa de computador | capa de celular | sem captura do computador | só captura do outro aparelho |
+ * case da capa que não existe | serviço de esquema, com ou sem captura de qualquer case.
+ * Quando a capa vale, a legenda dela cita o case e o case não ganha cartão em "Trabalhos parecidos".
+ */
+
+jest.mock("next/navigation", () => ({
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+  usePathname: () => "/servicos",
+}));
+jest.mock("@/app/cases/_components/case-media", () => ({
+  ...jest.requireActual("@/app/cases/_components/case-media"),
+  getCaseMedia: jest.fn(),
+}));
+
+type Capture = readonly [id: string, device: Device];
+
+/** Só as capturas listadas existem no disco. */
+function capturesOnDisk(captures: readonly Capture[]) {
+  jest
+    .mocked(getCaseMedia)
+    .mockImplementation((id, device) =>
+      captures.some(
+        ([knownId, knownDevice]) => knownId === id && knownDevice === device,
+      )
+        ? getShowcaseAssets(id, device)
+        : undefined,
+    );
+}
+
+async function renderService(slug: string) {
+  const ui = await ServicePage({ params: Promise.resolve({ slug }) });
+  const view = render(ui);
+  const hero = view.container.querySelector("section") as HTMLElement;
+  return {
+    ...view,
+    hero,
+    twoColumns: hero
+      .querySelector(".ds-section-shell")
+      ?.classList.contains("grid"),
+    compact: hero.className.includes("md:!pb-sp-12"),
+    caption: hero.querySelector("figure figcaption"),
+    cards: Array.from(
+      view.container.querySelectorAll("#casos-relacionados article"),
+    ).map((card) => card.querySelector(".ds-kicker")?.textContent),
+  };
+}
+
+afterEach(() => {
+  jest.mocked(getCaseMedia).mockReset();
+});
+
+describe("ServicePage: escolha da capa do topo", () => {
+  it("path: desktop cover with its capture on disk -> browser frame in the hero, the caption cites the case and the case gets no card", async () => {
+    capturesOnDisk([["lavacao-047", "desktop"]]);
+
+    const view = await renderService("criacao-de-sites");
+
+    expect(view.hero.querySelector(".ds-bframe")).not.toBeNull();
+    expect(view.twoColumns).toBe(true);
+    expect(view.compact).toBe(false);
+    expect(view.caption).toHaveTextContent("Lavação 047");
+    expect(view.cards).not.toContain("Lavação 047");
+    expect(view.cards).toEqual(["SC Plus Aquicultura", "AS Serviços"]);
+  });
+
+  it("path: mobile cover with its capture on disk -> phone frame in the hero, no browser frame", async () => {
+    capturesOnDisk([["sev-modaintima", "mobile"]]);
+
+    const view = await renderService("engenharia-de-software");
+
+    expect(view.hero.querySelector(".ds-phone-screen")).not.toBeNull();
+    expect(view.hero.querySelector(".ds-bframe")).toBeNull();
+    expect(view.twoColumns).toBe(true);
+    expect(view.caption).toHaveTextContent("SEV Moda Íntima");
+    expect(view.cards).toEqual(["Lavação 047"]);
+  });
+
+  it("path: no capture on disk -> no cover, a lower one-column hero, and the case that would be the cover gets its card back", async () => {
+    capturesOnDisk([]);
+
+    const view = await renderService("criacao-de-sites");
+
+    expect(view.hero.querySelector("figure")).toBeNull();
+    expect(view.twoColumns).toBe(false);
+    expect(view.compact).toBe(true);
+    expect(screen.queryByRole("img")).toBeNull();
+    expect(view.cards).toEqual([
+      "Lavação 047",
+      "SC Plus Aquicultura",
+      "AS Serviços",
+    ]);
+  });
+
+  it("path: only the OTHER device was captured (mobile cover, desktop capture) -> no cover, the check follows the device the service asks for", async () => {
+    capturesOnDisk([["sev-modaintima", "desktop"]]);
+
+    const view = await renderService("engenharia-de-software");
+
+    expect(view.hero.querySelector("figure")).toBeNull();
+    expect(view.compact).toBe(true);
+    expect(view.cards).toEqual(["SEV Moda Íntima", "Lavação 047"]);
+    expect(getCaseMedia).toHaveBeenCalledWith("sev-modaintima", "mobile");
+  });
+
+  it("path: the cover case does not exist -> same as no capture, no crash", async () => {
+    capturesOnDisk([["nao-existe", "desktop"]]);
+    const service = getServicePage("consultoria-nextjs");
+    if (!service?.heroCase) throw new Error("Missing hero case");
+    const original = service.heroCase;
+    service.heroCase = { id: "nao-existe", device: "desktop" };
+    try {
+      const view = await renderService("consultoria-nextjs");
+
+      expect(view.hero.querySelector("figure")).toBeNull();
+      expect(view.compact).toBe(true);
+    } finally {
+      service.heroCase = original;
+    }
+  });
+
+  it("path: diagram service -> the diagram, never a cover, even with every capture on disk", async () => {
+    capturesOnDisk([
+      ["twins-lab", "desktop"],
+      ["twins-lab", "mobile"],
+      ["lavacao-047", "desktop"],
+    ]);
+
+    const view = await renderService("integracao-hardware-software-iot");
+
+    expect(
+      screen.getByRole("img", { name: /dispositivo envia as leituras/ }),
+    ).toBeVisible();
+    expect(view.hero.querySelector(".ds-bframe")).toBeNull();
+    expect(view.twoColumns).toBe(true);
+    expect(view.compact).toBe(false);
+  });
+
+  it("path: a service with a cover AND the capture missing never falls back to a diagram it does not have", async () => {
+    capturesOnDisk([]);
+    const service = getServicePage("consultoria-nextjs");
+
+    const view = await renderService("consultoria-nextjs");
+
+    expect(service?.diagram).toBeUndefined();
+    expect(screen.queryByRole("img", { name: /Esquema|esquema/ })).toBeNull();
+    expect(view.compact).toBe(true);
+  });
+});

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

@@ -8,10 +8,12 @@ import ServicePage, { generateMetadata } from "./page";
  * Cobrem só o que o arquivo principal não exercita: slug desconhecido e perguntas frequentes ausentes ou vazias.
  */
 
+// usePathname: o HoverPrefetchLink (trilha, cartões) lê o caminho para saber se está na home
 jest.mock("next/navigation", () => ({
   notFound: jest.fn(() => {
     throw new Error("NEXT_NOT_FOUND");
   }),
+  usePathname: () => "/servicos",
 }));
 
 beforeEach(() => {
@@ -33,20 +35,27 @@ describe("ServicePage: caminhos que o teste principal não cobre", () => {
     expect(notFound).toHaveBeenCalledTimes(1);
   });
 
-  it("path: service with a FAQ (main path) -> shows every question", async () => {
+  it("path: service with a FAQ (main path) -> shows every question as a closed accordion item, the same pattern as the home", async () => {
     const service = getServicePage("criacao-de-sites");
     if (!service?.faq?.length) throw new Error("Missing service FAQ");
 
-    await renderService(service.slug);
+    const { container } = await renderService(service.slug);
 
     expect(
       screen.getByRole("heading", { level: 2, name: FAQ_HEADING }),
     ).toBeVisible();
+    const summaries = Array.from(
+      container.querySelectorAll("#faq summary"),
+    ).map((summary) => summary.textContent?.replace("+", "").trim());
+    expect(summaries).toEqual(service.faq.map(({ question }) => question));
     for (const item of service.faq) {
-      expect(
-        screen.getByRole("heading", { level: 3, name: item.question }),
-      ).toBeVisible();
+      const details = screen.getByText(item.question).closest("details");
+      expect(details).not.toBeNull();
+      expect(details?.open).toBe(false);
+      expect(details).toHaveTextContent(item.answer);
     }
+    // um formato só: nenhum cartão de pergunta e resposta
+    expect(container.querySelector("#faq article")).toBeNull();
   });
 
   it("path: service without the faq field -> no FAQ section, the rest of the page stays", async () => {

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

@@ -1,18 +1,24 @@
 import { render, screen, within } from "@testing-library/react";
 import { SEO_IDS } from "@/lib/seo";
 import {
+  buttonLabels,
   caseStudies,
-  clientCases,
+  clientCasesForListing,
   getRelatedCases,
   getServicePage,
   isClientCase,
+  serviceOffers,
   servicePages,
   siteUrl,
 } from "@/lib/site-content";
 import ServicesIndexPage from "../page";
 import ServicePage, { generateMetadata, generateStaticParams } from "./page";
 
-jest.mock("next/navigation", () => ({ notFound: jest.fn() }));
+// usePathname: o HoverPrefetchLink (trilha, cartões) lê o caminho para saber se está na home
+jest.mock("next/navigation", () => ({
+  notFound: jest.fn(),
+  usePathname: () => "/servicos",
+}));
 
 async function renderService(slug: string) {
   const ui = await ServicePage({ params: Promise.resolve({ slug }) });
@@ -25,6 +31,13 @@ function isBefore(first: Element, second: Element) {
   );
 }
 
+/** Links "Ver case" dos cartões de "Onde já apliquei isso"; a capa do topo, que também abre o case, fica de fora. */
+function caseCardLinks(container: HTMLElement) {
+  const block = container.querySelector<HTMLElement>("#casos-relacionados");
+  if (!block) throw new Error("Missing related cases block");
+  return within(block).getAllByRole("link", { name: /^Ver case / });
+}
+
 const service = getServicePage("consultoria-nextjs");
 if (!service) throw new Error("Missing representative service");
 
@@ -97,7 +110,10 @@ it("renders answer-first consulting, reciprocal case links and minimal schema",
     expect(screen.getByText(detail)).not.toBeVisible();
   }
 
-  const primaryCtas = screen.getAllByRole("link", { name: /WhatsApp/i });
+  const primaryCtas = screen.getAllByRole("link", {
+    name: buttonLabels.contact,
+  });
+  expect(primaryCtas).toHaveLength(2);
   for (const cta of primaryCtas) {
     const destination = new URL(cta.getAttribute("href") ?? "");
     expect(destination.origin).toBe("https://wa.me");
@@ -106,19 +122,24 @@ it("renders answer-first consulting, reciprocal case links and minimal schema",
     expect(cta).toHaveAttribute("rel", expect.stringContaining("noopener"));
   }
 
+  // o case da capa (SC Plus) é citado pela legenda dela, e não ganha cartão: os cartões são os demais cases relacionados
+  const heroId = service.heroCase?.id;
+  expect(heroId).toBe("sc-plus");
+  expect(
+    container.querySelector("section figcaption a[href='/cases/sc-plus']"),
+  ).not.toBeNull();
   const expectedCaseLinks = service.relatedCaseIds
+    .filter((id) => id !== heroId)
     .map((id) => {
       const caseStudy = caseStudies.find((item) => item.id === id);
       if (!caseStudy) throw new Error(`Missing related case ${id}`);
       return {
-        name: `Ler case: ${caseStudy.title}`,
+        name: `Ver case ${caseStudy.title}`,
         href: `/cases/${id}`,
       };
     })
     .sort((a, b) => a.href.localeCompare(b.href));
-  const internalCaseLinks = screen.getAllByRole("link", {
-    name: /^Ler case:/,
-  });
+  const internalCaseLinks = caseCardLinks(container);
   expect(
     internalCaseLinks
       .map((link) => ({
@@ -208,7 +229,7 @@ it("renders answer-first consulting, reciprocal case links and minimal schema",
   ]);
 });
 
-it("fills the hub hero with a mosaic of three client posters and states the location in one line", () => {
+it("fills the hub hero with a mosaic of three client posters, never opening with the SEV, and states the location in one line", () => {
   const { container } = render(<ServicesIndexPage />);
 
   const hero = container.querySelector("section");
@@ -217,10 +238,18 @@ it("fills the hub hero with a mosaic of three client posters and states the loca
   expect(posters).toHaveLength(3);
   for (const [index, poster] of posters.entries()) {
     expect(decodeURIComponent(poster.getAttribute("src") ?? "")).toContain(
-      `/videos/${clientCases[index].id}/desktop.webp`,
+      `/videos/${clientCasesForListing[index].id}/desktop.webp`,
     );
     expect(poster).toHaveAttribute("alt", "");
   }
+  const posterSources = posters.map((poster) =>
+    decodeURIComponent(poster.getAttribute("src") ?? ""),
+  );
+  expect(posterSources[0]).toContain("/videos/lavacao-047/");
+  expect(posterSources.some((src) => src.includes("sev-modaintima"))).toBe(
+    false,
+  );
+  expect(new Set(posterSources).size).toBe(3);
   // só o primeiro, o maior, carrega na hora e com prioridade alta
   expect(posters[0]).toHaveAttribute("fetchpriority", "high");
   expect(posters[1]).toHaveAttribute("loading", "lazy");
@@ -229,10 +258,9 @@ it("fills the hub hero with a mosaic of three client posters and states the loca
   );
   expect(container.textContent).not.toMatch(/perto de Garuva/);
 
-  // as capas dos projetos, mais abaixo, têm a largura da coluna e carregam preguiçosas
-  const cover = container.querySelector("#projetos .ds-bframe img");
-  expect(cover?.getAttribute("sizes")).toMatch(/calc\(100vw - 40px\)$/);
-  expect(cover).toHaveAttribute("loading", "lazy");
+  // nenhum cliente do mosaico se repete mais abaixo: as ofertas citam os cases só por link, sem capa
+  expect(container.querySelectorAll(".ds-bframe")).toHaveLength(0);
+  expect(container.querySelectorAll("img")).toHaveLength(3);
 });
 
 it("keeps hub cards and structured items aligned", () => {
@@ -256,10 +284,25 @@ it("keeps hub cards and structured items aligned", () => {
   expect([...structuredUrls].sort()).toEqual(
     publicServiceHrefs.map((href) => `${siteUrl}${href}`).sort(),
   );
-  const visibleCards = itemList.itemListElement.map(({ name }) =>
-    screen.getByRole("link", { name }),
-  );
-  const visibleHrefs = visibleCards.map((link) => link.getAttribute("href"));
+  // as duas ofertas que são serviços abrem pelo cartão da oferta; os outros quatro estão em "Outros serviços"
+  const offerLinks = serviceOffers
+    .filter(({ href }) => publicServiceHrefs.includes(href))
+    .map(({ name, href }) => ({
+      href,
+      link: screen.getByRole("link", { name: `Ver o serviço ${name}` }),
+    }));
+  expect(offerLinks).toHaveLength(2);
+  for (const { href, link } of offerLinks) {
+    expect(link).toHaveAttribute("href", href);
+  }
+  const otherLinks = itemList.itemListElement
+    .filter(({ url }) => !offerLinks.some(({ href }) => url.endsWith(href)))
+    .map(({ name }) => screen.getByRole("link", { name }));
+  expect(otherLinks).toHaveLength(4);
+  const visibleHrefs = [
+    ...offerLinks.map(({ link }) => link.getAttribute("href")),
+    ...otherLinks.map((link) => link.getAttribute("href")),
+  ];
   expect(visibleHrefs).toHaveLength(6);
   expect(new Set(visibleHrefs).size).toBe(6);
   expect([...visibleHrefs].sort()).toEqual([...publicServiceHrefs].sort());
@@ -272,20 +315,68 @@ it("keeps hub cards and structured items aligned", () => {
   });
 });
 
-it("shows the client projects with covers on the hub, without disclaimers", () => {
+it("puts the three offers right after the hero, each with its name, deliverables, proof and the right page, and 'Outros serviços' below", () => {
   const { container } = render(<ServicesIndexPage />);
 
-  for (const id of [
-    "sev-modaintima",
-    "lavacao-047",
-    "sc-plus",
-    "as-servicos",
-  ]) {
-    const link = container.querySelector(`a[href="/cases/${id}"]`);
+  const offersHeading = screen.getByRole("heading", {
+    level: 2,
+    name: "Três jeitos de começar.",
+  });
+  const othersHeading = screen.getByRole("heading", {
+    level: 2,
+    name: "Outros serviços",
+  });
+  expect(
+    isBefore(screen.getByRole("heading", { level: 1 }), offersHeading),
+  ).toBe(true);
+  expect(isBefore(offersHeading, othersHeading)).toBe(true);
+
+  const cards = Array.from(
+    container.querySelectorAll<HTMLElement>("section article"),
+  ).slice(0, 3);
+  expect(cards).toHaveLength(3);
+  for (const [index, offer] of serviceOffers.entries()) {
+    const card = cards[index];
     expect(
-      link?.closest("article")?.querySelector(".ds-bframe img"),
-    ).not.toBeNull();
+      within(card).getByRole("heading", { level: 3, name: offer.name }),
+    ).toBeVisible();
+    for (const item of offer.deliverables) {
+      expect(within(card).getByText(item)).toBeVisible();
+    }
+    expect(
+      within(card).getByRole("link", { name: `Ver o serviço ${offer.name}` }),
+    ).toHaveAttribute("href", offer.href);
+    expect(within(card).getByText(offer.proof.label)).toBeVisible();
   }
+  // a prova: Lavação 047 e SEV na oferta do site, a SEV e a Apolo na do sistema, a página /ia na da revisão
+  expect(
+    within(cards[0]).getByRole("link", { name: "Ver case Lavação 047" }),
+  ).toHaveAttribute("href", "/cases/lavacao-047");
+  expect(
+    within(cards[0]).getByRole("link", { name: "Ver case SEV Moda Íntima" }),
+  ).toHaveAttribute("href", "/cases/sev-modaintima");
+  expect(
+    within(cards[1]).getByRole("link", { name: "Ver case SEV Moda Íntima" }),
+  ).toHaveAttribute("href", "/cases/sev-modaintima");
+  expect(within(cards[1]).getByText(/Apolo Energia/)).toBeVisible();
+  expect(within(cards[2]).queryAllByRole("link")).toHaveLength(1);
+  expect(
+    within(cards[2]).getByRole("link", { name: /^Ver o serviço/ }),
+  ).toHaveAttribute("href", "/ia");
+});
+
+it("keeps the hub free of case covers, with the SEV only as a proof link in two offers, and without disclaimers", () => {
+  const { container } = render(<ServicesIndexPage />);
+
+  // a SEV aparece só como link de prova nas duas ofertas, nunca como capa ou no mosaico
+  const sevLinks = container.querySelectorAll(
+    `a[href="/cases/sev-modaintima"]`,
+  );
+  expect(sevLinks).toHaveLength(2);
+  for (const link of sevLinks) {
+    expect(link.querySelector("img")).toBeNull();
+  }
+  expect(container.querySelectorAll(".ds-bframe")).toHaveLength(0);
   expect(container.textContent).not.toMatch(
     /sem promessas|Demonstração publicada|limites|indispon/i,
   );
@@ -315,72 +406,198 @@ it("shows the client cases first, right after the hero, with the first cover in
     ),
   ).toBe(true);
 
-  const caseLinks = screen.getAllByRole("link", { name: /^Ler case:/ });
+  // o case da capa (Lavação 047) é citado pela legenda dela; os cartões trazem os demais, com os de cliente à frente
+  const caseLinks = caseCardLinks(container);
   expect(caseLinks.map((link) => link.getAttribute("href"))).toEqual(
-    getRelatedCases(siteService.relatedCaseIds).map(({ id }) => `/cases/${id}`),
+    getRelatedCases(siteService.relatedCaseIds)
+      .filter(({ id }) => id !== siteService.heroCase?.id)
+      .map(({ id }) => `/cases/${id}`),
   );
   expect(caseLinks.map((link) => link.getAttribute("href"))).toEqual([
-    "/cases/sev-modaintima",
-    "/cases/lavacao-047",
     "/cases/sc-plus",
     "/cases/as-servicos",
   ]);
 
-  // pôster do primeiro case numa moldura no topo, no lugar do fundo verde
+  // pôster do case de destaque (Lavação 047) numa moldura no topo, no lugar do fundo verde, e não a SEV
   const hero = container.querySelector("section");
   const heroFrame = hero?.querySelector(".ds-bframe");
   expect(heroFrame).not.toBeNull();
   expect(heroFrame?.querySelector("img")).toHaveAttribute(
     "alt",
-    "Captura de tela do site SEV Moda Íntima",
+    "Captura de tela do site Lavação 047",
   );
-  expect(hero?.querySelector("a[href='/cases/sev-modaintima']")).not.toBeNull();
+  expect(hero?.querySelector("a[href='/cases/lavacao-047']")).not.toBeNull();
+  expect(container.textContent).not.toMatch(/SEV Moda Íntima/);
+  // a legenda da capa cita o case com a frase de relação e o botão "Ver case"
+  const caption = hero?.querySelector("figcaption");
+  expect(caption).toHaveTextContent("Lavação 047");
+  expect(caption).toHaveTextContent(siteService.caseRelevance["lavacao-047"]);
+  expect(
+    within(caption as HTMLElement).getByRole("link", {
+      name: "Ver case Lavação 047",
+    }),
+  ).toHaveAttribute("href", "/cases/lavacao-047");
+  // a mesma capa não aparece duas vezes: o case de destaque não ganha cartão, e os outros mantêm a capa deles
+  expect(
+    container.querySelectorAll(
+      "img[alt='Captura de tela do site Lavação 047']",
+    ),
+  ).toHaveLength(1);
+  expect(
+    container.querySelectorAll(
+      "img[alt='Captura de tela do site SC Plus Aquicultura']",
+    ),
+  ).toHaveLength(1);
 });
 
-it("shows no case, no frame and no 'similar projects' button on the diagnosis service, only the Apolo note", async () => {
+it("opens the two offer services with the offer name as the h1, and leaves the search title alone", async () => {
+  for (const [slug, offer] of [
+    ["criacao-de-sites", serviceOffers[0]],
+    ["engenharia-de-software", serviceOffers[1]],
+  ] as const) {
+    const { unmount } = await renderService(slug);
+    expect(
+      screen.getByRole("heading", { level: 1, name: offer.name }),
+    ).toBeVisible();
+    const metadata = await generateMetadata({
+      params: Promise.resolve({ slug }),
+    });
+    expect(metadata.title).toBe(getServicePage(slug)?.metaTitle);
+    expect(metadata.title).not.toBe(offer.name);
+    unmount();
+  }
+});
+
+it("covers the systems service with the SEV on the phone, in a phone frame, once", async () => {
+  const { container } = await renderService("engenharia-de-software");
+
+  const hero = container.querySelector("section");
+  expect(hero?.querySelector(".ds-section-shell")).toHaveClass("grid");
+  expect(hero?.querySelector(".ds-phone")).not.toBeNull();
+  expect(hero?.querySelector(".ds-bframe")).toBeNull();
+  expect(
+    hero
+      ?.querySelector("a[href='/cases/sev-modaintima']")
+      ?.querySelector(".ds-phone-screen"),
+  ).not.toBeNull();
+  // a SEV não vira imagem de navegador nem ganha cartão: a legenda do celular a cita, com a frase de relação e "Ver case"
+  expect(container.querySelector("img[alt*='SEV']")).toBeNull();
+  const caption = hero?.querySelector("figcaption");
+  expect(caption).toHaveTextContent("SEV Moda Íntima");
+  expect(caption).toHaveTextContent(
+    getServicePage("engenharia-de-software")?.caseRelevance["sev-modaintima"] ??
+      "",
+  );
+  expect(
+    within(caption as HTMLElement).getByRole("link", {
+      name: "Ver case SEV Moda Íntima",
+    }),
+  ).toHaveAttribute("href", "/cases/sev-modaintima");
+  // só o cartão da Lavação 047 traz capa de navegador
+  expect(
+    Array.from(container.querySelectorAll(".ds-bframe img")).map((image) =>
+      image.getAttribute("alt"),
+    ),
+  ).toEqual(["Captura de tela do site Lavação 047"]);
+  const links = caseCardLinks(container).map((link) =>
+    link.getAttribute("href"),
+  );
+  expect(links).toEqual(["/cases/lavacao-047"]);
+});
+
+it("covers the Next.js service with SC Plus, not the SEV", async () => {
+  const { container } = await renderService("consultoria-nextjs");
+
+  const heroFrame = container.querySelector("section .ds-bframe");
+  expect(heroFrame?.querySelector("img")).toHaveAttribute(
+    "alt",
+    "Captura de tela do site SC Plus Aquicultura",
+  );
+  expect(container.textContent).not.toMatch(/SEV Moda Íntima/);
+});
+
+it("shows no case, no frame and no 'similar projects' button on the diagnosis service, only the Apolo note and a flow diagram", async () => {
   const { container } = await renderService("arquitetura-de-software");
 
   // nenhum case de cliente é um diagnóstico: só a experiência na Apolo, em texto
   expect(
-    screen.getByRole("heading", { name: "Onde já apliquei isso" }),
+    screen.getByRole("heading", { level: 2, name: "Como eu trabalho nisso" }),
   ).toBeVisible();
+  expect(
+    screen.queryByRole("heading", { name: "Onde já apliquei isso" }),
+  ).toBeNull();
   expect(screen.getByText(/Apolo Energia/)).toBeVisible();
-  expect(screen.queryByRole("link", { name: /^Ler case:/ })).toBeNull();
+  expect(screen.queryByRole("link", { name: /^Ver case / })).toBeNull();
   expect(
     screen.queryByRole("link", { name: "Ver projetos parecidos" }),
   ).toBeNull();
   expect(screen.queryByText(/SEV Moda Íntima/)).toBeNull();
   expect(container.querySelector(".ds-bframe")).toBeNull();
+  // no lugar da metade vazia do topo: o esquema de fluxo, como imagem com texto alternativo
+  const diagram = screen.getByRole("img", { name: /interface chama a API/ });
+  expect(diagram.closest("section")).toBe(container.querySelector("section"));
 });
 
-it("lists the Windows app as a 'Projeto próprio' on the desktop service, saying it is made in Python", async () => {
+it("lists the Windows app as a 'Projeto próprio' on the desktop service, as a personal Windows app project", async () => {
   const { container } = await renderService("tauri-rust");
 
   expect(
-    screen.getByRole("link", { name: "Ler case: MinGW GCC Installer" }),
+    screen.getByRole("link", { name: "Ver case MinGW GCC Installer" }),
   ).toHaveAttribute("href", "/cases/gcc-installer");
   expect(
     screen.getByText("MinGW GCC Installer · Projeto próprio"),
   ).toBeVisible();
-  expect(screen.getByText(/em Python e não em Tauri/)).toBeVisible();
+  expect(
+    screen.getByText(/projeto próprio de aplicativo para Windows/),
+  ).toBeVisible();
+  expect(container.textContent).not.toMatch(/em Python e não em Tauri/);
   expect(
     screen.getByRole("link", { name: "Ver projetos parecidos" }),
   ).toHaveAttribute("href", "#casos-relacionados");
-  // sem captura gravada, não há moldura nem imagem
+  // sem captura gravada, não há moldura nem imagem: o topo mostra o esquema do aplicativo no computador
   expect(container.querySelector(".ds-bframe")).toBeNull();
+  expect(
+    screen.getByRole("img", {
+      name: /aplicativo no computador troca informações/,
+    }),
+  ).toBeVisible();
+  // só projeto próprio, sem cliente: o título não fala de "onde já apliquei"
+  expect(
+    screen.getByRole("heading", { level: 2, name: "Como eu trabalho nisso" }),
+  ).toBeVisible();
 });
 
-it("keeps the hero in one lower column when there is no media, and in two columns when there is", async () => {
-  for (const slug of [
-    "tauri-rust",
-    "integracao-hardware-software-iot",
-    "arquitetura-de-software",
-  ]) {
+it("keeps the hero in two columns with a cover or a diagram, and in one lower column only when it has neither", async () => {
+  const diagrams = {
+    "tauri-rust": /aplicativo no computador/,
+    "integracao-hardware-software-iot": /dispositivo envia as leituras/,
+    "arquitetura-de-software": /interface chama a API/,
+  } as const;
+  for (const [slug, label] of Object.entries(diagrams)) {
     const { container, unmount } = await renderService(slug);
     const hero = container.querySelector("section");
+    expect(hero?.className).not.toContain("md:!pb-sp-12");
+    expect(hero?.querySelector(".ds-section-shell")).toHaveClass("grid");
+    expect(
+      within(hero as HTMLElement).getByRole("img", { name: label }),
+    ).toBeVisible();
+    unmount();
+  }
+
+  // sem capa e sem esquema, o topo volta a ser uma coluna só e mais baixa
+  const bare = getServicePage("arquitetura-de-software");
+  if (!bare?.diagram) throw new Error("Missing diagram");
+  const originalDiagram = bare.diagram;
+  delete bare.diagram;
+  try {
+    const { container, unmount } = await renderService(bare.slug);
+    const hero = container.querySelector("section");
     expect(hero?.className).toContain("md:!pb-sp-12");
     expect(hero?.querySelector(".ds-section-shell")).not.toHaveClass("grid");
+    expect(screen.queryByRole("img")).toBeNull();
     unmount();
+  } finally {
+    bare.diagram = originalDiagram;
   }
 
   const withMedia = await renderService("criacao-de-sites");
@@ -411,7 +628,7 @@ it("puts the location in one line, 'Garuva e Joinville (SC)', and spaces the lis
 it("labels the Twins Lab prototype as a laboratory project on the IoT service", async () => {
   const { container } = await renderService("integracao-hardware-software-iot");
 
-  const caseLinks = screen.getAllByRole("link", { name: /^Ler case:/ });
+  const caseLinks = caseCardLinks(container);
   expect(caseLinks.map((link) => link.getAttribute("href"))).toEqual([
     "/cases/twins-lab",
   ]);
@@ -433,19 +650,33 @@ it("labels only the laboratory projects as 'Projeto próprio'", async () => {
 });
 
 it("says in one sentence, per case, why it matters to the service", async () => {
-  for (const { slug, relatedCaseIds, caseRelevance } of servicePages) {
+  for (const {
+    slug,
+    relatedCaseIds,
+    caseRelevance,
+    heroCase,
+  } of servicePages) {
     if (relatedCaseIds.length === 0) continue;
-    const { unmount } = await renderService(slug);
+    const { container, unmount } = await renderService(slug);
 
     for (const id of relatedCaseIds) {
       const sentence = caseRelevance[id];
       expect(sentence).toBeTruthy();
-      const card = screen.getByText(sentence).closest("article");
-      expect(card).toContainElement(
-        screen.getByRole("link", {
-          name: `Ler case: ${caseStudies.find((c) => c.id === id)?.title}`,
-        }),
-      );
+      const link = screen.getByRole("link", {
+        name: `Ver case ${caseStudies.find((c) => c.id === id)?.title}`,
+      });
+      if (id === heroCase?.id) {
+        // o case da capa: a frase está na legenda dela, junto do botão, e não num cartão
+        const caption = link.closest("figcaption");
+        expect(caption).not.toBeNull();
+        expect(caption).toHaveTextContent(sentence);
+        expect(
+          container.querySelectorAll(`article a[href="/cases/${id}"]`),
+        ).toHaveLength(0);
+      } else {
+        const card = screen.getByText(sentence).closest("article");
+        expect(card).toContainElement(link);
+      }
     }
     unmount();
   }
@@ -465,9 +696,9 @@ it("cites the Apolo Energia experience in text on the IoT and architecture pages
     expect(paragraph.textContent).toMatch(/Desde 2022/);
     expect(paragraph.closest("a")).toBeNull();
     expect(paragraph.querySelector("a")).toBeNull();
-    // dentro do bloco "Onde já apliquei isso", antes dos cards
+    // dentro do bloco de prova ("Como eu trabalho nisso": sem case de cliente), antes dos cards
     const block = screen.getByRole("heading", {
-      name: "Onde já apliquei isso",
+      name: "Como eu trabalho nisso",
     });
     expect(isBefore(block, paragraph)).toBe(true);
     expect(
@@ -497,8 +728,8 @@ it("does not mention Apolo Energia on the other service pages", async () => {
   }
 });
 
-it("puts the FAQ before the next step and ends every service page with a contact button", async () => {
-  for (const { slug, faq, ctaLabel } of servicePages) {
+it("puts the FAQ before the next step and ends every service page with the same contact button", async () => {
+  for (const { slug, faq } of servicePages) {
     const { container, unmount } = await renderService(slug);
 
     const nextStep = screen.getByRole("heading", {
@@ -517,16 +748,22 @@ it("puts the FAQ before the next step and ends every service page with a contact
     const last = container.querySelector("main")?.lastElementChild;
     expect(last).toContainElement(nextStep);
     const cta = within(last as HTMLElement).getByRole("link", {
-      name: `${ctaLabel} no WhatsApp`,
+      name: buttonLabels.contact,
     });
     expect(new URL(cta.getAttribute("href") ?? "").origin).toBe(
       "https://wa.me",
     );
+    // as perguntas são as linhas do acordeão (o mesmo desenho da home), todas antes do botão
     for (const question of faq ?? []) {
-      expect(
-        isBefore(screen.getByRole("heading", { name: question.question }), cta),
-      ).toBe(true);
+      expect(isBefore(screen.getByText(question.question), cta)).toBe(true);
     }
+    // um rótulo só para o contato: sem "no WhatsApp" colado nem texto por serviço
+    expect(
+      screen
+        .getAllByRole("link", { name: buttonLabels.contact })
+        .every((link) => link.textContent === buttonLabels.contact),
+    ).toBe(true);
+    expect(container.textContent).not.toMatch(/diretamente/i);
     unmount();
   }
 });

app/servicos/[slug]/page.tsx

@@ -11,6 +11,7 @@ import {
   primaryButton,
   secondaryButtonDark,
 } from "@/app/components/button-styles";
+import { Faq } from "@/app/components/Faq";
 import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
 import WhatsAppLink from "@/app/components/WhatsAppLink";
 import { safeJsonLd } from "@/lib/jsonld";
@@ -20,12 +21,14 @@ import {
   buildServiceJsonLd,
 } from "@/lib/seo";
 import {
+  buttonLabels,
+  caseStudies,
   getRelatedCases,
   getServicePage,
   servicePages,
   siteUrl,
 } from "@/lib/site-content";
-import { ServiceFaq } from "../_components/ServiceFaq";
+import { ServiceDiagram } from "../_components/ServiceDiagram";
 import { ServiceHeroCover } from "../_components/ServiceHeroCover";
 import { ServiceOffer } from "../_components/ServiceOffer";
 import { ServiceRelatedCases } from "../_components/ServiceRelatedCases";
@@ -75,9 +78,16 @@ export default async function ServicePage({ params }: ServicePageProps) {
   }
 
   const relatedCases = getRelatedCases(service.relatedCaseIds);
-  const heroCase = relatedCases.find((caseStudy) =>
-    getCaseMedia(caseStudy.id, "desktop"),
+  // capa do topo: o case escolhido para o serviço, se tiver captura gravada do aparelho pedido; senão, o esquema de fluxo
+  const heroDevice = service.heroCase?.device ?? "desktop";
+  const heroCase = caseStudies.find(
+    ({ id }) =>
+      id === service.heroCase?.id && Boolean(getCaseMedia(id, heroDevice)),
   );
+  const diagram = heroCase ? undefined : service.diagram;
+  const hasHeroSide = Boolean(heroCase || diagram);
+  // o case da capa é citado pela legenda dela, e não ganha cartão em "Onde já apliquei isso"
+  const hasCaseCards = relatedCases.some(({ id }) => id !== heroCase?.id);
   const pageUrl = `${siteUrl}/servicos/${service.slug}`;
 
   const jsonLd = {
@@ -98,11 +108,11 @@ export default async function ServicePage({ params }: ServicePageProps) {
 
       <section
         className={`ds-section ds-section-dark ${pageTop} ${
-          heroCase ? "" : compactHero
+          hasHeroSide ? "" : compactHero
         }`}
       >
         <div
-          className={`ds-section-shell ${heroCase ? heroWithMediaGrid : ""}`}
+          className={`ds-section-shell ${hasHeroSide ? heroWithMediaGrid : ""}`}
         >
           <div className="max-w-[860px]">
             <Breadcrumb
@@ -113,7 +123,7 @@ export default async function ServicePage({ params }: ServicePageProps) {
               ]}
             />
             <p className="ds-eyebrow">{service.eyebrow}</p>
-            <h1 className="ds-section-title max-w-[14ch] text-balance text-white">
+            <h1 className="ds-section-title max-w-[22ch] text-balance text-white">
               {service.headline}
             </h1>
             <p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
@@ -125,21 +135,30 @@ export default async function ServicePage({ params }: ServicePageProps) {
                 placement="service_detail_hero"
                 className={primaryButton}
               >
-                {service.ctaLabel} no WhatsApp
+                {buttonLabels.contact}
               </WhatsAppLink>
-              {relatedCases.length > 0 ? (
+              {hasCaseCards ? (
                 <a href="#casos-relacionados" className={secondaryButtonDark}>
                   Ver projetos parecidos
                 </a>
               ) : null}
             </div>
             <p className="mt-sp-4 text-[15px] leading-6 text-white/70">
-              Fale diretamente com Evandro. Abre uma conversa, sem precisar
-              preencher um formulário. Garuva e Joinville (SC) · atendimento
-              remoto em todo o Brasil.
+              O botão abre uma conversa no WhatsApp, sem formulário. Garuva e
+              Joinville (SC) · atendimento remoto em todo o Brasil.
             </p>
           </div>
-          <ServiceHeroCover caseStudy={heroCase} />
+          {diagram ? (
+            <ServiceDiagram kind={diagram} />
+          ) : (
+            <ServiceHeroCover
+              caseStudy={heroCase}
+              device={heroDevice}
+              relevance={
+                heroCase ? service.caseRelevance[heroCase.id] : undefined
+              }
+            />
+          )}
         </div>
       </section>
 
@@ -147,6 +166,7 @@ export default async function ServicePage({ params }: ServicePageProps) {
         cases={relatedCases}
         relevance={service.caseRelevance}
         experienceNote={service.experienceNote}
+        heroCaseId={heroCase?.id}
       />
 
       <section className="ds-section">
@@ -232,7 +252,7 @@ export default async function ServicePage({ params }: ServicePageProps) {
 
       <ServiceOffer service={service} />
 
-      <ServiceFaq faq={service.faq} />
+      <Faq items={service.faq} />
 
       <section className="ds-section ds-section-dark">
         <div className="ds-section-shell">
@@ -252,13 +272,13 @@ export default async function ServicePage({ params }: ServicePageProps) {
                 placement="service_detail_footer"
                 className={primaryButton}
               >
-                {service.ctaLabel} no WhatsApp
+                {buttonLabels.contact}
               </WhatsAppLink>
               <HoverPrefetchLink
                 href="/servicos"
                 className={secondaryButtonDark}
               >
-                Ver todos os serviços
+                {buttonLabels.allServices}
               </HoverPrefetchLink>
             </div>
           </div>

app/servicos/_components/ServiceDiagram.test.tsx

@@ -0,0 +1,70 @@
+import { render, screen } from "@testing-library/react";
+import type { ServiceDiagramKind } from "@/lib/site-content";
+import { ServiceDiagram } from "./ServiceDiagram";
+
+/** Esquema de fluxo do topo dos serviços sem case com captura: SVG em linha, acessível, sem dado real nem logo de cliente. */
+
+const expected: Record<ServiceDiagramKind, string[]> = {
+  iot: ["Dispositivo ou sensor", "Gateway", "API", "Painel"],
+  arquitetura: ["Interface", "API", "Serviços", "Banco de dados"],
+  desktop: ["Aplicativo no computador", "Arquivos", "Sistemas locais"],
+};
+
+describe("ServiceDiagram", () => {
+  for (const kind of Object.keys(expected) as ServiceDiagramKind[]) {
+    it(`path: ${kind} -> an inline SVG image with the flow in its label and the steps in order`, () => {
+      const { container } = render(<ServiceDiagram kind={kind} />);
+
+      const svg = screen.getByRole("img");
+      expect(svg.tagName.toLowerCase()).toBe("svg");
+      expect(svg).toHaveAttribute("aria-label");
+      expect(svg.getAttribute("aria-label")?.length).toBeGreaterThan(60);
+      const labels = Array.from(container.querySelectorAll("svg text")).map(
+        (text) => text.textContent,
+      );
+      expect(labels).toEqual(expected[kind]);
+      // o texto do desenho está no rótulo da imagem: quem lê a tela ouve o fluxo inteiro
+      for (const label of expected[kind]) {
+        expect(svg.getAttribute("aria-label")?.toLowerCase()).toContain(
+          label.toLowerCase().replace("dispositivo ou sensor", "dispositivo"),
+        );
+      }
+      expect(container.querySelectorAll("svg img, svg image")).toHaveLength(0);
+    });
+  }
+
+  it("path: IoT and architecture -> three arrows between four steps; desktop -> two arrows, both ways", () => {
+    const iot = render(<ServiceDiagram kind="iot" />);
+    expect(iot.container.querySelectorAll("svg line")).toHaveLength(3);
+    // uma ponta por seta
+    expect(iot.container.querySelectorAll("svg polygon")).toHaveLength(3);
+    iot.unmount();
+
+    const arquitetura = render(<ServiceDiagram kind="arquitetura" />);
+    expect(arquitetura.container.querySelectorAll("svg line")).toHaveLength(3);
+    arquitetura.unmount();
+
+    const desktop = render(<ServiceDiagram kind="desktop" />);
+    expect(desktop.container.querySelectorAll("svg line")).toHaveLength(2);
+    // duas pontas por seta: a informação vai e volta
+    expect(desktop.container.querySelectorAll("svg polygon")).toHaveLength(4);
+  });
+
+  it("path: colors -> only site tokens (paper and white), never the lime that belongs to contact, never a client logo", () => {
+    const { container } = render(<ServiceDiagram kind="iot" />);
+
+    const html = container.innerHTML;
+    expect(html).toMatch(/var\(--paper\)/);
+    expect(html).toMatch(/var\(--white\)/);
+    expect(html).not.toMatch(/--slash|#ccff00|ccff00/i);
+    expect(html).not.toMatch(/<image|<img|href=/i);
+  });
+
+  it("path: caption -> says it is an illustration, with no client data", () => {
+    render(<ServiceDiagram kind="arquitetura" />);
+
+    expect(
+      screen.getByText("Esquema ilustrativo, sem dados de clientes."),
+    ).toBeVisible();
+  });
+});

app/servicos/_components/ServiceDiagram.tsx

@@ -0,0 +1,163 @@
+import type { ServiceDiagramKind } from "@/lib/site-content";
+
+/**
+ * Esquema de fluxo no topo do serviço que não tem case com captura gravada, no lugar da coluna vazia ao lado do título.
+ * SVG em linha, só com as cores do site (papel e branco sobre o fundo escuro, sem o verde-limão, que é do contato),
+ * sem dado real e sem logo de cliente. Para quem lê a tela, o esquema é uma imagem com o fluxo descrito em `aria-label`.
+ */
+
+const WIDTH = 480;
+const HEIGHT = 404;
+const ARROW_HEAD = 12;
+
+interface DiagramNode {
+  label: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface DiagramArrow {
+  x: number;
+  from: number;
+  to: number;
+  /** Ponta nas duas extremidades: a informação anda nos dois sentidos. */
+  both?: boolean;
+}
+
+interface DiagramShape {
+  description: string;
+  nodes: DiagramNode[];
+  arrows: DiagramArrow[];
+}
+
+/** Quatro etapas em coluna, de cima para baixo, ligadas por setas. */
+function column(labels: [string, string, string, string]) {
+  const nodes = labels.map((label, index) => ({
+    label,
+    x: 90,
+    y: 24 + index * 100,
+    width: 300,
+    height: 56,
+  }));
+  const arrows = nodes.slice(1).map((node, index) => ({
+    x: WIDTH / 2,
+    from: nodes[index].y + nodes[index].height,
+    to: node.y,
+  }));
+  return { nodes, arrows };
+}
+
+const diagrams: Record<ServiceDiagramKind, DiagramShape> = {
+  iot: {
+    description:
+      "Esquema do caminho dos dados: o dispositivo envia as leituras ao gateway, o gateway repassa à API e a API alimenta o painel.",
+    ...column(["Dispositivo ou sensor", "Gateway", "API", "Painel"]),
+  },
+  arquitetura: {
+    description:
+      "Esquema das camadas de um sistema: a interface chama a API, a API aciona os serviços e os serviços guardam e consultam o banco de dados.",
+    ...column(["Interface", "API", "Serviços", "Banco de dados"]),
+  },
+  desktop: {
+    description:
+      "Esquema de um aplicativo desktop: o aplicativo no computador troca informações, nos dois sentidos, com os arquivos e com os sistemas locais.",
+    nodes: [
+      {
+        label: "Aplicativo no computador",
+        x: 90,
+        y: 60,
+        width: 300,
+        height: 64,
+      },
+      { label: "Arquivos", x: 30, y: 280, width: 190, height: 64 },
+      { label: "Sistemas locais", x: 260, y: 280, width: 190, height: 64 },
+    ],
+    arrows: [
+      { x: 125, from: 124, to: 280, both: true },
+      { x: 355, from: 124, to: 280, both: true },
+    ],
+  },
+};
+
+function Arrow({ x, from, to, both = false }: DiagramArrow) {
+  const lineStart = both ? from + ARROW_HEAD : from;
+  return (
+    <g>
+      <line
+        x1={x}
+        y1={lineStart}
+        x2={x}
+        y2={to - ARROW_HEAD}
+        stroke="var(--paper)"
+        strokeOpacity={0.7}
+        strokeWidth={2}
+      />
+      <polygon
+        points={`${x - 7},${to - ARROW_HEAD} ${x + 7},${to - ARROW_HEAD} ${x},${to}`}
+        fill="var(--paper)"
+        fillOpacity={0.7}
+      />
+      {both ? (
+        <polygon
+          points={`${x - 7},${from + ARROW_HEAD} ${x + 7},${from + ARROW_HEAD} ${x},${from}`}
+          fill="var(--paper)"
+          fillOpacity={0.7}
+        />
+      ) : null}
+    </g>
+  );
+}
+
+export function ServiceDiagram({ kind }: { kind: ServiceDiagramKind }) {
+  const { description, nodes, arrows } = diagrams[kind];
+
+  return (
+    <figure className="mx-auto w-full min-w-0 max-w-[520px]">
+      <svg
+        role="img"
+        aria-label={description}
+        viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
+        className="block h-auto w-full border border-white/15 bg-[#0a0a0a]"
+        data-diagram={kind}
+      >
+        {arrows.map((arrow) => (
+          <Arrow key={`${arrow.x}-${arrow.from}`} {...arrow} />
+        ))}
+        {nodes.map(({ label, x, y, width, height }) => (
+          <g key={label}>
+            <rect
+              x={x}
+              y={y}
+              width={width}
+              height={height}
+              fill="var(--white)"
+              fillOpacity={0.06}
+              stroke="var(--paper)"
+              strokeOpacity={0.35}
+              strokeWidth={1.5}
+            />
+            <text
+              x={x + width / 2}
+              y={y + height / 2}
+              textAnchor="middle"
+              dominantBaseline="central"
+              fill="var(--paper)"
+              style={{
+                fontFamily: "var(--font-display)",
+                fontSize: 20,
+                fontWeight: 600,
+              }}
+            >
+              {label}
+            </text>
+          </g>
+        ))}
+      </svg>
+      <figcaption className="mt-sp-3 text-[15px] leading-6 text-white/70">
+        Esquema ilustrativo, sem dados de clientes.
+      </figcaption>
+    </figure>
+  );
+}

app/servicos/_components/ServiceFaq.tsx

@@ -1,32 +0,0 @@
-import type { ServicePageContent } from "@/lib/site-content";
-
-/** "Perguntas frequentes" do serviço. Sem perguntas, a seção não aparece. */
-export function ServiceFaq({ faq }: { faq: ServicePageContent["faq"] }) {
-  if (!faq || faq.length === 0) return null;
-
-  return (
-    <section className="ds-section">
-      <div className="ds-section-shell">
-        <div className="ds-section-header">
-          <div className="ds-section-meta">
-            <p className="ds-eyebrow">Dúvidas comuns</p>
-            <h2 className="ds-section-title">Perguntas frequentes</h2>
-            <p className="ds-section-description">
-              Respostas diretas às perguntas que costumam aparecer antes de cada
-              projeto começar.
-            </p>
-          </div>
-        </div>
-
-        <div className="ds-grid-2">
-          {faq.map((item) => (
-            <article key={item.question} className="ds-card">
-              <h3 className="ds-card-title">{item.question}</h3>
-              <p className="ds-copy">{item.answer}</p>
-            </article>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

app/servicos/_components/ServiceHeroCover.test.tsx

@@ -43,18 +43,76 @@ describe("ServiceHeroCover", () => {
     expect(container).toBeEmptyDOMElement();
   });
 
-  it("path: case with a capture -> a link to the case around a cover that loads first", () => {
+  it("path: case with a capture -> a cover that loads first and a caption with the case name, the relevance and 'Ver case'", () => {
     mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
-    render(<ServiceHeroCover caseStudy={sev} />);
+    const { container } = render(
+      <ServiceHeroCover
+        caseStudy={sev}
+        relevance="Frase sobre a relação com o serviço."
+      />,
+    );
 
     const link = screen.getByRole("link", {
-      name: new RegExp(`^Ver o case ${sev.title}`),
+      name: `Ver case ${sev.title}`,
     });
     expect(link).toHaveAttribute("href", `/cases/${sev.id}`);
     const image = screen.getByAltText(`Captura de tela do site ${sev.title}`);
     expect(image).toHaveAttribute("loading", "eager");
     expect(image).toHaveAttribute("fetchpriority", "high");
     expect(image).toHaveAttribute("sizes", coverSizes.hero);
+    // a imagem também leva ao case, mas fica fora da leitura e da tabulação: o link da legenda já leva ao mesmo lugar
+    const coverLink = image.closest("a");
+    expect(coverLink).toHaveAttribute("aria-hidden", "true");
+    expect(coverLink).toHaveAttribute("tabindex", "-1");
+    const caption = container.querySelector("figcaption");
+    expect(caption).toHaveTextContent(sev.title);
+    expect(caption).toHaveTextContent("Frase sobre a relação com o serviço.");
+    expect(caption).toContainElement(link);
+  });
+
+  it("path: no relevance sentence -> the caption keeps the name and the button", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    const { container } = render(<ServiceHeroCover caseStudy={sev} />);
+
+    expect(container.querySelector("figcaption")).toHaveTextContent(
+      new RegExp(`^${sev.title}Ver case`),
+    );
+    expect(
+      screen.getByRole("link", { name: `Ver case ${sev.title}` }),
+    ).toBeVisible();
+  });
+
+  it("path: mobile device -> the phone poster in a phone frame, a link to the case, no browser frame", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    const { container } = render(
+      <ServiceHeroCover caseStudy={sev} device="mobile" />,
+    );
+
+    expect(mockedGetCaseMedia).toHaveBeenCalledWith(sev.id, "mobile");
+    const link = screen.getByRole("link", {
+      name: `Ver case ${sev.title}`,
+    });
+    expect(link).toHaveAttribute("href", `/cases/${sev.id}`);
+    const screenElement = container.querySelector(".ds-phone-screen");
+    expect(screenElement).not.toBeNull();
+    expect(
+      decodeURIComponent(
+        (screenElement as HTMLElement).style.backgroundImage ?? "",
+      ),
+    ).toContain(`/videos/${sev.id}/mobile.webp`);
+    expect(container.querySelector(".ds-bframe")).toBeNull();
+    expect(container.querySelector("img")).toBeNull();
+  });
+
+  it("path: mobile device but no mobile capture -> renders nothing", () => {
+    mockedGetCaseMedia.mockImplementation((id, device) =>
+      device === "mobile" ? undefined : getShowcaseAssets(id, device),
+    );
+    const { container } = render(
+      <ServiceHeroCover caseStudy={sev} device="mobile" />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
   });
 
   it("path: link -> pre-fetches the case only after the pointer reaches it", () => {

app/servicos/_components/ServiceHeroCover.tsx

@@ -1,28 +1,76 @@
 import { CaseCover, coverSizes } from "@/app/cases/_components/CaseCover";
+import { getCaseMedia } from "@/app/cases/_components/case-media";
+import { textLinkDark } from "@/app/components/button-styles";
 import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
-import type { CaseStudyContent } from "@/lib/site-content";
+import { PhoneFrame } from "@/app/components/showcase/PhoneFrame";
+import {
+  buttonLabels,
+  type CaseStudyContent,
+  type HeroDevice,
+} from "@/lib/site-content";
 
-/** Capa do case de destaque ao lado do título do serviço. Sem case com captura, não mostra nada. */
+/**
+ * Capa do case de destaque ao lado do título do serviço: o site no computador (moldura de navegador) ou no celular
+ * (moldura de celular), conforme `device`. Sem captura do aparelho pedido, não mostra nada.
+ * Embaixo, a legenda: o nome do case, por que ele interessa a este serviço (`relevance`) e o botão "Ver case". É esta
+ * legenda que cita o case na página: ele não ganha um cartão a mais mais abaixo, porque a mesma imagem e o mesmo nome
+ * não aparecem duas vezes. A imagem também leva ao case, mas fica fora da leitura e da tabulação (o link da legenda
+ * já leva ao mesmo lugar).
+ */
 export function ServiceHeroCover({
   caseStudy,
+  device = "desktop",
+  relevance,
 }: {
   caseStudy?: CaseStudyContent;
+  device?: HeroDevice;
+  /** Por que o case interessa ao serviço, em uma frase. */
+  relevance?: string;
 }) {
   if (!caseStudy) return null;
 
+  const href = `/cases/${caseStudy.id}`;
+  const media =
+    device === "mobile" ? getCaseMedia(caseStudy.id, "mobile") : null;
+  if (device === "mobile" && !media) return null;
+
   return (
-    <HoverPrefetchLink
-      href={`/cases/${caseStudy.id}`}
-      className="block min-w-0"
+    <figure
+      className={`min-w-0 ${device === "mobile" ? "mx-auto w-full max-w-[360px]" : ""}`}
     >
-      <span className="sr-only">Ver o case {caseStudy.title}</span>
-      <CaseCover
-        id={caseStudy.id}
-        title={caseStudy.title}
-        demoUrl={caseStudy.demoUrl}
-        sizes={coverSizes.hero}
-        priority
-      />
-    </HoverPrefetchLink>
+      <HoverPrefetchLink
+        href={href}
+        aria-hidden="true"
+        tabIndex={-1}
+        className={
+          media ? "mx-auto block w-[min(62vw,240px)] min-w-0" : "block min-w-0"
+        }
+      >
+        {media ? (
+          <PhoneFrame poster={media.poster} />
+        ) : (
+          <CaseCover
+            id={caseStudy.id}
+            title={caseStudy.title}
+            demoUrl={caseStudy.demoUrl}
+            sizes={coverSizes.hero}
+            priority
+          />
+        )}
+      </HoverPrefetchLink>
+      <figcaption className="mt-sp-4 text-[15px] leading-6 text-white/75">
+        <strong className="font-semibold text-white">{caseStudy.title}</strong>
+        {relevance ? `: ${relevance}` : null}
+        <span className="mt-sp-1 block">
+          <HoverPrefetchLink
+            href={href}
+            className={`${textLinkDark} focus-visible:outline-2 focus-visible:outline-offset-4`}
+          >
+            {buttonLabels.case}
+            <span className="sr-only"> {caseStudy.title}</span>
+          </HoverPrefetchLink>
+        </span>
+      </figcaption>
+    </figure>
   );
 }

app/servicos/_components/ServiceOfferCards.paths.test.tsx

@@ -0,0 +1,111 @@
+import { render, screen, within } from "@testing-library/react";
+import { caseStudies, type ServiceOffer } from "@/lib/site-content";
+import { ServiceOfferCards } from "./ServiceOfferCards";
+
+/**
+ * Testes de caminhos-base de ServiceOfferCards / OfferCard (CC 4): id de case que existe | que não existe (ignorado);
+ * com cases | sem cases (a lista de links some); com observação | sem observação.
+ */
+
+jest.mock("next/navigation", () => ({ usePathname: () => "/servicos" }));
+
+function offer(overrides: Partial<ServiceOffer["proof"]>): ServiceOffer {
+  return {
+    id: "site",
+    name: "Oferta de teste",
+    summary: "Resumo.",
+    href: "/servicos/criacao-de-sites",
+    deliverables: ["Um", "Dois", "Três"],
+    proof: { label: "Veja funcionando", caseIds: [], ...overrides },
+  };
+}
+
+const card = () => screen.getByRole("article");
+
+describe("ServiceOfferCards", () => {
+  it("path: cases that exist and a note -> a link per case in the order given, then the note", () => {
+    render(
+      <ServiceOfferCards
+        offers={[
+          offer({ caseIds: ["sev-modaintima", "lavacao-047"], note: "Nota." }),
+        ]}
+      />,
+    );
+
+    const links = within(card()).getAllByRole("link", { name: /^Ver case / });
+    expect(links.map((link) => link.getAttribute("href"))).toEqual([
+      "/cases/sev-modaintima",
+      "/cases/lavacao-047",
+    ]);
+    expect(within(card()).getByText("Nota.")).toBeVisible();
+  });
+
+  it("path: an id with no case behind it -> skipped, the real cases around it stay", () => {
+    render(
+      <ServiceOfferCards
+        offers={[
+          offer({ caseIds: ["nao-existe", "lavacao-047", "tambem-nao"] }),
+        ]}
+      />,
+    );
+
+    const links = within(card()).getAllByRole("link", { name: /^Ver case / });
+    expect(links.map((link) => link.getAttribute("href"))).toEqual([
+      "/cases/lavacao-047",
+    ]);
+  });
+
+  it("path: only ids with no case -> no list of cases at all, the label and the service link stay", () => {
+    render(<ServiceOfferCards offers={[offer({ caseIds: ["nao-existe"] })]} />);
+
+    expect(
+      within(card()).queryAllByRole("link", { name: /^Ver case / }),
+    ).toEqual([]);
+    expect(within(card()).queryAllByRole("listitem")).toHaveLength(3);
+    expect(within(card()).getByText("Veja funcionando")).toBeVisible();
+    expect(
+      within(card()).getByRole("link", { name: /Ver o serviço|Ver serviço/ }),
+    ).toHaveAttribute("href", "/servicos/criacao-de-sites");
+  });
+
+  it("path: no cases and a note (the review offer) -> only the note under the label", () => {
+    render(
+      <ServiceOfferCards
+        offers={[
+          offer({
+            caseIds: [],
+            label: "Veja como funciona",
+            note: "A página mostra o que você recebe.",
+          }),
+        ]}
+      />,
+    );
+
+    expect(within(card()).getByText("Veja como funciona")).toBeVisible();
+    expect(
+      within(card()).getByText("A página mostra o que você recebe."),
+    ).toBeVisible();
+    expect(
+      within(card()).queryAllByRole("link", { name: /^Ver case / }),
+    ).toEqual([]);
+  });
+
+  it("path: cases and no note -> no empty paragraph for the note", () => {
+    const { container } = render(
+      <ServiceOfferCards offers={[offer({ caseIds: ["lavacao-047"] })]} />,
+    );
+
+    expect(container.querySelectorAll("article p")).toHaveLength(2);
+  });
+
+  it("path: every real case id of the real offers resolves to a case (no silently dropped proof)", () => {
+    const { serviceOffers } =
+      jest.requireActual<typeof import("@/lib/site-content")>(
+        "@/lib/site-content",
+      );
+    const known = new Set(caseStudies.map(({ id }) => id));
+
+    for (const { proof } of serviceOffers)
+      for (const id of proof.caseIds) expect(known.has(id)).toBe(true);
+  });
+});

app/servicos/_components/ServiceOfferCards.tsx

@@ -0,0 +1,71 @@
+import { secondaryButtonLight, textLink } from "@/app/components/button-styles";
+import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
+import {
+  buttonLabels,
+  caseStudies,
+  type ServiceOffer,
+} from "@/lib/site-content";
+
+function OfferCard({ offer }: { offer: ServiceOffer }) {
+  const proofCases = offer.proof.caseIds.flatMap((id) => {
+    const caseStudy = caseStudies.find((item) => item.id === id);
+    return caseStudy ? [caseStudy] : [];
+  });
+
+  return (
+    <article className="ds-card">
+      <h3 className="ds-card-title !mt-0 text-balance">{offer.name}</h3>
+      <p className="ds-copy !flex-grow-0">{offer.summary}</p>
+      <ul className="ds-list space-y-sp-2">
+        {offer.deliverables.map((item) => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+      <p className="ds-kicker mt-sp-6">{offer.proof.label}</p>
+      {proofCases.length > 0 ? (
+        <ul className="mt-sp-2 flex flex-wrap gap-x-sp-4">
+          {proofCases.map((caseStudy) => (
+            <li key={caseStudy.id}>
+              <HoverPrefetchLink
+                href={`/cases/${caseStudy.id}`}
+                className={`${textLink} focus-visible:outline-2 focus-visible:outline-offset-4`}
+              >
+                <span className="sr-only">{buttonLabels.case} </span>
+                {caseStudy.title}
+              </HoverPrefetchLink>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {offer.proof.note ? (
+        <p className="ds-copy !mt-sp-2 !flex-grow-0 text-[15px]">
+          {offer.proof.note}
+        </p>
+      ) : null}
+      <div className="mt-sp-6">
+        <HoverPrefetchLink
+          href={offer.href}
+          className={`${secondaryButtonLight} focus-visible:outline-2 focus-visible:outline-offset-4`}
+        >
+          {buttonLabels.service}
+          <span className="sr-only"> {offer.name}</span>
+        </HoverPrefetchLink>
+      </div>
+    </article>
+  );
+}
+
+/** As três ofertas, lado a lado no computador: nome, o que a pessoa recebe, onde ver funcionando e o link da página certa. */
+export function ServiceOfferCards({
+  offers,
+}: {
+  offers: readonly ServiceOffer[];
+}) {
+  return (
+    <div className="mt-sp-8 grid items-stretch gap-sp-6 lg:grid-cols-3">
+      {offers.map((offer) => (
+        <OfferCard key={offer.id} offer={offer} />
+      ))}
+    </div>
+  );
+}

app/servicos/_components/ServiceRelatedCases.paths.test.tsx

@@ -31,7 +31,9 @@ function withDesktopCapture() {
 const sev = getCase("sev-modaintima"); // cliente, com site no ar
 const asServicos = getCase("as-servicos"); // cliente, sem site público
 const twins = getCase("twins-lab"); // laboratório, sem site público
+/** Título com algum case de cliente; sem cliente (só experiência ou projeto próprio), é "Como eu trabalho nisso". */
 const TITLE = "Onde já apliquei isso";
+const TITLE_WITHOUT_CLIENT = "Como eu trabalho nisso";
 const NOTE = "Texto de experiência de teste.";
 
 beforeEach(() => {
@@ -57,11 +59,12 @@ describe("ServiceRelatedCases", () => {
     );
 
     expect(
-      screen.getByRole("heading", { level: 2, name: TITLE }),
+      screen.getByRole("heading", { level: 2, name: TITLE_WITHOUT_CLIENT }),
     ).toBeVisible();
+    expect(screen.queryByRole("heading", { name: TITLE })).toBeNull();
     expect(screen.getByText(NOTE)).toBeVisible();
     expect(container.querySelectorAll("article")).toHaveLength(0);
-    expect(screen.queryByRole("link", { name: /^Ler case:/ })).toBeNull();
+    expect(screen.queryByRole("link", { name: /^Ver case/ })).toBeNull();
   });
 
   it("path: cases and no experience note (main path) -> one card per case, no 'Na prática' paragraph", () => {
@@ -81,14 +84,15 @@ describe("ServiceRelatedCases", () => {
     if (!card) throw new Error("Missing case card");
     expect(within(card).getByText(sev.headline)).toBeVisible();
     // case de cliente: o kicker é só o nome
-    expect(within(card).getByText(sev.title)).toBeVisible();
+    const kicker = card.querySelector(".ds-kicker");
+    expect(kicker).toHaveTextContent(new RegExp(`^${sev.title}$`));
     expect(within(card).queryByText(/Projeto próprio/)).toBeNull();
     expect(within(card).getByText("Frase de relação do SEV.")).toBeVisible();
     expect(
-      within(card).getByRole("link", { name: `Ler case: ${sev.title}` }),
+      within(card).getByRole("link", { name: `Ver case ${sev.title}` }),
     ).toHaveAttribute("href", `/cases/${sev.id}`);
     expect(
-      within(card).getByRole("link", { name: `Abrir o site: ${sev.title}` }),
+      within(card).getByRole("link", { name: `Abrir o site ${sev.title}` }),
     ).toHaveAttribute("href", sev.demoUrl);
   });
 
@@ -107,7 +111,7 @@ describe("ServiceRelatedCases", () => {
     expect(note.querySelector("a")).toBeNull();
     expect(
       note.compareDocumentPosition(
-        screen.getByRole("link", { name: `Ler case: ${sev.title}` }),
+        screen.getByRole("link", { name: `Ver case ${sev.title}` }),
       ) & Node.DOCUMENT_POSITION_FOLLOWING,
     ).toBeTruthy();
   });
@@ -138,7 +142,7 @@ describe("ServiceRelatedCases", () => {
     expect(container.querySelector(".ds-bframe")).toBeNull();
     expect(container.querySelector("img")).toBeNull();
     expect(
-      screen.getByRole("link", { name: `Ler case: ${sev.title}` }),
+      screen.getByRole("link", { name: `Ver case ${sev.title}` }),
     ).toBeVisible();
   });
 
@@ -152,6 +156,42 @@ describe("ServiceRelatedCases", () => {
     );
 
     expect(screen.getByText(`${twins.title} · Projeto próprio`)).toBeVisible();
+    // só projeto próprio, sem cliente: o título não promete trabalho aplicado para alguém
+    expect(
+      screen.getByRole("heading", { level: 2, name: TITLE_WITHOUT_CLIENT }),
+    ).toBeVisible();
+  });
+
+  it("path: case whose cover already opens the page -> it gets no card at all (the cover caption cites it), the others keep theirs", () => {
+    withDesktopCapture();
+    const lavacao = getCase("lavacao-047");
+    const { container } = render(
+      <ServiceRelatedCases
+        cases={[lavacao, sev]}
+        relevance={{}}
+        heroCaseId={lavacao.id}
+      />,
+    );
+
+    expect(container.querySelectorAll("article")).toHaveLength(1);
+    expect(
+      container.querySelector(`a[href="/cases/${lavacao.id}"]`),
+    ).toBeNull();
+    expect(container.textContent).not.toContain(lavacao.title);
+    expect(
+      container.querySelector(`a[aria-hidden="true"][href="/cases/${sev.id}"]`),
+    ).not.toBeNull();
+    expect(
+      screen.getByRole("link", { name: `Ver case ${sev.title}` }),
+    ).toBeVisible();
+  });
+
+  it("path: the cover case is the only one -> no cases to list and no experience note -> renders nothing", () => {
+    const { container } = render(
+      <ServiceRelatedCases cases={[sev]} relevance={{}} heroCaseId={sev.id} />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
   });
 
   it("path: no relevance sentence for the case -> falls back to the case summary", () => {
@@ -172,7 +212,7 @@ describe("ServiceRelatedCases", () => {
     );
 
     expect(
-      screen.getByRole("link", { name: `Ler case: ${asServicos.title}` }),
+      screen.getByRole("link", { name: `Ver case ${asServicos.title}` }),
     ).toBeVisible();
     expect(screen.queryByRole("link", { name: /^Abrir o site/ })).toBeNull();
   });

app/servicos/_components/ServiceRelatedCases.test.tsx

@@ -18,7 +18,7 @@ it("shows only the experience note, without the 'open the case' sentence, when t
   );
 
   expect(
-    screen.getByRole("heading", { level: 2, name: "Onde já apliquei isso" }),
+    screen.getByRole("heading", { level: 2, name: "Como eu trabalho nisso" }),
   ).toBeVisible();
   expect(screen.getByText(note)).toBeVisible();
   expect(screen.queryByText(/Abra o case/)).toBeNull();
@@ -37,7 +37,7 @@ it("invites to open the case and lists each case when there are some", () => {
   expect(screen.getByText(/Abra o case/)).toBeVisible();
   expect(screen.getByText("Frase própria sobre a relação.")).toBeVisible();
   expect(
-    screen.getByRole("link", { name: `Ler case: ${caseStudy.title}` }),
+    screen.getByRole("link", { name: `Ver case ${caseStudy.title}` }),
   ).toHaveAttribute("href", `/cases/${caseStudy.id}`);
 });
 

app/servicos/_components/ServiceRelatedCases.tsx

@@ -1,7 +1,11 @@
 import { CaseCoverLink } from "@/app/cases/_components/CaseCoverLink";
 import { secondaryButtonLight, textLink } from "@/app/components/button-styles";
 import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
-import { type CaseStudyContent, isClientCase } from "@/lib/site-content";
+import {
+  buttonLabels,
+  type CaseStudyContent,
+  isClientCase,
+} from "@/lib/site-content";
 
 function ServiceCaseCard({
   caseStudy,
@@ -31,7 +35,8 @@ function ServiceCaseCard({
           href={`/cases/${caseStudy.id}`}
           className={secondaryButtonLight}
         >
-          Ler case: {caseStudy.title}
+          {buttonLabels.case}
+          <span className="sr-only"> {caseStudy.title}</span>
         </HoverPrefetchLink>
         {caseStudy.demoUrl ? (
           <a
@@ -40,7 +45,8 @@ function ServiceCaseCard({
             target="_blank"
             rel="noreferrer"
           >
-            Abrir o site: {caseStudy.title}
+            {buttonLabels.site}
+            <span className="sr-only"> {caseStudy.title}</span>
           </a>
         ) : null}
       </div>
@@ -49,22 +55,30 @@ function ServiceCaseCard({
 }
 
 /**
- * "Onde já apliquei isso": os cases ligados ao serviço, cada um com uma frase sobre o que ele tem a ver com ele,
- * e a experiência profissional citada em texto (sem link). Sem case, fica só a nota de experiência, sem a frase
- * que manda abrir o case; sem case nem experiência, não mostra nada.
+ * Prova do serviço. Com algum case de cliente, é "Onde já apliquei isso": os cases ligados ao serviço, cada um com uma
+ * frase sobre o que ele tem a ver com ele, e a experiência profissional citada em texto (sem link). Sem case de cliente
+ * (só projeto próprio, só experiência ou nada), o título é "Como eu trabalho nisso", porque não há cliente para citar.
+ * Sem case, fica só a nota de experiência, sem a frase que manda abrir o case; sem case nem experiência, não mostra nada.
+ * O case cuja capa abre a página (`heroCaseId`) não ganha cartão aqui: a legenda da capa já o cita, com a mesma frase de
+ * relação, e a imagem e o nome dele não aparecem duas vezes na mesma página.
  */
 export function ServiceRelatedCases({
-  cases,
+  cases: allCases,
   relevance,
   experienceNote,
+  heroCaseId,
 }: {
   cases: readonly CaseStudyContent[];
   /** Por que cada case interessa a este serviço (chave: id do case). */
   relevance: Readonly<Record<string, string>>;
   experienceNote?: string;
+  /** Case cuja capa já está no topo da página, com legenda: fica de fora dos cartões. */
+  heroCaseId?: string;
 }) {
+  const cases = allCases.filter(({ id }) => id !== heroCaseId);
   const hasCases = cases.length > 0;
   if (!hasCases && !experienceNote) return null;
+  const hasClientCase = cases.some(isClientCase);
 
   return (
     <section
@@ -75,9 +89,13 @@ export function ServiceRelatedCases({
       <div className="ds-section-shell">
         <div className="ds-section-header">
           <div className="ds-section-meta">
-            <p className="ds-eyebrow">Trabalhos parecidos</p>
+            <p className="ds-eyebrow">
+              {hasClientCase ? "Trabalhos parecidos" : "Experiência"}
+            </p>
             <h2 id="casos-relacionados-titulo" className="ds-section-title">
-              Onde já apliquei isso
+              {hasClientCase
+                ? "Onde já apliquei isso"
+                : "Como eu trabalho nisso"}
             </h2>
             {hasCases ? (
               <p className="ds-section-description">

app/servicos/page.paths.test.tsx

@@ -34,8 +34,27 @@ describe("ServicesIndexPage: topo sem captura gravada", () => {
         name: "Sites, sistemas e aplicativos sob medida.",
       }),
     ).toBeVisible();
+    // o botão do topo leva à lista de cases (não há mais seção de projetos nesta página)
+    expect(screen.getByRole("link", { name: "Ver os cases" })).toHaveAttribute(
+      "href",
+      "/cases",
+    );
+    const contactLinks = screen.getAllByRole("link", {
+      name: "Falar sobre meu projeto",
+    });
+    expect(contactLinks).toHaveLength(2);
+    for (const link of contactLinks) {
+      expect(link).toHaveAttribute(
+        "href",
+        expect.stringContaining("https://wa.me/"),
+      );
+    }
+    // as três ofertas seguem no topo da página, mesmo sem nenhuma captura
     expect(
-      screen.getByRole("link", { name: "Ver projetos realizados" }),
-    ).toHaveAttribute("href", "#projetos");
+      screen.getByRole("heading", {
+        level: 2,
+        name: "Três jeitos de começar.",
+      }),
+    ).toBeVisible();
   });
 });

app/servicos/page.tsx

@@ -1,6 +1,4 @@
 import type { Metadata } from "next";
-import { coverSizes } from "@/app/cases/_components/CaseCover";
-import { CaseCoverLink } from "@/app/cases/_components/CaseCoverLink";
 import {
   compactHero,
   heroWithMediaGrid,
@@ -14,47 +12,48 @@ import {
   pageTop,
   primaryButton,
   secondaryButtonDark,
-  textLink,
 } from "@/app/components/button-styles";
+import { Faq } from "@/app/components/Faq";
 import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
 import WhatsAppLink from "@/app/components/WhatsAppLink";
 import { safeJsonLd } from "@/lib/jsonld";
 import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
-import { clientCases, serviceHubLinks, siteUrl } from "@/lib/site-content";
+import {
+  buttonLabels,
+  clientCasesForListing,
+  serviceHubLinks,
+  serviceOffers,
+  siteUrl,
+} from "@/lib/site-content";
 import { SERVICES_SUBJECT } from "@/lib/whatsapp";
+import { ServiceOfferCards } from "./_components/ServiceOfferCards";
 
 const pageUrl = `${siteUrl}/servicos`;
 const pageTitle = "Sites, sistemas e aplicativos sob medida";
 const pageDescription =
   "Sites, sistemas web e aplicativos sob medida para apresentar seu negócio e organizar a operação. Garuva e Joinville (SC), remoto em todo o Brasil.";
 
-const businessIntents = [
+/** Páginas que as três ofertas já abrem; os demais serviços ficam na lista "Outros serviços". */
+const offerHrefs = new Set(serviceOffers.map(({ href }) => href));
+const otherServices = serviceHubLinks.filter(
+  ({ href }) => !offerHrefs.has(href),
+);
+
+const hubFaq = [
   {
-    title: "Quero um site para meu negócio",
-    description:
-      "Apresente seus serviços, produtos e diferenciais em um endereço próprio, com leitura no celular e um caminho claro para o cliente entrar em contato.",
-    href: "/servicos/criacao-de-sites",
-    linkLabel: "Conhecer a criação de sites",
-    service: "Sites profissionais",
-    ctaLabel: "Conversar sobre meu site",
+    question: "Quanto custa e quanto tempo leva?",
+    answer:
+      "Depende das funcionalidades, conteúdo e integrações. O valor e o prazo são definidos depois de entender os requisitos, antes de iniciar o desenvolvimento.",
   },
   {
-    title: "Preciso organizar minha operação",
-    description:
-      "Um sistema web para acompanhar pedidos, atendimentos ou informações hoje espalhadas em planilhas. Também posso conectar ferramentas e melhorar o software que você já usa.",
-    href: "/servicos/engenharia-de-software",
-    linkLabel: "Conhecer o desenvolvimento de sistemas",
-    service: "Sistemas web",
-    ctaLabel: "Conversar sobre meu sistema",
+    question: "Preciso estar em Joinville ou em Garuva?",
+    answer:
+      "Não. O atendimento é remoto, com conversas, demonstrações e revisões on-line para projetos em todo o Brasil.",
   },
   {
-    title: "Quero desenvolver um aplicativo",
-    description:
-      "Leve um fluxo de trabalho para o celular ou computador. Avaliamos quem vai usar, os recursos necessários e a plataforma antes de definir o desenvolvimento e a distribuição.",
-    href: "/servicos/engenharia-de-software",
-    linkLabel: "Entender o escopo de um app mobile",
-    service: "Aplicativos mobile e desktop",
-    ctaLabel: "Conversar sobre meu aplicativo",
+    question: "E se eu já tiver um site ou sistema?",
+    answer:
+      "Avalio a base atual para propor melhorias, correções ou integrações. Recomeçar do zero não é uma condição para trabalhar comigo.",
   },
 ];
 
@@ -70,8 +69,9 @@ export const metadata: Metadata = {
 };
 
 export default function ServicesIndexPage() {
-  // três pôsteres dos clientes na coluna ao lado do título, que ficaria vazia
-  const posters = getMosaicPosters(clientCases.map(({ id }) => id));
+  // três pôsteres dos clientes na coluna ao lado do título, que ficaria vazia; a SEV fica de fora (ela vai por último)
+  // e nenhum cliente se repete mais abaixo, onde as ofertas citam os cases só por link
+  const posters = getMosaicPosters(clientCasesForListing.map(({ id }) => id));
   const hasMosaic = posters.length > 0;
   const jsonLd = {
     "@context": "https://schema.org",
@@ -132,18 +132,17 @@ export default function ServicesIndexPage() {
                 service={SERVICES_SUBJECT}
                 placement="service_hub_hero"
               >
-                Falar com Evandro no WhatsApp
+                {buttonLabels.contact}
               </WhatsAppLink>
-              <a
-                href="#projetos"
+              <HoverPrefetchLink
+                href="/cases"
                 className={`${secondaryButtonDark} focus-visible:outline-2 focus-visible:outline-offset-4`}
               >
-                Ver projetos realizados
-              </a>
+                {buttonLabels.allCases}
+              </HoverPrefetchLink>
             </div>
             <p className="ds-copy max-w-[62ch]">
-              Sou Evandro, desenvolvedor de software, e a conversa é direta
-              comigo.
+              Sou Evandro, desenvolvedor de software, e a conversa é comigo.
             </p>
             <p className="mt-sp-2 text-[15px] leading-6 text-white/70">
               Garuva e Joinville (SC) · atendimento remoto em todo o Brasil
@@ -153,155 +152,35 @@ export default function ServicesIndexPage() {
         </div>
       </section>
 
-      <section className="ds-section" aria-labelledby="necessidade-title">
-        <div className="ds-section-shell grid items-start gap-sp-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] lg:gap-sp-16">
-          <div>
-            <h2 id="necessidade-title" className="ds-section-title">
-              O que você precisa fazer?
-            </h2>
-            <p className="ds-copy">
-              Não precisa chegar com um projeto técnico pronto. Começamos pela
-              sua rotina e pelo que precisa mudar.
-            </p>
-          </div>
-          <div className="divide-y divide-[var(--border)]">
-            {businessIntents.map((intent) => (
-              <article
-                key={intent.service}
-                className="py-sp-6 first:pt-0 last:pb-0"
-              >
-                <h3 className="ds-card-title">{intent.title}</h3>
-                <p className="ds-copy">{intent.description}</p>
-                <div className="mt-sp-4 flex flex-wrap items-center gap-x-sp-6 gap-y-sp-2">
-                  <WhatsAppLink
-                    className={primaryButton}
-                    service={intent.service}
-                    placement="service_hub_intent"
-                  >
-                    {intent.ctaLabel}
-                  </WhatsAppLink>
-                  <HoverPrefetchLink
-                    href={intent.href}
-                    className={`${textLink} focus-visible:outline-2 focus-visible:outline-offset-4`}
-                  >
-                    {intent.linkLabel}
-                  </HoverPrefetchLink>
-                </div>
-              </article>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      <section
-        id="projetos"
-        className="ds-section"
-        aria-labelledby="projetos-title"
-      >
+      <section className="ds-section" aria-labelledby="ofertas-title">
         <div className="ds-section-shell">
-          <h2 id="projetos-title" className="ds-section-title">
-            Veja o trabalho antes de conversar.
+          <h2
+            id="ofertas-title"
+            className="ds-section-title max-w-[26ch] text-balance"
+          >
+            Três jeitos de começar.
           </h2>
           <p className="ds-copy max-w-[64ch]">
-            Projetos feitos para empresas. Abra o case para ver o que foi feito
-            e como o site ficou.
+            Não precisa chegar com um projeto técnico pronto. Escolha o que mais
+            se parece com o seu caso; começamos pela sua rotina e pelo que
+            precisa mudar.
           </p>
-          <div className="mt-sp-8 grid gap-sp-8 md:grid-cols-2">
-            {clientCases.map((caseStudy) => (
-              <article
-                key={caseStudy.id}
-                className="border-t border-[var(--border)] pt-sp-6"
-              >
-                <CaseCoverLink
-                  id={caseStudy.id}
-                  title={caseStudy.title}
-                  demoUrl={caseStudy.demoUrl}
-                  sizes={coverSizes.column}
-                />
-                <p className="ds-kicker">{caseStudy.title}</p>
-                <h3 className="ds-card-title">{caseStudy.headline}</h3>
-                <p className="ds-copy">{caseStudy.summary}</p>
-                <HoverPrefetchLink
-                  href={`/cases/${caseStudy.id}`}
-                  className={`${textLink} mt-sp-4 focus-visible:outline-2 focus-visible:outline-offset-4`}
-                >
-                  Ver o case {caseStudy.title}
-                </HoverPrefetchLink>
-              </article>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      <section className="ds-section">
-        <div className="ds-section-shell grid gap-sp-10 lg:grid-cols-2 lg:gap-sp-16">
-          <div>
-            <h2 className="ds-section-title">
-              Como saímos da conversa para a entrega.
-            </h2>
-            <ol className="ds-list space-y-sp-4 list-decimal">
-              <li>
-                <strong>Entender o problema.</strong> Conversamos sobre o
-                negócio, quem vai usar e o que já existe.
-              </li>
-              <li>
-                <strong>Combinar o escopo.</strong> Definimos prioridades,
-                plataformas, responsabilidades, orçamento e prazo na proposta.
-              </li>
-              <li>
-                <strong>Construir e revisar.</strong> Você acompanha as etapas.
-                Validamos a entrega e combinamos publicação, suporte e evolução.
-              </li>
-            </ol>
-          </div>
-          <div>
-            <h2 className="ds-card-title">Antes de contratar</h2>
-            <dl className="mt-sp-5 space-y-sp-6 text-[15px]">
-              <div>
-                <dt className="font-semibold">
-                  Quanto custa e quanto tempo leva?
-                </dt>
-                <dd className="ds-copy !mt-sp-2">
-                  Depende das funcionalidades, conteúdo e integrações. O valor e
-                  o prazo são definidos depois de entender os requisitos, antes
-                  de iniciar o desenvolvimento.
-                </dd>
-              </div>
-              <div>
-                <dt className="font-semibold">
-                  Preciso estar em Joinville ou em Garuva?
-                </dt>
-                <dd className="ds-copy !mt-sp-2">
-                  Não. O atendimento é remoto, com conversas, demonstrações e
-                  revisões on-line para projetos em todo o Brasil.
-                </dd>
-              </div>
-              <div>
-                <dt className="font-semibold">
-                  E se eu já tiver um site ou sistema?
-                </dt>
-                <dd className="ds-copy !mt-sp-2">
-                  Avalio a base atual para propor melhorias, correções ou
-                  integrações. Recomeçar do zero não é uma condição para
-                  trabalhar comigo.
-                </dd>
-              </div>
-            </dl>
-          </div>
+          <ServiceOfferCards offers={serviceOffers} />
         </div>
       </section>
 
       <section className="ds-section" aria-labelledby="servicos-title">
         <div className="ds-section-shell">
           <h2 id="servicos-title" className="ds-section-title">
-            Quer aprofundar o escopo técnico?
+            Outros serviços
           </h2>
           <p className="ds-copy max-w-[64ch]">
-            Consulte as áreas de atuação, incluindo desktop, integrações,
-            consultoria e IoT. Cada página explica o que posso fazer por você.
+            Consultoria em Next.js, aplicativos desktop, integração de
+            equipamentos e diagnóstico de arquitetura. Cada página explica o que
+            posso fazer por você.
           </p>
           <ul className="mt-sp-8 divide-y divide-[var(--border)] border-y border-[var(--border)]">
-            {serviceHubLinks.map((service) => (
+            {otherServices.map((service) => (
               <li
                 key={service.href}
                 className="grid items-start gap-sp-3 py-sp-5 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-sp-8"
@@ -319,6 +198,30 @@ export default function ServicesIndexPage() {
         </div>
       </section>
 
+      <section className="ds-section">
+        <div className="ds-section-shell">
+          <h2 className="ds-section-title max-w-[26ch] text-balance">
+            Como saímos da conversa para a entrega.
+          </h2>
+          <ol className="ds-list max-w-[68ch] list-decimal space-y-sp-4">
+            <li>
+              <strong>Entender o problema.</strong> Conversamos sobre o negócio,
+              quem vai usar e o que já existe.
+            </li>
+            <li>
+              <strong>Combinar o escopo.</strong> Definimos prioridades,
+              plataformas, responsabilidades, orçamento e prazo na proposta.
+            </li>
+            <li>
+              <strong>Construir e revisar.</strong> Você acompanha as etapas.
+              Validamos a entrega e combinamos publicação, suporte e evolução.
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      <Faq items={hubFaq} title="Antes de contratar" />
+
       <section className="ds-section ds-section-dark">
         <div className="ds-section-shell">
           <h2 className="ds-section-title max-w-[24ch]">
@@ -334,7 +237,7 @@ export default function ServicesIndexPage() {
             service={SERVICES_SUBJECT}
             placement="service_hub_footer"
           >
-            Conversar com Evandro no WhatsApp
+            {buttonLabels.contact}
           </WhatsAppLink>
         </div>
       </section>