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/cases/page.tsx

@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 import { Breadcrumb } from "@/app/components/Breadcrumb";
 import {
   pageTop,
@@ -8,6 +7,7 @@ import {
   secondaryButtonLight,
   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";
@@ -17,7 +17,10 @@ import {
   labCases,
   siteUrl,
 } from "@/lib/site-content";
+import { CASES_SUBJECT } from "@/lib/whatsapp";
 import { CaseCoverLink } from "./_components/CaseCoverLink";
+import { compactHero, heroWithMediaGrid } from "./_components/hero-styles";
+import { getMosaicPosters, PosterMosaic } from "./_components/PosterMosaic";
 
 const pageUrl = `${siteUrl}/cases`;
 const pageTitle = "Cases: sites e sistemas para empresas";
@@ -36,40 +39,33 @@ export const metadata: Metadata = {
   }),
 };
 
-function CaseCard({
+/** Cartão de um case de cliente, com a capa do site (quando há captura gravada), o resumo e o botão do case. */
+function ClientCaseCard({
   caseStudy,
-  withCover,
-  ctaLabel,
   priority = false,
 }: {
   caseStudy: CaseStudyContent;
-  withCover: boolean;
-  ctaLabel: string;
-  /** Capa que abre a página (a primeira, o maior elemento visível): carrega antes das demais. */
+  /** Capa que abre a página: só quando não há mosaico no topo, a capa passa a ser a maior imagem visível. */
   priority?: boolean;
 }) {
   return (
     <article className="ds-card !h-auto">
-      {withCover ? (
-        <CaseCoverLink
-          id={caseStudy.id}
-          title={caseStudy.title}
-          demoUrl={caseStudy.demoUrl}
-          priority={priority}
-          prefetch={false}
-        />
-      ) : null}
+      <CaseCoverLink
+        id={caseStudy.id}
+        title={caseStudy.title}
+        demoUrl={caseStudy.demoUrl}
+        priority={priority}
+      />
       <div className="ds-kicker">{caseStudy.title}</div>
       <h3 className="ds-card-title">{caseStudy.headline}</h3>
       <p className="ds-copy">{caseStudy.summary}</p>
       <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
-        <Link
+        <HoverPrefetchLink
           href={`/cases/${caseStudy.id}`}
-          prefetch={false}
           className={secondaryButtonLight}
         >
-          {ctaLabel}
-        </Link>
+          Ver o case
+        </HoverPrefetchLink>
         {caseStudy.demoUrl ? (
           <a
             href={caseStudy.demoUrl}
@@ -85,7 +81,32 @@ function CaseCard({
   );
 }
 
+/**
+ * Uma linha por projeto do laboratório: nome, o que é, a marca "Projeto próprio" e o link. Sem capa nem resumo, para a lista
+ * ocupar pouco espaço (no celular, o nome e a marca ficam na primeira linha).
+ */
+function LabCaseRow({ caseStudy }: { caseStudy: CaseStudyContent }) {
+  return (
+    <li className="grid grid-cols-[minmax(0,1fr)_auto] items-baseline gap-x-sp-6 gap-y-sp-1 py-sp-4 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto_auto]">
+      <h3 className="text-base font-semibold leading-6">{caseStudy.title}</h3>
+      <p className="ds-kicker justify-self-end md:order-3">Projeto próprio</p>
+      <p className="col-span-2 text-[15px] leading-6 text-[var(--ink-80)] md:order-2 md:col-span-1">
+        {caseStudy.subtitle}
+      </p>
+      <HoverPrefetchLink
+        href={`/cases/${caseStudy.id}`}
+        className={`${textLink} col-span-2 justify-self-start md:order-4 md:col-span-1`}
+      >
+        Ver o projeto<span className="sr-only"> {caseStudy.title}</span>
+      </HoverPrefetchLink>
+    </li>
+  );
+}
+
 export default function CasesPage() {
+  // o mosaico mostra os outros clientes: o primeiro já aparece, com a capa, no primeiro cartão logo abaixo
+  const posters = getMosaicPosters(clientCases.slice(1).map(({ id }) => id));
+  const hasMosaic = posters.length > 0;
   const jsonLd = {
     "@context": "https://schema.org",
     "@graph": [
@@ -116,8 +137,14 @@ export default function CasesPage() {
     <main>
       <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
 
-      <section className={`ds-section ds-section-dark ${pageTop}`}>
-        <div className="ds-section-shell">
+      <section
+        className={`ds-section ds-section-dark ${pageTop} ${
+          hasMosaic ? "" : compactHero
+        }`}
+      >
+        <div
+          className={`ds-section-shell ${hasMosaic ? heroWithMediaGrid : ""}`}
+        >
           <div className="max-w-[860px]">
             <Breadcrumb
               items={[
@@ -133,6 +160,7 @@ export default function CasesPage() {
               {pageDescription}
             </p>
           </div>
+          <PosterMosaic posters={posters} />
         </div>
       </section>
 
@@ -143,12 +171,10 @@ export default function CasesPage() {
           </h2>
           <div className="ds-grid-2 mt-sp-8 items-start">
             {clientCases.map((caseStudy, index) => (
-              <CaseCard
+              <ClientCaseCard
                 key={caseStudy.id}
                 caseStudy={caseStudy}
-                withCover
-                ctaLabel="Ver o case"
-                priority={index === 0}
+                priority={index === 0 && !hasMosaic}
               />
             ))}
           </div>
@@ -163,16 +189,11 @@ export default function CasesPage() {
           <p className="ds-copy max-w-[64ch]">
             Projetos pessoais e de estudo, feitos para praticar e testar ideias.
           </p>
-          <div className="ds-grid-2 mt-sp-8 items-start">
+          <ul className="mt-sp-6 divide-y divide-[var(--border)] border-y border-[var(--border)]">
             {labCases.map((caseStudy) => (
-              <CaseCard
-                key={caseStudy.id}
-                caseStudy={caseStudy}
-                withCover={false}
-                ctaLabel="Ver o projeto"
-              />
+              <LabCaseRow key={caseStudy.id} caseStudy={caseStudy} />
             ))}
-          </div>
+          </ul>
         </div>
       </section>
 
@@ -187,15 +208,15 @@ export default function CasesPage() {
           </p>
           <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
             <WhatsAppLink
-              service="um projeto parecido com os cases do portfólio"
+              service={CASES_SUBJECT}
               placement="cases_hub_footer"
               className={primaryButton}
             >
               Conversar sobre meu projeto
             </WhatsAppLink>
-            <Link href="/servicos" className={secondaryButtonDark}>
+            <HoverPrefetchLink href="/servicos" className={secondaryButtonDark}>
               Ver os serviços
-            </Link>
+            </HoverPrefetchLink>
           </div>
         </div>
       </section>