feat: harden portfolio and add SEO foundations

app/cases/page.tsx

@@ -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>