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.

app/servicos/_components/ServiceHeroCover.tsx

@@ -1,28 +1,76 @@
 import { CaseCover, coverSizes } from "@/app/cases/_components/CaseCover";
+import { getCaseMedia } from "@/app/cases/_components/case-media";
+import { textLinkDark } from "@/app/components/button-styles";
 import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
-import type { CaseStudyContent } from "@/lib/site-content";
+import { PhoneFrame } from "@/app/components/showcase/PhoneFrame";
+import {
+  buttonLabels,
+  type CaseStudyContent,
+  type HeroDevice,
+} 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. */
+/**
+ * Capa do case de destaque ao lado do título do serviço: o site no computador (moldura de navegador) ou no celular
+ * (moldura de celular), conforme `device`. Sem captura do aparelho pedido, não mostra nada.
+ * Embaixo, a legenda: o nome do case, por que ele interessa a este serviço (`relevance`) e o botão "Ver case". É esta
+ * legenda que cita o case na página: ele não ganha um cartão a mais mais abaixo, porque a mesma imagem e o mesmo nome
+ * não aparecem duas vezes. A imagem também leva ao case, mas fica fora da leitura e da tabulação (o link da legenda
+ * já leva ao mesmo lugar).
+ */
 export function ServiceHeroCover({
   caseStudy,
+  device = "desktop",
+  relevance,
 }: {
   caseStudy?: CaseStudyContent;
+  device?: HeroDevice;
+  /** Por que o case interessa ao serviço, em uma frase. */
+  relevance?: string;
 }) {
   if (!caseStudy) return null;
 
+  const href = `/cases/${caseStudy.id}`;
+  const media =
+    device === "mobile" ? getCaseMedia(caseStudy.id, "mobile") : null;
+  if (device === "mobile" && !media) return null;
+
   return (
-    <HoverPrefetchLink
-      href={`/cases/${caseStudy.id}`}
-      className="block min-w-0"
+    <figure
+      className={`min-w-0 ${device === "mobile" ? "mx-auto w-full max-w-[360px]" : ""}`}
     >
-      <span className="sr-only">Ver o case {caseStudy.title}</span>
-      <CaseCover
-        id={caseStudy.id}
-        title={caseStudy.title}
-        demoUrl={caseStudy.demoUrl}
-        sizes={coverSizes.hero}
-        priority
-      />
-    </HoverPrefetchLink>
+      <HoverPrefetchLink
+        href={href}
+        aria-hidden="true"
+        tabIndex={-1}
+        className={
+          media ? "mx-auto block w-[min(62vw,240px)] min-w-0" : "block min-w-0"
+        }
+      >
+        {media ? (
+          <PhoneFrame poster={media.poster} />
+        ) : (
+          <CaseCover
+            id={caseStudy.id}
+            title={caseStudy.title}
+            demoUrl={caseStudy.demoUrl}
+            sizes={coverSizes.hero}
+            priority
+          />
+        )}
+      </HoverPrefetchLink>
+      <figcaption className="mt-sp-4 text-[15px] leading-6 text-white/75">
+        <strong className="font-semibold text-white">{caseStudy.title}</strong>
+        {relevance ? `: ${relevance}` : null}
+        <span className="mt-sp-1 block">
+          <HoverPrefetchLink
+            href={href}
+            className={`${textLinkDark} focus-visible:outline-2 focus-visible:outline-offset-4`}
+          >
+            {buttonLabels.case}
+            <span className="sr-only"> {caseStudy.title}</span>
+          </HoverPrefetchLink>
+        </span>
+      </figcaption>
+    </figure>
   );
 }