feat: Introduce new AI skills, core application layout, and cinematic UI components for the portfolio.

app/servicos/page.tsx

@@ -1,6 +1,8 @@
 import Link from "next/link";
 import type { Metadata } from "next";
 import { serviceHubLinks, servicePages, siteName, siteUrl } from "@/lib/site-content";
+import HeroBackground from "@/app/components/cinematic/HeroBackground";
+import MagneticButton from "@/app/components/cinematic/MagneticButton";
 
 export const metadata: Metadata = {
   title: `Servicos de Engenharia de Software e Consultoria Tecnica | ${siteName}`,
@@ -50,8 +52,9 @@ export default function ServicesIndexPage() {
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
 
-      <section className="ds-section ds-section-dark">
-        <div className="ds-section-shell">
+      <section className="ds-section ds-section-dark relative min-h-[340px] overflow-hidden">
+        <HeroBackground />
+        <div className="ds-section-shell relative z-10">
           <div className="max-w-[860px]">
             <p className="ds-eyebrow">Hub de servicos</p>
             <h1 className="ds-section-title max-w-[14ch] text-balance text-white">
@@ -74,9 +77,9 @@ export default function ServicesIndexPage() {
                 <h2 className="ds-card-title">{service.label}</h2>
                 <p className="ds-copy">{service.description}</p>
                 <div className="mt-sp-6">
-                  <Link href={service.href} className="ds-link ds-link-accent">
+                  <MagneticButton as="a" href={service.href} className="ds-link ds-link-accent" strength={0.25}>
                     Abrir pagina
-                  </Link>
+                  </MagneticButton>
                 </div>
               </article>
             ))}