feat: Adiciona a estrutura inicial do portfólio com componentes para experiência, hero, sobre, habilidades, projetos, modalidades de trabalho e contato.

app/components/WorkModalities.tsx

@@ -1,7 +1,7 @@
-"use client"; // <--- DIRETIVA OBRIGATÓRIA NA PRIMEIRA LINHA
+"use client";
 
 import React from "react";
-import { motion } from "motion/react";
+import { motion } from "framer-motion";
 import {
   Briefcase,
   Clock,
@@ -12,9 +12,12 @@ import {
   User,
   Star,
   CheckCircle2,
+  Terminal,
+  ShieldCheck,
+  Zap,
 } from "lucide-react";
 
-// --- 1. DATA (Definido aqui para evitar erros de serialização) ---
+// --- 1. DATA ---
 const WorkModalitiesData = [
   {
     title: "Intervenção Ad-hoc",
@@ -28,16 +31,14 @@ const WorkModalitiesData = [
       "Diagnóstico Sênior Imediato",
       "Sem Compromisso de Longo Prazo",
       "Documentação de Alterações",
-      "Code Review de Segurança",
-      "Deploy assistido",
     ],
-    icon: Lightbulb,
+    icon: Zap,
     color: "blue",
     featured: false,
   },
   {
     title: "Alocação de Sprint",
-    value: "Até 21% de Eficiência Financeira",
+    value: "Eficiência Financeira",
     badge: "MAIS ESCOLHIDO",
     idealFor:
       "Desenvolvimento contínuo de features com previsibilidade de budget e prioridade técnica.",
@@ -46,8 +47,6 @@ const WorkModalitiesData = [
     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,
@@ -55,7 +54,7 @@ const WorkModalitiesData = [
     featured: true,
   },
   {
-    title: "Engenheiro Dedicado (Retainer)",
+    title: "Engenheiro Dedicado",
     value: "A partir de R$ 2.800/mês",
     badge: "VIP & ESTRATÉGICO",
     idealFor:
@@ -65,17 +64,15 @@ const WorkModalitiesData = [
     benefits: [
       "SLA de Resposta Prioritária",
       "Gestão de Débito Técnico",
-      "Planejamento de Roadmap",
-      "Monitoramento de Infraestrutura",
       "Consultoria Estratégica",
     ],
-    icon: Clock,
+    icon: ShieldCheck,
     color: "purple",
     featured: false,
   },
   {
     title: "Squad por Projeto",
-    value: "Escopo Fechado / Milestone-based",
+    value: "Escopo Fechado",
     badge: "CONTROLE TOTAL",
     idealFor:
       "Produtos novos ou migrações de sistemas onde o orçamento é rigorosamente definido pelo escopo.",
@@ -83,10 +80,8 @@ const WorkModalitiesData = [
       "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)",
+      "Cronograma de Entregas",
       "Garantia Pós-Entrega",
-      "Foco em Time-to-Market",
-      "Transferência de Conhecimento",
     ],
     icon: HardHat,
     color: "orange",
@@ -94,173 +89,184 @@ const WorkModalitiesData = [
   },
 ];
 
-// --- 2. DESIGN TOKENS ---
-const COLOR_VARIANTS: Record<string, string> = {
-  blue: "border-blue-500/15 bg-blue-500/3 text-blue-300 hover:border-blue-500/30 shadow-blue-500/3",
-  green:
-    "border-green-500/15 bg-green-500/3 text-green-300 hover:border-green-500/30 shadow-green-500/3",
-  purple:
-    "border-purple-500/15 bg-purple-500/3 text-purple-300 hover:border-purple-500/30 shadow-purple-500/3",
-  orange:
-    "border-orange-500/15 bg-orange-500/3 text-orange-300 hover:border-orange-500/30 shadow-orange-500/3",
-};
+// --- 2. COMPONENTS ---
 
 export function WorkModalities() {
   return (
     <section
       id="modalities"
-      className="py-32 px-6 bg-[#030712] relative overflow-hidden"
+      className="py-32 px-6 relative"
     >
+      {/* Background Decor handled globally now, avoiding overflow-hidden here allows bleed */}
+
       <div className="max-w-7xl mx-auto relative z-10">
+
         {/* Header Profissional */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, margin: "-100px" }}
-          className="text-center mb-20"
-        >
-          <div className="inline-flex items-center gap-2 bg-blue-500/10 px-4 py-2 rounded-full mb-6 border border-blue-500/20">
-            <div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
-            <span className="text-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.
+        <div className="mb-24 text-center md:text-left">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-950/30 border border-blue-500/20 text-blue-400 font-mono text-xs tracking-wider mb-6"
+          >
+            <Terminal className="w-3 h-3" />
+            <span>CONTRACT_PROTOCOLS.sys</span>
+          </motion.div>
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.1 }}
+            className="text-4xl md:text-6xl font-black text-white tracking-tighter"
+          >
+            Flexibilidade <br />
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-cyan-400">Contratual</span>
+          </motion.h2>
+          <p className="mt-6 text-lg text-slate-400 max-w-2xl leading-relaxed font-light border-l-2 border-slate-800 pl-6">
+            Modelos de engajamento adaptáveis para diferentes estágios de maturidade tecnológica e orçamentária.
           </p>
-        </motion.div>
+        </div>
 
         {/* Comparação de Mercado (Anchoring Effect) */}
-
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-20">
-          {/* AGÊNCIAS: Foco no Overhead */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-24">
           <MarketCard
-            title="Agências Software House"
-            price="R$ 15k - 80k+"
+            title="Agências Tradicionais"
+            price="Alto Overhead"
             icon={Building2}
             color="text-red-500"
-            description="Alto overhead administrativo e camadas de gestão que encarecem o setup inicial."
+            delay={0}
+            best={false}
           />
-
-          {/* CONSULTORIAS: Foco na Diluição de Senioridade */}
           <MarketCard
             title="Consultorias Big Tech"
-            price="R$ 180 - 450/h"
+            price="Custo Inflacionado"
             icon={Users}
             color="text-orange-500"
-            description="Especialistas juniores alocados com margens de lucro agressivas sobre a hora sênior."
+            delay={0.1}
+            best={false}
           />
-
-          {/* FREELANCERS: Foco no Risco de Sustentabilidade */}
           <MarketCard
             title="Freelancers Generalistas"
-            price="R$ 40 - 90/h"
+            price="Risco Técnico"
             icon={User}
             color="text-yellow-500"
-            description="Falta de rigor arquitetural e risco de manutenção por falta de documentação técnica."
+            delay={0.2}
+            best={false}
           />
-
-          {/* VOCÊ: O Ponto de Equilíbrio (The Sweet Spot) */}
           <MarketCard
-            title="Engenheiro de Software"
-            price="R$ 35 - 75/h"
+            title="Engenheiro Especialista"
+            price="High ROI"
             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."
+            delay={0.3}
           />
         </div>
 
         {/* Grid de Modalidades */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          {WorkModalitiesData.map((modality, index) => {
-            const style = COLOR_VARIANTS[modality.color] || COLOR_VARIANTS.blue;
-            const Icon = modality.icon;
-
-            return (
-              <motion.div
-                key={modality.title}
-                initial={{ opacity: 0, y: 30 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.2 }}
-                transition={{ duration: 0.6, delay: index * 0.1 }}
-                className={`relative p-8 rounded-[2.5rem] border-2 backdrop-blur-xl transition-all duration-500 shadow-xl ${style}`}
-              >
-                {modality.badge && (
-                  <span className="absolute -top-3 right-8 bg-blue-500/20 border border-blue-500/30 text-blue-300 px-4 py-1 rounded-full text-[10px] font-black tracking-widest uppercase shadow-lg shadow-blue-500/10">
-                    {modality.badge}
-                  </span>
-                )}
-
-                <div className="flex items-center gap-6 mb-8">
-                  <div className="p-4 rounded-2xl bg-slate-900 border border-slate-800 group-hover:scale-110 transition-transform">
-                    <Icon className="w-8 h-8" />
-                  </div>
-                  <div>
-                    <h3 className="text-2xl font-bold text-white tracking-tight">
-                      {modality.title}
-                    </h3>
-                    <p className="text-xl font-mono font-bold opacity-80">
-                      {modality.value}
-                    </p>
-                  </div>
-                </div>
-
-                <p className="text-slate-400 text-sm leading-relaxed mb-8 h-20 line-clamp-3">
-                  {modality.description}
-                </p>
-
-                <div className="space-y-3 mb-8">
-                  {modality.benefits.map((benefit, bIdx) => (
-                    <div
-                      key={bIdx}
-                      className="flex items-center gap-3 text-slate-300 text-xs font-medium"
-                    >
-                      <CheckCircle2 className="w-4 h-4 text-green-500 flex-shrink-0" />
-                      <span>{benefit}</span>
-                    </div>
-                  ))}
-                </div>
-
-                <div className="pt-6 border-t border-slate-800/50 mt-auto">
-                  <p className="text-[11px] text-slate-500 leading-relaxed uppercase tracking-tighter">
-                    <strong className="text-slate-400">Ideal para:</strong>{" "}
-                    {modality.idealFor}
-                  </p>
-                </div>
-              </motion.div>
-            );
-          })}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {WorkModalitiesData.map((modality, index) => (
+            <ModalityCard key={modality.title} modality={modality} index={index} />
+          ))}
         </div>
       </div>
     </section>
   );
 }
 
-function MarketCard({ title, price, icon: Icon, color, best }: any) {
+function MarketCard({ title, price, icon: Icon, color, best, delay }: any) {
   return (
-    <div
-      className={`p-6 rounded-3xl border transition-all duration-500 ${
-        best
-          ? "bg-green-500/10 border-green-500/30 shadow-lg shadow-green-500/5"
-          : "bg-slate-900/40 border-slate-800"
-      }`}
-    >
-      <Icon className={`w-5 h-5 mb-4 ${color}`} />
-      <h4 className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">
-        {title}
-      </h4>
-      <p
-        className={`text-lg font-black mt-1 ${
-          best ? "text-green-400" : "text-slate-300"
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ delay }}
+      className={`p-6 rounded-2xl border backdrop-blur-sm transition-all duration-300 ${best
+          ? "bg-emerald-500/5 border-emerald-500/20 shadow-[0_0_20px_rgba(16,185,129,0.1)]"
+          : "bg-zinc-900/40 border-white/5 opacity-70 hover:opacity-100"
         }`}
-      >
+    >
+      <div className="flex items-center gap-3 mb-3">
+        <Icon className={`w-4 h-4 ${color}`} />
+        <h4 className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
+          {title}
+        </h4>
+      </div>
+      <p className={`text-sm font-bold ${best ? "text-emerald-400" : "text-slate-500"}`}>
         {price}
       </p>
-    </div>
+    </motion.div>
+  );
+}
+
+function ModalityCard({ modality, index }: { modality: any; index: number }) {
+  const Icon = modality.icon;
+  const isFeatured = modality.featured;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "-50px" }}
+      transition={{ duration: 0.5, delay: index * 0.1 }}
+      className={`group relative flex flex-col p-8 rounded-3xl border transition-all duration-500 overflow-hidden ${isFeatured
+          ? "bg-zinc-900/60 border-blue-500/30 shadow-2xl shadow-blue-900/10"
+          : "bg-zinc-900/40 border-white/5 hover:border-white/10"
+        }`}
+    >
+      {/* Hover Gradient */}
+      <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+      {/* Badge */}
+      {modality.badge && (
+        <div className="absolute top-6 right-6">
+          <span className={`px-3 py-1 rounded-full text-[10px] font-bold tracking-widest uppercase border ${isFeatured
+              ? "bg-blue-500/10 border-blue-500/20 text-blue-300"
+              : "bg-slate-800/50 border-slate-700 text-slate-400"
+            }`}>
+            {modality.badge}
+          </span>
+        </div>
+      )}
+
+      {/* Header */}
+      <div className="relative z-10 mb-8">
+        <div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-6 transition-transform group-hover:scale-110 ${isFeatured ? "bg-blue-500/10 text-blue-400" : "bg-slate-800/50 text-slate-400"
+          }`}>
+          <Icon className="w-6 h-6" />
+        </div>
+
+        <h3 className="text-2xl font-bold text-white mb-2 group-hover:text-blue-200 transition-colors">
+          {modality.title}
+        </h3>
+        <p className="font-mono text-sm text-slate-500">
+          {modality.value}
+        </p>
+      </div>
+
+      {/* Content */}
+      <div className="relative z-10 flex-1">
+        <p className="text-slate-400 text-sm leading-relaxed mb-8">
+          {modality.description}
+        </p>
+
+        <ul className="space-y-3 mb-8">
+          {modality.benefits.map((benefit: string, i: number) => (
+            <li key={i} className="flex items-start gap-3 text-xs text-slate-300">
+              <CheckCircle2 className={`w-4 h-4 flex-shrink-0 mt-0.5 ${isFeatured ? "text-blue-400" : "text-slate-500"}`} />
+              <span>{benefit}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Footer */}
+      <div className="relative z-10 pt-6 border-t border-white/5 mt-auto">
+        <p className="text-[10px] uppercase tracking-wider text-slate-500">
+          <span className="text-slate-600 font-bold mb-1 block">Ideal Para:</span>
+          {modality.idealFor}
+        </p>
+      </div>
+    </motion.div>
   );
 }