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

app/cases/page.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import { caseStudies, 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: `Cases de Engenharia de Software, Next.js e IoT | ${siteName}`,
@@ -50,8 +52,9 @@ export default function CasesPage() {
         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">Selected work</p>
             <h1 className="ds-section-title max-w-[14ch] text-balance text-white">
@@ -78,21 +81,21 @@ export default function CasesPage() {
                 </p>
                 <ul className="ds-tags mt-sp-6">
                   {caseStudy.stack.map((item) => (
-                    <li key={item} className="ds-tag">
+                    <MagneticButton key={item} as="li" className="ds-tag" strength={0.15}>
                       {item}
-                    </li>
+                    </MagneticButton>
                   ))}
                 </ul>
                 <div className="mt-sp-6 flex flex-wrap gap-sp-3">
                   {caseStudy.demoUrl ? (
-                    <a href={caseStudy.demoUrl} className="ds-link ds-link-accent" target="_blank" rel="noreferrer">
+                    <MagneticButton as="a" href={caseStudy.demoUrl} className="ds-link ds-link-accent" target="_blank" rel="noreferrer" strength={0.25}>
                       Abrir projeto
-                    </a>
+                    </MagneticButton>
                   ) : null}
                   {caseStudy.githubUrl ? (
-                    <a href={caseStudy.githubUrl} className="ds-link ds-link-muted" target="_blank" rel="noreferrer">
+                    <MagneticButton as="a" href={caseStudy.githubUrl} className="ds-link ds-link-muted" target="_blank" rel="noreferrer" strength={0.2}>
                       Ver codigo
-                    </a>
+                    </MagneticButton>
                   ) : null}
                 </div>
               </article>
@@ -100,12 +103,12 @@ export default function CasesPage() {
           </div>
 
           <div className="mt-sp-10 flex flex-wrap gap-sp-3">
-            <Link href="/servicos" className="ds-link ds-link-accent">
+            <MagneticButton as="a" href="/servicos" className="ds-link ds-link-accent" strength={0.25}>
               Ver servicos
-            </Link>
-            <Link href="/#contact" className="ds-link ds-link-muted">
+            </MagneticButton>
+            <MagneticButton as="a" href="/#contact" className="ds-link ds-link-muted" strength={0.2}>
               Ir para contato
-            </Link>
+            </MagneticButton>
           </div>
         </div>
       </section>