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
@@ -1,6 +1,4 @@
 import type { Metadata } from "next";
-import { coverSizes } from "@/app/cases/_components/CaseCover";
-import { CaseCoverLink } from "@/app/cases/_components/CaseCoverLink";
 import {
  compactHero,
  heroWithMediaGrid,
@@ -14,47 +12,48 @@ import {
  pageTop,
  primaryButton,
  secondaryButtonDark,
-  textLink,
 } from "@/app/components/button-styles";
+import { Faq } from "@/app/components/Faq";
 import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
 import WhatsAppLink from "@/app/components/WhatsAppLink";
 import { safeJsonLd } from "@/lib/jsonld";
 import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
-import { clientCases, serviceHubLinks, siteUrl } from "@/lib/site-content";
+import {
+  buttonLabels,
+  clientCasesForListing,
+  serviceHubLinks,
+  serviceOffers,
+  siteUrl,
+} from "@/lib/site-content";
 import { SERVICES_SUBJECT } from "@/lib/whatsapp";
+import { ServiceOfferCards } from "./_components/ServiceOfferCards";

 const pageUrl = `${siteUrl}/servicos`;
 const pageTitle = "Sites, sistemas e aplicativos sob medida";
 const pageDescription =
  "Sites, sistemas web e aplicativos sob medida para apresentar seu negócio e organizar a operação. Garuva e Joinville (SC), remoto em todo o Brasil.";

-const businessIntents = [
+/** Páginas que as três ofertas já abrem; os demais serviços ficam na lista "Outros serviços". */
+const offerHrefs = new Set(serviceOffers.map(({ href }) => href));
+const otherServices = serviceHubLinks.filter(
+  ({ href }) => !offerHrefs.has(href),
+);
+
+const hubFaq = [
  {
-    title: "Quero um site para meu negócio",
-    description:
-      "Apresente seus serviços, produtos e diferenciais em um endereço próprio, com leitura no celular e um caminho claro para o cliente entrar em contato.",
-    href: "/servicos/criacao-de-sites",
-    linkLabel: "Conhecer a criação de sites",
-    service: "Sites profissionais",
-    ctaLabel: "Conversar sobre meu site",
+    question: "Quanto custa e quanto tempo leva?",
+    answer:
+      "Depende das funcionalidades, conteúdo e integrações. O valor e o prazo são definidos depois de entender os requisitos, antes de iniciar o desenvolvimento.",
  },
  {
-    title: "Preciso organizar minha operação",
-    description:
-      "Um sistema web para acompanhar pedidos, atendimentos ou informações hoje espalhadas em planilhas. Também posso conectar ferramentas e melhorar o software que você já usa.",
-    href: "/servicos/engenharia-de-software",
-    linkLabel: "Conhecer o desenvolvimento de sistemas",
-    service: "Sistemas web",
-    ctaLabel: "Conversar sobre meu sistema",
+    question: "Preciso estar em Joinville ou em Garuva?",
+    answer:
+      "Não. O atendimento é remoto, com conversas, demonstrações e revisões on-line para projetos em todo o Brasil.",
  },
  {
-    title: "Quero desenvolver um aplicativo",
-    description:
-      "Leve um fluxo de trabalho para o celular ou computador. Avaliamos quem vai usar, os recursos necessários e a plataforma antes de definir o desenvolvimento e a distribuição.",
-    href: "/servicos/engenharia-de-software",
-    linkLabel: "Entender o escopo de um app mobile",
-    service: "Aplicativos mobile e desktop",
-    ctaLabel: "Conversar sobre meu aplicativo",
+    question: "E se eu já tiver um site ou sistema?",
+    answer:
+      "Avalio a base atual para propor melhorias, correções ou integrações. Recomeçar do zero não é uma condição para trabalhar comigo.",
  },
 ];

@@ -70,8 +69,9 @@ export const metadata: Metadata = {
 };

 export default function ServicesIndexPage() {
-  // três pôsteres dos clientes na coluna ao lado do título, que ficaria vazia
-  const posters = getMosaicPosters(clientCases.map(({ id }) => id));
+  // três pôsteres dos clientes na coluna ao lado do título, que ficaria vazia; a SEV fica de fora (ela vai por último)
+  // e nenhum cliente se repete mais abaixo, onde as ofertas citam os cases só por link
+  const posters = getMosaicPosters(clientCasesForListing.map(({ id }) => id));
  const hasMosaic = posters.length > 0;
  const jsonLd = {
    "@context": "https://schema.org",
@@ -132,18 +132,17 @@ export default function ServicesIndexPage() {
                service={SERVICES_SUBJECT}
                placement="service_hub_hero"
              >
-                Falar com Evandro no WhatsApp
+                {buttonLabels.contact}
              </WhatsAppLink>
-              <a
-                href="#projetos"
+              <HoverPrefetchLink
+                href="/cases"
                className={`${secondaryButtonDark} focus-visible:outline-2 focus-visible:outline-offset-4`}
              >
-                Ver projetos realizados
-              </a>
+                {buttonLabels.allCases}
+              </HoverPrefetchLink>
            </div>
            <p className="ds-copy max-w-[62ch]">
-              Sou Evandro, desenvolvedor de software, e a conversa é direta
-              comigo.
+              Sou Evandro, desenvolvedor de software, e a conversa é comigo.
            </p>
            <p className="mt-sp-2 text-[15px] leading-6 text-white/70">
              Garuva e Joinville (SC) · atendimento remoto em todo o Brasil
@@ -153,155 +152,35 @@ export default function ServicesIndexPage() {
        </div>
      </section>

-      <section className="ds-section" aria-labelledby="necessidade-title">
-        <div className="ds-section-shell grid items-start gap-sp-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] lg:gap-sp-16">
-          <div>
-            <h2 id="necessidade-title" className="ds-section-title">
-              O que você precisa fazer?
-            </h2>
-            <p className="ds-copy">
-              Não precisa chegar com um projeto técnico pronto. Começamos pela
-              sua rotina e pelo que precisa mudar.
-            </p>
-          </div>
-          <div className="divide-y divide-[var(--border)]">
-            {businessIntents.map((intent) => (
-              <article
-                key={intent.service}
-                className="py-sp-6 first:pt-0 last:pb-0"
-              >
-                <h3 className="ds-card-title">{intent.title}</h3>
-                <p className="ds-copy">{intent.description}</p>
-                <div className="mt-sp-4 flex flex-wrap items-center gap-x-sp-6 gap-y-sp-2">
-                  <WhatsAppLink
-                    className={primaryButton}
-                    service={intent.service}
-                    placement="service_hub_intent"
-                  >
-                    {intent.ctaLabel}
-                  </WhatsAppLink>
-                  <HoverPrefetchLink
-                    href={intent.href}
-                    className={`${textLink} focus-visible:outline-2 focus-visible:outline-offset-4`}
-                  >
-                    {intent.linkLabel}
-                  </HoverPrefetchLink>
-                </div>
-              </article>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      <section
-        id="projetos"
-        className="ds-section"
-        aria-labelledby="projetos-title"
-      >
+      <section className="ds-section" aria-labelledby="ofertas-title">
        <div className="ds-section-shell">
-          <h2 id="projetos-title" className="ds-section-title">
-            Veja o trabalho antes de conversar.
+          <h2
+            id="ofertas-title"
+            className="ds-section-title max-w-[26ch] text-balance"
+          >
+            Três jeitos de começar.
          </h2>
          <p className="ds-copy max-w-[64ch]">
-            Projetos feitos para empresas. Abra o case para ver o que foi feito
-            e como o site ficou.
+            Não precisa chegar com um projeto técnico pronto. Escolha o que mais
+            se parece com o seu caso; começamos pela sua rotina e pelo que
+            precisa mudar.
          </p>
-          <div className="mt-sp-8 grid gap-sp-8 md:grid-cols-2">
-            {clientCases.map((caseStudy) => (
-              <article
-                key={caseStudy.id}
-                className="border-t border-[var(--border)] pt-sp-6"
-              >
-                <CaseCoverLink
-                  id={caseStudy.id}
-                  title={caseStudy.title}
-                  demoUrl={caseStudy.demoUrl}
-                  sizes={coverSizes.column}
-                />
-                <p className="ds-kicker">{caseStudy.title}</p>
-                <h3 className="ds-card-title">{caseStudy.headline}</h3>
-                <p className="ds-copy">{caseStudy.summary}</p>
-                <HoverPrefetchLink
-                  href={`/cases/${caseStudy.id}`}
-                  className={`${textLink} mt-sp-4 focus-visible:outline-2 focus-visible:outline-offset-4`}
-                >
-                  Ver o case {caseStudy.title}
-                </HoverPrefetchLink>
-              </article>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      <section className="ds-section">
-        <div className="ds-section-shell grid gap-sp-10 lg:grid-cols-2 lg:gap-sp-16">
-          <div>
-            <h2 className="ds-section-title">
-              Como saímos da conversa para a entrega.
-            </h2>
-            <ol className="ds-list space-y-sp-4 list-decimal">
-              <li>
-                <strong>Entender o problema.</strong> Conversamos sobre o
-                negócio, quem vai usar e o que já existe.
-              </li>
-              <li>
-                <strong>Combinar o escopo.</strong> Definimos prioridades,
-                plataformas, responsabilidades, orçamento e prazo na proposta.
-              </li>
-              <li>
-                <strong>Construir e revisar.</strong> Você acompanha as etapas.
-                Validamos a entrega e combinamos publicação, suporte e evolução.
-              </li>
-            </ol>
-          </div>
-          <div>
-            <h2 className="ds-card-title">Antes de contratar</h2>
-            <dl className="mt-sp-5 space-y-sp-6 text-[15px]">
-              <div>
-                <dt className="font-semibold">
-                  Quanto custa e quanto tempo leva?
-                </dt>
-                <dd className="ds-copy !mt-sp-2">
-                  Depende das funcionalidades, conteúdo e integrações. O valor e
-                  o prazo são definidos depois de entender os requisitos, antes
-                  de iniciar o desenvolvimento.
-                </dd>
-              </div>
-              <div>
-                <dt className="font-semibold">
-                  Preciso estar em Joinville ou em Garuva?
-                </dt>
-                <dd className="ds-copy !mt-sp-2">
-                  Não. O atendimento é remoto, com conversas, demonstrações e
-                  revisões on-line para projetos em todo o Brasil.
-                </dd>
-              </div>
-              <div>
-                <dt className="font-semibold">
-                  E se eu já tiver um site ou sistema?
-                </dt>
-                <dd className="ds-copy !mt-sp-2">
-                  Avalio a base atual para propor melhorias, correções ou
-                  integrações. Recomeçar do zero não é uma condição para
-                  trabalhar comigo.
-                </dd>
-              </div>
-            </dl>
-          </div>
+          <ServiceOfferCards offers={serviceOffers} />
        </div>
      </section>

      <section className="ds-section" aria-labelledby="servicos-title">
        <div className="ds-section-shell">
          <h2 id="servicos-title" className="ds-section-title">
-            Quer aprofundar o escopo técnico?
+            Outros serviços
          </h2>
          <p className="ds-copy max-w-[64ch]">
-            Consulte as áreas de atuação, incluindo desktop, integrações,
-            consultoria e IoT. Cada página explica o que posso fazer por você.
+            Consultoria em Next.js, aplicativos desktop, integração de
+            equipamentos e diagnóstico de arquitetura. Cada página explica o que
+            posso fazer por você.
          </p>
          <ul className="mt-sp-8 divide-y divide-[var(--border)] border-y border-[var(--border)]">
-            {serviceHubLinks.map((service) => (
+            {otherServices.map((service) => (
              <li
                key={service.href}
                className="grid items-start gap-sp-3 py-sp-5 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-sp-8"
@@ -319,6 +198,30 @@ export default function ServicesIndexPage() {
        </div>
      </section>

+      <section className="ds-section">
+        <div className="ds-section-shell">
+          <h2 className="ds-section-title max-w-[26ch] text-balance">
+            Como saímos da conversa para a entrega.
+          </h2>
+          <ol className="ds-list max-w-[68ch] list-decimal space-y-sp-4">
+            <li>
+              <strong>Entender o problema.</strong> Conversamos sobre o negócio,
+              quem vai usar e o que já existe.
+            </li>
+            <li>
+              <strong>Combinar o escopo.</strong> Definimos prioridades,
+              plataformas, responsabilidades, orçamento e prazo na proposta.
+            </li>
+            <li>
+              <strong>Construir e revisar.</strong> Você acompanha as etapas.
+              Validamos a entrega e combinamos publicação, suporte e evolução.
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      <Faq items={hubFaq} title="Antes de contratar" />
+
      <section className="ds-section ds-section-dark">
        <div className="ds-section-shell">
          <h2 className="ds-section-title max-w-[24ch]">
@@ -334,7 +237,7 @@ export default function ServicesIndexPage() {
            service={SERVICES_SUBJECT}
            placement="service_hub_footer"
          >
-            Conversar com Evandro no WhatsApp
+            {buttonLabels.contact}
          </WhatsAppLink>
        </div>
      </section>