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/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",
-    value: "A partir de R$ 50/hora",
+    title: "Consultoria por 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.",
-    icon: Clock,
+      "Transparência total: você paga apenas pelas horas efetivamente trabalhadas. Sem surpresas, com estimativas claras antes de iniciar. Ideal para testar soluções, resolver problemas específicos ou ter acesso a expertise sênior sem o custo de consultorias tradicionais (R$ 100-200/h).",
+    benefits: [
+      "✓ Transparência total - pague apenas pelo que usar",
+      "✓ Sem surpresas - estimativas claras antes de iniciar",
+      "✓ Flexibilidade - ajuste conforme sua necessidade evolui",
+      "✓ Melhor custo-benefício - 50% menos que consultorias tradicionais",
+      "✓ Experiência comprovada - 3+ anos + Eng. Computação",
+    ],
+    icon: Lightbulb,
     color: "blue",
+    featured: true,
   },
   {
-    title: "Retainer Mensal",
-    value: "Sob consulta (pacotes personalizados)",
+    title: "Pacotes de Horas",
+    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",
-    value: "Sob consulta (projetos de alto impacto)",
+    title: "Retainer Mensal",
+    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.",
-    icon: Lightbulb,
+      "Parceria estratégica com acesso prioritário e horas incluídas. Ideal para empresas que precisam de suporte contínuo, manutenção preventiva e consultoria estratégica regular. Transforme sua empresa em parceiro VIP.",
+    benefits: [
+      "✓ Acesso prioritário e exclusivo",
+      "✓ Horas incluídas mensalmente",
+      "✓ Suporte preventivo e consultoria estratégica",
+      "✓ Relacionamento de longo prazo",
+      "✓ Previsibilidade financeira",
+    ],
+    icon: Clock,
     color: "purple",
   },
   {
-    title: "Desenvolvimento Completo",
-    value: "A partir de R$ 5.000 (investimento inicial)",
+    title: "Desenvolvimento Sob Demanda",
+    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 ${
-              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" : ""} ${
+            className={`relative bg-white/5 p-6 rounded-lg shadow-lg border-2 ${
+              modality.featured
+                ? "border-blue-500/50 bg-blue-500/5"
+                : "border-white/10"
+            } ${modality.color === "blue" ? "hover:border-blue-500" : ""} ${
+              modality.color === "green" ? "hover:border-green-500" : ""
+            } ${modality.color === "purple" ? "hover:border-purple-500" : ""} ${
+              modality.color === "orange" ? "hover:border-orange-500" : ""
+            } ${
               modality.color === "red" ? "hover:border-red-500" : ""
             } transition-all duration-300 cursor-pointer`}
           >
-            <div
-              className={`p-3 rounded-full ${
-                modality.color === "blue" ? "bg-blue-500/20" : ""
-              } ${modality.color === "green" ? "bg-green-500/20" : ""} ${
-                modality.color === "purple" ? "bg-purple-500/20" : ""
-              } ${modality.color === "orange" ? "bg-orange-500/20" : ""} ${
-                modality.color === "red" ? "bg-red-500/20" : ""
-              } inline-block mb-4`}
-            >
-              <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" : ""
+            {modality.badge && (
+              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
+                <span className="bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-bold">
+                  {modality.badge}
+                </span>
+              </div>
+            )}
+
+            <div className="flex items-center gap-4 mb-4">
+              <div
+                className={`p-3 rounded-full ${
+                  modality.color === "blue" ? "bg-blue-500/20" : ""
+                } ${modality.color === "green" ? "bg-green-500/20" : ""} ${
+                  modality.color === "purple" ? "bg-purple-500/20" : ""
+                } ${modality.color === "orange" ? "bg-orange-500/20" : ""} ${
+                  modality.color === "red" ? "bg-red-500/20" : ""
                 }`}
-              />
+              >
+                <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}