feat: Add initial portfolio UI components and skill definitions.

app/components/WorkModalities.tsx

@@ -5,6 +5,7 @@ import { motion, type Variants, useReducedMotion } from "framer-motion";
 import { serviceHubLinks } from "@/lib/site-content";
 import { Section } from "./Section";
 import { DrawLine } from "./animations/DrawLine";
+import MagneticButton from "./cinematic/MagneticButton";
 
 interface Tier {
   id: string;
@@ -147,17 +148,16 @@ function TierCard({ tier }: Readonly<{ tier: Tier }>) {
         </div>
       </div>
 
-      <motion.a
+      <MagneticButton
+        as="a"
         href={tier.ctaHref}
         className={`ds-link mt-sp-6 min-h-[50px] w-full justify-center px-sp-4 py-sp-3 text-center text-[11px] leading-none ${
           tier.featured ? "ds-link-accent" : "ds-link-muted"
         }`}
-        whileHover={shouldReduceMotion ? undefined : { scale: 1.02 }}
-        whileTap={shouldReduceMotion ? undefined : { scale: 0.98 }}
-        transition={{ type: "spring", stiffness: 260, damping: 20 }}
+        strength={0.25}
       >
         {tier.ctaLabel}
-      </motion.a>
+      </MagneticButton>
     </motion.article>
   );
 }
@@ -207,9 +207,9 @@ export function WorkModalities() {
               aqui esta o caminho mais direto para a pagina certa.
             </p>
           </div>
-          <Link href="/servicos" className="ds-link ds-link-accent">
+          <MagneticButton as="a" href="/servicos" className="ds-link ds-link-accent" strength={0.2}>
             Ver hub de servicos
-          </Link>
+          </MagneticButton>
         </div>
 
         <div className="mt-sp-6 grid gap-sp-3 md:grid-cols-2 xl:grid-cols-3">