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

@@ -12,21 +12,24 @@ import WhatsAppLink from "@/app/components/WhatsAppLink";
 import { safeJsonLd } from "@/lib/jsonld";
 import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
 import {
+  buttonLabels,
   type CaseStudyContent,
-  clientCases,
+  clientCasesForListing,
   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";
+import { compactHero } from "./_components/hero-styles";
 
 const pageUrl = `${siteUrl}/cases`;
 const pageTitle = "Cases: sites e sistemas para empresas";
 const pageDescription =
-  "Veja o que já foi feito para empresas: loja virtual com pedido pelo WhatsApp, site com painel para o dono e páginas institucionais.";
-const allCases = [...clientCases, ...labCases];
+  "Cases de sites e sistemas para empresas: loja virtual com pedido pelo WhatsApp, site com painel para o dono e páginas institucionais.";
+/** Abertura da página: o que o visitante encontra nos cases, sem repetir a frase do título. */
+const pageLead =
+  "Abra um case para ver o problema do cliente, o que foi feito e como o site ficou, da loja virtual ao site que o dono edita sozinho.";
+const allCases = [...clientCasesForListing, ...labCases];
 
 export const metadata: Metadata = {
   title: pageTitle,
@@ -45,7 +48,7 @@ function ClientCaseCard({
   priority = false,
 }: {
   caseStudy: CaseStudyContent;
-  /** Capa que abre a página: só quando não há mosaico no topo, a capa passa a ser a maior imagem visível. */
+  /** Capa que abre a página: sem mosaico no topo, a primeira capa é a maior imagem visível. */
   priority?: boolean;
 }) {
   return (
@@ -64,7 +67,8 @@ function ClientCaseCard({
           href={`/cases/${caseStudy.id}`}
           className={secondaryButtonLight}
         >
-          Ver o case
+          {buttonLabels.case}
+          <span className="sr-only"> {caseStudy.title}</span>
         </HoverPrefetchLink>
         {caseStudy.demoUrl ? (
           <a
@@ -73,7 +77,8 @@ function ClientCaseCard({
             target="_blank"
             rel="noreferrer"
           >
-            Abrir o site
+            {buttonLabels.site}
+            <span className="sr-only"> {caseStudy.title}</span>
           </a>
         ) : null}
       </div>
@@ -97,16 +102,14 @@ function LabCaseRow({ caseStudy }: { caseStudy: CaseStudyContent }) {
         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>
+        {buttonLabels.case}
+        <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": [
@@ -137,14 +140,11 @@ export default function CasesPage() {
     <main>
       <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
 
+      {/* sem mosaico de pôsteres: os cartões logo abaixo já trazem a capa de cada cliente, e a mesma imagem não aparece duas vezes */}
       <section
-        className={`ds-section ds-section-dark ${pageTop} ${
-          hasMosaic ? "" : compactHero
-        }`}
+        className={`ds-section ds-section-dark ${pageTop} ${compactHero}`}
       >
-        <div
-          className={`ds-section-shell ${hasMosaic ? heroWithMediaGrid : ""}`}
-        >
+        <div className="ds-section-shell">
           <div className="max-w-[860px]">
             <Breadcrumb
               items={[
@@ -157,10 +157,9 @@ export default function CasesPage() {
               Veja o que já fiz para empresas.
             </h1>
             <p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
-              {pageDescription}
+              {pageLead}
             </p>
           </div>
-          <PosterMosaic posters={posters} />
         </div>
       </section>
 
@@ -170,11 +169,11 @@ export default function CasesPage() {
             Projetos de clientes
           </h2>
           <div className="ds-grid-2 mt-sp-8 items-start">
-            {clientCases.map((caseStudy, index) => (
+            {clientCasesForListing.map((caseStudy, index) => (
               <ClientCaseCard
                 key={caseStudy.id}
                 caseStudy={caseStudy}
-                priority={index === 0 && !hasMosaic}
+                priority={index === 0}
               />
             ))}
           </div>
@@ -203,7 +202,7 @@ export default function CasesPage() {
             Quer um projeto parecido com algum destes?
           </h2>
           <p className="ds-copy max-w-[60ch]">
-            Conte o que você precisa. A conversa começa direto no WhatsApp, sem
+            Conte o que você precisa. A conversa começa pelo WhatsApp, sem
             formulário.
           </p>
           <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
@@ -212,10 +211,10 @@ export default function CasesPage() {
               placement="cases_hub_footer"
               className={primaryButton}
             >
-              Conversar sobre meu projeto
+              {buttonLabels.contact}
             </WhatsAppLink>
             <HoverPrefetchLink href="/servicos" className={secondaryButtonDark}>
-              Ver os serviços
+              {buttonLabels.allServices}
             </HoverPrefetchLink>
           </div>
         </div>