feat(about, skills, workModalities): update content and improve styling

- Revamped the About component with new titles and descriptions for core values, enhancing clarity and engagement.
- Updated the Skills component by removing unnecessary type handling and improving animation effects for better user experience.
- Adjusted styling in the WorkModalities component, refining color variants and badge presentation for improved visual consistency.

app/components/About.tsx

@@ -23,26 +23,41 @@ interface CoreValue {
 const STORY_DATA: StoryStep[] = [
   {
     icon: Brain,
-    title: "A Curiosidade que Me Define",
+    title: "Engenharia de Fundamentos",
-    content: "Sempre fui fascinado por problemas complexos. Minha abordagem foca em transformar caos em sistemas elegantes e escaláveis.",
+    content: "Minha mentalidade é pautada pela redução de entropia. Não apenas escrevo código; projeto sistemas onde a escalabilidade é uma propriedade intrínseca da arquitetura, não um ajuste posterior.",
-    gradient: "from-blue-500 to-cyan-400",
+    gradient: "from-blue-600 to-cyan-500",
     accent: "text-blue-400",
   },
   {
     icon: Zap,
-    title: "Três Anos de Transformação",
+    title: "Entrega sob Restrições",
-    content: "Enfrentei desafios técnicos de alta criticidade, desde arquiteturas distribuídas até integrações legadas complexas.",
+    content: "Em 3 anos de atuação profissional, especializei-me em cenários de alta criticidade. Atuei na ponte entre sistemas legados e microserviços, garantindo a resolução do problema.",
-    gradient: "from-purple-500 to-pink-500",
+    gradient: "from-purple-600 to-pink-600",
     accent: "text-purple-400",
   },
-  // Adicione os demais itens aqui mantendo a estrutura...
 ];
 
 const VALUES_DATA: CoreValue[] = [
-  { icon: Code, title: "Excelência Técnica", description: "Código limpo e arquiteturas resilientes." },
+  { 
-  { icon: Brain, title: "Aprendizado Constante", description: "Evolução contínua baseada em fundamentos sólidos." },
+    icon: Code, 
-  { icon: Users, title: "Colaboração", description: "Equipes de alto desempenho através de empatia e técnica." },
+    title: "Pragmatismo Arquitetural", 
-  { icon: Shield, title: "Ética", description: "Integridade em cada linha de código produzida." },
+    description: "Priorizo a manutenibilidade e a resiliência. Código limpo é o meio, sistemas que geram ROI são o fim." 
+  },
+  { 
+    icon: Brain, 
+    title: "Fundacionalismo Técnico", 
+    description: "Domínio profundo de estruturas de dados e protocolos. Tecnologias mudam, fundamentos são perenes." 
+  },
+  { 
+    icon: Users, 
+    title: "Propriedade e Ownership", 
+    description: "Comunicação de baixa latência e responsabilidade radical sobre cada entrega e decisão técnica." 
+  },
+  { 
+    icon: Shield, 
+    title: "Security by Design", 
+    description: "Integridade e conformidade técnica (GDPR/LGPD) tratadas como requisitos funcionais, não opcionais." 
+  },
 ];
 
 // --- Micro-componentes (Feynman Technique: Simplicidade e Reuso) ---

app/components/Skills.tsx

@@ -1,27 +1,13 @@
 "use client";
 
 import React from "react";
-import { motion } from "framer-motion"; // Ajustado para o padrão estável
+import { motion } from "framer-motion";
-import { MagicCard } from "@/components/magicui/magic-card";
 import { 
   Code, Database, Cloud, Cpu, Smartphone, 
   Zap, GitBranch, TestTube, Terminal, Layers 
 } from "lucide-react";
 import { usePortfolioData } from "@/lib/usePortfolioData";
 
-// --- RESOLUÇÃO DE TIPAGEM (Wrapper) ---
-// Estendemos a interface original para aceitar as props de gradiente que a lib pode ter omitido nos tipos
-interface FixedMagicCardProps extends React.ComponentProps<typeof MagicCard> {
-  gradientColor?: string;
-  gradientSize?: number;
-  gradientOpacity?: number;
-}
-
-const FixedMagicCard = (props: FixedMagicCardProps) => {
-  // @ts-ignore - Forçamos o cast para o componente original aceitar as props em runtime
-  return <MagicCard {...props} />;
-};
-
 const ICON_MAP: Record<string, React.ElementType> = {
   Code, Database, Cloud, Cpu, Smartphone, Zap, GitBranch, TestTube, Terminal, Layers
 };
@@ -74,20 +60,17 @@ export default function Skills() {
             return (
               <motion.div
                 key={category.category}
-                initial={{ opacity: 0, y: 30 }}
+                initial={{ opacity: 0, y: 90 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.2 }} 
+                viewport={{ once: true, amount: 0.5 }} 
                 transition={{ 
                   duration: 0.5, 
                   delay: index * 0.05,
                   ease: "easeOut" 
                 }}
               >
-                <FixedMagicCard 
+                <div 
-                  className="group p-8 flex flex-col h-full bg-slate-900/50 border-slate-800 transition-colors duration-300 cursor-default"
+                  className="group p-8 flex flex-col h-full bg-slate-900/50 border border-slate-800 rounded-lg transition-colors duration-300 cursor-default"
-                  gradientColor="#262626" 
-                  gradientSize={250}
-                  gradientOpacity={0.4}
                 >
                   <div className="flex items-start justify-between mb-8">
                     <div className={`p-4 rounded-2xl ${styles.bg} border border-white/5 transition-all duration-500 group-hover:scale-110 group-hover:rotate-3`}>
@@ -112,7 +95,7 @@ export default function Skills() {
                       </span>
                     ))}
                   </div>
-                </FixedMagicCard>
+                </div>
               </motion.div>
             );
           })}

app/components/WorkModalities.tsx

@@ -96,13 +96,13 @@ const WorkModalitiesData = [
 
 // --- 2. DESIGN TOKENS ---
 const COLOR_VARIANTS: Record<string, string> = {
-  blue: "border-blue-500/30 bg-blue-500/5 text-blue-400 hover:border-blue-500/60 shadow-blue-500/5",
+  blue: "border-blue-500/15 bg-blue-500/3 text-blue-300 hover:border-blue-500/30 shadow-blue-500/3",
   green:
-    "border-green-500/30 bg-green-500/5 text-green-400 hover:border-green-500/60 shadow-green-500/5",
+    "border-green-500/15 bg-green-500/3 text-green-300 hover:border-green-500/30 shadow-green-500/3",
   purple:
-    "border-purple-500/30 bg-purple-500/5 text-purple-400 hover:border-purple-500/60 shadow-purple-500/5",
+    "border-purple-500/15 bg-purple-500/3 text-purple-300 hover:border-purple-500/30 shadow-purple-500/3",
   orange:
-    "border-orange-500/30 bg-orange-500/5 text-orange-400 hover:border-orange-500/60 shadow-orange-500/5",
+    "border-orange-500/15 bg-orange-500/3 text-orange-300 hover:border-orange-500/30 shadow-orange-500/3",
 };
 
 export function WorkModalities() {
@@ -191,7 +191,7 @@ export function WorkModalities() {
                 className={`relative p-8 rounded-[2.5rem] border-2 backdrop-blur-xl transition-all duration-500 shadow-xl ${style}`}
               >
                 {modality.badge && (
-                  <span className="absolute -top-3 right-8 bg-blue-600 text-white px-4 py-1 rounded-full text-[10px] font-black tracking-widest uppercase shadow-lg shadow-blue-600/20">
+                  <span className="absolute -top-3 right-8 bg-blue-500/20 border border-blue-500/30 text-blue-300 px-4 py-1 rounded-full text-[10px] font-black tracking-widest uppercase shadow-lg shadow-blue-500/10">
                     {modality.badge}
                   </span>
                 )}