feat(contact, experience, projects, skills, workModalities): enhance component structure and user experience

- Refactored the Contact component to improve form handling and user feedback, introducing a custom shimmer button and enhanced form validation.
- Updated the Experience component to optimize rendering and improve data handling with memoization, ensuring efficient performance.
- Enhanced the Projects component with a new layout and improved project filtering, utilizing memoization for better performance.
- Refined the Skills component to streamline the display of technical skills, incorporating a loading state and error handling for better user experience.
- Revamped the WorkModalities component to present service options more clearly, including a market comparison section for better user decision-making.

app/components/WorkModalities.tsx

@@ -1,369 +1,158 @@
-"use client";
+"use client"; // <--- DIRETIVA OBRIGATÓRIA NA PRIMEIRA LINHA
 
+import React from "react";
 import { motion } from "motion/react";
-import {
-  Briefcase,
-  Clock,
-  DollarSign,
-  HardHat,
-  Lightbulb,
-  Building2,
-  Users,
-  User,
-  Star,
+import { 
+  Briefcase, Clock, HardHat, Lightbulb, 
+  Building2, Users, User, Star, CheckCircle2 
 } from "lucide-react";
 
+// --- 1. DATA (Definido aqui para evitar erros de serialização) ---
 const WorkModalitiesData = [
   {
     title: "Consultoria por Hora",
     value: "R$ 35 - 70/hora",
     badge: "RECOMENDADO",
-    idealFor:
-      "Empresas que buscam flexibilidade máxima, startups testando soluções ou projetos que exigem expertise especializada sem compromissos longos.",
-    description:
-      "Transparência total: você paga apenas pelas horas efetivamente trabalhadas. Sem surpresas, com estimativas claras antes de iniciar. Ideal para testar soluções, resolver problemas específicos ou ter acesso a expertise sênior sem o custo de consultorias tradicionais (R$ 100-200/h).",
-    benefits: [
-      "✓ Transparência total - pague apenas pelo que usar",
-      "✓ Sem surpresas - estimativas claras antes de iniciar",
-      "✓ Flexibilidade - ajuste conforme sua necessidade evolui",
-      "✓ Melhor custo-benefício - 50% menos que consultorias tradicionais",
-      "✓ Experiência comprovada - 3+ anos + Eng. Computação",
-    ],
+    idealFor: "Empresas que buscam flexibilidade máxima e expertise especializada.",
+    description: "Transparência total: você paga apenas pelas horas trabalhadas. Ideal para resolver problemas específicos com expertise sênior.",
+    benefits: ["Transparência total", "Estimativas claras", "Flexibilidade total", "Custo-benefício otimizado", "Engenharia de Software Sênior"],
     icon: Lightbulb,
     color: "blue",
     featured: true,
   },
   {
     title: "Pacotes de Horas",
-    value: "Descontos até 21%",
-    idealFor:
-      "Clientes que já testaram o serviço e querem economizar com comprometimento antecipado, garantindo disponibilidade e preços favoráveis.",
-    description:
-      "Invista antecipadamente e economize significativamente: 10h (R$ 65/h), 20h (R$ 60/h) ou 40h+ (R$ 55/h). Garanta prioridade na agenda e preços fixos por 6 meses, mesmo se o mercado subir.",
-    benefits: [
-      "✓ 10 horas: R$ 65/h (economia de 7%)",
-      "✓ 20 horas: R$ 60/h (economia de 14%)",
-      "✓ 40+ horas: R$ 55/h (economia de 21%)",
-      "✓ Preço fixo por 6 meses",
-      "✓ Prioridade na agenda",
-    ],
+    value: "Até 21% de Desconto",
+    idealFor: "Clientes que buscam economia com comprometimento antecipado e prioridade na agenda.",
+    description: "Invista antecipadamente e garanta preços fixos por 6 meses. Ideal para projetos recorrentes.",
+    benefits: ["10h: R$ 65/h (7% off)", "20h: R$ 60/h (14% off)", "40h+: R$ 55/h (21% off)", "Prioridade na agenda"],
     icon: Briefcase,
     color: "green",
   },
   {
     title: "Retainer Mensal",
     value: "A partir de R$ 2.800/mês",
-    idealFor:
-      "Negócios que valorizam estabilidade, crescimento planejado e acesso prioritário a um especialista dedicado para impulsionar sua inovação contínua.",
-    description:
-      "Parceria estratégica com acesso prioritário e horas incluídas. Ideal para empresas que precisam de suporte contínuo, manutenção preventiva e consultoria estratégica regular. Transforme sua empresa em parceiro VIP.",
-    benefits: [
-      "✓ Acesso prioritário e exclusivo",
-      "✓ Horas incluídas mensalmente",
-      "✓ Suporte preventivo e consultoria estratégica",
-      "✓ Relacionamento de longo prazo",
-      "✓ Previsibilidade financeira",
-    ],
+    idealFor: "Negócios que valorizam estabilidade e acesso prioritário a um especialista dedicado.",
+    description: "Parceria estratégica com suporte contínuo e manutenção preventiva. Transforme sua empresa em parceiro VIP.",
+    benefits: ["Acesso prioritário exclusivo", "Horas mensais inclusas", "Suporte preventivo", "Previsibilidade financeira"],
     icon: Clock,
     color: "purple",
   },
   {
     title: "Desenvolvimento Sob Demanda",
-    value: "Estimativa em horas",
-    idealFor:
-      "Empreendedores e empresas com projetos específicos que precisam de estimativas transparentes e controle total sobre investimento e escopo.",
-    description:
-      "Projetos customizados com estimativas claras baseadas em horas. Da concepção à entrega, seu projeto ganha vida com transparência total. Pague apenas pelo desenvolvimento necessário, sem valores fixos surpresas.",
-    benefits: [
-      "✓ Estimativas transparentes em horas",
-      "✓ Controle total sobre investimento",
-      "✓ Sem valores fixos surpresas",
-      "✓ Escopo ajustável conforme evolução",
-      "✓ Foco em performance e escalabilidade",
-    ],
+    value: "Estimativa em Horas",
+    idealFor: "Projetos específicos que precisam de controle total sobre investimento e escopo.",
+    description: "Projetos customizados com estimativas claras. Pague apenas pelo desenvolvimento necessário.",
+    benefits: ["Escopo ajustável", "Controle total de investimento", "Foco em performance", "Sem surpresas no valor"],
     icon: HardHat,
     color: "orange",
   },
 ];
 
+// --- 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",
+  green: "border-green-500/30 bg-green-500/5 text-green-400 hover:border-green-500/60 shadow-green-500/5",
+  purple: "border-purple-500/30 bg-purple-500/5 text-purple-400 hover:border-purple-500/60 shadow-purple-500/5",
+  orange: "border-orange-500/30 bg-orange-500/5 text-orange-400 hover:border-orange-500/60 shadow-orange-500/5",
+};
+
 export function WorkModalities() {
   return (
-    <section className="py-20 px-4">
-      <motion.div
-        initial={{ opacity: 0, y: 30 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.8 }}
-        viewport={{ once: true }}
-        className="text-center mb-12"
-      >
-        <div className="inline-flex items-center gap-2 bg-gradient-to-r from-cyan-400/10 to-blue-500/10 px-6 py-3 rounded-full mb-6 border border-cyan-400/20">
-          <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
-          <span className="text-sm font-medium text-cyan-300">
-            Flexibilidade Total
-          </span>
-        </div>
-        <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
-          Minhas Modalidades de Trabalho
-        </h2>
-        <p className="text-xl text-gray-300 max-w-2xl mx-auto">
-          Escolha a opção que melhor se encaixa nas suas necessidades.
-        </p>
-      </motion.div>
-
-      {/* Seção de Comparação de Mercado Refinada */}
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.8 }}
-        viewport={{ once: true }}
-        className="relative overflow-hidden bg-gradient-to-br from-gray-900/80 via-blue-900/30 to-purple-900/40 rounded-2xl p-8 mb-12 max-w-5xl mx-auto border border-blue-500/30 shadow-2xl"
-      >
-        {/* Background Pattern */}
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(59,130,246,0.1),transparent_50%)]"></div>
-
-        {/* Header */}
-        <div className="relative text-center mb-8">
-          <div className="inline-flex items-center gap-2 bg-blue-500/10 px-4 py-2 rounded-full mb-4">
-            <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
-            <span className="text-sm font-medium text-blue-300">
-              Análise de Mercado 2025
-            </span>
-          </div>
-          <h3 className="text-3xl font-bold mb-2 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
-            Compare com o Mercado
-          </h3>
-          <p className="text-gray-300 text-lg">
-            Veja como nossa proposta se destaca da concorrência
-          </p>
-        </div>
-
-        {/* Comparison Grid */}
-        <div className="relative grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-          {/* Agências Tradicionais */}
-          <div className="group relative bg-red-500/5 border border-red-500/20 rounded-xl p-6 hover:border-red-400/40 transition-all duration-300">
-            <div className="flex items-center gap-3 mb-4">
-              <div className="w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center">
-                <Building2 className="w-6 h-6 text-red-500" />
-              </div>
-              <div>
-                <h4 className="font-semibold text-red-300">
-                  Agências Tradicionais
-                </h4>
-                <p className="text-xs text-red-400/70">Projetos fechados</p>
-              </div>
-            </div>
-            <div className="space-y-2">
-              <p className="text-2xl font-bold text-red-400">R$ 15k - 50k</p>
-              <div className="space-y-1 text-xs text-gray-400">
-                <p>• Escopo fixo</p>
-                <p>• Sem flexibilidade</p>
-                <p>• Equipe grande</p>
-                <p>• Processo lento</p>
-              </div>
-            </div>
-          </div>
-
-          {/* Consultorias Corporativas */}
-          <div className="group relative bg-orange-500/5 border border-orange-500/20 rounded-xl p-6 hover:border-orange-400/40 transition-all duration-300">
-            <div className="flex items-center gap-3 mb-4">
-              <div className="w-10 h-10 bg-orange-500/20 rounded-lg flex items-center justify-center">
-                <Users className="w-6 h-6 text-orange-500" />
-              </div>
-              <div>
-                <h4 className="font-semibold text-orange-300">
-                  Consultorias Corporativas
-                </h4>
-                <p className="text-xs text-orange-400/70">Por hora</p>
-              </div>
-            </div>
-            <div className="space-y-2">
-              <p className="text-2xl font-bold text-orange-400">
-                R$ 150 - 300/h
-              </p>
-              <div className="space-y-1 text-xs text-gray-400">
-                <p>• Apenas consultoria</p>
-                <p>• Sem desenvolvimento</p>
-                <p>• Muito caro</p>
-                <p>• Foco corporativo</p>
-              </div>
-            </div>
-          </div>
-
-          {/* Freelancers Generalistas */}
-          <div className="group relative bg-yellow-500/5 border border-yellow-500/20 rounded-xl p-6 hover:border-yellow-400/40 transition-all duration-300">
-            <div className="flex items-center gap-3 mb-4">
-              <div className="w-10 h-10 bg-yellow-500/20 rounded-lg flex items-center justify-center">
-                <User className="w-6 h-6 text-yellow-500" />
-              </div>
-              <div>
-                <h4 className="font-semibold text-yellow-300">
-                  Freelancers Generalistas
-                </h4>
-                <p className="text-xs text-yellow-400/70">Por hora</p>
-              </div>
-            </div>
-            <div className="space-y-2">
-              <p className="text-2xl font-bold text-yellow-400">R$ 40 - 80/h</p>
-              <div className="space-y-1 text-xs text-gray-400">
-                <p>• Competitivo</p>
-                <p>• Sem especialização</p>
-                <p>• Qualidade variável</p>
-                <p>• Sem garantias</p>
-              </div>
-            </div>
-          </div>
-
-          {/* Comigo - Evandro */}
-          <div className="group relative bg-gradient-to-br from-green-500/10 to-emerald-500/10 border-2 border-green-500/40 rounded-xl p-6 hover:border-green-400/60 transition-all duration-300 shadow-lg shadow-green-500/10">
-            <div className="absolute -top-2 -right-2">
-              <span className="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold shadow-lg">
-                RECOMENDADO
-              </span>
-            </div>
-
-            <div className="flex items-center gap-3 mb-4">
-              <div className="w-10 h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
-                <Star className="w-6 h-6 text-green-400" />
-              </div>
-              <div>
-                <h4 className="font-bold text-green-300">Comigo</h4>
-                <p className="text-xs text-green-400/70">Evandro Fonseca</p>
-              </div>
-            </div>
-            <div className="space-y-3">
-              <div className="flex items-baseline gap-2">
-                <p className="text-2xl font-bold text-green-400">
-                  R$ 35 - 70/h
-                </p>
-                <span className="text-xs bg-green-500/20 text-green-300 px-2 py-1 rounded">
-                  -50% vs mercado
-                </span>
-              </div>
-              <div className="space-y-1 text-xs text-gray-300">
-                <p className="flex items-center gap-2">
-                  <span className="text-green-400">✓</span>
-                  <span>Full-Stack + IoT + Cloud</span>
-                </p>
-                <p className="flex items-center gap-2">
-                  <span className="text-green-400">✓</span>
-                  <span>Transparência total</span>
-                </p>
-                <p className="flex items-center gap-2">
-                  <span className="text-green-400">✓</span>
-                  <span>Flexibilidade máxima</span>
-                </p>
-                <p className="flex items-center gap-2">
-                  <span className="text-green-400">✓</span>
-                  <span>Experiência comprovada</span>
-                </p>
-              </div>
-
-              {/* Call to Action */}
-              <div className="mt-4 pt-3 border-t border-green-500/20">
-                <p className="text-xs text-green-300 font-medium text-center">
-                  🎯 Melhor custo-benefício do mercado
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Bottom CTA */}
-        <div className="relative mt-8 text-center">
-          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-500/10 to-purple-500/10 px-6 py-3 rounded-full border border-blue-500/20">
+    <section id="modalities" className="py-32 px-6 bg-[#030712] relative overflow-hidden">
+      <div className="max-w-7xl mx-auto relative z-10">
+        
+        {/* Header Profissional */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: "-100px" }}
+          className="text-center mb-20"
+        >
+          <div className="inline-flex items-center gap-2 bg-blue-500/10 px-4 py-2 rounded-full mb-6 border border-blue-500/20">
             <div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
-            <span className="text-sm text-blue-300 font-medium">
-              Economia média de R$ 15.000 por projeto vs agências tradicionais
-            </span>
+            <span className="text-xs font-bold text-blue-300 uppercase tracking-widest font-mono">Business_Architect</span>
           </div>
+          <h2 className="text-5xl md:text-7xl font-black text-white tracking-tighter leading-none mb-6">
+            Flexibilidade <span className="text-slate-700 italic">Total</span>
+          </h2>
+          <p className="text-slate-400 max-w-2xl mx-auto text-lg">
+            Modelos de contratação adaptáveis para diferentes estágios de maturidade tecnológica.
+          </p>
+        </motion.div>
+
+        {/* Comparação de Mercado (Anchoring Effect) */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-20">
+          <MarketCard title="Agências" price="R$ 15k-50k" icon={Building2} color="text-red-400" />
+          <MarketCard title="Consultorias" price="R$ 150-300/h" icon={Users} color="text-orange-400" />
+          <MarketCard title="Freelancers" price="R$ 40-80/h" icon={User} color="text-yellow-400" />
+          <MarketCard title="Engenheiro" price="R$ 35-70/h" icon={Star} color="text-green-400" best />
         </div>
-      </motion.div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto justify-center">
-        {WorkModalitiesData.map((modality, index) => (
-          <motion.div
-            key={modality.title}
-            initial={{ opacity: 0, scale: 0.9 }}
-            whileInView={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.5, delay: index * 0.1 }}
-            viewport={{ once: true }}
-            className={`relative bg-white/5 p-6 rounded-lg shadow-lg border-2 ${
-              modality.featured
-                ? "border-blue-500/50 bg-blue-500/5"
-                : "border-white/10"
-            } ${modality.color === "blue" ? "hover:border-blue-500" : ""} ${
-              modality.color === "green" ? "hover:border-green-500" : ""
-            } ${modality.color === "purple" ? "hover:border-purple-500" : ""} ${
-              modality.color === "orange" ? "hover:border-orange-500" : ""
-            } ${
-              modality.color === "red" ? "hover:border-red-500" : ""
-            } transition-all duration-300 cursor-pointer`}
-          >
-            {modality.badge && (
-              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
-                <span className="bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-bold">
-                  {modality.badge}
-                </span>
-              </div>
-            )}
+        {/* Grid de Modalidades */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {WorkModalitiesData.map((modality, index) => {
+            const style = COLOR_VARIANTS[modality.color] || COLOR_VARIANTS.blue;
+            const Icon = modality.icon;
 
-            <div className="flex items-center gap-4 mb-4">
-              <div
-                className={`p-3 rounded-full ${
-                  modality.color === "blue" ? "bg-blue-500/20" : ""
-                } ${modality.color === "green" ? "bg-green-500/20" : ""} ${
-                  modality.color === "purple" ? "bg-purple-500/20" : ""
-                } ${modality.color === "orange" ? "bg-orange-500/20" : ""} ${
-                  modality.color === "red" ? "bg-red-500/20" : ""
-                }`}
+            return (
+              <motion.div
+                key={modality.title}
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, amount: 0.2 }}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                className={`relative p-8 rounded-[2.5rem] border-2 backdrop-blur-xl transition-all duration-500 shadow-xl ${style}`}
               >
-                <modality.icon
-                  className={`w-8 h-8 ${
-                    modality.color === "blue" ? "text-blue-400" : ""
-                  } ${modality.color === "green" ? "text-green-400" : ""} ${
-                    modality.color === "purple" ? "text-purple-400" : ""
-                  } ${modality.color === "orange" ? "text-orange-400" : ""} ${
-                    modality.color === "red" ? "text-red-400" : ""
-                  }`}
-                />
-              </div>
-              <div>
-                <h3 className="text-2xl font-semibold mb-1">
-                  {modality.title}
-                </h3>
-                <p
-                  className={`text-lg font-bold ${
-                    modality.featured ? "text-blue-400" : "text-gray-200"
-                  }`}
-                >
-                  {modality.value}
+                {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">
+                    {modality.badge}
+                  </span>
+                )}
+
+                <div className="flex items-center gap-6 mb-8">
+                  <div className="p-4 rounded-2xl bg-slate-900 border border-slate-800 group-hover:scale-110 transition-transform">
+                    <Icon className="w-8 h-8" />
+                  </div>
+                  <div>
+                    <h3 className="text-2xl font-bold text-white tracking-tight">{modality.title}</h3>
+                    <p className="text-xl font-mono font-bold opacity-80">{modality.value}</p>
+                  </div>
+                </div>
+
+                <p className="text-slate-400 text-sm leading-relaxed mb-8 h-20 line-clamp-3">
+                  {modality.description}
                 </p>
-              </div>
-            </div>
 
-            <p className="text-gray-400 mb-4">{modality.description}</p>
+                <div className="space-y-3 mb-8">
+                  {modality.benefits.map((benefit, bIdx) => (
+                    <div key={bIdx} className="flex items-center gap-3 text-slate-300 text-xs font-medium">
+                      <CheckCircle2 className="w-4 h-4 text-green-500 flex-shrink-0" />
+                      <span>{benefit}</span>
+                    </div>
+                  ))}
+                </div>
 
-            {modality.benefits && (
-              <div className="space-y-2 mb-4">
-                {modality.benefits.map((benefit, idx) => (
-                  <p
-                    key={idx}
-                    className="text-sm text-gray-300 flex items-start gap-2"
-                  >
-                    <span className="text-green-400 mt-0.5">✓</span>
-                    <span>{benefit.replace("✓ ", "")}</span>
+                <div className="pt-6 border-t border-slate-800/50 mt-auto">
+                  <p className="text-[11px] text-slate-500 leading-relaxed uppercase tracking-tighter">
+                    <strong className="text-slate-400">Ideal para:</strong> {modality.idealFor}
                   </p>
-                ))}
-              </div>
-            )}
-
-            <p className="text-sm text-gray-500">
-              <span className="font-semibold">Ideal para:</span>{" "}
-              {modality.idealFor}
-            </p>
-          </motion.div>
-        ))}
+                </div>
+              </motion.div>
+            );
+          })}
+        </div>
       </div>
     </section>
   );
 }
+
+function MarketCard({ title, price, icon: Icon, color, best }: any) {
+  return (
+    <div className={`p-6 rounded-3xl border transition-all duration-500 ${best ? 'bg-green-500/10 border-green-500/30 shadow-lg shadow-green-500/5' : 'bg-slate-900/40 border-slate-800'}`}>
+      <Icon className={`w-5 h-5 mb-4 ${color}`} />
+      <h4 className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">{title}</h4>
+      <p className={`text-lg font-black mt-1 ${best ? 'text-green-400' : 'text-slate-300'}`}>{price}</p>
+    </div>
+  );
+}