feat: rebuild landing experience, content and analytics

app/components/WorkModalities.tsx

@@ -11,7 +11,6 @@ import { Section } from "./Section";
 interface Tier {
   id: string;
   badge: string;
-  level: string;
   title: string;
   tagline: string;
   description: string;
@@ -25,64 +24,83 @@ interface Tier {
 
 const TIERS: Tier[] = [
   {
-    id: "discovery",
-    badge: "Entrada / Baixo Risco",
-    level: "01",
-    title: "Auditoria & Diagnóstico Técnico",
-    tagline: "Fotografia clara do problema antes de qualquer comprometimento.",
+    id: "build",
+    badge: "Do zero à produção",
+    title: "Um sistema para a sua operação",
+    tagline: "Quando as ferramentas prontas já não atendem.",
     description:
-      "Análise profunda de arquitetura, performance ou segurança com entrega de um plano de ação executável. Ideal para quem precisa de direção antes de contratar execução.",
+      "Transforme regras de negócio, planilhas e processos dispersos em um sistema próprio, com os fluxos e as integrações que a empresa precisa.",
     deliverables: [
-      "Relatório de gargalos e dívida técnica",
-      "Mapeamento de riscos e dependências",
-      "Sugestão de stack e cronograma de mitigação",
-      "Plano de ação priorizado",
+      "Definição de escopo e arquitetura",
+      "Interface, backend e banco de dados",
+      "Integrações e permissões de acesso",
+      "Validação, publicação e documentação",
     ],
-    pricing: "Valor Fixo",
-    pricingNote: "Contrato único. Entrega em até 5 dias úteis.",
-    featured: false,
-    ctaLabel: "Solicitar diagnóstico",
-    ctaHref: "#contact",
-  },
-  {
-    id: "cycles",
-    badge: "Mais Escolhido",
-    level: "02",
-    title: "Ciclos de Engenharia",
-    tagline: "Capacidade produtiva garantida. Entrega a cada 2 semanas.",
-    description:
-      "Desenvolvimento contínuo com a previsibilidade de orçamento do escopo fechado e a agilidade de sprints. Milestones claros, sem amarras de contrato longo.",
-    deliverables: [
-      "Features em produção a cada ciclo",
-      "Refatoração iterativa com rastreabilidade",
-      "Documentação técnica atualizada",
-      "Capacidade de pivotar prioridades no início de cada sprint",
-    ],
-    pricing: "Fixo por Ciclo",
-    pricingNote: "Assinatura quinzenal ou mensal. Cancele a qualquer ciclo.",
+    pricing: "Proposta por projeto",
+    pricingNote: "Escopo, etapas e investimento definidos antes da execução.",
     featured: true,
-    ctaLabel: "Iniciar ciclo de engenharia",
-    ctaHref: "#contact",
+    ctaLabel: "Conversar sobre meu sistema",
+    ctaHref: "/#contact",
   },
   {
-    id: "fractional",
-    badge: "Premium / High-Ticket",
-    level: "03",
-    title: "Fractional Tech Lead",
-    tagline: "Liderança técnica sênior. Sem o custo de um CTO full-time.",
+    id: "discovery",
+    badge: "Antes de investir",
+    title: "Diagnóstico de um sistema existente",
+    tagline: "Entenda o que aproveitar e o que precisa mudar.",
     description:
-      "Direção arquitetural, gestão de risco e sustentação de operações críticas. Para empresas que precisam de decisões de alto impacto com responsabilidade contínua.",
+      "Seu sistema ficou lento, frágil ou difícil de manter? Avalio o código e a operação para orientar a próxima decisão, inclusive em projetos iniciados com IA.",
     deliverables: [
-      "SLA prioritário Zero-Risk",
-      "Code review e lideranca do time interno",
-      "Decisoes de infra: Cloud, VPS, CI/CD",
-      "Consultoria estrategica recorrente",
+      "Levantamento de riscos e dependências",
+      "Revisão de acesso aos dados",
+      "Análise dos gargalos da aplicação",
+      "Plano de correção por prioridade",
     ],
-    pricing: "Retainer Mensal",
-    pricingNote: "Renovação mensal. Vagas limitadas.",
-    featured: false,
-    ctaLabel: "Agendar conversa estratégica",
-    ctaHref: "#contact",
+    pricing: "Escopo de análise definido",
+    pricingNote: "Profundidade e prazo combinados conforme o sistema.",
+    ctaLabel: "Avaliar meu projeto",
+    ctaHref: "/#contact",
+  },
+  {
+    id: "evolution",
+    badge: "Continuidade",
+    title: "Integração e evolução",
+    tagline: "Faça o que já existe trabalhar melhor.",
+    description:
+      "Conecte ferramentas, reduza tarefas manuais e acrescente funcionalidades ao sistema atual, com atenção às dependências e ao impacto de cada mudança.",
+    deliverables: [
+      "Integração entre sistemas e equipamentos",
+      "Novos fluxos e automações",
+      "Testes das partes afetadas",
+      "Planejamento de manutenção e operação",
+    ],
+    pricing: "Etapas acordadas",
+    pricingNote:
+      "Prioridades, suporte e responsabilidades definidos em contrato.",
+    ctaLabel: "Planejar a próxima etapa",
+    ctaHref: "/#contact",
+  },
+];
+
+const PROCESS = [
+  {
+    title: "Entender a operação",
+    description:
+      "Quem usa, qual problema precisa resolver e quais dados e ferramentas já existem.",
+  },
+  {
+    title: "Definir a entrega",
+    description:
+      "Escopo, arquitetura, riscos, investimento e critérios de aceite antes de desenvolver.",
+  },
+  {
+    title: "Construir e validar",
+    description:
+      "Entregas por etapa, demonstrações e testes dos fluxos, das permissões e das integrações.",
+  },
+  {
+    title: "Publicar e dar continuidade",
+    description:
+      "Implantação, documentação e condições de manutenção combinadas para a operação.",
   },
 ];
 
@@ -112,9 +130,6 @@ function TierCard({ tier }: Readonly<{ tier: Tier }>) {
         <span className="ds-kicker max-md:text-[10px] max-md:leading-[1.6]">
           {tier.badge}
         </span>
-        <span className="text-[11px] tracking-[0.08em] text-[var(--meta)]">
-          {tier.level}
-        </span>
       </div>
 
       <DrawLine delay={0.04} />
@@ -199,23 +214,23 @@ export function WorkModalities() {
   return (
     <Section
       id="modalities"
-      eyebrow="Serviços e contratação"
-      title="Sites, sistemas e aplicativos para o seu negócio."
-      description="Desenvolvimento para web, mobile e desktop Windows e Linux. Da primeira ideia à melhoria de um sistema existente, o trabalho começa pelo que você precisa resolver."
+      eyebrow="Soluções"
+      title="Software feito a partir do seu negócio."
+      description="Para empresas que precisam de um sistema próprio, de ferramentas conectadas ou de uma avaliação técnica antes de dar o próximo passo."
       disableChildrenAnimation
     >
       <div className="mb-sp-8 ds-card bg-[rgba(10,10,10,0.02)]">
         <div className="flex flex-col gap-sp-4 lg:flex-row lg:items-end lg:justify-between">
           <div className="max-w-[760px]">
-            <div className="ds-kicker">O que você pode contratar</div>
+            <div className="ds-kicker">Reconhece algum destes cenários?</div>
             <h3 className="ds-card-title !mt-sp-3" data-reel="left">
-              Uma solução para a sua rotina, não uma lista de tecnologias.
+              Planilhas demais. Sistemas isolados. Trabalho repetido.
             </h3>
             <p className="ds-copy !mt-sp-3 max-w-[62ch]" data-reel="right">
-              Apresentar sua empresa na internet, organizar a operação, criar um
-              aplicativo ou conectar ferramentas. Veja exemplos, etapas e
-              limites de cada serviço; os detalhes técnicos estão disponíveis
-              nas páginas para quem quiser aprofundar.
+              A operação cresceu, mas as ferramentas não acompanharam. Ou a
+              ideia precisa sair do protótipo para atender clientes. O projeto
+              começa pelo problema, sem exigir que você já saiba qual tecnologia
+              usar.
             </p>
           </div>
           <MagneticButton
@@ -262,6 +277,28 @@ export function WorkModalities() {
           </motion.div>
         ))}
       </motion.div>
+
+      <div id="process" className="mt-sp-12 scroll-mt-24">
+        <h3 className="ds-card-title">Como o projeto acontece</h3>
+        <p className="ds-copy max-w-[65ch]">
+          Você acompanha as decisões e valida cada etapa. Prazo e investimento
+          dependem do escopo, das integrações e dos riscos identificados.
+        </p>
+        <ol className="mt-sp-6 grid gap-sp-6 sm:grid-cols-2 xl:grid-cols-4">
+          {PROCESS.map((step, index) => (
+            <li
+              key={step.title}
+              className="border-t border-[var(--border)] pt-sp-4"
+            >
+              <span className="ds-kicker">
+                {String(index + 1).padStart(2, "0")}
+              </span>
+              <h4 className="mt-sp-3 text-base font-semibold">{step.title}</h4>
+              <p className="ds-copy">{step.description}</p>
+            </li>
+          ))}
+        </ol>
+      </div>
     </Section>
   );
 }