feat: harden portfolio and add SEO foundations

2026-09-04 19:25:30 -03:00
1 parent b079afdd73
commit 62bcfbd8fa
@@ -0,0 +1,52 @@
+import { notFound } from "next/navigation";
+import { ImageResponse } from "next/og";
+import { OG_CONTENT_TYPE, OG_SIZE, OgCard } from "@/lib/og-card";
+import { caseStudies } from "@/lib/site-content";
+
+function getCaseStudy(slug: string) {
+  return caseStudies.find(({ id }) => id === slug);
+}
+
+function getImageMetadata(caseStudy: (typeof caseStudies)[number]) {
+  return {
+    id: caseStudy.id,
+    alt: `Case ${caseStudy.title} — Evandro Fonseca Junior`,
+    size: OG_SIZE,
+    contentType: OG_CONTENT_TYPE,
+  };
+}
+
+export function generateImageMetadata({
+  params,
+}: {
+  params: { slug?: string };
+}) {
+  if (!params.slug) {
+    return caseStudies.map(getImageMetadata);
+  }
+
+  const caseStudy = getCaseStudy(params.slug);
+  if (!caseStudy) notFound();
+  return [getImageMetadata(caseStudy)];
+}
+
+export default async function Image({
+  params,
+  id,
+}: {
+  params: Promise<{ slug: string }>;
+  id: Promise<string | number>;
+}) {
+  const [{ slug }, imageId] = await Promise.all([params, id]);
+  const caseStudy = getCaseStudy(slug);
+  if (!caseStudy || imageId !== caseStudy.id) notFound();
+
+  return new ImageResponse(
+    <OgCard
+      eyebrow="Case de engenharia de software"
+      title={caseStudy.title}
+      description={caseStudy.summary}
+    />,
+    OG_SIZE,
+  );
+}
@@ -0,0 +1,324 @@
+import { render, screen, within } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { caseStudies, servicePages, siteUrl } from "@/lib/site-content";
+import CasesPage from "../page";
+import CasePage, { generateMetadata, generateStaticParams } from "./page";
+
+jest.mock("next/navigation", () => ({ notFound: jest.fn() }));
+
+jest.mock("@/app/components/cinematic/HeroBackground", () => ({
+  __esModule: true,
+  default: () => null,
+}));
+
+jest.mock("@/app/components/cinematic/MagneticButton", () => ({
+  __esModule: true,
+  default: ({
+    as = "button",
+    strength: _strength,
+    children,
+    ...props
+  }: {
+    as?: string;
+    strength?: number;
+    children?: ReactNode;
+  } & Record<string, unknown>) => {
+    const React = require("react");
+    return React.createElement(as, props, children);
+  },
+}));
+
+const publicCases = [
+  { id: "nutriscan", title: "NutriScan" },
+  { id: "twins-lab", title: "Twins Lab" },
+  { id: "reddit-explorer", title: "Reddit Posts Explorer" },
+  { id: "sc-plus", title: "SC Plus Aquicultura" },
+  { id: "gcc-installer", title: "MinGW GCC Installer" },
+  { id: "as-servicos", title: "AS Serviços" },
+] as const;
+const publicCaseIds = publicCases.map(({ id }) => id);
+
+function getCase(id: (typeof publicCases)[number]["id"]) {
+  const caseStudy = caseStudies.find((item) => item.id === id);
+  if (!caseStudy) throw new Error(`Missing case ${id}`);
+  return caseStudy;
+}
+
+function readJsonLdEntities(container: HTMLElement): Record<string, unknown>[] {
+  const scripts = container.querySelectorAll<HTMLScriptElement>(
+    'script[type="application/ld+json"]',
+  );
+  if (scripts.length === 0) throw new Error("Missing JSON-LD");
+
+  return Array.from(scripts).flatMap((script) => {
+    if (!script.textContent) throw new Error("Empty JSON-LD");
+    const value = JSON.parse(script.textContent) as Record<string, unknown>;
+    return Array.isArray(value["@graph"]) ? value["@graph"] : [value];
+  });
+}
+
+function expectCaseCtas() {
+  expect(
+    screen.getByRole("link", {
+      name: "Avaliar perfil para contratação",
+    }),
+  ).toHaveAttribute("href", "/curriculo");
+  expect(
+    screen.getByRole("link", {
+      name: "Solicitar consultoria técnica",
+    }),
+  ).toHaveAttribute("href", "/#contact");
+}
+
+it("keeps the six public params and factual case metadata", async () => {
+  const staticSlugs = generateStaticParams().map(({ slug }) => slug);
+  expect(staticSlugs).toHaveLength(6);
+  expect(new Set(staticSlugs).size).toBe(6);
+  expect([...staticSlugs].sort()).toEqual([...publicCaseIds].sort());
+
+  const caseStudy = getCase("as-servicos");
+  const url = `${siteUrl}/cases/${caseStudy.id}`;
+  const metadata = await generateMetadata({
+    params: Promise.resolve({ slug: caseStudy.id }),
+  });
+  expect(metadata).toMatchObject({
+    title: expect.stringContaining(caseStudy.title),
+    description: caseStudy.summary,
+    alternates: { canonical: url },
+    openGraph: {
+      title: caseStudy.title,
+      description: caseStudy.summary,
+      url,
+    },
+    twitter: {
+      title: caseStudy.title,
+      description: caseStudy.summary,
+    },
+  });
+  expect(metadata).not.toHaveProperty("keywords");
+});
+
+it("renders the authorized detailed case in order with traceable sources", async () => {
+  const caseStudy = getCase("as-servicos");
+  if (!caseStudy.detail) throw new Error("Missing detailed case content");
+  const ui = await CasePage({
+    params: Promise.resolve({ slug: caseStudy.id }),
+  });
+  const { container } = render(ui);
+
+  const heading = screen.getByRole("heading", { level: 1 });
+  const answer = screen.getByText(caseStudy.detail.answer.text);
+  expect(heading.nextElementSibling).toBe(answer);
+
+  const sectionNames = [
+    "Desafio verificável",
+    "Decisões de implementação",
+    "Limites desta evidência",
+    "Fontes",
+  ];
+  const sectionHeadings = sectionNames.map((name) =>
+    screen.getByRole("heading", { level: 2, name }),
+  );
+  for (let index = 1; index < sectionHeadings.length; index += 1) {
+    expect(
+      sectionHeadings[index - 1].compareDocumentPosition(
+        sectionHeadings[index],
+      ) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  }
+
+  const challengeSection = screen
+    .getByRole("heading", { level: 2, name: "Desafio verificável" })
+    .closest("section");
+  if (!challengeSection) throw new Error("Missing challenge section");
+  const challengeText = within(challengeSection).getByText(
+    caseStudy.detail.challenge.text,
+  );
+  expect(challengeText).toBeVisible();
+  expect(screen.getAllByText(caseStudy.impact)).toEqual([challengeText]);
+  for (const statement of caseStudy.detail.implementation) {
+    expect(screen.getByText(statement.text)).toBeVisible();
+  }
+  for (const boundary of caseStudy.detail.boundaries) {
+    const boundaryText = screen.getByText(boundary.text);
+    expect(boundaryText).toBeVisible();
+    expect(boundaryText.closest("a")).toBeNull();
+  }
+
+  const sourceLinks = screen.getAllByRole("link", { name: /^Fonte:/ });
+  expect(sourceLinks).toHaveLength(caseStudy.detail.sources.length);
+  for (const source of caseStudy.detail.sources) {
+    const link = screen.getByRole("link", { name: `Fonte: ${source.label}` });
+    expect(link).toHaveAttribute("href", source.url);
+    expect(link).toHaveAttribute("target", "_blank");
+    expect(link).toHaveAttribute("rel", expect.stringMatching(/noreferrer/));
+    expect(source.url).toMatch(/\/blob\/[0-9a-f]{40}\//);
+    const sha = source.url.match(/\/blob\/([0-9a-f]{40})\//)?.[1];
+    if (!sha) throw new Error(`Missing source SHA for ${source.id}`);
+    expect(within(link.closest("li") ?? link).getByText(sha)).toBeVisible();
+  }
+
+  expectCaseCtas();
+
+  const graph = readJsonLdEntities(container);
+  expect(graph.map((node) => node["@type"])).toEqual(["BreadcrumbList"]);
+  expect(JSON.stringify(graph)).not.toMatch(
+    /Article|FAQPage|ProfessionalService|LocalBusiness/,
+  );
+  const breadcrumb = graph[0] as {
+    itemListElement: Array<{
+      "@type": string;
+      position: number;
+      name: string;
+      item: string;
+    }>;
+  };
+  const canonicalUrl = `${siteUrl}/cases/${caseStudy.id}`;
+  expect(breadcrumb.itemListElement).toEqual([
+    { "@type": "ListItem", position: 1, name: "Início", item: siteUrl },
+    {
+      "@type": "ListItem",
+      position: 2,
+      name: "Cases",
+      item: `${siteUrl}/cases`,
+    },
+    {
+      "@type": "ListItem",
+      position: 3,
+      name: caseStudy.title,
+      item: canonicalUrl,
+    },
+  ]);
+
+  const visibleBreadcrumb = screen.getByRole("navigation", {
+    name: "Breadcrumb",
+  });
+  expect(
+    within(visibleBreadcrumb)
+      .getAllByRole("link")
+      .map((link) => ({
+        name: link.textContent,
+        href: link.getAttribute("href"),
+        current: link.getAttribute("aria-current"),
+      })),
+  ).toEqual([
+    { name: "Início", href: "/", current: null },
+    { name: "Cases", href: "/cases", current: null },
+    {
+      name: caseStudy.title,
+      href: `/cases/${caseStudy.id}`,
+      current: "page",
+    },
+  ]);
+});
+
+it("keeps the fallback concise and links its declared services", async () => {
+  const caseStudy = getCase("gcc-installer");
+  expect(caseStudy.detail).toBeUndefined();
+  const ui = await CasePage({
+    params: Promise.resolve({ slug: caseStudy.id }),
+  });
+  const { container } = render(ui);
+
+  const heading = screen.getByRole("heading", { level: 1 });
+  expect(heading.nextElementSibling).toHaveTextContent(caseStudy.summary);
+  expect(screen.getByText(caseStudy.impact)).toBeVisible();
+  for (const technology of caseStudy.stack) {
+    expect(screen.getByText(technology)).toBeVisible();
+  }
+  expect(screen.queryByRole("link", { name: "Abrir demonstração" })).toBeNull();
+  expect(screen.getByRole("link", { name: "Ver código" })).toHaveAttribute(
+    "href",
+    caseStudy.githubUrl,
+  );
+  for (const name of [
+    "Desafio verificável",
+    "Decisões de implementação",
+    "Limites desta evidência",
+    "Fontes",
+  ]) {
+    expect(screen.queryByRole("heading", { name })).toBeNull();
+  }
+  expect(screen.queryByRole("link", { name: /^Fonte:/ })).toBeNull();
+
+  const expectedServices = servicePages
+    .filter(({ relatedCaseIds }) => relatedCaseIds.includes(caseStudy.id))
+    .map(({ slug, navLabel }) => ({
+      name: `Ver serviço relacionado: ${navLabel}`,
+      href: `/servicos/${slug}`,
+    }))
+    .sort((a, b) => a.href.localeCompare(b.href));
+  const relatedLinks = screen.getAllByRole("link", {
+    name: /^Ver serviço relacionado:/,
+  });
+  expect(
+    relatedLinks
+      .map((link) => ({
+        name: link.textContent,
+        href: link.getAttribute("href"),
+      }))
+      .sort((a, b) => (a.href ?? "").localeCompare(b.href ?? "")),
+  ).toEqual(expectedServices);
+  expectCaseCtas();
+
+  expect(readJsonLdEntities(container).map((node) => node["@type"])).toEqual([
+    "BreadcrumbList",
+  ]);
+});
+
+it("keeps the hub cards, schema and distinct intents aligned", () => {
+  const { container } = render(<CasesPage />);
+  const heading = screen.getByRole("heading", { level: 1 });
+  expect(heading.nextElementSibling).toHaveTextContent(/seis projetos/i);
+
+  const caseLinks = screen.getAllByRole("link", { name: "Ler case" });
+  const caseHrefs = caseLinks.map((link) => link.getAttribute("href"));
+  expect(caseHrefs).toHaveLength(6);
+  expect(new Set(caseHrefs).size).toBe(6);
+  expect([...caseHrefs].sort()).toEqual(
+    publicCaseIds.map((id) => `/cases/${id}`).sort(),
+  );
+  expectCaseCtas();
+
+  const visibleBreadcrumb = screen.getByRole("navigation", {
+    name: "Breadcrumb",
+  });
+  expect(
+    within(visibleBreadcrumb)
+      .getAllByRole("link")
+      .map((link) => [link.textContent, link.getAttribute("href")]),
+  ).toEqual([
+    ["Início", "/"],
+    ["Cases", "/cases"],
+  ]);
+
+  const graph = readJsonLdEntities(container);
+  expect(graph.map((node) => node["@type"])).toEqual([
+    "CollectionPage",
+    "ItemList",
+    "BreadcrumbList",
+  ]);
+  const itemList = graph[1] as {
+    itemListElement: Array<{
+      "@type": string;
+      position: number;
+      name: string;
+      url: string;
+    }>;
+  };
+  const visibleItems = caseLinks.map((link, index) => {
+    const href = link.getAttribute("href");
+    const expected = publicCases.find(({ id }) => href === `/cases/${id}`);
+    if (!expected) throw new Error(`Unexpected visible case link ${href}`);
+    const card = link.closest("article");
+    if (!card) throw new Error(`Missing visible card for ${href}`);
+    expect(within(card).getByText(expected.title)).toBeVisible();
+    return {
+      "@type": "ListItem",
+      position: index + 1,
+      name: expected.title,
+      url: `${siteUrl}${href}`,
+    };
+  });
+  expect(itemList.itemListElement).toEqual(visibleItems);
+});
@@ -2,12 +2,25 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { safeJsonLd } from "@/lib/jsonld";
-import { caseStudies, siteName, siteUrl } from "@/lib/site-content";
+import { buildBreadcrumbList } from "@/lib/seo";
+import {
+  caseStudies,
+  getRelatedServices,
+  intentCtas,
+  siteName,
+  siteUrl,
+} from "@/lib/site-content";

 interface CasePageProps {
  params: Promise<{ slug: string }>;
 }

+const sourceShaPattern = /\/blob\/([0-9a-f]{40})\//;
+
+function getSourceSha(url: string) {
+  return sourceShaPattern.exec(url)?.[1];
+}
+
 export function generateStaticParams() {
  return caseStudies.map((caseStudy) => ({ slug: caseStudy.id }));
 }
@@ -45,36 +58,16 @@ export default async function CasePage({ params }: CasePageProps) {
  const caseStudy = caseStudies.find((item) => item.id === slug);
  if (!caseStudy) notFound();

-  const url = `${siteUrl}/cases/${caseStudy.id}`;
+  const pageUrl = `${siteUrl}/cases/${caseStudy.id}`;
+  const relatedServices = getRelatedServices(caseStudy.id);
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
-      {
-        "@type": "Article",
-        headline: caseStudy.title,
-        description: caseStudy.summary,
-        mainEntityOfPage: url,
-        author: { "@id": `${siteUrl}/#person` },
-        about: caseStudy.stack,
-      },
-      {
-        "@type": "BreadcrumbList",
-        itemListElement: [
-          { "@type": "ListItem", position: 1, name: "Início", item: siteUrl },
-          {
-            "@type": "ListItem",
-            position: 2,
-            name: "Cases",
-            item: `${siteUrl}/cases`,
-          },
-          {
-            "@type": "ListItem",
-            position: 3,
-            name: caseStudy.title,
-            item: url,
-          },
-        ],
-      },
+      buildBreadcrumbList(pageUrl, [
+        ["Início", siteUrl],
+        ["Cases", `${siteUrl}/cases`],
+        [caseStudy.title, pageUrl],
+      ] as const),
    ],
  };

@@ -84,18 +77,52 @@ export default async function CasePage({ params }: CasePageProps) {
      <article>
        <section className="ds-section ds-section-dark">
          <div className="ds-section-shell max-w-[960px]">
+            <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="/cases">
+                    Cases
+                  </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={`/cases/${caseStudy.id}`}
+                  >
+                    {caseStudy.title}
+                  </Link>
+                </li>
+              </ol>
+            </nav>
            <p className="ds-eyebrow">Case de engenharia de software</p>
            <h1 className="ds-section-title text-white">
              {caseStudy.title}: {caseStudy.subtitle}
            </h1>
            <p className="ds-copy max-w-[68ch] !text-[rgba(255,255,255,.78)]">
-              {caseStudy.summary}
-            </p>
-            <p className="mt-sp-6 text-[15px] leading-8 text-white">
-              {caseStudy.impact}
+              {caseStudy.detail?.answer.text ?? caseStudy.summary}
            </p>
+            {!caseStudy.detail ? (
+              <p className="mt-sp-6 text-[15px] leading-8 text-white">
+                {caseStudy.impact}
+              </p>
+            ) : null}
+            <ul className="ds-tags mt-sp-6">
+              {caseStudy.stack.map((item) => (
+                <li key={item} className="ds-tag">
+                  {item}
+                </li>
+              ))}
+            </ul>
            <div className="mt-sp-8 flex flex-wrap gap-sp-3">
-              {caseStudy.demoUrl && (
+              {caseStudy.demoUrl ? (
                <a
                  className="ds-link ds-link-accent"
                  href={caseStudy.demoUrl}
@@ -104,8 +131,8 @@ export default async function CasePage({ params }: CasePageProps) {
                >
                  Abrir demonstração
                </a>
-              )}
-              {caseStudy.githubUrl && (
+              ) : null}
+              {caseStudy.githubUrl ? (
                <a
                  className="ds-link ds-link-muted"
                  href={caseStudy.githubUrl}
@@ -114,33 +141,110 @@ export default async function CasePage({ params }: CasePageProps) {
                >
                  Ver código
                </a>
-              )}
+              ) : null}
            </div>
          </div>
        </section>
-        <section className="ds-section">
+
+        {caseStudy.detail ? (
+          <section className="ds-section">
+            <div className="ds-section-shell max-w-[960px] space-y-sp-10">
+              <section aria-labelledby="case-challenge">
+                <h2 id="case-challenge" className="ds-section-title">
+                  Desafio verificável
+                </h2>
+                <p className="ds-section-description">
+                  {caseStudy.detail.challenge.text}
+                </p>
+              </section>
+
+              <section aria-labelledby="case-implementation">
+                <h2 id="case-implementation" className="ds-section-title">
+                  Decisões de implementação
+                </h2>
+                <ul className="ds-list mt-sp-5 pl-[1.15rem]">
+                  {caseStudy.detail.implementation.map((statement) => (
+                    <li key={statement.text}>{statement.text}</li>
+                  ))}
+                </ul>
+              </section>
+
+              <section aria-labelledby="case-boundaries">
+                <h2 id="case-boundaries" className="ds-section-title">
+                  Limites desta evidência
+                </h2>
+                <ul className="ds-list mt-sp-5 pl-[1.15rem]">
+                  {caseStudy.detail.boundaries.map((boundary) => (
+                    <li key={boundary.text}>{boundary.text}</li>
+                  ))}
+                </ul>
+              </section>
+
+              <section aria-labelledby="case-sources">
+                <h2 id="case-sources" className="ds-section-title">
+                  Fontes
+                </h2>
+                <ul className="mt-sp-5 space-y-sp-4">
+                  {caseStudy.detail.sources.map((source) => {
+                    const sha = getSourceSha(source.url);
+                    return (
+                      <li key={source.id}>
+                        <a
+                          className="ds-link ds-link-muted"
+                          href={source.url}
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          Fonte: {source.label}
+                        </a>
+                        {sha ? (
+                          <span className="mt-sp-2 block text-[12px] text-[var(--meta)]">
+                            Commit: <code className="break-all">{sha}</code>
+                          </span>
+                        ) : null}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </section>
+            </div>
+          </section>
+        ) : null}
+
+        {relatedServices.length > 0 ? (
+          <section className="ds-section">
+            <div className="ds-section-shell max-w-[960px]">
+              <h2 className="ds-section-title">Serviços relacionados</h2>
+              <div className="mt-sp-6 flex flex-wrap gap-sp-3">
+                {relatedServices.map((service) => (
+                  <Link
+                    key={service.slug}
+                    className="ds-link ds-link-muted"
+                    href={`/servicos/${service.slug}`}
+                  >
+                    Ver serviço relacionado: {service.navLabel}
+                  </Link>
+                ))}
+              </div>
+            </div>
+          </section>
+        ) : null}
+
+        <section className="ds-section ds-section-dark pb-sp-6">
          <div className="ds-section-shell max-w-[960px]">
-            <h2 className="ds-section-title !leading-snug">
-              Tecnologias e contexto técnico
-            </h2>
-            <p className="ds-section-description">
-              Este case demonstra como aplico engenharia de software a produtos
-              com requisitos de performance, integração e operação, para
-              empresas do Norte de Santa Catarina, Curitiba e atuação remota.
-            </p>
-            <ul className="ds-tags mt-sp-6">
-              {caseStudy.stack.map((item) => (
-                <li key={item} className="ds-tag">
-                  {item}
-                </li>
-              ))}
-            </ul>
-            <div className="mt-sp-10 flex flex-wrap gap-sp-3">
-              <Link className="ds-link ds-link-accent" href="/curriculo">
-                Ver currículo profissional
+            <h2 className="ds-card-title text-white">Próximos caminhos</h2>
+            <div className="mt-sp-6 flex flex-wrap gap-sp-3">
+              <Link
+                className="ds-link ds-link-accent"
+                href={intentCtas.hiring.href}
+              >
+                {intentCtas.hiring.label}
              </Link>
-              <Link className="ds-link ds-link-muted" href="/servicos">
-                Ver serviços de engenharia
+              <Link
+                className="ds-link ds-link-muted"
+                href={intentCtas.consulting.href}
+              >
+                {intentCtas.consulting.label}
              </Link>
            </div>
          </div>
@@ -3,20 +3,24 @@ import Link from "next/link";
 import HeroBackground from "@/app/components/cinematic/HeroBackground";
 import MagneticButton from "@/app/components/cinematic/MagneticButton";
 import { safeJsonLd } from "@/lib/jsonld";
-import { caseStudies, siteName, siteUrl } from "@/lib/site-content";
+import { buildBreadcrumbList } from "@/lib/seo";
+import { caseStudies, intentCtas, siteName, siteUrl } from "@/lib/site-content";
+
+const pageUrl = `${siteUrl}/cases`;
+const pageTitle = "Cases de Engenharia de Software, Next.js e IoT";
+const pageDescription =
+  "Seis projetos mostram aplicações de engenharia de software em web, desktop, IoT, integrações e experiências orientadas a dados.";

 export const metadata: Metadata = {
-  title: "Cases de Engenharia de Software, Next.js e IoT",
-  description:
-    "Cases selecionados em engenharia de software, Next.js, IoT, integrações e software para contextos críticos. Portfolio técnico com foco em clareza, performance e execução.",
+  title: pageTitle,
+  description: pageDescription,
  alternates: {
-    canonical: `${siteUrl}/cases`,
+    canonical: pageUrl,
  },
  openGraph: {
-    title: "Cases de Engenharia de Software, Next.js e IoT",
-    description:
-      "Cases selecionados em engenharia de software, Next.js, IoT, integrações e software para contextos críticos.",
-    url: `${siteUrl}/cases`,
+    title: pageTitle,
+    description: pageDescription,
+    url: pageUrl,
    siteName,
    type: "website",
  },
@@ -28,11 +32,10 @@ export default function CasesPage() {
    "@graph": [
      {
        "@type": "CollectionPage",
-        "@id": `${siteUrl}/cases#page`,
-        name: "Cases de engenharia de software",
-        url: `${siteUrl}/cases`,
-        description:
-          "Coleção de cases em Next.js, IoT, integrações e software para operações críticas.",
+        "@id": `${pageUrl}#page`,
+        name: pageTitle,
+        url: pageUrl,
+        description: pageDescription,
      },
      {
        "@type": "ItemList",
@@ -40,21 +43,13 @@ export default function CasesPage() {
          "@type": "ListItem",
          position: index + 1,
          name: caseStudy.title,
-          url: `${siteUrl}/cases/${caseStudy.id}`,
+          url: `${pageUrl}/${caseStudy.id}`,
        })),
      },
-      {
-        "@type": "BreadcrumbList",
-        itemListElement: [
-          { "@type": "ListItem", position: 1, name: "Início", item: siteUrl },
-          {
-            "@type": "ListItem",
-            position: 2,
-            name: "Cases",
-            item: `${siteUrl}/cases`,
-          },
-        ],
-      },
+      buildBreadcrumbList(pageUrl, [
+        ["Início", siteUrl],
+        ["Cases", pageUrl],
+      ] as const),
    ],
  };

@@ -66,14 +61,31 @@ export default function CasesPage() {
        <HeroBackground />
        <div className="ds-section-shell relative z-10">
          <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
+                    aria-current="page"
+                    className="ds-link ds-link-muted"
+                    href="/cases"
+                  >
+                    Cases
+                  </Link>
+                </li>
+              </ol>
+            </nav>
            <p className="ds-eyebrow">Selected work</p>
            <h1 className="ds-section-title max-w-[14ch] text-balance text-white">
              Cases em software, Next.js, integrações e produtos conectados.
            </h1>
            <p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
-              Esta página organiza projetos com leitura mais indexável e
-              comercial, conectando stack, contexto técnico e tipo de problema
-              resolvido.
+              {pageDescription}
            </p>
          </div>
        </div>
@@ -124,19 +136,19 @@ export default function CasesPage() {
          <div className="mt-sp-10 flex flex-wrap gap-sp-3">
            <MagneticButton
              as="a"
-              href="/servicos"
+              href={intentCtas.hiring.href}
              className="ds-link ds-link-accent"
              strength={0.25}
            >
-              Ver serviços
+              {intentCtas.hiring.label}
            </MagneticButton>
            <MagneticButton
              as="a"
-              href="/#contact"
+              href={intentCtas.consulting.href}
              className="ds-link ds-link-muted"
              strength={0.2}
            >
-              Ir para contato
+              {intentCtas.consulting.label}
            </MagneticButton>
          </div>
        </div>