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>

app/servicos/_components/ServiceHeroCover.test.tsx

@@ -0,0 +1,69 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { coverSizes } from "@/app/cases/_components/CaseCover";
+import { getCaseMedia } from "@/app/cases/_components/case-media";
+import { getShowcaseAssets } from "@/lib/project-showcase";
+import { caseStudies } from "@/lib/site-content";
+import { ServiceHeroCover } from "./ServiceHeroCover";
+
+/**
+ * Capa de destaque do serviço: sem case não mostra nada; com case, é a imagem que abre a página (carga na hora,
+ * prioridade alta e a largura real da coluna) e o link só pré-carrega o case quando a pessoa chega nele.
+ */
+
+jest.mock("@/app/cases/_components/case-media", () => ({
+  getCaseMedia: jest.fn(),
+}));
+jest.mock("next/link", () => ({
+  __esModule: true,
+  default: ({
+    children,
+    prefetch,
+    ...props
+  }: { children?: React.ReactNode; prefetch?: boolean | null } & Record<
+    string,
+    unknown
+  >) => (
+    <a data-prefetch={String(prefetch)} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+const mockedGetCaseMedia = jest.mocked(getCaseMedia);
+const sev = caseStudies.filter(({ id }) => id === "sev-modaintima")[0];
+
+afterEach(() => {
+  mockedGetCaseMedia.mockReset();
+});
+
+describe("ServiceHeroCover", () => {
+  it("path: no case -> renders nothing", () => {
+    const { container } = render(<ServiceHeroCover />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("path: case with a capture -> a link to the case around a cover that loads first", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    render(<ServiceHeroCover caseStudy={sev} />);
+
+    const link = screen.getByRole("link", {
+      name: new RegExp(`^Ver o 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);
+  });
+
+  it("path: link -> pre-fetches the case only after the pointer reaches it", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    render(<ServiceHeroCover caseStudy={sev} />);
+
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute("data-prefetch", "false");
+    fireEvent.mouseEnter(link);
+    expect(link).toHaveAttribute("data-prefetch", "null");
+  });
+});

app/servicos/_components/ServiceHeroCover.tsx

@@ -1,5 +1,5 @@
-import Link from "next/link";
-import { CaseCover } from "@/app/cases/_components/CaseCover";
+import { CaseCover, coverSizes } from "@/app/cases/_components/CaseCover";
+import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
 import type { CaseStudyContent } 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. */
@@ -11,15 +11,18 @@ export function ServiceHeroCover({
   if (!caseStudy) return null;
 
   return (
-    <Link href={`/cases/${caseStudy.id}`} className="block min-w-0">
+    <HoverPrefetchLink
+      href={`/cases/${caseStudy.id}`}
+      className="block min-w-0"
+    >
       <span className="sr-only">Ver o case {caseStudy.title}</span>
       <CaseCover
         id={caseStudy.id}
         title={caseStudy.title}
         demoUrl={caseStudy.demoUrl}
-        sizes="(min-width: 1024px) 520px, 100vw"
+        sizes={coverSizes.hero}
         priority
       />
-    </Link>
+    </HoverPrefetchLink>
   );
 }

app/servicos/_components/ServiceRelatedCases.tsx

@@ -1,6 +1,6 @@
-import Link from "next/link";
 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";
 
 function ServiceCaseCard({
@@ -27,9 +27,12 @@ function ServiceCaseCard({
       <p className="ds-kicker mt-sp-5">Relação com este serviço</p>
       <p className="ds-copy !mt-sp-2">{relevance ?? caseStudy.summary}</p>
       <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
-        <Link href={`/cases/${caseStudy.id}`} className={secondaryButtonLight}>
+        <HoverPrefetchLink
+          href={`/cases/${caseStudy.id}`}
+          className={secondaryButtonLight}
+        >
           Ler case: {caseStudy.title}
-        </Link>
+        </HoverPrefetchLink>
         {caseStudy.demoUrl ? (
           <a
             href={caseStudy.demoUrl}

app/servicos/page.paths.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from "@testing-library/react";
+import { getCaseMedia } from "@/app/cases/_components/case-media";
+import { compactHero } from "@/app/cases/_components/hero-styles";
+import ServicesIndexPage from "./page";
+
+/**
+ * Teste de caminhos-base do topo de ServicesIndexPage sem mosaico: nenhum case de cliente tem captura gravada.
+ * O caminho com o mosaico (três pôsteres, duas colunas) está em [slug]/page.test.tsx.
+ */
+
+jest.mock("@/app/cases/_components/case-media", () => ({
+  getCaseMedia: jest.fn(),
+}));
+
+const mockedGetCaseMedia = jest.mocked(getCaseMedia);
+
+afterEach(() => {
+  mockedGetCaseMedia.mockReset();
+});
+
+describe("ServicesIndexPage: topo sem captura gravada", () => {
+  it("path: no capture for any client -> no mosaic, a lower one-column strip, the text and buttons stay", () => {
+    mockedGetCaseMedia.mockReturnValue(undefined);
+
+    const { container } = render(<ServicesIndexPage />);
+
+    const hero = container.querySelector("section");
+    expect(hero).toHaveClass(compactHero);
+    expect(hero?.querySelector(".ds-section-shell")).not.toHaveClass("grid");
+    expect(hero?.querySelector("img")).toBeNull();
+    expect(
+      screen.getByRole("heading", {
+        level: 1,
+        name: "Sites, sistemas e aplicativos sob medida.",
+      }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("link", { name: "Ver projetos realizados" }),
+    ).toHaveAttribute("href", "#projetos");
+  });
+});

app/servicos/page.tsx

@@ -1,6 +1,14 @@
 import type { Metadata } from "next";
-import Link from "next/link";
+import { coverSizes } from "@/app/cases/_components/CaseCover";
 import { CaseCoverLink } from "@/app/cases/_components/CaseCoverLink";
+import {
+  compactHero,
+  heroWithMediaGrid,
+} from "@/app/cases/_components/hero-styles";
+import {
+  getMosaicPosters,
+  PosterMosaic,
+} from "@/app/cases/_components/PosterMosaic";
 import { Breadcrumb } from "@/app/components/Breadcrumb";
 import {
   pageTop,
@@ -8,15 +16,17 @@ import {
   secondaryButtonDark,
   textLink,
 } from "@/app/components/button-styles";
+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 { SERVICES_SUBJECT } from "@/lib/whatsapp";
 
 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. Atendimento de Garuva-SC para todo o Brasil.";
+  "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 = [
   {
@@ -60,6 +70,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));
+  const hasMosaic = posters.length > 0;
   const jsonLd = {
     "@context": "https://schema.org",
     "@graph": [
@@ -90,41 +103,53 @@ export default function ServicesIndexPage() {
     <main>
       <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
 
-      <section className={`ds-section ds-section-dark ${pageTop}`}>
-        <div className="ds-section-shell">
-          <Breadcrumb
-            items={[
-              { label: "Início", href: "/" },
-              { label: "Serviços", href: "/servicos" },
-            ]}
-          />
-          <h1 className="ds-section-title max-w-[22ch] text-balance">
-            Sites, sistemas e aplicativos sob medida.
-          </h1>
-          <p className="ds-copy max-w-[62ch]">
-            Apresente seu negócio, organize a operação ou conecte ferramentas
-            que hoje dão trabalho. Desenvolvo a solução a partir do que você
-            precisa resolver, não de uma lista de tecnologias.
-          </p>
-          <div className="mt-sp-6 flex flex-wrap items-center gap-sp-4">
-            <WhatsAppLink
-              className={primaryButton}
-              service="Sites, sistemas e aplicativos"
-              placement="service_hub_hero"
-            >
-              Falar com Evandro no WhatsApp
-            </WhatsAppLink>
-            <a
-              href="#projetos"
-              className={`${secondaryButtonDark} focus-visible:outline-2 focus-visible:outline-offset-4`}
-            >
-              Ver projetos realizados
-            </a>
+      <section
+        className={`ds-section ds-section-dark ${pageTop} ${
+          hasMosaic ? "" : compactHero
+        }`}
+      >
+        <div
+          className={`ds-section-shell ${hasMosaic ? heroWithMediaGrid : ""}`}
+        >
+          <div>
+            <Breadcrumb
+              items={[
+                { label: "Início", href: "/" },
+                { label: "Serviços", href: "/servicos" },
+              ]}
+            />
+            <h1 className="ds-section-title max-w-[22ch] text-balance">
+              Sites, sistemas e aplicativos sob medida.
+            </h1>
+            <p className="ds-copy max-w-[62ch]">
+              Apresente seu negócio, organize a operação ou conecte ferramentas
+              que hoje dão trabalho. Desenvolvo a solução a partir do que você
+              precisa resolver, não de uma lista de tecnologias.
+            </p>
+            <div className="mt-sp-6 flex flex-wrap items-center gap-sp-4">
+              <WhatsAppLink
+                className={primaryButton}
+                service={SERVICES_SUBJECT}
+                placement="service_hub_hero"
+              >
+                Falar com Evandro no WhatsApp
+              </WhatsAppLink>
+              <a
+                href="#projetos"
+                className={`${secondaryButtonDark} focus-visible:outline-2 focus-visible:outline-offset-4`}
+              >
+                Ver projetos realizados
+              </a>
+            </div>
+            <p className="ds-copy max-w-[62ch]">
+              Sou Evandro, desenvolvedor de software, e a conversa é direta
+              comigo.
+            </p>
+            <p className="mt-sp-2 text-[15px] leading-6 text-white/70">
+              Garuva e Joinville (SC) · atendimento remoto em todo o Brasil
+            </p>
           </div>
-          <p className="ds-copy max-w-[62ch]">
-            Sou Evandro, desenvolvedor em Garuva, Santa Catarina. Atendimento
-            remoto para todo o Brasil, com conversa direta comigo.
-          </p>
+          <PosterMosaic posters={posters} />
         </div>
       </section>
 
@@ -155,12 +180,12 @@ export default function ServicesIndexPage() {
                   >
                     {intent.ctaLabel}
                   </WhatsAppLink>
-                  <Link
+                  <HoverPrefetchLink
                     href={intent.href}
                     className={`${textLink} focus-visible:outline-2 focus-visible:outline-offset-4`}
                   >
                     {intent.linkLabel}
-                  </Link>
+                  </HoverPrefetchLink>
                 </div>
               </article>
             ))}
@@ -191,16 +216,17 @@ export default function ServicesIndexPage() {
                   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>
-                <Link
+                <HoverPrefetchLink
                   href={`/cases/${caseStudy.id}`}
                   className={`${textLink} mt-sp-4 focus-visible:outline-2 focus-visible:outline-offset-4`}
                 >
                   Ver o case {caseStudy.title}
-                </Link>
+                </HoverPrefetchLink>
               </article>
             ))}
           </div>
@@ -230,7 +256,7 @@ export default function ServicesIndexPage() {
           </div>
           <div>
             <h2 className="ds-card-title">Antes de contratar</h2>
-            <dl className="mt-sp-5 space-y-sp-6 text-[15px] md:text-sm">
+            <dl className="mt-sp-5 space-y-sp-6 text-[15px]">
               <div>
                 <dt className="font-semibold">
                   Quanto custa e quanto tempo leva?
@@ -243,7 +269,7 @@ export default function ServicesIndexPage() {
               </div>
               <div>
                 <dt className="font-semibold">
-                  Preciso estar perto de Garuva?
+                  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
@@ -280,12 +306,12 @@ export default function ServicesIndexPage() {
                 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"
               >
-                <Link
+                <HoverPrefetchLink
                   href={service.href}
                   className="inline-flex min-h-11 items-center font-semibold underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
                 >
                   {service.label}
-                </Link>
+                </HoverPrefetchLink>
                 <p className="ds-copy !mt-0">{service.description}</p>
               </li>
             ))}
@@ -305,7 +331,7 @@ export default function ServicesIndexPage() {
           </p>
           <WhatsAppLink
             className={`${primaryButton} mt-sp-6`}
-            service="Sites, sistemas e aplicativos"
+            service={SERVICES_SUBJECT}
             placement="service_hub_footer"
           >
             Conversar com Evandro no WhatsApp