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

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

app/cases/_components/CaseRelatedServices.tsx

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