feat(about): add story sections and core values to About component

Enhance the About page with new story sections detailing personal journey and core values, including icons and structured content for better user engagement and self-presentation.

app/components/About.tsx

@@ -3,108 +3,258 @@
 import { motion } from "motion/react";
 import { MagicCard } from "@/components/magicui/magic-card";
 import { TextReveal } from "@/components/magicui/text-reveal";
+import {
+  Brain,
+  Zap,
+  Target,
+  Rocket,
+  Users,
+  Lightbulb,
+  Code,
+  Shield,
+} from "lucide-react";
 
 export default function About() {
+  const storySections = [
+    {
+      icon: Brain,
+      title: "A Curiosidade que Me Define",
+      content:
+        "Sempre fui fascinado por problemas que outros consideravam 'complicados demais'. Essa curiosidade me levou ao desenvolvimento web, onde descobri meu superpoder: transformar complexidade em clareza, caos em sistemas elegantes.",
+      color: "from-blue-500 to-purple-600",
+      bgColor: "bg-blue-500/10",
+      iconColor: "text-blue-400",
+    },
+    {
+      icon: Zap,
+      title: "Três Anos de Transformação",
+      content:
+        "Nos últimos três anos, enfrentei dezenas de desafios técnicos que pareciam impossíveis no início: arquiteturas que precisavam escalar, integrações que ninguém conseguia fazer funcionar, prazos que pareciam irreais. Cada batalha me transformou. Cada projeto me tornou mais forte.",
+      color: "from-purple-500 to-pink-600",
+      bgColor: "bg-purple-500/10",
+      iconColor: "text-purple-400",
+    },
+    {
+      icon: Target,
+      title: "Fundamentação + Experiência",
+      content:
+        "Hoje, como estudante de Engenharia da Computação, combino fundamentação acadêmica rigorosa com experiência real de mercado. Domino o arsenal completo do desenvolvimento full-stack moderno — computação em nuvem, IA, arquiteturas escaláveis — mas minha verdadeira expertise está em escolher a ferramenta certa para cada missão.",
+      color: "from-pink-500 to-red-600",
+      bgColor: "bg-pink-500/10",
+      iconColor: "text-pink-400",
+    },
+    {
+      icon: Rocket,
+      title: "Soluções que Fazem Diferença",
+      content:
+        "Não entrego apenas código; entrego soluções que fazem diferença mensurável. Procuro meu próximo grande desafio: um time onde colaboração, ética e inovação não sejam buzzwords, mas valores praticados diariamente.",
+      color: "from-red-500 to-orange-600",
+      bgColor: "bg-red-500/10",
+      iconColor: "text-red-400",
+    },
+    {
+      icon: Lightbulb,
+      title: "Construindo Legados",
+      content:
+        "Onde minha dedicação à excelência técnica e aprendizado constante possam gerar impacto real. Porque tecnologia sem propósito é apenas sintaxe — e eu construo legados.",
+      color: "from-orange-500 to-yellow-600",
+      bgColor: "bg-orange-500/10",
+      iconColor: "text-orange-400",
+    },
+  ];
+
+  const coreValues = [
+    {
+      icon: Code,
+      title: "Excelência Técnica",
+      description: "Código limpo, arquiteturas escaláveis e soluções elegantes",
+    },
+    {
+      icon: Brain,
+      title: "Aprendizado Constante",
+      description: "Sempre evoluindo, sempre buscando o próximo desafio",
+    },
+    {
+      icon: Users,
+      title: "Colaboração Genuína",
+      description: "Trabalho em equipe baseado em respeito e propósito comum",
+    },
+    {
+      icon: Shield,
+      title: "Ética Profissional",
+      description: "Valores sólidos que guiam cada decisão técnica",
+    },
+  ];
+
   return (
-    <section id="about" className="py-20 px-4">
+    <section id="about" className="py-20 px-4 relative">
-      <div className="max-w-6xl mx-auto">
+      <div className="max-w-7xl mx-auto relative z-10">
+        {/* Header */}
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
           viewport={{ once: true }}
-          className="text-center mb-16"
+          className="text-center mb-20"
         >
-          <h2 className="text-4xl md:text-5xl font-bold mb-6">Sobre Mim</h2>
+          <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">
+              Minha Jornada
+            </span>
+          </div>
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 via-blue-400 to-blue-500 bg-clip-text text-transparent">
+            Sobre Mim
+          </h2>
+          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
+            Uma jornada de transformação através da tecnologia, onde cada
+            desafio se tornou uma oportunidade de crescimento e inovação
+          </p>
         </motion.div>
 
-        <div className="grid md:grid-cols-2 gap-12 items-center">
+        {/* Story Timeline */}
-          {/* Main Description */}
+        <div className="space-y-12 mb-20">
-          <motion.div
+          {storySections.map((section, index) => {
-            initial={{ opacity: 0, x: -30 }}
+            const IconComponent = section.icon;
-            whileInView={{ opacity: 1, x: 0 }}
+            const isEven = index % 2 === 0;
-            transition={{ duration: 0.8, delay: 0.2 }}
-            viewport={{ once: true }}
-          >
-            <div className="p-8 space-y-6">
-              <TextReveal>
-                Desenvolvedor Full-Stack com 3+ anos de experiência,
-                especializado em soluções web modernas e inovadoras. Cursando
-                Engenharia da Computação, com conhecimentos em computação em
-                nuvem e inteligência artificial. Busco constantemente novos
-                desafios onde possa aplicar minha paixão por tecnologia e
-                resolver problemas de forma criativa.
-              </TextReveal>
 
-              <TextReveal>
+            return (
-                Meu objetivo é entregar soluções de alta qualidade, sempre
+              <motion.div
-                priorizando colaboração, ética e inovação. Acredito no poder da
+                key={index}
-                tecnologia para fazer a diferença e estou comprometido com o
+                initial={{ opacity: 0, x: isEven ? -50 : 50 }}
-                aprendizado contínuo e a excelência técnica.
+                whileInView={{ opacity: 1, x: 0 }}
-              </TextReveal>
+                transition={{ duration: 0.8, delay: index * 0.2 }}
-            </div>
+                viewport={{ once: true }}
-          </motion.div>
+                className={`flex flex-col ${
-
+                  isEven ? "md:flex-row" : "md:flex-row-reverse"
-          {/* Soft Skills */}
+                } items-center gap-8`}
-          <motion.div
+              >
-            initial={{ opacity: 0, x: 30 }}
+                {/* Content */}
-            whileInView={{ opacity: 1, x: 0 }}
+                <div className={`flex-1 ${isEven ? "md:pr-12" : "md:pl-12"}`}>
-            transition={{ duration: 0.8, delay: 0.4 }}
+                  <div className="relative">
-            viewport={{ once: true }}
-            className="space-y-6"
-          >
-            <h3 className="text-2xl font-semibold mb-6 text-cyan-400">
-              Soft Skills
-            </h3>
-
-            <div className="space-y-4">
-              {[
-                { skill: "Comunicação", level: 90 },
-                { skill: "Trabalho em Equipe", level: 85 },
-                // { skill: "Resolução de Problemas", level: 95 },
-                { skill: "Aprendizado Contínuo", level: 90 },
-                { skill: "Adaptabilidade", level: 85 },
-              ].map((item) => (
-                <div key={item.skill} className="space-y-2">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-gray-300">{item.skill}</span>
-                    <span className="text-cyan-400">{item.level}%</span>
-                  </div>
-                  <div className="w-full bg-white/10 rounded-full h-2">
                     <div
-                      className="bg-gradient-to-r from-cyan-400 to-blue-500 h-2 rounded-full transition-all duration-1000"
+                      className={`absolute inset-0 bg-gradient-to-r ${section.color} opacity-10 rounded-2xl blur-xl`}
-                      style={{ width: `${item.level}%` }}
+                    ></div>
-                    />
+                    <div className="relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8">
+                      <div className="flex items-center gap-4 mb-6">
+                        <div className={`p-4 rounded-xl ${section.bgColor}`}>
+                          <IconComponent
+                            className={`w-8 h-8 ${section.iconColor}`}
+                          />
+                        </div>
+                        <h3 className="text-2xl font-bold text-white">
+                          {section.title}
+                        </h3>
+                      </div>
+                      <p className="text-gray-300 leading-relaxed text-lg">
+                        {section.content}
+                      </p>
+                    </div>
                   </div>
                 </div>
-              ))}
-            </div>
 
-            <div className="mt-8">
+                {/* Timeline Indicator */}
-              <h4 className="text-lg font-semibold mb-4 text-blue-400">
+                <div className="flex flex-col items-center">
-                Destaques
+                  <div
-              </h4>
+                    className={`w-16 h-16 rounded-full ${section.bgColor} border-4 border-white/20 flex items-center justify-center`}
-              <ul className="space-y-2 text-gray-300">
+                  >
-                <li className="flex items-center gap-2">
+                    <span className="text-2xl font-bold text-white">
-                  <div className="w-2 h-2 bg-blue-400 rounded-full" />
+                      {index + 1}
-                  3+ anos de experiência
+                    </span>
-                </li>
+                  </div>
-                <li className="flex items-center gap-2">
+                  {index < storySections.length - 1 && (
-                  <div className="w-2 h-2 bg-blue-400 rounded-full" />
+                    <div className="w-1 h-16 bg-gradient-to-b from-white/20 to-transparent mt-4"></div>
-                  Engenheiro da Computação
+                  )}
-                </li>
+                </div>
-                <li className="flex items-center gap-2">
+
-                  <div className="w-2 h-2 bg-blue-400 rounded-full" />
+                {/* Spacer */}
-                  Conhecimento em Cloud e IA
+                <div className="flex-1 hidden md:block"></div>
-                </li>
+              </motion.div>
-                <li className="flex items-center gap-2">
+            );
-                  <div className="w-2 h-2 bg-blue-400 rounded-full" />
+          })}
-                  Ampla gama de conhecimentos
-                </li>
-              </ul>
-            </div>
-          </motion.div>
         </div>
+
+        {/* Core Values */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+          viewport={{ once: true }}
+          className="mb-16"
+        >
+          <div className="text-center mb-12">
+            <h3 className="text-3xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
+              Meus Valores Fundamentais
+            </h3>
+            <p className="text-gray-400 text-lg">
+              Os princípios que guiam cada decisão e projeto
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {coreValues.map((value, index) => {
+              const IconComponent = value.icon;
+              return (
+                <motion.div
+                  key={value.title}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.6, delay: index * 0.1 }}
+                  viewport={{ once: true }}
+                  className="group"
+                >
+                  <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 h-full hover:border-cyan-500/30 transition-all duration-300 hover:scale-105">
+                    <div className="p-3 rounded-lg bg-blue-500/20 w-fit mb-4 group-hover:bg-blue-500/30 transition-colors">
+                      <IconComponent className="w-6 h-6 text-blue-400" />
+                    </div>
+                    <h4 className="text-lg font-semibold text-white mb-3">
+                      {value.title}
+                    </h4>
+                    <p className="text-gray-400 text-sm leading-relaxed">
+                      {value.description}
+                    </p>
+                  </div>
+                </motion.div>
+              );
+            })}
+          </div>
+        </motion.div>
+
+        {/* Call to Action */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center"
+        >
+          <div className="relative max-w-4xl mx-auto">
+            <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 rounded-2xl blur-xl"></div>
+            <div className="relative bg-gradient-to-r from-blue-500/5 to-purple-500/5 border border-blue-500/20 rounded-2xl p-8 backdrop-blur-sm">
+              <h4 className="text-2xl font-bold text-white mb-4">
+                Pronto para o Próximo Grande Desafio
+              </h4>
+              <p className="text-gray-300 text-lg mb-6">
+                Busco uma equipe onde posso aplicar toda essa experiência e
+                paixão para criar soluções que realmente importam
+              </p>
+              <div className="flex flex-wrap justify-center gap-4">
+                <span className="px-4 py-2 bg-blue-500/20 text-blue-400 rounded-full text-sm font-medium border border-blue-500/30">
+                  🚀 Inovação Contínua
+                </span>
+                <span className="px-4 py-2 bg-purple-500/20 text-purple-400 rounded-full text-sm font-medium border border-purple-500/30">
+                  🤝 Colaboração Genuína
+                </span>
+                <span className="px-4 py-2 bg-pink-500/20 text-pink-400 rounded-full text-sm font-medium border border-pink-500/30">
+                  ⚡ Excelência Técnica
+                </span>
+                <span className="px-4 py-2 bg-green-500/20 text-green-400 rounded-full text-sm font-medium border border-green-500/30">
+                  🎯 Impacto Real
+                </span>
+              </div>
+            </div>
+          </div>
+        </motion.div>
       </div>
     </section>
   );

app/components/Contact.tsx

@@ -43,7 +43,13 @@ export default function Contact() {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+          <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">
+              Vamos Conversar
+            </span>
+          </div>
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
             Vamos Conversar
           </h2>
           <p className="text-xl text-gray-300 max-w-2xl mx-auto">
@@ -72,7 +78,7 @@ export default function Contact() {
               </h3>
               <div className="overflow-hidden rounded-lg shadow-lg">
                 <iframe
-                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3557.1999999999996!2d-48.77891484804123!3d-26.087801635807004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjbCsDA1JzE2LjEiUyA0OMKwNDYnNDQuMSJX!5e0!3m2!1spt-BR!2sbr!4v1700000000000!5m2!1spt-BR!2sbr"
+                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d41412.34944306462!2d-48.8485392!3d-26.0388466!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94dc04ecd7709991%3A0x91fa53b8c6ced1e0!2sGaruva%2C%20SC%2C%2089248-000!5e1!3m2!1spt-BR!2sbr!4v1760215413380!5m2!1spt-BR!2sbr"
                   width="100%"
                   height="450"
                   style={{ border: 0 }}

app/components/ContactForm.tsx

@@ -297,73 +297,81 @@ ${userName}`;
   };
 
   const getEstimatedValue = () => {
-    let value = 0;
+    let hours = 0;
-    // Lógica de estimativa baseada nas respostas
+    let hourlyRate = 55; // Taxa base R$ 55/h
+
+    // Estimativa de horas baseada no tipo de projeto
     switch (projectType) {
       case "web-app":
-        value += 10000;
+        hours += 80; // Aplicação web completa
         break;
       case "landing-page":
-        value += 2000;
+        hours += 16; // Landing page simples
         break;
       case "mvp":
-        value += 5000;
+        hours += 40; // MVP básico
         break;
       case "iot-app":
-        value += 15000;
+        hours += 120; // Aplicação IoT complexa
         break;
       case "integracao":
-        value += 7000;
+        hours += 32; // Integração de sistemas
         break;
       case "manutencao":
-        value += 1000;
+        hours += 8; // Manutenção pontual
         break;
       case "consultoria":
-        value += 500;
+        hours += 4; // Consultoria inicial
         break;
       default:
         break;
     }
 
+    // Ajuste de horas baseado no prazo
     switch (desiredDeadline) {
       case "1-3-weeks":
-        value *= 1.2; // Urgência aumenta o valor
+        hours *= 1.3; // Urgência aumenta horas
         break;
       case "1-2-months":
-        value *= 1.1;
+        hours *= 1.1;
         break;
       case "6-plus-months":
-        value *= 0.9; // Prazo longo pode reduzir o valor
+        hours *= 0.9; // Prazo longo pode reduzir horas
         break;
       default:
         break;
     }
 
+    // Ajuste de horas baseado na complexidade
     switch (technicalComplexity) {
       case "alta":
-        value *= 1.3;
+        hours *= 1.4;
+        hourlyRate = 65; // Taxa maior para alta complexidade
         break;
       case "muito-alta":
-        value *= 1.5;
+        hours *= 1.7;
+        hourlyRate = 70; // Taxa máxima para muito alta complexidade
+        break;
+      case "media":
+        hourlyRate = 50; // Taxa média
         break;
       default:
         break;
     }
 
     if (hasInternalTeam === "nao") {
-      value *= 1.1; // Sem equipe interna pode indicar mais trabalho
+      hours *= 1.2; // Sem equipe interna = mais horas necessárias
     }
 
-    // Ajustar pelo valor do orçamento, se aplicável
+    const totalValue = hours * hourlyRate;
-    if (budgetValue) {
+
-      const parsedBudget = parseFloat(budgetValue.replace(/\D/g, ""));
+    if (totalValue > 0) {
-      if (!isNaN(parsedBudget)) {
+      return `Estimativa: ${Math.round(
-        // Se o valor estimado for maior que o orçamento fornecido, ajusta para o orçamento
+        hours
-        value = Math.min(value, parsedBudget);
+      )}h × R$ ${hourlyRate}/h = R$ ${totalValue.toFixed(0)}`;
-      }
     }
 
-    return value > 0 ? `Estimativa: R$ ${value.toFixed(2)}` : "Estimativa: N/A";
+    return "Estimativa: Solicite orçamento personalizado";
   };
 
   return (
@@ -374,7 +382,7 @@ ${userName}`;
       viewport={{ once: true }}
       className="space-y-4"
     >
-      <h3 className="text-2xl font-semibold mb-6 text-blue-primary">
+      <h3 className="text-2xl font-semibold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
         Preencha o Formulário
       </h3>
 
@@ -384,8 +392,8 @@ ${userName}`;
           onClick={() => setFormType("simple")}
           className={`py-2 px-4 rounded-lg font-semibold transition-all duration-300 ${
             formType === "simple"
-              ? "bg-blue-primary text-white shadow-lg shadow-blue-primary/25 border-2 border-blue-500"
+              ? "bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-lg shadow-cyan-500/25 border-2 border-cyan-500"
-              : "bg-gray-700 text-gray-300 opacity-50 cursor-pointer"
+              : "bg-gray-700 text-gray-300 hover:bg-gray-600 cursor-pointer"
           }`}
         >
           Formulário Simples
@@ -395,8 +403,8 @@ ${userName}`;
           onClick={() => setFormType("advanced")}
           className={`py-2 px-4 rounded-lg font-semibold transition-all duration-300 ${
             formType === "advanced"
-              ? "bg-blue-primary text-white shadow-lg shadow-blue-primary/25 border-2 border-blue-500"
+              ? "bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-lg shadow-cyan-500/25 border-2 border-cyan-500"
-              : "bg-gray-700 text-gray-300 opacity-50 cursor-pointer"
+              : "bg-gray-700 text-gray-300 hover:bg-gray-600 cursor-pointer"
           }`}
         >
           Formulário Avançado
@@ -430,7 +438,7 @@ ${userName}`;
               id="simple-user-name"
               className={`w-full p-3 rounded-lg bg-white/5 border ${
                 nameError ? "border-red-500" : "border-white/10"
-              } text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent`}
+              } text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent`}
               placeholder="Seu nome"
               value={userName}
               onChange={handleNameChange}
@@ -485,7 +493,7 @@ ${userName}`;
                   id="user-name"
                   className={`w-full p-3 rounded-lg bg-white/5 border ${
                     nameError ? "border-red-500" : "border-white/10"
-                  } text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent`}
+                  } text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent`}
                   placeholder="Seu nome completo"
                   value={userName}
                   onChange={handleNameChange}
@@ -508,7 +516,7 @@ ${userName}`;
                   id="user-email"
                   className={`w-full p-3 rounded-lg bg-white/5 border ${
                     emailError ? "border-red-500" : "border-white/10"
-                  } text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent`}
+                  } text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent`}
                   placeholder="[email protected]"
                   value={userEmail}
                   onChange={handleEmailChange}
@@ -531,7 +539,7 @@ ${userName}`;
                   id="user-phone"
                   className={`w-full p-3 rounded-lg bg-white/5 border ${
                     phoneError ? "border-red-500" : "border-white/10"
-                  } text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent`}
+                  } text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent`}
                   placeholder="(XX) XXXXX-XXXX"
                   value={userPhone}
                   onChange={handlePhoneChange}
@@ -552,7 +560,7 @@ ${userName}`;
                 <input
                   type="text"
                   id="user-company"
-                  className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent"
+                  className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
                   placeholder="Nome da empresa, sua posição"
                   value={userCompany}
                   onChange={handleCompanyChange}
@@ -567,16 +575,34 @@ ${userName}`;
                 </label>
                 <select
                   id="how-found"
-                  className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-blue-primary focus:border-transparent"
+                  className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent appearance-none"
+                  style={{
+                    backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
+                    backgroundPosition: "right 12px center",
+                    backgroundRepeat: "no-repeat",
+                    backgroundSize: "16px",
+                  }}
                   value={howFound}
                   onChange={handleHowFoundChange}
                 >
-                  <option value="">Selecione uma opção</option>
+                  <option value="" className="bg-gray-800 text-white">
-                  <option value="linkedin">LinkedIn</option>
+                    Selecione uma opção
-                  <option value="github">GitHub</option>
+                  </option>
-                  <option value="indicacao">Indicação</option>
+                  <option value="linkedin" className="bg-gray-800 text-white">
-                  <option value="pesquisa">Pesquisa Online</option>
+                    LinkedIn
-                  <option value="outro">Outro</option>
+                  </option>
+                  <option value="github" className="bg-gray-800 text-white">
+                    GitHub
+                  </option>
+                  <option value="indicacao" className="bg-gray-800 text-white">
+                    Indicação
+                  </option>
+                  <option value="pesquisa" className="bg-gray-800 text-white">
+                    Pesquisa Online
+                  </option>
+                  <option value="outro" className="bg-gray-800 text-white">
+                    Outro
+                  </option>
                 </select>
               </div>
             </div>
@@ -631,19 +657,55 @@ ${userName}`;
                   </label>
                   <select
                     id="project-type"
-                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-blue-primary focus:border-transparent"
+                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent appearance-none"
+                    style={{
+                      backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
+                      backgroundPosition: "right 12px center",
+                      backgroundRepeat: "no-repeat",
+                      backgroundSize: "16px",
+                    }}
                     value={projectType}
                     onChange={handleProjectTypeChange}
                   >
-                    <option value="">Selecione o tipo</option>
+                    <option value="" className="bg-gray-800 text-white">
-                    <option value="web-app">Aplicação Web Completa</option>
+                      Selecione o tipo
-                    <option value="landing-page">Landing Page</option>
+                    </option>
-                    <option value="mvp">MVP (Produto Mínimo Viável)</option>
+                    <option value="web-app" className="bg-gray-800 text-white">
-                    <option value="iot-app">Aplicação IoT</option>
+                      Aplicação Web Completa
-                    <option value="integracao">Integração de Sistemas</option>
+                    </option>
-                    <option value="manutencao">Manutenção/Ajustes</option>
+                    <option
-                    <option value="consultoria">Consultoria/Mentoria</option>
+                      value="landing-page"
-                    <option value="outro">Outro</option>
+                      className="bg-gray-800 text-white"
+                    >
+                      Landing Page
+                    </option>
+                    <option value="mvp" className="bg-gray-800 text-white">
+                      MVP (Produto Mínimo Viável)
+                    </option>
+                    <option value="iot-app" className="bg-gray-800 text-white">
+                      Aplicação IoT
+                    </option>
+                    <option
+                      value="integracao"
+                      className="bg-gray-800 text-white"
+                    >
+                      Integração de Sistemas
+                    </option>
+                    <option
+                      value="manutencao"
+                      className="bg-gray-800 text-white"
+                    >
+                      Manutenção/Ajustes
+                    </option>
+                    <option
+                      value="consultoria"
+                      className="bg-gray-800 text-white"
+                    >
+                      Consultoria/Mentoria
+                    </option>
+                    <option value="outro" className="bg-gray-800 text-white">
+                      Outro
+                    </option>
                   </select>
                 </div>
                 {projectType === "outro" && (
@@ -661,7 +723,7 @@ ${userName}`;
                         otherProjectTypeError
                           ? "border-red-500"
                           : "border-white/10"
-                      } text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent`}
+                      } text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent`}
                       placeholder="Ex: Desenvolvimento de Plugin, Automação de Processos"
                       value={otherProjectType}
                       onChange={(e) => {
@@ -687,16 +749,49 @@ ${userName}`;
                   </label>
                   <select
                     id="desired-deadline"
-                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-blue-primary focus:border-transparent"
+                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent appearance-none"
+                    style={{
+                      backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
+                      backgroundPosition: "right 12px center",
+                      backgroundRepeat: "no-repeat",
+                      backgroundSize: "16px",
+                    }}
                     value={desiredDeadline}
                     onChange={handleDesiredDeadlineChange}
                   >
-                    <option value="">Selecione o prazo</option>
+                    <option value="" className="bg-gray-800 text-white">
-                    <option value="1-3-weeks">1-3 Semanas</option>
+                      Selecione o prazo
-                    <option value="1-2-months">1-2 Meses</option>
+                    </option>
-                    <option value="2-4-months">2-4 Meses</option>
+                    <option
-                    <option value="4-6-months">4-6 Meses</option>
+                      value="1-3-weeks"
-                    <option value="6-plus-months">Mais de 6 Meses</option>
+                      className="bg-gray-800 text-white"
+                    >
+                      1-3 Semanas
+                    </option>
+                    <option
+                      value="1-2-months"
+                      className="bg-gray-800 text-white"
+                    >
+                      1-2 Meses
+                    </option>
+                    <option
+                      value="2-4-months"
+                      className="bg-gray-800 text-white"
+                    >
+                      2-4 Meses
+                    </option>
+                    <option
+                      value="4-6-months"
+                      className="bg-gray-800 text-white"
+                    >
+                      4-6 Meses
+                    </option>
+                    <option
+                      value="6-plus-months"
+                      className="bg-gray-800 text-white"
+                    >
+                      Mais de 6 Meses
+                    </option>
                   </select>
                 </div>
                 <div>
@@ -709,7 +804,7 @@ ${userName}`;
                   <input
                     type="text"
                     id="budget-value"
-                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent"
+                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
                     placeholder="Ex: 5000, 10000, A Combinar"
                     value={budgetValue}
                     onChange={handleBudgetValueChange}
@@ -724,15 +819,34 @@ ${userName}`;
                   </label>
                   <select
                     id="technical-complexity"
-                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-blue-primary focus:border-transparent"
+                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent appearance-none"
+                    style={{
+                      backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
+                      backgroundPosition: "right 12px center",
+                      backgroundRepeat: "no-repeat",
+                      backgroundSize: "16px",
+                    }}
                     value={technicalComplexity}
                     onChange={handleTechnicalComplexityChange}
                   >
-                    <option value="">Selecione a complexidade</option>
+                    <option value="" className="bg-gray-800 text-white">
-                    <option value="baixa">Baixa</option>
+                      Selecione a complexidade
-                    <option value="media">Média</option>
+                    </option>
-                    <option value="alta">Alta</option>
+                    <option value="baixa" className="bg-gray-800 text-white">
-                    <option value="muito-alta">Muito Alta</option>
+                      Baixa
+                    </option>
+                    <option value="media" className="bg-gray-800 text-white">
+                      Média
+                    </option>
+                    <option value="alta" className="bg-gray-800 text-white">
+                      Alta
+                    </option>
+                    <option
+                      value="muito-alta"
+                      className="bg-gray-800 text-white"
+                    >
+                      Muito Alta
+                    </option>
                   </select>
                 </div>
                 <div>
@@ -744,14 +858,28 @@ ${userName}`;
                   </label>
                   <select
                     id="has-internal-team"
-                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-blue-primary focus:border-transparent"
+                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent appearance-none"
+                    style={{
+                      backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
+                      backgroundPosition: "right 12px center",
+                      backgroundRepeat: "no-repeat",
+                      backgroundSize: "16px",
+                    }}
                     value={hasInternalTeam}
                     onChange={handleHasInternalTeamChange}
                   >
-                    <option value="">Selecione</option>
+                    <option value="" className="bg-gray-800 text-white">
-                    <option value="sim">Sim</option>
+                      Selecione
-                    <option value="nao">Não</option>
+                    </option>
-                    <option value="parcial">Parcialmente</option>
+                    <option value="sim" className="bg-gray-800 text-white">
+                      Sim
+                    </option>
+                    <option value="nao" className="bg-gray-800 text-white">
+                      Não
+                    </option>
+                    <option value="parcial" className="bg-gray-800 text-white">
+                      Parcialmente
+                    </option>
                   </select>
                 </div>
               </div>
@@ -768,7 +896,7 @@ ${userName}`;
               <textarea
                 id="custom-message"
                 rows={4}
-                className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
                 placeholder="Descreva seu projeto ou suas necessidades aqui..."
                 value={customMessage}
                 onChange={handleMessageChange}
@@ -780,13 +908,13 @@ ${userName}`;
           <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
             <button
               type="submit"
-              className="w-full py-4 px-6 rounded-lg font-semibold text-lg transition-all duration-300 bg-blue-primary hover:bg-blue-primary/90 text-white shadow-lg shadow-blue-primary/25 border-2 border-blue-500"
+              className="w-full py-4 px-6 rounded-lg font-semibold text-lg transition-all duration-300 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25 border-2 border-cyan-500"
             >
               {getCtaMessage()}
             </button>
           </motion.div>
           {projectType && desiredDeadline && budgetValue && (
-            <p className="text-center text-lg font-semibold text-blue-400 mt-4">
+            <p className="text-center text-lg font-semibold text-cyan-400 mt-4">
               {getEstimatedValue()}
             </p>
           )}

app/components/Experience.tsx

@@ -1,8 +1,16 @@
 "use client";
 
 import { motion } from "motion/react";
-import { BentoGrid, BentoGridItem } from "@/components/magicui/bento-grid";
+import {
-import { Calendar, MapPin, Briefcase } from "lucide-react";
+  Calendar,
+  MapPin,
+  Briefcase,
+  Zap,
+  TrendingUp,
+  Users,
+  Award,
+  ExternalLink,
+} from "lucide-react";
 import { usePortfolioData } from "@/lib/usePortfolioData";
 
 export default function Experience() {
@@ -11,7 +19,7 @@ export default function Experience() {
   if (loading) {
     return (
       <section id="experience" className="py-20 px-4">
-        <div className="max-w-6xl mx-auto text-center">
+        <div className="max-w-7xl mx-auto text-center">
           <div className="animate-pulse">
             <div className="h-8 bg-gray-700 rounded w-1/3 mx-auto mb-4"></div>
             <div className="h-4 bg-gray-700 rounded w-1/2 mx-auto"></div>
@@ -24,99 +32,293 @@ export default function Experience() {
   if (error || !data) {
     return (
       <section id="experience" className="py-20 px-4">
-        <div className="max-w-6xl mx-auto text-center">
+        <div className="max-w-7xl mx-auto text-center">
           <p className="text-red-400">Erro ao carregar dados de experiência.</p>
         </div>
       </section>
     );
   }
 
-  const experiences = data.experiences.filter((exp) => exp.featured);
+  const experiences = data.experiences
+    .filter((exp) => exp.featured)
+    .sort((a, b) => {
+      // Extrair ano de início de cada experiência
+      const getStartYear = (period: string) => {
+        const yearMatch = period.match(/(\d{4})/);
+        return yearMatch ? parseInt(yearMatch[1]) : 0;
+      };
+
+      const yearA = getStartYear(a.period);
+      const yearB = getStartYear(b.period);
+
+      // Ordenar da mais antiga para a mais nova
+      return yearA - yearB;
+    });
+
+  // Configuração de cores por empresa/tipo
+  const experienceConfig = {
+    "innovo-tecnologia": {
+      color: "from-blue-500 to-cyan-600",
+      bgColor: "bg-blue-500/10",
+      borderColor: "border-blue-500/20",
+      iconColor: "text-blue-400",
+      accent: "blue",
+    },
+    "apolo-energia": {
+      color: "from-green-500 to-emerald-600",
+      bgColor: "bg-green-500/10",
+      borderColor: "border-green-500/20",
+      iconColor: "text-green-400",
+      accent: "green",
+    },
+  };
+
+  const getExperienceConfig = (company: string) => {
+    const key = company
+      .toLowerCase()
+      .replace(/\s+/g, "-")
+      .replace(/[^a-z0-9-]/g, "");
+    return (
+      experienceConfig[key as keyof typeof experienceConfig] ||
+      experienceConfig["innovo-tecnologia"]
+    );
+  };
+
+  const formatDuration = (period: string) => {
+    // Extrair meses da string de período (ex: "3 meses")
+    const monthsMatch = period.match(/(\d+)\s*meses?/i);
+    if (monthsMatch) {
+      const months = parseInt(monthsMatch[1]);
+      if (months < 12) {
+        return `${months} ${months === 1 ? "mês" : "meses"}`;
+      } else {
+        const years = Math.floor(months / 12);
+        const remainingMonths = months % 12;
+        if (remainingMonths === 0) {
+          return `${years} ${years === 1 ? "ano" : "anos"}`;
+        } else {
+          return `${years} ${
+            years === 1 ? "ano" : "anos"
+          } e ${remainingMonths} ${remainingMonths === 1 ? "mês" : "meses"}`;
+        }
+      }
+    }
+
+    // Extrair anos da string de período (ex: "3 anos 5 meses")
+    const yearsMatch = period.match(/(\d+)\s*anos?/i);
+    if (yearsMatch) {
+      const years = parseInt(yearsMatch[1]);
+      return `${years}+ ${years === 1 ? "ano" : "anos"}`;
+    }
+
+    return "Experiência relevante";
+  };
 
   return (
-    <section
+    <section id="experience" className="py-20 px-4 relative">
-      id="experience"
+      <div className="max-w-7xl mx-auto">
-      className="py-20 px-4 bg-gradient-to-b from-transparent to-black/20 mx-auto"
+        {/* Header */}
-    >
-      <div className="max-w-6xl mx-auto">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
           viewport={{ once: true }}
-          className="text-center mb-16"
+          className="text-center mb-20"
         >
-          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+          <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">
+              Jornada Profissional
+            </span>
+          </div>
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
             Experiência Profissional
           </h2>
-          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Minha jornada profissional em desenvolvimento de software e soluções
+            Uma trajetória de crescimento técnico e impacto real, onde cada
-            tecnológicas
+            projeto representou um novo nível de desafio e aprendizado
           </p>
         </motion.div>
 
-        <BentoGrid className="gap-6">
+        {/* Experience Cards Grid */}
-          {experiences.map((exp, index) => (
+        <div className="grid lg:grid-cols-2 gap-8">
-            <BentoGridItem
+          {experiences.map((exp, index) => {
-              key={exp.id}
+            const config = getExperienceConfig(exp.company);
-              colSpan={index === 0 ? 2 : 1}
+
-              className="group hover:scale-[1.02] transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/10"
+            return (
-            >
+              <motion.div
-              <div className="space-y-4">
+                key={exp.id}
-                {/* Header */}
+                initial={{ opacity: 0, y: 30 }}
-                <div className="flex items-start justify-between">
+                whileInView={{ opacity: 1, y: 0 }}
-                  <div className="flex-1">
+                transition={{ duration: 0.8, delay: index * 0.2 }}
-                    <h3 className="text-xl font-semibold text-white mb-1">
+                viewport={{ once: true }}
-                      {exp.title}
+                className="relative"
-                    </h3>
+              >
-                    <p className="text-blue-400 font-medium">{exp.company}</p>
+                {/* Content Card */}
-                    <div className="flex flex-wrap items-center gap-2 text-sm text-gray-400 mt-2">
+                <div className="h-full">
-                      <div className="flex items-center gap-1">
+                  <div className="relative group">
-                        <Calendar className="w-4 h-4" />
+                    {/* Background Glow */}
-                        {exp.period}
+                    <div
+                      className={`absolute inset-0 bg-gradient-to-r ${config.color} opacity-10 rounded-2xl blur-xl group-hover:opacity-20 transition-opacity duration-500`}
+                    ></div>
+
+                    {/* Main Card */}
+                    <div className="relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:border-cyan-500/30 transition-all duration-300 hover:scale-105">
+                      {/* Header */}
+                      <div className="flex items-start justify-between mb-6">
+                        <div className="flex-1">
+                          <div className="flex items-center gap-3 mb-3">
+                            <div className={`p-3 rounded-xl ${config.bgColor}`}>
+                              <Briefcase
+                                className={`w-6 h-6 ${config.iconColor}`}
+                              />
+                            </div>
+                            <div>
+                              <h3 className="text-2xl font-bold text-white mb-1">
+                                {exp.title}
+                              </h3>
+                              <p
+                                className={`text-lg font-semibold ${config.iconColor}`}
+                              >
+                                {exp.company}
+                              </p>
+                            </div>
+                          </div>
+
+                          {/* Meta Info */}
+                          <div className="flex flex-wrap gap-4 text-sm text-gray-400 mb-4">
+                            <div className="flex items-center gap-2">
+                              <Calendar className="w-4 h-4" />
+                              <span>{exp.period}</span>
+                            </div>
+                            {exp.location && (
+                              <div className="flex items-center gap-2">
+                                <MapPin className="w-4 h-4" />
+                                <span>{exp.location}</span>
+                              </div>
+                            )}
+                            <div className="flex items-center gap-2">
+                              <Users className="w-4 h-4" />
+                              <span>{exp.type}</span>
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Duration Badge */}
+                        <div
+                          className={`px-4 py-2 rounded-full ${config.bgColor} border ${config.borderColor}`}
+                        >
+                          <span
+                            className={`text-sm font-bold ${config.iconColor}`}
+                          >
+                            {formatDuration(exp.period)}
+                          </span>
+                        </div>
                       </div>
-                      {exp.location && (
+
-                        <div className="flex items-center gap-1">
+                      {/* Description */}
-                          <MapPin className="w-4 h-4" />
+                      <p className="text-gray-300 leading-relaxed mb-6 text-lg">
-                          {exp.location}
+                        {exp.description}
+                      </p>
+
+                      {/* Achievements */}
+                      {exp.achievements && exp.achievements.length > 0 && (
+                        <div className="mb-6">
+                          <h4 className="text-sm font-semibold text-gray-400 mb-4 uppercase tracking-wide flex items-center gap-2">
+                            <Award className="w-4 h-4 text-yellow-400" />
+                            Principais Conquistas
+                          </h4>
+                          <div className="grid gap-3">
+                            {exp.achievements.map((achievement, idx) => (
+                              <div
+                                key={idx}
+                                className="flex items-start gap-3 p-3 rounded-lg bg-white/5 border border-white/5 hover:border-blue-500/20 transition-colors"
+                              >
+                                <div className="w-2 h-2 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span className="text-gray-300 text-sm leading-relaxed">
+                                  {achievement}
+                                </span>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Technologies */}
+                      {exp.technologies && exp.technologies.length > 0 && (
+                        <div>
+                          <h4 className="text-sm font-semibold text-gray-400 mb-3 uppercase tracking-wide flex items-center gap-2">
+                            <Zap className="w-4 h-4 text-orange-400" />
+                            Stack Tecnológica
+                          </h4>
+                          <div className="flex flex-wrap gap-2">
+                            {exp.technologies.slice(0, 6).map((tech) => (
+                              <span
+                                key={tech}
+                                className="px-3 py-1 bg-gray-800/50 text-gray-300 text-xs rounded-full border border-gray-700/50 hover:border-blue-500/30 transition-colors"
+                              >
+                                {tech}
+                              </span>
+                            ))}
+                            {exp.technologies.length > 6 && (
+                              <span className="px-3 py-1 bg-gray-800/30 text-gray-500 text-xs rounded-full">
+                                +{exp.technologies.length - 6}
+                              </span>
+                            )}
+                          </div>
                         </div>
                       )}
-                      <div className="flex items-center gap-1">
-                        <Briefcase className="w-4 h-4" />
-                        {exp.type}
-                      </div>
                     </div>
                   </div>
                 </div>
+              </motion.div>
+            );
+          })}
+        </div>
 
-                {/* Description */}
+        {/* Summary Stats */}
-                <p className="text-gray-300 leading-relaxed">
+        <motion.div
-                  {exp.description}
+          initial={{ opacity: 0, y: 20 }}
-                </p>
+          whileInView={{ opacity: 1, y: 0 }}
-
+          transition={{ duration: 0.8, delay: 0.6 }}
-                {/* Achievements */}
+          viewport={{ once: true }}
-                {exp.achievements.length > 0 && (
+          className="mt-20"
-                  <div>
+        >
-                    <h4 className="text-sm font-semibold text-blue-400 mb-2">
+          <div className="relative max-w-4xl mx-auto">
-                      Principais Conquistas:
+            <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-green-500/10 rounded-2xl blur-xl"></div>
-                    </h4>
+            <div className="relative bg-gradient-to-r from-blue-500/5 to-green-500/5 border border-blue-500/20 rounded-2xl p-8 backdrop-blur-sm">
-                    <ul className="space-y-1">
+              <h4 className="text-2xl font-bold text-white mb-6 text-center">
-                      {exp.achievements.map((achievement, idx) => (
+                Impacto e Crescimento
-                        <li
+              </h4>
-                          key={idx}
+              <div className="grid md:grid-cols-3 gap-6">
-                          className="text-sm text-gray-400 flex items-center gap-2"
+                <div className="text-center">
-                        >
+                  <div className="text-3xl font-bold text-blue-400 mb-2">
-                          <div className="w-1.5 h-1.5 bg-blue-400 rounded-full" />
+                    3+
-                          {achievement}
-                        </li>
-                      ))}
-                    </ul>
                   </div>
-                )}
+                  <div className="text-gray-400 text-sm">
+                    Anos de Experiência
+                  </div>
+                </div>
+                <div className="text-center">
+                  <div className="text-3xl font-bold text-purple-400 mb-2">
+                    2
+                  </div>
+                  <div className="text-gray-400 text-sm">
+                    Empresas Diferentes
+                  </div>
+                </div>
+                <div className="text-center">
+                  <div className="text-3xl font-bold text-green-400 mb-2">
+                    10+
+                  </div>
+                  <div className="text-gray-400 text-sm">
+                    Tecnologias Dominadas
+                  </div>
+                </div>
               </div>
-            </BentoGridItem>
+            </div>
-          ))}
+          </div>
-        </BentoGrid>
+        </motion.div>
       </div>
     </section>
   );

app/components/Hero.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import { AuroraText } from "@/components/magicui/aurora-text";
 import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
 import { useEffect } from "react";
-import { RotatingText } from "@/components/RotatingText";
+import TextType from "@/components/TextType";
 
 export default function Hero() {
   const getGreetingMessage = () => {
@@ -50,17 +50,40 @@ export default function Hero() {
           className="mb-8"
         >
           <div className="relative w-48 h-48 mx-auto mb-8 mt-10">
-            <Image
+            {/* Glow Effect */}
-              src="/edev.jpeg"
+            <div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-blue-500 opacity-20 rounded-lg blur-xl animate-pulse"></div>
-              alt="Evandro Fonseca Junior - Desenvolvedor Full-Stack"
+
-              fill
+            {/* Gradient Border */}
-              className="rounded-lg object-cover"
+            <div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-lg p-1">
-              priority
+              <div className="w-full h-full bg-black rounded-lg">
-              sizes="(max-width: 768px) 192px, 192px"
+                <Image
-              quality={85}
+                  src="/edev.jpeg"
-              placeholder="blur"
+                  alt="Evandro Fonseca Junior - Desenvolvedor Full-Stack"
-              blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R+IRjWjBqO6O2mhP//Z"
+                  fill
-            />
+                  className="rounded-lg object-cover"
+                  priority
+                  sizes="(max-width: 768px) 192px, 192px"
+                  quality={85}
+                  placeholder="blur"
+                  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R+IRjWjBqO6O2mhP//Z"
+                />
+              </div>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Badge */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.1 }}
+          className="mb-8"
+        >
+          <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">
+              Disponível para Trabalho
+            </span>
           </div>
         </motion.div>
 
@@ -71,18 +94,23 @@ export default function Hero() {
           transition={{ duration: 0.8, delay: 0.2 }}
           className="mb-8"
         >
-          <h1 className="text-3xl md:text-5xl lg:text-6xl font-black mb-1 leading-tight text-gray-300">
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-black mb-1 leading-tight text-gray-300">
             Evandro Fonseca Junior
           </h1>
-          <RotatingText
+          <TextType
-            words={[
+            text={[
               "Full-Stack Developer",
               "Cloud Solutions",
               "UI/UX Focused",
               "Performance Focused",
             ]}
-            className="text-xl md:text-2xl lg:text-3xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent"
+            className="text-xl md:text-2xl lg:text-3xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent"
-            interval={4000}
+            typingSpeed={80}
+            deletingSpeed={50}
+            pauseDuration={2000}
+            loop={true}
+            showCursor={true}
+            cursorCharacter="|"
           />
         </motion.div>
 
@@ -184,7 +212,7 @@ export default function Hero() {
         >
           <a
             href="#contact"
-            className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors"
+            className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-300 hover:scale-105 shadow-lg shadow-cyan-500/25"
           >
             Vamos Trabalhar Juntos
           </a>

app/components/Projects.tsx

@@ -2,16 +2,100 @@
 
 import { motion } from "motion/react";
 import { BentoGrid, BentoGridItem } from "@/components/magicui/bento-grid";
-import { ExternalLink, Github } from "lucide-react";
+import {
+  ExternalLink,
+  Github,
+  Star,
+  Zap,
+  Globe,
+  Cpu,
+  Code2,
+} from "lucide-react";
 import { usePortfolioData } from "@/lib/usePortfolioData";
 
+// Configuração de cores e ícones por categoria
+const categoryConfig = {
+  "full-stack": {
+    color: "from-blue-500 to-blue-600",
+    bgColor: "bg-blue-500/10",
+    borderColor: "border-blue-500/20",
+    icon: Globe,
+    iconColor: "text-blue-400",
+  },
+  iot: {
+    color: "from-purple-500 to-purple-600",
+    bgColor: "bg-purple-500/10",
+    borderColor: "border-purple-500/20",
+    icon: Cpu,
+    iconColor: "text-purple-400",
+  },
+  api: {
+    color: "from-orange-500 to-orange-600",
+    bgColor: "bg-orange-500/10",
+    borderColor: "border-orange-500/20",
+    icon: Code2,
+    iconColor: "text-orange-400",
+  },
+  web: {
+    color: "from-green-500 to-green-600",
+    bgColor: "bg-green-500/10",
+    borderColor: "border-green-500/20",
+    icon: Globe,
+    iconColor: "text-green-400",
+  },
+  desktop: {
+    color: "from-emerald-500 to-emerald-600",
+    bgColor: "bg-emerald-500/10",
+    borderColor: "border-emerald-500/20",
+    icon: Code2,
+    iconColor: "text-emerald-400",
+  },
+};
+
+// Função para gerar estrelas de complexidade
+const ComplexityStars = ({ complexity }: { complexity: number }) => {
+  return (
+    <div className="flex items-center gap-1">
+      {[...Array(5)].map((_, i) => (
+        <Star
+          key={i}
+          className={`w-3 h-3 ${
+            i < complexity ? "text-yellow-400 fill-yellow-400" : "text-gray-600"
+          }`}
+        />
+      ))}
+    </div>
+  );
+};
+
+// Componente de Badge
+const ProjectBadge = ({ badge, index }: { badge: string; index: number }) => {
+  const badgeColors = [
+    "bg-blue-500/20 text-blue-400 border-blue-500/30",
+    "bg-green-500/20 text-green-400 border-green-500/30",
+    "bg-purple-500/20 text-purple-400 border-purple-500/30",
+    "bg-orange-500/20 text-orange-400 border-orange-500/30",
+    "bg-red-500/20 text-red-400 border-red-500/30",
+  ];
+
+  return (
+    <span
+      className={`px-2 py-1 text-xs font-medium rounded-full border ${
+        badgeColors[index % badgeColors.length]
+      }`}
+    >
+      {badge}
+    </span>
+  );
+};
+
 export default function Projects() {
   const { data, loading, error } = usePortfolioData();
 
   if (loading) {
     return (
       <section id="projects" className="py-20 px-4">
-        <div className="max-w-6xl mx-auto text-center">
+        <div className="max-w-7xl mx-auto text-center">
           <div className="animate-pulse">
             <div className="h-8 bg-gray-700 rounded w-1/3 mx-auto mb-4"></div>
             <div className="h-4 bg-gray-700 rounded w-1/2 mx-auto"></div>
@@ -24,7 +108,7 @@ export default function Projects() {
   if (error || !data) {
     return (
       <section id="projects" className="py-20 px-4">
-        <div className="max-w-6xl mx-auto text-center">
+        <div className="max-w-7xl mx-auto text-center">
           <p className="text-red-400">Erro ao carregar dados de projetos.</p>
         </div>
       </section>
@@ -35,7 +119,7 @@ export default function Projects() {
 
   return (
     <section id="projects" className="py-20 px-4 mx-auto">
-      <div className="max-w-6xl mx-auto">
+      <div className="max-w-7xl mx-auto">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -43,91 +127,174 @@ export default function Projects() {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
             Projetos em Destaque
           </h2>
-          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+          <p className="text-xl text-gray-300 max-w-3xl mx-auto">
-            Alguns dos projetos que desenvolvi, demonstrando minhas habilidades
+            Uma seleção dos projetos que desenvolvi, demonstrando minha evolução
-            e paixão por tecnologia
+            técnica e capacidade de entregar soluções completas em diferentes
+            domínios
           </p>
         </motion.div>
 
         <BentoGrid className="gap-6">
-          {projects.map((project, index) => (
+          {projects.map((project, index) => {
-            <BentoGridItem
+            const config =
-              key={project.id}
+              categoryConfig[project.category as keyof typeof categoryConfig] ||
-              colSpan={index === 0 ? 2 : 1}
+              categoryConfig["web"];
-              className="group hover:scale-[1.02] transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/10"
+            const IconComponent = config.icon;
-            >
+
-              <div className="space-y-4">
+            return (
-                {/* Header */}
+              <BentoGridItem
-                <div className="flex items-start justify-between">
+                key={project.id}
-                  <div className="flex-1">
+                colSpan={index <= 1 ? 2 : 1} // NutriScan e Twins Lab em destaque
-                    <h3 className="text-xl font-semibold text-white mb-2">
+                className={`group hover:scale-105 transition-all duration-300 hover:shadow-2xl ${config.borderColor} border-2 bg-white/5 backdrop-blur-sm`}
-                      {project.title}
+              >
-                    </h3>
+                <motion.div
-                    <div className="flex flex-wrap gap-2 mb-3">
+                  className="space-y-5 h-full"
-                      {project.technologies.map((tech) => (
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.6, delay: index * 0.1 }}
+                  viewport={{ once: true }}
+                >
+                  {/* Header com ícone e badges */}
+                  <div className="flex items-start justify-between">
+                    <div className="flex items-center gap-3">
+                      <div className={`p-3 rounded-xl ${config.bgColor}`}>
+                        <IconComponent
+                          className={`w-6 h-6 ${config.iconColor}`}
+                        />
+                      </div>
+                      <div>
+                        <h3 className="text-xl font-bold text-white mb-1">
+                          {project.title}
+                        </h3>
+                        <p className="text-sm text-gray-400 font-medium">
+                          {project.subtitle}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="flex gap-2">
+                      {project.demoUrl && (
+                        <a
+                          href={project.demoUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="p-2 rounded-lg bg-green-500/20 text-green-400 hover:bg-green-500/30 transition-all duration-300 hover:scale-110"
+                          aria-label="Ver demo"
+                        >
+                          <ExternalLink className="w-4 h-4" />
+                        </a>
+                      )}
+                      {project.githubUrl && (
+                        <a
+                          href={project.githubUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="p-2 rounded-lg bg-gray-500/20 text-gray-400 hover:bg-gray-500/30 transition-all duration-300 hover:scale-110"
+                          aria-label="Ver código"
+                        >
+                          <Github className="w-4 h-4" />
+                        </a>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Badges */}
+                  <div className="flex flex-wrap gap-2">
+                    {project.badges.map((badge, idx) => (
+                      <ProjectBadge key={badge} badge={badge} index={idx} />
+                    ))}
+                  </div>
+
+                  {/* Description */}
+                  <p className="text-gray-300 leading-relaxed text-sm">
+                    {project.description}
+                  </p>
+
+                  {/* Tecnologias principais */}
+                  <div>
+                    <h4 className="text-xs font-semibold text-gray-400 mb-2 uppercase tracking-wide">
+                      Stack Principal
+                    </h4>
+                    <div className="flex flex-wrap gap-1">
+                      {project.technologies.slice(0, 4).map((tech) => (
                         <span
                           key={tech}
-                          className="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full border border-blue-500/30"
+                          className="px-2 py-1 bg-gray-800/50 text-gray-300 text-xs rounded border border-gray-700/50"
                         >
                           {tech}
                         </span>
                       ))}
+                      {project.technologies.length > 4 && (
+                        <span className="px-2 py-1 bg-gray-800/30 text-gray-500 text-xs rounded">
+                          +{project.technologies.length - 4}
+                        </span>
+                      )}
                     </div>
                   </div>
-                  <div className="flex gap-2">
+
-                    <a
+                  {/* Features principais */}
-                      href={project.demoUrl}
+                  <div>
-                      className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
+                    <h4 className="text-xs font-semibold text-gray-400 mb-2 uppercase tracking-wide">
-                      aria-label="Ver demo"
+                      Destaques
-                    >
+                    </h4>
-                      <ExternalLink className="w-4 h-4" />
+                    <ul className="space-y-1">
-                    </a>
+                      {project.features.slice(0, 3).map((feature, idx) => (
-                    <a
+                        <li
-                      href={project.githubUrl}
+                          key={idx}
-                      className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
+                          className="text-xs text-gray-400 flex items-start gap-2"
-                      aria-label="Ver código"
+                        >
-                    >
+                          <Zap className="w-3 h-3 text-yellow-400 mt-0.5 flex-shrink-0" />
-                      <Github className="w-4 h-4" />
+                          <span>{feature}</span>
-                    </a>
+                        </li>
+                      ))}
+                    </ul>
                   </div>
-                </div>
 
-                {/* Description */}
+                  {/* Footer com complexidade e status */}
-                <p className="text-gray-300 leading-relaxed">
+                  <div className="pt-4 border-t border-white/10 flex items-center justify-between">
-                  {project.description}
+                    <div className="flex items-center gap-2">
-                </p>
+                      <span className="text-xs text-gray-500">
-
+                        Complexidade:
-                {/* Features */}
+                      </span>
-                <div>
+                      <ComplexityStars
-                  <h4 className="text-sm font-semibold text-blue-400 mb-2">
+                        complexity={project.metrics?.complexity || 3}
-                    Funcionalidades:
+                      />
-                  </h4>
+                    </div>
-                  <ul className="space-y-1">
+                    <span
-                    {project.features.map((feature, idx) => (
+                      className={`text-xs font-medium px-2 py-1 rounded-full ${
-                      <li
+                        project.status === "Em Produção"
-                        key={idx}
+                          ? "bg-green-500/20 text-green-400 border border-green-500/30"
-                        className="text-sm text-gray-400 flex items-center gap-2"
+                          : "bg-blue-500/20 text-blue-400 border border-blue-500/30"
-                      >
+                      }`}
-                        <div className="w-1.5 h-1.5 bg-blue-400 rounded-full" />
+                    >
-                        {feature}
+                      {project.status}
-                      </li>
+                    </span>
-                    ))}
+                  </div>
-                  </ul>
+                </motion.div>
-                </div>
+              </BentoGridItem>
-
+            );
-                {/* Status */}
+          })}
-                <div className="pt-2 border-t border-white/10">
-                  <span className="text-xs text-blue-400 font-medium">
-                    {project.status}
-                  </span>
-                </div>
-              </div>
-            </BentoGridItem>
-          ))}
         </BentoGrid>
+
+        {/* Call to Action */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.5 }}
+          viewport={{ once: true }}
+          className="text-center mt-16"
+        >
+          <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">
+            <div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
+            <span className="text-sm text-blue-300 font-medium">
+              Todos os projetos são desenvolvidos individualmente, demonstrando
+              capacidade full-stack completa
+            </span>
+          </div>
+        </motion.div>
       </div>
     </section>
   );

app/components/Skills.tsx

@@ -76,7 +76,13 @@ export default function Skills() {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+          <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">
+              Tecnologias Dominadas
+            </span>
+          </div>
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
             Habilidades Técnicas
           </h2>
           <p className="text-xl text-gray-300 max-w-2xl mx-auto">
@@ -96,7 +102,7 @@ export default function Skills() {
                 transition={{ duration: 0.8, delay: index * 0.1 }}
                 viewport={{ once: true }}
               >
-                <div className="p-6 space-y-4">
+                <div className="p-6 space-y-4 bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl hover:border-cyan-500/30 transition-all duration-300 hover:scale-105">
                   {/* Header */}
                   <div className="flex items-center gap-3">
                     <div className={`p-3 rounded-lg ${category.bgColor}`}>

app/components/WorkModalities.tsx

@@ -1,64 +1,94 @@
 "use client";
 
 import { motion } from "motion/react";
-import { Briefcase, Clock, DollarSign, HardHat, Lightbulb } from "lucide-react";
+import {
+  Briefcase,
+  Clock,
+  DollarSign,
+  HardHat,
+  Lightbulb,
+  Building2,
+  Users,
+  User,
+  Star,
+} from "lucide-react";
 
 const WorkModalitiesData = [
   {
-    title: "Desenvolvimento por Demanda",
+    title: "Consultoria por Hora",
-    value: "A partir de R$ 50/hora",
+    value: "R$ 35 - 70/hora",
+    badge: "RECOMENDADO",
     idealFor:
-      "Empresas que buscam otimização rápida, startups com necessidades urgentes ou projetos que exigem intervenção especializada e focada.",
+      "Empresas que buscam flexibilidade máxima, startups testando soluções ou projetos que exigem expertise especializada sem compromissos longos.",
     description:
-      "Soluções ágeis e focadas para desafios específicos. Ideal para otimizar recursos e obter resultados rápidos sem compromissos de longo prazo. Sua visão, minha expertise, entregas pontuais.",
+      "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).",
-    icon: Clock,
+    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",
+    ],
+    icon: Lightbulb,
     color: "blue",
+    featured: true,
   },
   {
-    title: "Retainer Mensal",
+    title: "Pacotes de Horas",
-    value: "Sob consulta (pacotes personalizados)",
+    value: "Descontos até 21%",
     idealFor:
-      "Negócios que valorizam estabilidade, crescimento planejado e acesso contínuo a um especialista dedicado para impulsionar sua inovação.",
+      "Clientes que já testaram o serviço e querem economizar com comprometimento antecipado, garantindo disponibilidade e preços favoráveis.",
     description:
-      "Parceria estratégica para evolução contínua e suporte prioritário. Garanta acesso exclusivo à minha expertise para manutenção, novas funcionalidades e consultoria estratégica, com um compromisso de longo prazo que otimiza seu investimento.",
+      "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",
+    ],
     icon: Briefcase,
     color: "green",
   },
   {
-    title: "Consultoria Especializada",
+    title: "Retainer Mensal",
-    value: "Sob consulta (projetos de alto impacto)",
+    value: "A partir de R$ 2.800/mês",
     idealFor:
-      "Líderes de tecnologia e empresas visionárias que enfrentam gargalos técnicos ou buscam validação e aprimoramento de suas estratégias de desenvolvimento.",
+      "Negócios que valorizam estabilidade, crescimento planejado e acesso prioritário a um especialista dedicado para impulsionar sua inovação contínua.",
     description:
-      "Direcionamento estratégico e técnico para desafios complexos. Minha experiência em arquitetura de sistemas, IoT e otimização de performance é o diferencial para transformar suas ideias em soluções robustas e escaláveis. Ideal para quem busca excelência e inovação.",
+      "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.",
-    icon: Lightbulb,
+    benefits: [
+      "✓ Acesso prioritário e exclusivo",
+      "✓ Horas incluídas mensalmente",
+      "✓ Suporte preventivo e consultoria estratégica",
+      "✓ Relacionamento de longo prazo",
+      "✓ Previsibilidade financeira",
+    ],
+    icon: Clock,
     color: "purple",
   },
   {
-    title: "Desenvolvimento Completo",
+    title: "Desenvolvimento Sob Demanda",
-    value: "A partir de R$ 5.000 (investimento inicial)",
+    value: "Estimativa em horas",
     idealFor:
-      "Empreendedores e empresas que precisam de um parceiro para construir soluções digitais do zero, com a garantia de um produto de alta qualidade e impacto.",
+      "Empreendedores e empresas com projetos específicos que precisam de estimativas transparentes e controle total sobre investimento e escopo.",
     description:
-      "Da concepção à entrega, seu projeto ganha vida com uma solução completa e personalizada. Garanto um processo transparente, com foco em performance, segurança e escalabilidade, para que você tenha um produto final que realmente se destaque no mercado.",
+      "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",
+    ],
     icon: HardHat,
     color: "orange",
   },
-  {
-    title: "Projetos Fechados",
-    value: "A partir de R$ 5.000 (soluções sob medida)",
-    idealFor:
-      "Clientes com necessidades claras e orçamentos específicos, que buscam uma entrega eficiente e sem surpresas para projetos de médio porte.",
-    description:
-      "Soluções com escopo e prazo definidos para resultados previsíveis. Ideal para quem busca agilidade e clareza no investimento, com a certeza de uma entrega que atende exatamente às suas expectativas e impulsiona seus objetivos.",
-    icon: DollarSign,
-    color: "red",
-  },
 ];
 
 export function WorkModalities() {
   return (
-    <section className="py-16 px-4">
+    <section className="py-20 px-4">
       <motion.div
         initial={{ opacity: 0, y: 30 }}
         whileInView={{ opacity: 1, y: 0 }}
@@ -66,7 +96,13 @@ export function WorkModalities() {
         viewport={{ once: true }}
         className="text-center mb-12"
       >
-        <h2 className="text-4xl md:text-5xl font-bold mb-4">
+        <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">
@@ -74,7 +110,176 @@ export function WorkModalities() {
         </p>
       </motion.div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto justify-center">
+      {/* 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">
+            <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>
+          </div>
+        </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}
@@ -82,38 +287,76 @@ export function WorkModalities() {
             whileInView={{ opacity: 1, scale: 1 }}
             transition={{ duration: 0.5, delay: index * 0.1 }}
             viewport={{ once: true }}
-            className={`bg-white/5 p-6 rounded-lg shadow-lg border border-white/10 ${
+            className={`relative bg-white/5 p-6 rounded-lg shadow-lg border-2 ${
-              modality.color === "blue" ? "hover:border-blue-500" : ""
+              modality.featured
-            } ${modality.color === "green" ? "hover:border-green-500" : ""} ${
+                ? "border-blue-500/50 bg-blue-500/5"
-              modality.color === "purple" ? "hover:border-purple-500" : ""
+                : "border-white/10"
-            } ${modality.color === "orange" ? "hover:border-orange-500" : ""} ${
+            } ${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`}
           >
-            <div
+            {modality.badge && (
-              className={`p-3 rounded-full ${
+              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
-                modality.color === "blue" ? "bg-blue-500/20" : ""
+                <span className="bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-bold">
-              } ${modality.color === "green" ? "bg-green-500/20" : ""} ${
+                  {modality.badge}
-                modality.color === "purple" ? "bg-purple-500/20" : ""
+                </span>
-              } ${modality.color === "orange" ? "bg-orange-500/20" : ""} ${
+              </div>
-                modality.color === "red" ? "bg-red-500/20" : ""
+            )}
-              } inline-block mb-4`}
+
-            >
+            <div className="flex items-center gap-4 mb-4">
-              <modality.icon
+              <div
-                className={`w-8 h-8 ${
+                className={`p-3 rounded-full ${
-                  modality.color === "blue" ? "text-blue-400" : ""
+                  modality.color === "blue" ? "bg-blue-500/20" : ""
-                } ${modality.color === "green" ? "text-green-400" : ""} ${
+                } ${modality.color === "green" ? "bg-green-500/20" : ""} ${
-                  modality.color === "purple" ? "text-purple-400" : ""
+                  modality.color === "purple" ? "bg-purple-500/20" : ""
-                } ${modality.color === "orange" ? "text-orange-400" : ""} ${
+                } ${modality.color === "orange" ? "bg-orange-500/20" : ""} ${
-                  modality.color === "red" ? "text-red-400" : ""
+                  modality.color === "red" ? "bg-red-500/20" : ""
                 }`}
-              />
+              >
+                <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}
+                </p>
+              </div>
             </div>
-            <h3 className="text-2xl font-semibold mb-2">{modality.title}</h3>
+
-            <p className="text-lg font-medium text-gray-200 mb-2">
-              {modality.value}
-            </p>
             <p className="text-gray-400 mb-4">{modality.description}</p>
+
+            {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>
+                  </p>
+                ))}
+              </div>
+            )}
+
             <p className="text-sm text-gray-500">
               <span className="font-semibold">Ideal para:</span>{" "}
               {modality.idealFor}

linkedin.md

@@ -17,45 +17,47 @@ Meu objetivo é entregar soluções de alta qualidade que superem expectativas,
 
 ## Experiência Profissional
 
-### **Desenvolvedor Full Stack | Innovo Tecnologia Da Informação Ltda.**
+### **Desenvolvedor Fullstack | Innovo Tecnologia Da Informacao Ltda.**
 
-_Dezembro 2024 - Fevereiro 2025 (3 meses) | Tempo Integral_
+_Dezembro 2024 - Fevereiro 2025 (3 meses) | Tempo Integral | Joinville, Santa Catarina, Brasil (Híbrido)_
 
-### **Desenvolvedor Full Stack | Julia Beauty Lashes**
+- **Desenvolvimento Front-end**: Criação de componentes utilizando Angular com foco em reutilização e qualidade de código
-
+- **Desenvolvimento Back-end**: Implementação de lógica de negócio com Node.js e JavaScript
-_Julho 2024 - Presente (1 ano 3 meses) | Freelance | Balneário Camboriú, SC_
+- **Bancos de Dados**: Integração e gestão de dados com PostgreSQL e MySQL
-
+- **Metodologias Ágeis**: Atuação em Scrum para otimizar processos de desenvolvimento
-- **Liderança Técnica**: Arquitetei e desenvolvi sistema web completo para estúdio de beleza especializado em extensão de cílios
+- **Bibliotecas Internas**: Contribuição ativa na criação e manutenção de libs internas para garantir reutilização de código
-- **Tecnologias**: Next.js, TypeScript, Tailwind CSS, Firebase, Jest, React Testing Library
+- **Sistemas Legados**: Garantia de qualidade técnica e manutenção de sistemas existentes
-- **Resultados Mensuráveis**:
-  - Redução de 40% no tempo de marcação de horários com sistema de agendamento automatizado
-  - Aumento de 25% na taxa de conversão através de interface responsiva otimizada
-  - Pontuação 90+ no Google Lighthouse para SEO e performance
-  - Cobertura de testes acima de 80%
-- **Integração e Automação**: Implementei pipeline CI/CD com GitHub Actions, deploy automatizado na Vercel, e integração com APIs de pagamento e WhatsApp
-- **Segurança**: Desenvolvimento de sistema robusto de autenticação e autorização com Firebase Authentication
 
 ### **Desenvolvedor Full Stack | Apolo Energia**
 
-_Junho 2022 - Presente (3 anos 4 meses) | Autônomo | Curitiba, PR_
+_Junho 2022 - Presente (3 anos 5 meses) | Autônomo | Curitiba, Paraná, Brasil (Remota)_
 
-**Responsabilidades Principais**:
+**Desenvolvimento de Aplicações**:
+- Entrega de aplicações Web e Mobile que sustentam rotinas internas da Apolo Energia
+- Desenvolvimento com responsividade e capacidade de crescer sem perda de qualidade
+- Criação de painéis para operação e controle em processos de energia renovável
 
-- Desenvolvimento de aplicações web e mobile responsivas e escaláveis
+**APIs e Integrações**:
-- Criação e implementação de APIs RESTful eficientes
+- Desenho e implementação de APIs REST com contratos claros, testes e versionamento
-- Otimização de performance de aplicações e bancos de dados
+- Simplificação de integrações com terceiros e sistemas internos
-- Implementação de práticas avançadas de segurança de dados
+- Integração de plataformas e dispositivos (IoT) para troca confiável de dados entre serviços e parceiros
-- Integração com sistemas terceiros e APIs externas
-- Colaboração com equipes multidisciplinares (UX/UI, dados, IoT)
-- Code reviews e garantia de qualidade de código
 
-**Especialização em Energia Renovável**:
+**Performance e Segurança**:
+- Melhoria de desempenho em rotas e consultas críticas por meio de análise de gargalos, indexação e cache
+- Fortalecimento da segurança de dados com autenticação/autorização adequadas, criptografia em trânsito e práticas seguras de armazenamento
 
-- Desenvolvimento de soluções para geração, armazenamento e gestão de energia
+**Colaboração e Qualidade**:
-- Criação de sistemas de automação para otimização de eficiência industrial
+- Colaboração com equipes UX/UI e dados, realizando code reviews e pactuando padrões
-- Implementação de soluções IoT para comunicação entre dispositivos
+- Manutenção de qualidade em ciclos de entrega
+- Automação de rotinas para apoiar processos de energia renovável e monitoramento
+
+**Arquitetura e Planejamento**:
+- Participação no planejamento e na arquitetura de novas soluções
+- Contribuição nas decisões técnicas de curto e médio prazo
 - Participação ativa no planejamento e arquitetura de projetos
 
+**Stack Tecnológica**: PHP, Laravel, JavaScript, MySQL, IoT, APIs REST
+
 ---
 
 ## Principais Competências Técnicas

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+onlyBuiltDependencies:
+  - '@tailwindcss/oxide'
+  - sharp

public/portfolio-data.json

@@ -11,18 +11,26 @@
   },
   "experiences": [
     {
-      "id": "julia-beauty",
+      "id": "innovo-tecnologia",
-      "title": "Desenvolvedor Full Stack",
+      "title": "Desenvolvedor Fullstack",
-      "company": "Julia Beauty Lashes",
+      "company": "Innovo Tecnologia Da Informacao Ltda.",
-      "period": "Julho 2024 - Presente",
+      "period": "Dezembro 2024 - Fevereiro 2025",
-      "location": "Balneário Camboriú, SC",
+      "location": "Joinville, Santa Catarina, Brasil",
-      "type": "Freelance",
+      "type": "Tempo Integral · Híbrido",
-      "description": "Sistema web completo para estúdio de beleza especializado em extensão de cílios. Tecnologias: Next.js, TypeScript, Tailwind CSS, Firebase.",
+      "description": "Desenvolvimento de componentes Front-end utilizando Angular e implementação da lógica de Back-end com Node.js, integrando bancos de dados PostgreSQL e MySQL. Atuação em metodologias ágeis, especialmente Scrum, colaborando para otimizar processos de desenvolvimento.",
       "achievements": [
-        "Redução de 40% no tempo de marcação de horários",
+        "Contribuição ativa na criação e manutenção de bibliotecas (libs) internas",
-        "Aumento de 25% na taxa de conversão"
+        "Garantia de reutilização de código e qualidade técnica dos sistemas legados",
+        "Otimização de processos de desenvolvimento com metodologias ágeis"
+      ],
+      "technologies": [
+        "Angular",
+        "Node.js",
+        "JavaScript",
+        "PostgreSQL",
+        "MySQL",
+        "Scrum"
       ],
-      "technologies": ["Next.js", "TypeScript", "Tailwind CSS", "Firebase"],
       "featured": true
     },
     {
@@ -30,65 +38,196 @@
       "title": "Desenvolvedor Full Stack",
       "company": "Apolo Energia",
       "period": "Junho 2022 - Presente",
-      "location": "Curitiba, PR",
+      "location": "Curitiba, Paraná, Brasil",
-      "type": "Autônomo",
+      "type": "Autônomo · Remota",
-      "description": "Soluções em energia renovável e IoT. Desenvolvimento web/mobile responsivo.",
+      "description": "Entrega de aplicações Web e Mobile que sustentam rotinas internas da Apolo Energia, com responsividade e capacidade de crescer sem perda de qualidade. Desenho e implementação de APIs REST com contratos claros, testes e versionamento, simplificando integrações com terceiros e sistemas internos.",
-      "achievements": ["Foco em sustentabilidade e automação industrial"],
+      "achievements": [
-      "technologies": ["React", "Node.js", "IoT", "Cloud"],
+        "Melhoria de desempenho em rotas e consultas críticas por meio de análise de gargalos, indexação e cache",
+        "Fortalecimento da segurança de dados com autenticação/autorização adequadas e criptografia em trânsito",
+        "Integração de plataformas e dispositivos (IoT) para troca confiável de dados entre serviços e parceiros",
+        "Automação de rotinas e criação de painéis para operação e controle em processos de energia renovável",
+        "Participação no planejamento e na arquitetura de novas soluções com decisões técnicas estratégicas"
+      ],
+      "technologies": [
+        "PHP",
+        "Laravel",
+        "JavaScript",
+        "MySQL",
+        "IoT",
+        "APIs REST"
+      ],
       "featured": true
-    },
-    {
-      "id": "innovo-tecnologia",
-      "title": "Desenvolvedor Fullstack",
-      "company": "Innovo Tecnologia",
-      "period": "Dezembro 2024 - Fevereiro 2025",
-      "location": "",
-      "type": "Tempo Integral",
-      "description": "Desenvolvimento de soluções empresariais.",
-      "achievements": [],
-      "technologies": ["Angular", "PHP", "MySQL"],
-      "featured": false
     }
   ],
   "projects": [
     {
-      "id": "heaven-time-tracker",
+      "id": "nutriscan",
-      "title": "Heaven Time Tracker",
+      "title": "NutriScan",
-      "description": "Ferramenta moderna de gestão de tempo e produtividade com dashboard personalizado, análises detalhadas e sistema de metas.",
+      "subtitle": "Análise Nutricional Inteligente",
-      "longDescription": "Uma aplicação completa para rastreamento de tempo com recursos avançados de análise e relatórios. Inclui dashboard interativo, sistema de metas personalizáveis e integração com ferramentas de produtividade.",
+      "description": "Aplicação web PWA para análise nutricional de produtos com integração Open Food Facts, busca por código de barras e modo offline completo.",
-      "technologies": ["Next.js 14", "TypeScript", "Tailwind CSS"],
+      "longDescription": "Plataforma completa de análise nutricional que permite aos usuários escanear códigos de barras e obter informações detalhadas sobre produtos alimentícios, incluindo análise NutriScore, gráficos de nutrientes e sistema de filtros avançados.",
-      "features": [
+      "technologies": [
-        "Dashboard personalizado",
+        "Next.js 14",
-        "Análises detalhadas",
+        "TypeScript",
-        "Sistema de metas",
+        "MongoDB",
-        "Relatórios avançados",
+        "PWA",
-        "Interface claro/escuro"
+        "Tailwind CSS",
+        "Open Food Facts API"
       ],
-      "status": "Versão 1.0.0 em produção",
+      "features": [
-      "demoUrl": "#",
+        "Busca por código de barras com scanner",
-      "githubUrl": "#",
+        "Análise nutricional com NutriScore",
-      "imageUrl": "/projects/heaven-time-tracker.jpg",
+        "Modo offline com Service Worker",
+        "Gráficos interativos de nutrientes",
+        "Sistema avançado de filtros",
+        "Cache inteligente de dados"
+      ],
+      "category": "full-stack",
+      "level": "senior",
+      "status": "Em Produção",
+      "demoUrl": "https://nutriscan.evandro.dev.br",
+      "githubUrl": "https://github.com/evandrodevbr/nutriscan",
+      "badges": ["PWA", "Em Produção", "Open Source"],
       "featured": true,
-      "category": "produtividade"
+      "metrics": {
+        "complexity": 5,
+        "teamSize": "Individual"
+      }
     },
     {
-      "id": "mingw-downloader",
+      "id": "twins-lab",
-      "title": "MinGW Downloader and Installer",
+      "title": "Twins Lab",
-      "description": "Aplicativo Python para automação de instalação de ambiente de desenvolvimento Windows.",
+      "subtitle": "Plataforma IoT Industrial",
-      "longDescription": "Ferramenta automatizada para desenvolvedores Windows que simplifica a instalação e configuração do ambiente MinGW. Inclui verificação de compatibilidade e integração automática com o PATH do sistema.",
+      "description": "Sistema IoT para monitoramento e controle de reatores industriais com análise preditiva, streaming de dados em tempo real e dashboards interativos.",
-      "technologies": ["Python", "Tkinter", "Requests", "Threading"],
+      "longDescription": "Plataforma avançada de monitoramento industrial que integra dispositivos IoT, oferece controle em tempo real de reatores, análise preditiva com IA e sistema completo de autenticação para múltiplos usuários.",
-      "features": [
+      "technologies": [
-        "Download automatizado",
+        "Next.js",
-        "Verificação de compatibilidade",
+        "TypeScript",
-        "Integração com PATH",
+        "NextAuth",
-        "Interface gráfica intuitiva"
+        "WebSockets",
+        "OpenRouter AI",
+        "Docker",
+        "Real-time APIs"
       ],
-      "status": "Concluído",
+      "features": [
-      "demoUrl": "#",
+        "Controle de dispositivos IoT em tempo real",
-      "githubUrl": "#",
+        "Dashboards com gráficos dinâmicos",
-      "imageUrl": "/projects/mingw-installer.jpg",
+        "Sistema de autenticação completo",
+        "Análise preditiva com IA",
+        "Streaming de dados em tempo real",
+        "Sistema administrativo completo"
+      ],
+      "category": "iot",
+      "level": "senior",
+      "status": "Em Produção",
+      "demoUrl": "https://twins.evandro.dev.br",
+      "githubUrl": "https://github.com/evandrodevbr/twins-lab",
+      "badges": ["IoT", "Real-time", "AI/ML", "Em Produção"],
       "featured": true,
-      "category": "ferramenta"
+      "metrics": {
+        "complexity": 5,
+        "teamSize": "Individual"
+      }
+    },
+    {
+      "id": "reddit-explorer",
+      "title": "Reddit Posts Explorer",
+      "subtitle": "Análise de Conteúdo IA",
+      "description": "Explorador de posts do Reddit focado em Inteligência Artificial com busca, filtros avançados e análise de conteúdo do r/artificial.",
+      "longDescription": "Aplicação web que consome a API do Reddit para buscar, filtrar e analisar posts relacionados à Inteligência Artificial, oferecendo interface intuitiva para descoberta de conteúdo relevante.",
+      "technologies": [
+        "Astro.js",
+        "MongoDB",
+        "Mongoose",
+        "TypeScript",
+        "TailwindCSS",
+        "Reddit API"
+      ],
+      "features": [
+        "Integração com Reddit API",
+        "Sistema de cache com MongoDB",
+        "Filtragem por data e ordenação",
+        "Interface responsiva",
+        "API REST própria",
+        "Busca em tempo real"
+      ],
+      "category": "api",
+      "level": "pleno",
+      "status": "Concluído",
+      "demoUrl": null,
+      "githubUrl": "https://github.com/evandrodevbr/reddit-search",
+      "badges": ["API Integration", "MongoDB", "Real-time"],
+      "featured": true,
+      "metrics": {
+        "complexity": 3,
+        "teamSize": "Individual"
+      }
+    },
+    {
+      "id": "sc-plus",
+      "title": "SC Plus Aquicultura",
+      "subtitle": "Landing Page Institucional",
+      "description": "Landing page moderna para empresa de aquicultura com foco em sustentabilidade, tecnologia e inovação.",
+      "longDescription": "Site institucional responsivo desenvolvido com as mais recentes tecnologias web, otimizado para performance e SEO, apresentando os serviços e valores da empresa de aquicultura sustentável.",
+      "technologies": [
+        "Next.js 15",
+        "React 19",
+        "Tailwind CSS 4",
+        "TypeScript"
+      ],
+      "features": [
+        "Design moderno e responsivo",
+        "Performance otimizada",
+        "SEO otimizado",
+        "Interface intuitiva",
+        "Carregamento rápido"
+      ],
+      "category": "web",
+      "level": "pleno",
+      "status": "Em Produção",
+      "demoUrl": "https://scplus.evandro.dev.br",
+      "githubUrl": "https://github.com/evandrodevbr/scplus",
+      "badges": ["Responsive", "SEO", "Modern Stack"],
+      "featured": true,
+      "metrics": {
+        "complexity": 2,
+        "teamSize": "Individual"
+      }
+    },
+    {
+      "id": "gcc-installer",
+      "title": "MinGW GCC Installer",
+      "subtitle": "Ferramenta de Desenvolvimento",
+      "description": "Aplicação desktop Python para automação completa de download, instalação e configuração de ambientes de desenvolvimento MinGW no Windows.",
+      "longDescription": "Ferramenta automatizada que simplifica drasticamente o processo de configuração de ambiente de desenvolvimento GCC no Windows, incluindo verificação de compatibilidade, download automático e integração com o sistema.",
+      "technologies": [
+        "Python",
+        "Tkinter",
+        "Requests",
+        "Watchdog",
+        "Win32 API",
+        "7-Zip",
+        "Threading"
+      ],
+      "features": [
+        "Interface gráfica intuitiva",
+        "Download assíncrono com progresso",
+        "Verificação de compatibilidade",
+        "Integração automática com PATH",
+        "Monitoramento em tempo real",
+        "Instalação automática de dependências"
+      ],
+      "category": "desktop",
+      "level": "pleno",
+      "status": "Concluído",
+      "demoUrl": null,
+      "githubUrl": "https://github.com/evandrodevbr/gcc-installer",
+      "badges": ["Desktop", "Automation", "System Integration"],
+      "featured": true,
+      "metrics": {
+        "complexity": 4,
+        "teamSize": "Individual"
+      }
     }
   ],
   "skills": {
@@ -114,7 +253,9 @@
         "skills": [
           "Node.js",
           "PHP",
+          "Laravel",
           "MySQL",
+          "PostgreSQL",
           "Python",
           "APIs RESTful",
           "Firebase"