feat: harden portfolio and add SEO foundations

app/servicos/page.tsx

@@ -1,26 +1,26 @@
 import type { Metadata } from "next";
+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 {
-  serviceHubLinks,
-  servicePages,
-  siteName,
-  siteUrl,
-} from "@/lib/site-content";
+import { buildBreadcrumbList } from "@/lib/seo";
+import { serviceHubLinks, siteName, siteUrl } from "@/lib/site-content";
+
+const pageUrl = `${siteUrl}/servicos`;
+const pageTitle = "Serviços de Engenharia de Software e Consultoria Técnica";
+const pageDescription =
+  "Desenvolvimento e consultoria em engenharia de software, Next.js, Tauri, Rust, arquitetura e integração hardware + software para produtos e sistemas críticos.";
 
 export const metadata: Metadata = {
-  title: "Serviços de Engenharia de Software e Consultoria Técnica",
-  description:
-    "Serviços de engenharia de software, consultoria Next.js, Tauri, Rust, arquitetura de software e integração hardware + software para produtos e sistemas críticos.",
+  title: pageTitle,
+  description: pageDescription,
   alternates: {
-    canonical: `${siteUrl}/servicos`,
+    canonical: pageUrl,
   },
   openGraph: {
-    title: "Serviços de Engenharia de Software e Consultoria Técnica",
-    description:
-      "Serviços de engenharia de software, consultoria Next.js, Tauri, Rust, arquitetura de software e integração hardware + software para produtos e sistemas críticos.",
-    url: `${siteUrl}/servicos`,
+    title: pageTitle,
+    description: pageDescription,
+    url: pageUrl,
     siteName,
     type: "website",
   },
@@ -32,33 +32,24 @@ export default function ServicesIndexPage() {
     "@graph": [
       {
         "@type": "CollectionPage",
-        "@id": `${siteUrl}/servicos#page`,
-        name: "Serviços de Engenharia de Software e Consultoria Técnica",
-        url: `${siteUrl}/servicos`,
-        description:
-          "Hub de serviços para engenharia de software, consultoria técnica, Next.js, Tauri, Rust, IoT e arquitetura de software.",
+        "@id": `${pageUrl}#page`,
+        name: pageTitle,
+        url: pageUrl,
+        description: pageDescription,
       },
       {
         "@type": "ItemList",
-        itemListElement: servicePages.map((service, index) => ({
+        itemListElement: serviceHubLinks.map((service, index) => ({
           "@type": "ListItem",
           position: index + 1,
-          url: `${siteUrl}/servicos/${service.slug}`,
-          name: service.navLabel,
+          url: `${siteUrl}${service.href}`,
+          name: service.label,
         })),
       },
-      {
-        "@type": "BreadcrumbList",
-        itemListElement: [
-          { "@type": "ListItem", position: 1, name: "Início", item: siteUrl },
-          {
-            "@type": "ListItem",
-            position: 2,
-            name: "Serviços",
-            item: `${siteUrl}/servicos`,
-          },
-        ],
-      },
+      buildBreadcrumbList(pageUrl, [
+        ["Início", siteUrl],
+        ["Serviços", pageUrl],
+      ] as const),
     ],
   };
 
@@ -70,15 +61,32 @@ export default function ServicesIndexPage() {
         <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="/servicos"
+                  >
+                    Serviços
+                  </Link>
+                </li>
+              </ol>
+            </nav>
             <p className="ds-eyebrow">Hub de serviços</p>
             <h1 className="ds-section-title max-w-[14ch] text-balance text-white">
-              Serviços de engenharia de software para contextos técnicos de
-              alta exigência.
+              Serviços de engenharia de software para contextos técnicos de alta
+              exigência.
             </h1>
             <p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
-              Organizei as páginas de serviço por intenção real de compra:
-              engenharia de software, consultoria Next.js, Tauri e Rust,
-              arquitetura de software e integrações hardware + software.
+              {pageDescription}
             </p>
           </div>
         </div>