feat(servicos): topo, entregáveis e cases por serviço, assunto próprio no WhatsApp e títulos curtos

app/servicos/_components/ServiceAlsoCases.tsx

@@ -0,0 +1,52 @@
+import { textLink } from "@/app/components/button-styles";
+import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
+import { buttonLabels, type CaseStudyContent } from "@/lib/site-content";
+
+/**
+ * Bloco menor depois de "Onde já apliquei isso": trabalhos parecidos que não são a prova principal do serviço, em uma linha
+ * cada (nome, por que interessam e o link do case), sem capa. Sem case, não mostra nada.
+ */
+export function ServiceAlsoCases({
+  title,
+  cases,
+  relevance,
+}: {
+  title: string;
+  cases: readonly CaseStudyContent[];
+  /** Por que cada case interessa ao serviço (chave: id do case); sem frase própria, vale o resumo do case. */
+  relevance: Readonly<Record<string, string>>;
+}) {
+  if (cases.length === 0) return null;
+
+  return (
+    <section className="ds-section" aria-labelledby="tambem-faco-titulo">
+      <div className="ds-section-shell">
+        <h2 id="tambem-faco-titulo" className="ds-card-title !mt-0">
+          {title}
+        </h2>
+        <ul className="mt-sp-6 divide-y divide-[var(--border)] border-y border-[var(--border)]">
+          {cases.map((caseStudy) => (
+            <li
+              key={caseStudy.id}
+              className="grid items-start gap-sp-3 py-sp-5 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto] md:gap-sp-8"
+            >
+              <h3 className="text-base font-semibold leading-6">
+                {caseStudy.title}
+              </h3>
+              <p className="ds-copy !mt-0">
+                {relevance[caseStudy.id] ?? caseStudy.summary}
+              </p>
+              <HoverPrefetchLink
+                href={`/cases/${caseStudy.id}`}
+                className={`${textLink} focus-visible:outline-2 focus-visible:outline-offset-4`}
+              >
+                {buttonLabels.case}
+                <span className="sr-only"> {caseStudy.title}</span>
+              </HoverPrefetchLink>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}