feat(cases): cases de clientes, serviços ligados à prova e SEO por página

Cases da SEV Moda Íntima e da Lavação 047; case no formato cliente, problema, entrega, mídia e contato, com detalhes técnicos recolhidos; sem GitHub, ressalvas e fontes de commit. /cases separa clientes e Laboratório. Serviços mostram o case de cliente certo e o bloco de investimento e prazo só aparece preenchido. Metadata social própria por página, not-found com noindex, sitemap com /ia.
2026-10-14 03:31:57 -03:00
1 parent 3756905a1b
commit 6e1022b58c
@@ -1,19 +1,23 @@
 import type { Metadata } from "next";
 import Link from "next/link";
+import { CaseCover } from "@/app/cases/_components/CaseCover";
+import { getCaseMedia } from "@/app/cases/_components/case-media";
+import { Breadcrumb } from "@/app/components/Breadcrumb";
+import {
+  pageTop,
+  primaryButton,
+  secondaryButtonDark,
+  textLink,
+} from "@/app/components/button-styles";
 import WhatsAppLink from "@/app/components/WhatsAppLink";
 import { safeJsonLd } from "@/lib/jsonld";
-import { buildBreadcrumbList } from "@/lib/seo";
-import {
-  caseStudies,
-  serviceHubLinks,
-  siteName,
-  siteUrl,
-} from "@/lib/site-content";
+import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
+import { clientCases, serviceHubLinks, siteUrl } from "@/lib/site-content";

 const pageUrl = `${siteUrl}/servicos`;
-const pageTitle = "Sites, Sistemas e Aplicativos sob Medida";
+const pageTitle = "Sites, Sistemas e Aplicativos sob Medida para Empresas";
 const pageDescription =
-  "Sites, sistemas web e aplicativos sob medida com Evandro, desenvolvedor em Garuva-SC e atendimento remoto no Brasil. Conheça projetos e converse pelo WhatsApp.";
+  "Sites, sistemas web e aplicativos sob medida para sua empresa apresentar o negócio e organizar a operação. Evandro, desenvolvedor em Garuva-SC, atende Joinville, região e todo o Brasil de forma remota.";

 const businessIntents = [
  {
@@ -45,24 +49,15 @@ const businessIntents = [
  },
 ];

-const featuredCases = caseStudies.filter((caseStudy) =>
-  ["sc-plus", "nutriscan"].includes(caseStudy.id),
-);
-
 export const metadata: Metadata = {
  title: pageTitle,
  description: pageDescription,
-  alternates: {
-    canonical: pageUrl,
-  },
-  openGraph: {
-    locale: "pt_BR",
+  ...buildPageSocialMetadata({
+    url: pageUrl,
    title: pageTitle,
    description: pageDescription,
-    url: pageUrl,
-    siteName,
    type: "website",
-  },
+  }),
 };

 export default function ServicesIndexPage() {
@@ -96,24 +91,14 @@ export default function ServicesIndexPage() {
    <main>
      <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>

-      <section className="ds-section ds-section-dark">
+      <section className={`ds-section ds-section-dark ${pageTop}`}>
        <div className="ds-section-shell">
-          <nav aria-label="Breadcrumb" className="mb-sp-6">
-            <ol className="flex flex-wrap items-center gap-sp-3 text-sm">
-              <li>
-                <Link
-                  className="inline-flex min-h-11 items-center underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
-                  href="/"
-                >
-                  Início
-                </Link>
-              </li>
-              <li className="flex items-center gap-sp-3">
-                <span aria-hidden="true">/</span>
-                <span aria-current="page">Serviços</span>
-              </li>
-            </ol>
-          </nav>
+          <Breadcrumb
+            items={[
+              { label: "Início", href: "/" },
+              { label: "Serviços", href: "/servicos" },
+            ]}
+          />
          <h1 className="ds-section-title max-w-[22ch] text-balance">
            Sites, sistemas e aplicativos sob medida.
          </h1>
@@ -124,7 +109,7 @@ export default function ServicesIndexPage() {
          </p>
          <div className="mt-sp-6 flex flex-wrap items-center gap-sp-4">
            <WhatsAppLink
-              className="ds-link ds-link-accent min-h-12"
+              className={primaryButton}
              service="Sites, sistemas e aplicativos"
              placement="service_hub_hero"
            >
@@ -132,7 +117,7 @@ export default function ServicesIndexPage() {
            </WhatsAppLink>
            <a
              href="#projetos"
-              className="ds-link ds-link-muted min-h-12 focus-visible:outline-2 focus-visible:outline-offset-4"
+              className={`${secondaryButtonDark} focus-visible:outline-2 focus-visible:outline-offset-4`}
            >
              Ver projetos realizados
            </a>
@@ -165,7 +150,7 @@ export default function ServicesIndexPage() {
                <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="ds-link ds-link-accent min-h-11"
+                    className={primaryButton}
                    service={intent.service}
                    placement="service_hub_intent"
                  >
@@ -173,7 +158,7 @@ export default function ServicesIndexPage() {
                  </WhatsAppLink>
                  <Link
                    href={intent.href}
-                    className="inline-flex min-h-11 items-center text-sm underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
+                    className={`${textLink} focus-visible:outline-2 focus-visible:outline-offset-4`}
                  >
                    {intent.linkLabel}
                  </Link>
@@ -194,24 +179,36 @@ export default function ServicesIndexPage() {
            Veja o trabalho antes de conversar.
          </h2>
          <p className="ds-copy max-w-[64ch]">
-            Dois projetos com demonstrações publicadas. Os cases mostram o que
-            foi implementado e as tecnologias usadas, sem promessas de resultado
-            comercial.
+            Projetos feitos para empresas. Abra o case para ver o que foi feito
+            e como o site ficou.
          </p>
          <div className="mt-sp-8 grid gap-sp-8 md:grid-cols-2">
-            {featuredCases.map((caseStudy) => (
+            {clientCases.map((caseStudy) => (
              <article
                key={caseStudy.id}
                className="border-t border-[var(--border)] pt-sp-6"
              >
-                <p className="mb-sp-3 text-sm text-[var(--meta)]">
-                  Demonstração publicada
-                </p>
-                <h3 className="ds-card-title">{caseStudy.title}</h3>
+                {getCaseMedia(caseStudy.id, "desktop") ? (
+                  <Link
+                    href={`/cases/${caseStudy.id}`}
+                    aria-hidden="true"
+                    tabIndex={-1}
+                    className="mb-sp-5 block"
+                  >
+                    <CaseCover
+                      id={caseStudy.id}
+                      title={caseStudy.title}
+                      demoUrl={caseStudy.demoUrl}
+                      sizes="(min-width: 1024px) 560px, 100vw"
+                    />
+                  </Link>
+                ) : null}
+                <p className="ds-kicker">{caseStudy.title}</p>
+                <h3 className="ds-card-title">{caseStudy.headline}</h3>
                <p className="ds-copy">{caseStudy.summary}</p>
                <Link
                  href={`/cases/${caseStudy.id}`}
-                  className="mt-sp-4 inline-flex min-h-11 items-center text-sm underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
+                  className={`${textLink} mt-sp-4 focus-visible:outline-2 focus-visible:outline-offset-4`}
                >
                  Ver o case {caseStudy.title}
                </Link>
@@ -286,7 +283,7 @@ export default function ServicesIndexPage() {
          </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 possibilidades e limites.
+            consultoria e IoT. 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) => (
@@ -318,7 +315,7 @@ export default function ServicesIndexPage() {
            formulário para começar.
          </p>
          <WhatsAppLink
-            className="ds-link ds-link-accent mt-sp-6 min-h-12"
+            className={`${primaryButton} mt-sp-6`}
            service="Sites, sistemas e aplicativos"
            placement="service_hub_footer"
          >