evolves UI

Bem-vindo ao sistema de design da evolves. Este documento serve como fonte da verdade para cores, tipografia, componentes e padrões de código utilizados no CRM Imobiliário. Use os componentes e classes abaixo para manter a consistência visual em toda a aplicação.

Logo & Ícones

Logomarca da evolves e a biblioteca padrão de ícones.

Logotipo evolves

evolves.

<span className="text-xl font-bold text-ink">\n  evolves<span className="text-teal-mid">.</span>\n</span>

Ícones (Lucide React)

Home

Calendar

Bot

ListFilter

User

MapPin

import { Home, Calendar, Bot, ListFilter } from 'lucide-react'\n\n<Home className="w-5 h-5 text-slate" />\n<Calendar className="w-5 h-5 text-slate" />\n<Bot className="w-5 h-5 text-slate" />\n<ListFilter className="w-5 h-5 text-slate" />

Cores

Nossa paleta baseada no manual de marca (Manual evolves 03).

Cores Primárias da Marca

Primary

#3c91bb

bg-teal-deep

Secondary

#17cba2

bg-teal-mid

Primary Light

#8dcce8

bg-teal-light

Accent

#f59e0b

bg-amber

Cores Neutras e Backgrounds

Ink (Texto Principal)

#171717

bg-ink

Slate (Texto Sec.)

#737373

bg-slate

Fog (Bordas/Inputs)

#E5E5E5

bg-fog

Snow (Fundo App)

#FAFAFA

bg-snow

Cream (Fundo Sec.)

#FDFBF7

bg-cream

Tipografia

Famílias de fontes baseadas em Inter, Space Grotesk e JetBrains Mono.

Heading 1 - text-4xl font-extrabold

A precisão de um engenheiro

Heading 2 - text-2xl font-bold

Pipeline Fluido e Dinâmico

Body - text-base text-slate

O CRM imobiliário da evolves no seu bolso. Aumente suas conversões com funis inteligentes e método FORD.

Small - text-sm font-medium

Última atualização há 12 min

Sombras & Efeitos

Efeitos de Liquid Glass e sombras suaves que garantem o aspecto premium.

Sombra Suave (shadow-soft)

Card com sombra suave

<div className="bg-white p-6 rounded-2xl shadow-soft">\n  Card com sombra suave\n</div>

Glass Panel

Efeito Glassmorphism

<div className="glass-panel p-6 rounded-2xl">\n  Efeito Glassmorphism\n</div>

Inputs & Selects

Campos de formulário padronizados com os anéis de foco da marca.

Input de Texto e Select

Nome Completo

Status

{/* Input Text */}\n<div className="space-y-1">\n  <label className="text-xs font-semibold text-slate">Nome Completo</label>\n  <input \n    type="text" \n    placeholder="Digite o nome..." \n    className="w-full h-11 rounded-xl border border-border bg-background px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring" \n  />\n</div>\n\n{/* Select Nativo */}\n<div className="space-y-1">\n  <label className="text-xs font-semibold text-slate">Status</label>\n  <select className="w-full h-11 rounded-xl border border-border bg-background px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring">\n    <option>Ativo</option>\n    <option>Inativo</option>\n  </select>\n</div>

Tabs (Abas)

Navegação em pílulas para separar conteúdos no mesmo contexto.

Segmented Control (Pílulas)

<div className="flex gap-2 p-1.5 bg-fog/50 rounded-2xl border border-border">\n  <button className="flex-1 rounded-xl py-2 text-sm font-semibold transition-all bg-white text-ink shadow-soft">\n    Detalhes\n  </button>\n  <button className="flex-1 rounded-xl py-2 text-sm font-medium text-slate hover:bg-white/50 transition-all">\n    Imóveis Compatíveis\n  </button>\n</div>

Botões

Elementos interativos padronizados para formulários e chamadas de ação.

Variações de Botão

{/* Primário */}\n<button className="bg-teal-deep hover:bg-teal-shadow text-white px-5 py-2.5 rounded-full text-sm font-medium transition-all shadow-soft hover:shadow-md">\n  Salvar Alterações\n</button>\n\n{/* Secundário / Destaque */}\n<button className="bg-amber hover:bg-amber/90 text-ink px-5 py-2.5 rounded-xl text-sm font-bold transition-all shadow-soft">\n  Acessar Web App\n</button>\n\n{/* Contorno (Outline) */}\n<button className="bg-white hover:bg-fog text-teal-deep border border-border px-5 py-2.5 rounded-xl text-sm font-bold transition-all">\n  Cancelar\n</button>\n\n{/* Fantasma (Ghost) */}\n<button className="text-slate hover:text-teal-deep hover:bg-fog px-4 py-2 rounded-lg text-sm transition-colors">\n  Detalhes\n</button>

Badges & Tags

Utilizados para identificar status de temperatura, tipos de atividade ou etapas de funil.

Badges de Status / Temperatura

QuenteMornoFrio

Locação

Venda

{/* Quente */}\n<span className="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-destructive/10 text-destructive border border-destructive/20">\n  Quente\n</span>\n\n{/* Morno */}\n<span className="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-amber/20 text-amber-800 border border-amber/30">\n  Morno\n</span>\n\n{/* Frio */}\n<span className="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-teal-light/20 text-teal-shadow border border-teal-light/30">\n  Frio\n</span>\n\n{/* Tag Padrão (Locação) */}\n<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber/10 text-amber border border-amber/20 font-medium text-sm">\n  Locação\n</div>

Cards

Estruturas em bloco para apresentação de informações complexas (Leads, Imóveis).

Card de Funil Simplificado

Mariana Costa

Apto 2 dorms · Jardins

Quente

R$ 890.000há 12 min

<div className="bg-white border border-border rounded-xl p-4 shadow-sm">\n  <div className="flex justify-between items-start mb-2">\n    <div>\n      <h4 className="font-bold text-ink">Mariana Costa</h4>\n      <p className="text-xs text-slate">Apto 2 dorms · Jardins</p>\n    </div>\n    <span className="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-destructive/10 text-destructive border border-destructive/20">\n      Quente\n    </span>\n  </div>\n  <div className="mt-4 pt-3 border-t border-border flex justify-between items-center text-xs text-slate">\n    <span className="font-medium text-teal-deep">R$ 890.000</span>\n    <span>há 12 min</span>\n  </div>\n</div>

Card de Negócios (Leads)

João da SilvaVenda

11 9999-9999

<article className="rounded-[1.25rem] border border-border bg-white shadow-soft p-4">\n  <div className="flex w-full items-start gap-3">\n    <div className="relative flex size-11 shrink-0 items-center justify-center rounded-full bg-teal-deep/10 font-serif text-sm font-semibold text-teal-deep">\n      JD\n      <span className="absolute -bottom-0.5 -right-0.5 size-3.5 rounded-full border-2 border-white bg-destructive" />\n    </div>\n    <div className="min-w-0 flex-1">\n      <div className="flex items-center gap-2">\n        <span className="truncate text-sm font-semibold text-ink">João da Silva</span>\n        <Bot className="size-3.5 text-teal-mid" />\n        <span className="ml-auto shrink-0 rounded-full px-2 py-0.5 text-[9px] font-semibold bg-teal-deep/10 text-teal-deep">\n          Venda\n        </span>\n      </div>\n      <span className="block text-xs text-slate">11 9999-9999</span>\n    </div>\n  </div>\n\n  <div className="mt-3 flex items-center gap-2 border-t border-border pt-3">\n    <button className="flex-1 rounded-full bg-teal-deep/10 px-3 py-1.5 text-xs font-semibold text-teal-deep">\n      Abrir atendimento\n    </button>\n    <button className="flex size-7 items-center justify-center rounded-full bg-[#25D366]/10 text-[#25D366]">\n      <MessageCircle className="size-3.5" />\n    </button>\n  </div>\n</article>

Card de Imóvel (Com Imagem)

Venda

Apartamento Exemplo com 3 suítes e varanda gourmet

Jardins, São Paulo

R$ 1.200.000

<div className="group relative overflow-hidden rounded-[1.25rem] bg-white border border-border shadow-soft flex flex-col">\n  <div className="relative aspect-[4/3] w-full overflow-hidden bg-fog">\n    <img src="/placeholder.jpg" className="h-full w-full object-cover" />\n    <div className="absolute left-3 top-3 flex flex-col gap-2">\n      <span className="rounded-full bg-teal-deep/90 backdrop-blur px-2.5 py-1 text-[10px] font-bold text-white shadow-sm">\n        Venda\n      </span>\n    </div>\n  </div>\n  <div className="flex flex-1 flex-col p-4">\n    <h3 className="line-clamp-2 text-sm font-bold text-ink leading-snug">\n      Apartamento no Jardins com 3 suítes\n    </h3>\n    <div className="mt-4 pt-4 border-t border-border flex items-end justify-between">\n      <p className="font-serif text-lg font-bold text-teal-deep">R$ 1.200.000</p>\n    </div>\n  </div>\n</div>

Item de Histórico (Timeline / Nota)

Visita Agendada10/Oct

Cliente confirmou a visita no decorado para a próxima sexta-feira às 15h.

<div className="flex gap-4">\n  <div className="mt-1 flex size-8 shrink-0 items-center justify-center rounded-full bg-amber/20 text-amber-600 shadow-sm">\n    <Calendar className="size-4" />\n  </div>\n  <div className="flex-1 rounded-2xl bg-white border border-border p-4 shadow-sm">\n    <div className="flex items-center justify-between gap-4">\n      <span className="text-sm font-bold text-ink">Visita Agendada</span>\n      <span className="shrink-0 text-xs text-slate">10/Oct</span>\n    </div>\n    <p className="mt-2 text-sm leading-relaxed text-slate">\n      Visita agendada para sexta-feira.\n    </p>\n  </div>\n</div>

Padrões de Código e Arquitetura

Convenções e boas práticas no projeto.

Estrutura de Componentes: Os componentes específicos de domínio (como screen-negocios.tsx e formulários) residem na pasta components/app. Componentes genéricos de UI (se houver via Shadcn) ficariam em components/ui.
Dados: O mock atual está em lib/app-data.ts (Leads, timeline) e lib/empreendimentos-data.ts. Quando for integrar ao backend, estes serão os primeiros arquivos a serem substituídos por requisições fetch/SWR.
Responsividade e Touch: Este projeto é um web app "mobile-first". Sempre utilize gestos (ex: onTouchStart/onTouchEnd implementados em screen-negocios.tsx para o Swipe) antes de pensar em paginações complexas via clique.
Ícones: Utilizamos exclusivamente a biblioteca Lucide React. Importe-os destruturando: import { Home, Phone } from 'lucide-react'.

Wiki do Aplicativo

Esta seção é a documentação viva (Wiki) de todo o funcionamento da aplicação. Aqui você encontra as regras de negócio, o fluxo de cada tela, e explicações detalhadas sobre como o CRM evolves opera nos bastidores.

Visão Geral (Painel Hoje)

A central de comando do corretor de imóveis.

O que é?

O painel "Hoje" é a tela inicial do aplicativo, acessada logo após o login. Funciona como um cockpit diário que resume os compromissos, finanças, metas e imóveis recomendados.

O que faz?

Resumo Financeiro: Exibe comissões recebidas, a receber e estimativa futura baseada em propostas em andamento.
Metas Mensais: Um gráfico de progresso (ex: "Faltam R$ 32.500 para atingir a meta").
Atividades Diárias: Timeline rolável de tarefas, visitas e ligações agendadas para o dia.
Match de Imóveis: Carrossel de imóveis recomendados baseados no perfil dos clientes mais quentes do funil.

Como faz? (Regras de Negócio)

Os dados na tela principal são agregados das atividades cadastradas no módulo de Clientes. A barra de rolagem horizontal permite visualizar dias futuros na agenda. Quando uma atividade é tocada, o sistema abre o Sheet de edição de atividade.

Módulo de Negócios (Kanban)

Gestão de pipeline de vendas e locações.

O que é?

A aba central do app (ícone de cifrão). É onde o ciclo de vida da venda/locação acontece, através de um quadro Kanban.

O que faz?

Visualiza negócios em etapas: Prospecção, Qualificação, Proposta e Fechamento.
Permite mover cards entre colunas deslizando a tela horizontalmente (Swipe).
Criação "Fast" de novos negócios apertando o botão + no topo.

Como faz? (Regras de Negócio)

O sistema foi construído pensando "Mobile First". No celular, o corretor vê uma coluna por vez, e desliza (Swipe) para a lateral para ver as próximas etapas do funil. O sistema detecta o arraste do dedo via eventos onTouchStart, onTouchMove e onTouchEnd.

Cada card exibe uma Badge de Temperatura. A temperatura (Quente/Morno/Frio) determina a urgência do negócio. Os cards possuem também identificação visual rápida de quando a última interação ocorreu, mudando de cor para alertar se um negócio estiver abandonado.

Relacionamento (Clientes & FORD 4Q)

Cadastro, histórico e perfis psicológicos de leads.

O que é?

A tela de Clientes (acessada pelo ícone de usuários). É a central do CRM (Customer Relationship Management) da evolves, onde reside o histórico completo de interação.

O que faz?

Listagem de contatos com filtros rápidos (Favoritos, Ativos, etc).
Método F.O.R.D: Coleta de dados avançados sobre a Família, Ocupação, Recreação e Desejos (Sonhos) do cliente.
Matriz 4Q: Classificação das intenções de compra.
Timeline Interativa: Registro cronológico de visitas, ligações, e mensagens trocadas.

Como faz? (Regras de Negócio)

Ao abrir o perfil de um cliente, o usuário visualiza uma ficha completa. O grande diferencial é a seção FORD 4Q, que utiliza acordiões expansíveis. Ao preencher os sonhos e ocupações de um lead, o algoritmo do app pode, futuramente, gerar um "match" perfeito com imóveis novos no mercado (ex: cliente gosta de Tênis, o app recomenda condomínios com quadra de Tênis).

A aba de Atividades permite registrar novos contatos no sistema via um menu fixo Sheet animado na parte inferior da tela, que possui integração com calendário e envio de notificações.

Captação (Imóveis)

Adição de portfólio, unidades e preenchimento IA.

O que é?

Onde o corretor insere novos produtos para venda ou locação, incluindo imóveis avulsos e grandes empreendimentos.

O que faz?

Captação Fast: Permite salvar um rascunho apenas com fotos e endereço no momento da visita, para concluir os detalhes no computador depois.
Captação de Empreendimentos: Gestão de prédios/loteamentos e suas respectivas unidades (lotes, apartamentos) individualizadas.
Envio de Mídia: Possibilidade de tirar fotos na hora, carregar da galeria e anexar ao formulário dinâmico.

Como faz? (Regras de Negócio)

Os formulários de captação utilizam um sistema multi-passos controlados por variáveis de estado (fase === 'formulario' | 'upload' | 'analisando'). A submissão de fotos interage nativamente com a câmera do celular através de inputs HTML do tipo file accept="image/*" que permanecem ocultos e são acionados via botões visuais da interface (fileInputRef.current.click()).

Inteligência Artificial (Albert)

Automação, Upsell e IA Generativa na rotina.

O que é?

O "Albert" é a IA embarcada dentro do sistema evolves. Ele ajuda a automatizar o trabalho braçal e trazer insights dos dados do CRM.

O que faz?

Chatbot Especialista: Pode ser acionado no Painel Hoje para sugerir abordagens a clientes que esfriaram no funil ou buscar pendências diárias.
Visão Computacional na Captação: Ao subir as fotos de um imóvel novo, a IA varre as imagens para preencher os campos do formulário sozinha (detecta banheiros, suites, área externa, se é apartamento ou casa).
Geração de Descrições: Transforma atributos do imóvel (3 dorms, 2 vagas) em descrições românticas e atrativas para portais de anúncio.

Como faz? (Regras de Negócio)

Na tela de Captação, se o corretor tenta usar a IA e não possui o plano ativado, um Upsell Modal bloqueia a ação, utilizando gatilhos de ancoragem cognitiva (Plano A vs B) e um selo animado de "Mais Popular" na versão com IA. Se a IA estiver ativada, uma animação com barras de progresso circulares (SVG Stroke) simula a análise neural, passando por estágios (OCR, Visão Computacional, Estimativa de Mercado). O formulário é então pré-preenchido utilizando mutação de estados nos componentes do React.