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,18 +1,30 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import HeroBackground from "@/app/components/cinematic/HeroBackground";
-import MagneticButton from "@/app/components/cinematic/MagneticButton";
+import { getCaseMedia } from "@/app/cases/_components/case-media";
+import { Breadcrumb } from "@/app/components/Breadcrumb";
+import {
+  pageTop,
+  primaryButton,
+  secondaryButtonDark,
+} from "@/app/components/button-styles";
 import WhatsAppLink from "@/app/components/WhatsAppLink";
 import { safeJsonLd } from "@/lib/jsonld";
-import { buildBreadcrumbList, buildServiceJsonLd } from "@/lib/seo";
+import {
+  buildBreadcrumbList,
+  buildPageSocialMetadata,
+  buildServiceJsonLd,
+} from "@/lib/seo";
 import {
  getRelatedCases,
  getServicePage,
  servicePages,
-  siteName,
  siteUrl,
 } from "@/lib/site-content";
+import { ServiceFaq } from "../_components/ServiceFaq";
+import { ServiceHeroCover } from "../_components/ServiceHeroCover";
+import { ServiceOffer } from "../_components/ServiceOffer";
+import { ServiceRelatedCases } from "../_components/ServiceRelatedCases";

 interface ServicePageProps {
  params: Promise<{
@@ -41,22 +53,12 @@ export async function generateMetadata({
  return {
    title: service.seoTitle,
    description: service.metaDescription,
-    alternates: {
-      canonical: url,
-    },
-    openGraph: {
-      locale: "pt_BR",
-      title: service.seoTitle,
-      description: service.metaDescription,
+    ...buildPageSocialMetadata({
      url,
-      siteName,
-      type: "article",
-    },
-    twitter: {
-      card: "summary_large_image",
      title: service.seoTitle,
      description: service.metaDescription,
-    },
+      type: "article",
+    }),
  };
 }

@@ -69,6 +71,9 @@ export default async function ServicePage({ params }: ServicePageProps) {
  }

  const relatedCases = getRelatedCases(service.relatedCaseIds);
+  const heroCase = relatedCases.find((caseStudy) =>
+    getCaseMedia(caseStudy.id, "desktop"),
+  );
  const pageUrl = `${siteUrl}/servicos/${service.slug}`;

  const jsonLd = {
@@ -87,35 +92,22 @@ export default async function ServicePage({ params }: ServicePageProps) {
    <main>
      <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>

-      <section className="ds-section ds-section-dark relative min-h-[340px] overflow-hidden">
-        <HeroBackground />
-        <div className="ds-section-shell relative z-10">
+      <section className={`ds-section ds-section-dark ${pageTop}`}>
+        <div
+          className={`ds-section-shell ${
+            heroCase
+              ? "grid items-center gap-sp-10 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] lg:gap-sp-16"
+              : ""
+          }`}
+        >
          <div className="max-w-[860px]">
-            <nav aria-label="Breadcrumb" className="mb-sp-6">
-              <ol className="flex flex-wrap items-center gap-sp-2 text-sm">
-                <li>
-                  <Link className="ds-link ds-link-muted" href="/">
-                    Início
-                  </Link>
-                </li>
-                <li className="flex items-center gap-sp-2">
-                  <span aria-hidden="true">/</span>
-                  <Link className="ds-link ds-link-muted" href="/servicos">
-                    Serviços
-                  </Link>
-                </li>
-                <li className="flex items-center gap-sp-2">
-                  <span aria-hidden="true">/</span>
-                  <Link
-                    aria-current="page"
-                    className="ds-link ds-link-muted"
-                    href={`/servicos/${service.slug}`}
-                  >
-                    {service.navLabel}
-                  </Link>
-                </li>
-              </ol>
-            </nav>
+            <Breadcrumb
+              items={[
+                { label: "Início", href: "/" },
+                { label: "Serviços", href: "/servicos" },
+                { label: service.navLabel, href: `/servicos/${service.slug}` },
+              ]}
+            />
            <p className="ds-eyebrow">{service.eyebrow}</p>
            <h1 className="ds-section-title max-w-[14ch] text-balance text-white">
              {service.headline}
@@ -127,18 +119,15 @@ export default async function ServicePage({ params }: ServicePageProps) {
              <WhatsAppLink
                service={service.navLabel}
                placement="service_detail_hero"
-                className="ds-link ds-link-accent min-h-12"
+                className={primaryButton}
              >
                {service.ctaLabel} no WhatsApp
              </WhatsAppLink>
-              <MagneticButton
-                as="a"
-                href="/cases"
-                className="ds-link ds-link-muted"
-                strength={0.2}
-              >
-                Ver casos relacionados
-              </MagneticButton>
+              {relatedCases.length > 0 ? (
+                <a href="#casos-relacionados" className={secondaryButtonDark}>
+                  Ver projetos parecidos
+                </a>
+              ) : null}
            </div>
            <p className="mt-sp-4 text-sm leading-6 text-white/70">
              Fale diretamente com Evandro. Abre uma conversa, sem precisar
@@ -146,9 +135,12 @@ export default async function ServicePage({ params }: ServicePageProps) {
              SC.
            </p>
          </div>
+          <ServiceHeroCover caseStudy={heroCase} />
        </div>
      </section>

+      <ServiceRelatedCases cases={relatedCases} />
+
      <section className="ds-section">
        <div className="ds-section-shell">
          <div className="ds-grid-2">
@@ -192,8 +184,8 @@ export default async function ServicePage({ params }: ServicePageProps) {
              <div className="ds-kicker">Possibilidades de uso</div>
              <h2 className="ds-card-title">Imagine na sua rotina</h2>
              <p className="ds-copy">
-                Exemplos ilustrativos para ajudar a explicar o serviço, não
-                projetos já entregues. O seu escopo será definido na conversa.
+                Situações comuns em que este serviço ajuda. A sua será combinada
+                na conversa.
              </p>
              <ul className="ds-list">
                {service.examples.map((example) => (
@@ -215,9 +207,8 @@ export default async function ServicePage({ params }: ServicePageProps) {
                ))}
              </ul>
              <p className="ds-copy">
-                Tecnologias consideradas neste serviço. A seleção depende do
-                problema e do ambiente; não é uma lista obrigatória para todo
-                projeto.
+                Tecnologias que costumo usar neste serviço. A escolha depende do
+                problema e do ambiente.
              </p>
              <ul className="ds-tags" aria-label="Tecnologias do serviço">
                {service.stack.map((item) => (
@@ -231,71 +222,7 @@ export default async function ServicePage({ params }: ServicePageProps) {
        </div>
      </section>

-      <section className="ds-section">
-        <div className="ds-section-shell">
-          <div className="ds-section-header">
-            <div className="ds-section-meta">
-              <p className="ds-eyebrow">Casos relacionados</p>
-              <h2 className="ds-section-title">
-                Projetos para conhecer meu trabalho
-              </h2>
-              <p className="ds-section-description">
-                Referências de problemas e soluções relacionados. Cada projeto
-                usa as tecnologias indicadas no próprio case; não representa
-                todas as plataformas ou tecnologias oferecidas neste serviço.
-              </p>
-            </div>
-          </div>
-
-          <div className="ds-grid-2">
-            {relatedCases.map((caseStudy) => (
-              <article key={caseStudy.id} className="ds-card">
-                <div className="ds-kicker">{caseStudy.title}</div>
-                <h3 className="ds-card-title">{caseStudy.subtitle}</h3>
-                <p className="ds-copy">{caseStudy.summary}</p>
-                <p className="mt-sp-4 text-[13px] leading-7 text-[var(--meta)]">
-                  {caseStudy.impact}
-                </p>
-                <ul className="ds-tags mt-sp-6">
-                  {caseStudy.stack.map((item) => (
-                    <li key={item} className="ds-tag !whitespace-normal">
-                      {item}
-                    </li>
-                  ))}
-                </ul>
-                <div className="mt-sp-6 flex flex-wrap gap-sp-3">
-                  <Link
-                    href={`/cases/${caseStudy.id}`}
-                    className="ds-link ds-link-accent"
-                  >
-                    Ler case: {caseStudy.title}
-                  </Link>
-                  {caseStudy.demoUrl ? (
-                    <a
-                      href={caseStudy.demoUrl}
-                      className="ds-link ds-link-accent"
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      Abrir projeto: {caseStudy.title}
-                    </a>
-                  ) : null}
-                  {caseStudy.githubUrl ? (
-                    <a
-                      href={caseStudy.githubUrl}
-                      className="ds-link ds-link-muted"
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      Ver código: {caseStudy.title}
-                    </a>
-                  ) : null}
-                </div>
-              </article>
-            ))}
-          </div>
-        </div>
-      </section>
+      <ServiceOffer service={service} />

      <section className="ds-section ds-section-dark pb-sp-6">
        <div className="ds-section-shell">
@@ -314,48 +241,19 @@ export default async function ServicePage({ params }: ServicePageProps) {
              <WhatsAppLink
                service={service.navLabel}
                placement="service_detail_footer"
-                className="ds-link ds-link-accent min-h-12"
+                className={primaryButton}
              >
                {service.ctaLabel} no WhatsApp
              </WhatsAppLink>
-              <MagneticButton
-                as="a"
-                href="/servicos"
-                className="ds-link ds-link-muted"
-                strength={0.2}
-              >
+              <Link href="/servicos" className={secondaryButtonDark}>
                Ver todos os serviços
-              </MagneticButton>
+              </Link>
            </div>
          </div>
        </div>
      </section>

-      {service.faq && service.faq.length > 0 ? (
-        <section className="ds-section">
-          <div className="ds-section-shell">
-            <div className="ds-section-header">
-              <div className="ds-section-meta">
-                <p className="ds-eyebrow">Dúvidas comuns</p>
-                <h2 className="ds-section-title">Perguntas frequentes</h2>
-                <p className="ds-section-description">
-                  Respostas diretas às perguntas que costumam aparecer antes de
-                  cada projeto começar.
-                </p>
-              </div>
-            </div>
-
-            <div className="ds-grid-2">
-              {service.faq.map((item) => (
-                <article key={item.question} className="ds-card">
-                  <h3 className="ds-card-title">{item.question}</h3>
-                  <p className="ds-copy">{item.answer}</p>
-                </article>
-              ))}
-            </div>
-          </div>
-        </section>
-      ) : null}
+      <ServiceFaq faq={service.faq} />
    </main>
  );
 }