feat(workModalities): update service offerings and enhance market comparison

- Renamed and restructured service options for clarity, including "Intervenção Ad-hoc" and "Alocação de Sprint."
- Enhanced descriptions and benefits for each modality to better reflect service value and target audience.
- Improved market comparison section with detailed descriptions for agencies, consultancies, freelancers, and in-house engineers.
- Adjusted layout and styling for better readability and user experience.

app/components/WorkModalities.tsx

@@ -3,65 +3,115 @@
 import React from "react";
 import { motion } from "motion/react";
 import {
-  Briefcase, Clock, HardHat, Lightbulb, 
+  Briefcase,
-  Building2, Users, User, Star, CheckCircle2 
+  Clock,
+  HardHat,
+  Lightbulb,
+  Building2,
+  Users,
+  User,
+  Star,
+  CheckCircle2,
 } from "lucide-react";
 
 // --- 1. DATA (Definido aqui para evitar erros de serialização) ---
 const WorkModalitiesData = [
   {
-    title: "Consultoria por Hora",
+    title: "Intervenção Ad-hoc",
     value: "R$ 35 - 70/hora",
-    badge: "RECOMENDADO",
+    badge: "AGILIDADE",
-    idealFor: "Empresas que buscam flexibilidade máxima e expertise especializada.",
+    idealFor:
-    description: "Transparência total: você paga apenas pelas horas trabalhadas. Ideal para resolver problemas específicos com expertise sênior.",
+      "Resolução de gargalos técnicos específicos e consultoria de arquitetura imediata.",
-    benefits: ["Transparência total", "Estimativas claras", "Flexibilidade total", "Custo-benefício otimizado", "Engenharia de Software Sênior"],
+    description:
+      "Engenharia sob demanda com foco em troubleshooting e otimização de performance. Rastreabilidade total via timesheet detalhado.",
+    benefits: [
+      "Diagnóstico Sênior Imediato",
+      "Sem Compromisso de Longo Prazo",
+      "Documentação de Alterações",
+      "Code Review de Segurança",
+      "Deploy assistido",
+    ],
     icon: Lightbulb,
     color: "blue",
+    featured: false,
+  },
+  {
+    title: "Alocação de Sprint",
+    value: "Até 21% de Eficiência Financeira",
+    badge: "MAIS ESCOLHIDO",
+    idealFor:
+      "Desenvolvimento contínuo de features com previsibilidade de budget e prioridade técnica.",
+    description:
+      "Pacotes de horas pré-pagas que garantem disponibilidade na agenda e redução do custo unitário por hora. Ideal para scaling.",
+    benefits: [
+      "Taxa horária reduzida (Lock-in)",
+      "Garantia de Disponibilidade",
+      "Preço fixo por 180 dias",
+      "Relatórios de Burndown",
+      "Prioridade em Critical Bugs",
+    ],
+    icon: Briefcase,
+    color: "green",
     featured: true,
   },
   {
-    title: "Pacotes de Horas",
+    title: "Engenheiro Dedicado (Retainer)",
-    value: "Até 21% de Desconto",
-    idealFor: "Clientes que buscam economia com comprometimento antecipado e prioridade na agenda.",
-    description: "Invista antecipadamente e garanta preços fixos por 6 meses. Ideal para projetos recorrentes.",
-    benefits: ["10h: R$ 65/h (7% off)", "20h: R$ 60/h (14% off)", "40h+: R$ 55/h (21% off)", "Prioridade na agenda"],
-    icon: Briefcase,
-    color: "green",
-  },
-  {
-    title: "Retainer Mensal",
     value: "A partir de R$ 2.800/mês",
-    idealFor: "Negócios que valorizam estabilidade e acesso prioritário a um especialista dedicado.",
+    badge: "VIP & ESTRATÉGICO",
-    description: "Parceria estratégica com suporte contínuo e manutenção preventiva. Transforme sua empresa em parceiro VIP.",
+    idealFor:
-    benefits: ["Acesso prioritário exclusivo", "Horas mensais inclusas", "Suporte preventivo", "Previsibilidade financeira"],
+      "Empresas que necessitam de um 'Fractional CTO' ou Lead Engineer para governança técnica.",
+    description:
+      "Parceria estratégica com foco em sustentabilidade do sistema, manutenção preventiva e evolução arquitetural contínua.",
+    benefits: [
+      "SLA de Resposta Prioritária",
+      "Gestão de Débito Técnico",
+      "Planejamento de Roadmap",
+      "Monitoramento de Infraestrutura",
+      "Consultoria Estratégica",
+    ],
     icon: Clock,
     color: "purple",
+    featured: false,
   },
   {
-    title: "Desenvolvimento Sob Demanda",
+    title: "Squad por Projeto",
-    value: "Estimativa em Horas",
+    value: "Escopo Fechado / Milestone-based",
-    idealFor: "Projetos específicos que precisam de controle total sobre investimento e escopo.",
+    badge: "CONTROLE TOTAL",
-    description: "Projetos customizados com estimativas claras. Pague apenas pelo desenvolvimento necessário.",
+    idealFor:
-    benefits: ["Escopo ajustável", "Controle total de investimento", "Foco em performance", "Sem surpresas no valor"],
+      "Produtos novos ou migrações de sistemas onde o orçamento é rigorosamente definido pelo escopo.",
+    description:
+      "Desenvolvimento orientado a entregáveis (milestones). Mitigação de riscos através de definições claras de 'Done'.",
+    benefits: [
+      "Estimativa de Riscos Inclusa",
+      "Cronograma de Entregas (Milestones)",
+      "Garantia Pós-Entrega",
+      "Foco em Time-to-Market",
+      "Transferência de Conhecimento",
+    ],
     icon: HardHat,
     color: "orange",
+    featured: false,
   },
 ];
 
 // --- 2. DESIGN TOKENS ---
 const COLOR_VARIANTS: Record<string, string> = {
   blue: "border-blue-500/30 bg-blue-500/5 text-blue-400 hover:border-blue-500/60 shadow-blue-500/5",
-  green: "border-green-500/30 bg-green-500/5 text-green-400 hover:border-green-500/60 shadow-green-500/5",
+  green:
-  purple: "border-purple-500/30 bg-purple-500/5 text-purple-400 hover:border-purple-500/60 shadow-purple-500/5",
+    "border-green-500/30 bg-green-500/5 text-green-400 hover:border-green-500/60 shadow-green-500/5",
-  orange: "border-orange-500/30 bg-orange-500/5 text-orange-400 hover:border-orange-500/60 shadow-orange-500/5",
+  purple:
+    "border-purple-500/30 bg-purple-500/5 text-purple-400 hover:border-purple-500/60 shadow-purple-500/5",
+  orange:
+    "border-orange-500/30 bg-orange-500/5 text-orange-400 hover:border-orange-500/60 shadow-orange-500/5",
 };
 
 export function WorkModalities() {
   return (
-    <section id="modalities" className="py-32 px-6 bg-[#030712] relative overflow-hidden">
+    <section
+      id="modalities"
+      className="py-32 px-6 bg-[#030712] relative overflow-hidden"
+    >
       <div className="max-w-7xl mx-auto relative z-10">
-        
         {/* Header Profissional */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -71,22 +121,58 @@ export function WorkModalities() {
         >
           <div className="inline-flex items-center gap-2 bg-blue-500/10 px-4 py-2 rounded-full mb-6 border border-blue-500/20">
             <div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
-            <span className="text-xs font-bold text-blue-300 uppercase tracking-widest font-mono">Business_Architect</span>
+            <span className="text-xs font-bold text-blue-300 uppercase tracking-widest font-mono">
+              Business_Architect
+            </span>
           </div>
           <h2 className="text-5xl md:text-7xl font-black text-white tracking-tighter leading-none mb-6">
             Flexibilidade <span className="text-slate-700 italic">Total</span>
           </h2>
           <p className="text-slate-400 max-w-2xl mx-auto text-lg">
-            Modelos de contratação adaptáveis para diferentes estágios de maturidade tecnológica.
+            Modelos de contratação adaptáveis para diferentes estágios de
+            maturidade tecnológica.
           </p>
         </motion.div>
 
         {/* Comparação de Mercado (Anchoring Effect) */}
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-20">
+
-          <MarketCard title="Agências" price="R$ 15k-50k" icon={Building2} color="text-red-400" />
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-20">
-          <MarketCard title="Consultorias" price="R$ 150-300/h" icon={Users} color="text-orange-400" />
+          {/* AGÊNCIAS: Foco no Overhead */}
-          <MarketCard title="Freelancers" price="R$ 40-80/h" icon={User} color="text-yellow-400" />
+          <MarketCard
-          <MarketCard title="Engenheiro" price="R$ 35-70/h" icon={Star} color="text-green-400" best />
+            title="Agências Software House"
+            price="R$ 15k - 80k+"
+            icon={Building2}
+            color="text-red-500"
+            description="Alto overhead administrativo e camadas de gestão que encarecem o setup inicial."
+          />
+
+          {/* CONSULTORIAS: Foco na Diluição de Senioridade */}
+          <MarketCard
+            title="Consultorias Big Tech"
+            price="R$ 180 - 450/h"
+            icon={Users}
+            color="text-orange-500"
+            description="Especialistas juniores alocados com margens de lucro agressivas sobre a hora sênior."
+          />
+
+          {/* FREELANCERS: Foco no Risco de Sustentabilidade */}
+          <MarketCard
+            title="Freelancers Generalistas"
+            price="R$ 40 - 90/h"
+            icon={User}
+            color="text-yellow-500"
+            description="Falta de rigor arquitetural e risco de manutenção por falta de documentação técnica."
+          />
+
+          {/* VOCÊ: O Ponto de Equilíbrio (The Sweet Spot) */}
+          <MarketCard
+            title="Engenheiro de Software"
+            price="R$ 35 - 75/h"
+            icon={Star}
+            color="text-emerald-400"
+            best={true}
+            description="Acesso direto ao especialista. Engenharia de nível sênior com custo operacional zero de intermediação."
+          />
         </div>
 
         {/* Grid de Modalidades */}
@@ -115,8 +201,12 @@ export function WorkModalities() {
                     <Icon className="w-8 h-8" />
                   </div>
                   <div>
-                    <h3 className="text-2xl font-bold text-white tracking-tight">{modality.title}</h3>
+                    <h3 className="text-2xl font-bold text-white tracking-tight">
-                    <p className="text-xl font-mono font-bold opacity-80">{modality.value}</p>
+                      {modality.title}
+                    </h3>
+                    <p className="text-xl font-mono font-bold opacity-80">
+                      {modality.value}
+                    </p>
                   </div>
                 </div>
 
@@ -126,7 +216,10 @@ export function WorkModalities() {
 
                 <div className="space-y-3 mb-8">
                   {modality.benefits.map((benefit, bIdx) => (
-                    <div key={bIdx} className="flex items-center gap-3 text-slate-300 text-xs font-medium">
+                    <div
+                      key={bIdx}
+                      className="flex items-center gap-3 text-slate-300 text-xs font-medium"
+                    >
                       <CheckCircle2 className="w-4 h-4 text-green-500 flex-shrink-0" />
                       <span>{benefit}</span>
                     </div>
@@ -135,7 +228,8 @@ export function WorkModalities() {
 
                 <div className="pt-6 border-t border-slate-800/50 mt-auto">
                   <p className="text-[11px] text-slate-500 leading-relaxed uppercase tracking-tighter">
-                    <strong className="text-slate-400">Ideal para:</strong> {modality.idealFor}
+                    <strong className="text-slate-400">Ideal para:</strong>{" "}
+                    {modality.idealFor}
                   </p>
                 </div>
               </motion.div>
@@ -149,10 +243,24 @@ export function WorkModalities() {
 
 function MarketCard({ title, price, icon: Icon, color, best }: any) {
   return (
-    <div className={`p-6 rounded-3xl border transition-all duration-500 ${best ? 'bg-green-500/10 border-green-500/30 shadow-lg shadow-green-500/5' : 'bg-slate-900/40 border-slate-800'}`}>
+    <div
+      className={`p-6 rounded-3xl border transition-all duration-500 ${
+        best
+          ? "bg-green-500/10 border-green-500/30 shadow-lg shadow-green-500/5"
+          : "bg-slate-900/40 border-slate-800"
+      }`}
+    >
       <Icon className={`w-5 h-5 mb-4 ${color}`} />
-      <h4 className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">{title}</h4>
+      <h4 className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">
-      <p className={`text-lg font-black mt-1 ${best ? 'text-green-400' : 'text-slate-300'}`}>{price}</p>
+        {title}
+      </h4>
+      <p
+        className={`text-lg font-black mt-1 ${
+          best ? "text-green-400" : "text-slate-300"
+        }`}
+      >
+        {price}
+      </p>
     </div>
   );
 }