feat(cases): prova certa por serviço, páginas internas com trabalho no topo

Diagnóstico sem case que não cabe; desktop com o GCC Installer como projeto próprio; IoT com o Twins Lab e a nota da Apolo. Mosaico de pôsteres em /servicos e /cases, faixa baixa em uma coluna no currículo, privacidade e laboratório; Laboratório como lista compacta; SEV começando por catálogo, pedido no WhatsApp e painel; Joinville e SC nos títulos; imagens do LCP com fetchPriority e sizes reais; pré-carregamento só no hover; 404 com Open Graph próprio.

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

@@ -2,6 +2,7 @@ import { render, screen, within } from "@testing-library/react";
 import { SEO_IDS } from "@/lib/seo";
 import {
   caseStudies,
+  clientCases,
   getRelatedCases,
   getServicePage,
   isClientCase,
@@ -207,6 +208,33 @@ 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", () => {
+  const { container } = render(<ServicesIndexPage />);
+
+  const hero = container.querySelector("section");
+  expect(hero?.querySelector(".ds-section-shell")).toHaveClass("grid");
+  const posters = Array.from(hero?.querySelectorAll("img") ?? []);
+  expect(posters).toHaveLength(3);
+  for (const [index, poster] of posters.entries()) {
+    expect(decodeURIComponent(poster.getAttribute("src") ?? "")).toContain(
+      `/videos/${clientCases[index].id}/desktop.webp`,
+    );
+    expect(poster).toHaveAttribute("alt", "");
+  }
+  // só o primeiro, o maior, carrega na hora e com prioridade alta
+  expect(posters[0]).toHaveAttribute("fetchpriority", "high");
+  expect(posters[1]).toHaveAttribute("loading", "lazy");
+  expect(hero).toHaveTextContent(
+    "Garuva e Joinville (SC) · atendimento remoto em todo o Brasil",
+  );
+  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");
+});
+
 it("keeps hub cards and structured items aligned", () => {
   const { container } = render(<ServicesIndexPage />);
 
@@ -309,19 +337,75 @@ it("shows the client cases first, right after the hero, with the first cover in
   expect(hero?.querySelector("a[href='/cases/sev-modaintima']")).not.toBeNull();
 });
 
-it("hides the related block and the hero frame when a service has no case", async () => {
-  const { container } = await renderService("tauri-rust");
+it("shows no case, no frame and no 'similar projects' button on the diagnosis service, only the Apolo note", 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.queryByRole("heading", { name: "Onde já apliquei isso" }),
-  ).toBeNull();
+    screen.getByRole("heading", { name: "Onde já apliquei isso" }),
+  ).toBeVisible();
+  expect(screen.getByText(/Apolo Energia/)).toBeVisible();
   expect(screen.queryByRole("link", { name: /^Ler case:/ })).toBeNull();
   expect(
     screen.queryByRole("link", { name: "Ver projetos parecidos" }),
   ).toBeNull();
+  expect(screen.queryByText(/SEV Moda Íntima/)).toBeNull();
   expect(container.querySelector(".ds-bframe")).toBeNull();
-  // GCC Installer (Python e Tkinter) não pertence a um serviço de Tauri e Rust
-  expect(container.textContent).not.toMatch(/GCC|Tkinter/);
+});
+
+it("lists the Windows app as a 'Projeto próprio' on the desktop service, saying it is made in Python", async () => {
+  const { container } = await renderService("tauri-rust");
+
+  expect(
+    screen.getByRole("link", { name: "Ler 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.getByRole("link", { name: "Ver projetos parecidos" }),
+  ).toHaveAttribute("href", "#casos-relacionados");
+  // sem captura gravada, não há moldura nem imagem
+  expect(container.querySelector(".ds-bframe")).toBeNull();
+});
+
+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",
+  ]) {
+    const { container, unmount } = await renderService(slug);
+    const hero = container.querySelector("section");
+    expect(hero?.className).toContain("md:!pb-sp-12");
+    expect(hero?.querySelector(".ds-section-shell")).not.toHaveClass("grid");
+    unmount();
+  }
+
+  const withMedia = await renderService("criacao-de-sites");
+  const hero = withMedia.container.querySelector("section");
+  expect(hero?.className).not.toContain("md:!pb-sp-12");
+  expect(hero?.querySelector(".ds-section-shell")).toHaveClass("grid");
+  const cover = hero?.querySelector(".ds-bframe img");
+  // a largura real da coluna da direita, e não 100vw; é a imagem que abre a página
+  expect(cover?.getAttribute("sizes")).toMatch(/calc\(100vw - 40px\)$/);
+  expect(cover).toHaveAttribute("loading", "eager");
+  expect(cover).toHaveAttribute("fetchpriority", "high");
+});
+
+it("puts the location in one line, 'Garuva e Joinville (SC)', and spaces the list items", async () => {
+  const { container } = await renderService("consultoria-nextjs");
+
+  expect(container.textContent).toMatch(
+    /Garuva e Joinville \(SC\) · atendimento remoto em todo o Brasil/,
+  );
+  expect(container.textContent).not.toMatch(/a partir de Garuva/);
+  const lists = Array.from(container.querySelectorAll("ul.ds-list"));
+  expect(lists).toHaveLength(4);
+  for (const list of lists) {
+    expect(list).toHaveClass("space-y-sp-2");
+  }
 });
 
 it("labels the Twins Lab prototype as a laboratory project on the IoT service", async () => {

app/servicos/[slug]/page.tsx

@@ -1,13 +1,17 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getCaseMedia } from "@/app/cases/_components/case-media";
+import {
+  compactHero,
+  heroWithMediaGrid,
+} from "@/app/cases/_components/hero-styles";
 import { Breadcrumb } from "@/app/components/Breadcrumb";
 import {
   pageTop,
   primaryButton,
   secondaryButtonDark,
 } from "@/app/components/button-styles";
+import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
 import WhatsAppLink from "@/app/components/WhatsAppLink";
 import { safeJsonLd } from "@/lib/jsonld";
 import {
@@ -92,13 +96,13 @@ export default async function ServicePage({ params }: ServicePageProps) {
     <main>
       <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
 
-      <section className={`ds-section ds-section-dark ${pageTop}`}>
+      <section
+        className={`ds-section ds-section-dark ${pageTop} ${
+          heroCase ? "" : compactHero
+        }`}
+      >
         <div
-          className={`ds-section-shell ${
-            heroCase
-              ? "grid items-center gap-sp-10 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] lg:gap-sp-16"
-              : ""
-          }`}
+          className={`ds-section-shell ${heroCase ? heroWithMediaGrid : ""}`}
         >
           <div className="max-w-[860px]">
             <Breadcrumb
@@ -129,10 +133,10 @@ export default async function ServicePage({ params }: ServicePageProps) {
                 </a>
               ) : null}
             </div>
-            <p className="mt-sp-4 text-[15px] md:text-sm leading-6 text-white/70">
+            <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. Atendimento remoto a partir de Garuva,
-              SC.
+              preencher um formulário. Garuva e Joinville (SC) · atendimento
+              remoto em todo o Brasil.
             </p>
           </div>
           <ServiceHeroCover caseStudy={heroCase} />
@@ -150,7 +154,7 @@ export default async function ServicePage({ params }: ServicePageProps) {
           <div className="ds-grid-2">
             <article className="ds-card">
               <h2 className="ds-card-title !mt-0">Para quem faz sentido</h2>
-              <ul className="ds-list">
+              <ul className="ds-list space-y-sp-2">
                 {service.audience.map((item) => (
                   <li key={item}>{item}</li>
                 ))}
@@ -159,7 +163,7 @@ export default async function ServicePage({ params }: ServicePageProps) {
 
             <article className="ds-card">
               <h2 className="ds-card-title !mt-0">O que podemos entregar</h2>
-              <ul className="ds-list">
+              <ul className="ds-list space-y-sp-2">
                 {service.outcomes.map((item) => (
                   <li key={item}>{item}</li>
                 ))}
@@ -175,7 +179,7 @@ export default async function ServicePage({ params }: ServicePageProps) {
             <article className="min-w-0">
               <div className="ds-kicker">Da conversa à entrega</div>
               <h2 className="ds-card-title">Como trabalhamos</h2>
-              <ol className="mt-sp-5 list-decimal space-y-sp-4 pl-sp-5 text-[15px] md:text-sm leading-8 text-[var(--ink-80)]">
+              <ol className="mt-sp-5 list-decimal space-y-sp-4 pl-sp-5 text-[15px] leading-8 text-[var(--ink-80)]">
                 {service.process.map((step) => (
                   <li key={step} className="pl-sp-2">
                     {step}
@@ -191,7 +195,7 @@ export default async function ServicePage({ params }: ServicePageProps) {
                 Situações comuns em que este serviço ajuda. A sua será combinada
                 na conversa.
               </p>
-              <ul className="ds-list">
+              <ul className="ds-list space-y-sp-2">
                 {service.examples.map((example) => (
                   <li key={example}>{example}</li>
                 ))}
@@ -205,7 +209,7 @@ export default async function ServicePage({ params }: ServicePageProps) {
               Detalhes técnicos e tecnologias
             </summary>
             <div className="max-w-[80ch]">
-              <ul className="ds-list">
+              <ul className="ds-list space-y-sp-2">
                 {service.technicalDetails.map((detail) => (
                   <li key={detail}>{detail}</li>
                 ))}
@@ -240,8 +244,7 @@ export default async function ServicePage({ params }: ServicePageProps) {
             <p className="ds-copy !text-[rgba(255,255,255,0.76)]">
               Pode ser uma ideia, uma tarefa que toma tempo ou um sistema que
               precisa melhorar. Não é preciso chegar com uma solução técnica.
-              Atendo a partir de Garuva, no Norte de Santa Catarina, e
-              remotamente.
+              Atendo em Garuva e Joinville (SC) e remotamente, em todo o Brasil.
             </p>
             <div className="mt-sp-6 flex flex-wrap gap-sp-3">
               <WhatsAppLink
@@ -251,9 +254,12 @@ export default async function ServicePage({ params }: ServicePageProps) {
               >
                 {service.ctaLabel} no WhatsApp
               </WhatsAppLink>
-              <Link href="/servicos" className={secondaryButtonDark}>
+              <HoverPrefetchLink
+                href="/servicos"
+                className={secondaryButtonDark}
+              >
                 Ver todos os serviços
-              </Link>
+              </HoverPrefetchLink>
             </div>
           </div>
         </div>