feat: refine portfolio showcase, services and quality lab

Align the notebook browser with the physical LCD, refresh real project captures and navigation, simplify service content, and stabilize hero hydration.

app/servicos/page.tsx

@@ -1,15 +1,14 @@
 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 { 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 pageTitle = "Sites, Sistemas Web e Aplicativos Mobile e Desktop";
 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.";
+  "Desenvolvimento de sites, sistemas web, aplicativos mobile e desktop para Windows e Linux. Integrações, melhorias e consultoria para o seu negócio.";
 
 export const metadata: Metadata = {
   title: pageTitle,
@@ -80,13 +79,15 @@ export default function ServicesIndexPage() {
                 </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.
+            <p className="ds-eyebrow">Serviços de desenvolvimento</p>
+            <h1 className="ds-section-title max-w-[18ch] text-balance text-white">
+              Da presença na internet ao sistema que move seu negócio.
             </h1>
             <p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
-              {pageDescription}
+              Sites e sistemas web, aplicativos mobile e aplicativos desktop
+              para Windows e Linux. Também integro ferramentas e melhoro
+              software que já está em uso. Começamos pelo que você precisa
+              resolver, não pela tecnologia.
             </p>
           </div>
         </div>
@@ -94,25 +95,50 @@ export default function ServicesIndexPage() {
 
       <section className="ds-section">
         <div className="ds-section-shell">
-          <div className="ds-grid-2">
-            {serviceHubLinks.map((service) => (
-              <article key={service.href} className="ds-card">
-                <div className="ds-kicker">Serviço especializado</div>
-                <h2 className="ds-card-title">{service.label}</h2>
-                <p className="ds-copy">{service.description}</p>
-                <div className="mt-sp-6">
-                  <MagneticButton
-                    as="a"
-                    href={service.href}
-                    className="ds-link ds-link-accent"
-                    strength={0.25}
-                  >
-                    Abrir página
-                  </MagneticButton>
+          <div className="max-w-[72ch]">
+            <h2 className="ds-card-title !mt-0">O que você precisa fazer?</h2>
+            <p className="ds-copy">
+              Conheça as possibilidades abaixo. Cada serviço explica para quem
+              faz sentido, exemplos de uso, escopo e etapas de trabalho. Os
+              detalhes técnicos ficam disponíveis para aprofundar a conversa.
+            </p>
+          </div>
+          <div className="mt-sp-8 divide-y divide-[var(--border)] border-y border-[var(--border)]">
+            {serviceHubLinks.map((service, index) => (
+              <article
+                key={service.href}
+                className="grid gap-sp-4 py-sp-6 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] md:gap-sp-8"
+              >
+                <div className="min-w-0">
+                  <p className="ds-kicker" aria-hidden="true">
+                    {String(index + 1).padStart(2, "0")}
+                  </p>
+                  <h3 className="ds-card-title">
+                    <Link
+                      href={service.href}
+                      className="underline decoration-[var(--slash)] decoration-2 underline-offset-4 hover:decoration-[var(--ink)]"
+                    >
+                      {service.label}
+                    </Link>
+                  </h3>
                 </div>
+                <p className="ds-copy !mt-0">{service.description}</p>
               </article>
             ))}
           </div>
+          <div className="mt-sp-8 max-w-[72ch]">
+            <h2 className="ds-card-title">
+              Ainda não sabe qual caminho seguir?
+            </h2>
+            <p className="ds-copy">
+              Conte como funciona sua rotina e o que gostaria de mudar.
+              Definimos juntos a primeira entrega, as plataformas atendidas e os
+              limites do projeto antes de fechar a proposta.
+            </p>
+            <Link className="ds-link ds-link-accent mt-sp-5" href="/#contact">
+              Conversar sobre minha ideia
+            </Link>
+          </div>
         </div>
       </section>
     </main>