feat(servicos): ofertas no topo de /servicos, capa por assunto e diagramas

/servicos abre com as 3 ofertas e depois outros serviços; H1 de criação de sites e de engenharia com o nome da oferta; capa de cada serviço pelo assunto (SEV fora do próprio case cai de ~11 para 2 imagens); diagrama de fluxo em SVG nos serviços sem case; cases com o que o cliente passou a poder fazer e contato logo depois de Como ficou; FAQ num componente só; lastmod por rota; ProfessionalService com areaServed.
2026-10-14 19:14:46 -03:00
1 parent e63f3c2ebd
commit fc44a69fb3
@@ -0,0 +1,61 @@
+import { primaryButton } from "@/app/components/button-styles";
+import WhatsAppLink from "@/app/components/WhatsAppLink";
+import { buttonLabels, type CaseStudyContent } from "@/lib/site-content";
+import { similarProjectSubject } from "@/lib/whatsapp";
+import { hasCaseMedia } from "./CaseMediaSection";
+
+/**
+ * Logo depois de "Como ficou": o que o cliente passou a poder fazer (2 ou 3 itens, sem número, só com o que as entregas já sustentam)
+ * e, de novo, o botão de contato, para quem acabou de ver o resultado não precisar rolar até o fim da página.
+ * Sem itens, só o botão (e só quando há "Como ficou"); sem itens e sem mídia, a seção não aparece.
+ */
+export function CaseCapabilitiesSection({
+  caseStudy,
+  isClient,
+}: {
+  caseStudy: Pick<
+    CaseStudyContent,
+    "id" | "title" | "demoUrl" | "capabilities"
+  >;
+  isClient: boolean;
+}) {
+  const capabilities = caseStudy.capabilities ?? [];
+  const showContact = hasCaseMedia(caseStudy);
+  if (capabilities.length === 0 && !showContact) return null;
+
+  return (
+    <section className="ds-section" aria-labelledby="case-capabilities">
+      <div className="ds-section-shell">
+        {capabilities.length > 0 ? (
+          <>
+            <h2 id="case-capabilities" className="ds-card-title !mt-0">
+              {isClient
+                ? "O que o cliente passou a poder fazer"
+                : "O que dá para fazer com ele"}
+            </h2>
+            <ul className="ds-list max-w-[78ch] space-y-sp-3 pl-[1.15rem]">
+              {capabilities.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          </>
+        ) : (
+          <h2 id="case-capabilities" className="sr-only">
+            Fale sobre o seu projeto
+          </h2>
+        )}
+        {showContact ? (
+          <div className="mt-sp-8">
+            <WhatsAppLink
+              service={similarProjectSubject(caseStudy.title)}
+              placement="case_after_media"
+              className={primaryButton}
+            >
+              {buttonLabels.contact}
+            </WhatsAppLink>
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}