Remix

Make your own version of Riqueza em Construção

Get an exact, working copy in your account, then change anything with chat.

Original by Duda

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

Crie um aplicativo web responsivo chamado **Riqueza em Construção**, para organização financeira e vida prática de um casal. Quero um produto funcional, visualmente refinado e com identidade própria, não um template financeiro genérico.

**REFERÊNCIA VISUAL:** se eu anexar uma imagem de referência, use-a como principal guia para a composição, proporções, cores, tipografia, cards e navegação. Não faça apenas uma troca de cores: reproduza a linguagem visual e a hierarquia da referência.

## 1. IDENTIDADE VISUAL

Estética moderna, acolhedora, organizada e sofisticada, sem parecer infantil ou excessivamente minimalista.

Paleta:
- Roxo principal: #7041A3
- Roxo escuro: #4E2D70
- Lilás claro: #F0E7F8
- Fundo creme: #FAF6F0
- Cards branco quente: #FFFEFC
- Texto principal: #292433
- Texto secundário: #756C7D
- Verde discreto para resultados positivos e terracota para despesas e alertas.

Use tipografia sem serifa, como Inter ou Manrope. Títulos equilibrados, valores financeiros destacados, espaçamento consistente, ícones uniformes, cantos moderadamente arredondados e sombras sutis. Evite títulos gigantes, cards repetitivos e excesso de espaço vazio.

Inclua uma mascote de gatinho em estilo ilustrado, simpática e elegante, integrada à identidade visual sem infantilizar o aplicativo.

## 2. ESTRUTURA E NAVEGAÇÃO

Crie uma sidebar organizada, com logotipo, nome do aplicativo e ícones. Inclua:
- Dashboard
- Lançamentos
- Orçamento
- Contas fixas
- Metas
- Reserva
- Configurações

A navegação deve funcionar de verdade. Adapte o layout para desktop, tablet e celular.

## 3. DASHBOARD

Crie uma composição visual rica e equilibrada, com:

- Saudação: “Olá! Vamos construir juntas”.
- Seleção de mês e ano, com navegação entre períodos.
- Filtros de responsável: Todos, Duda, Lau e Casal.
- Resumo financeiro de receitas, despesas, saldo do mês e renda restante.
- Gráfico de evolução de receitas e despesas.
- Comparação entre orçamento planejado e realizado.
- Despesas por categoria, quando houver dados.
- Próximas contas, vencimentos e respectivos status.
- Metas financeiras com barras de progresso.
- Reserva financeira com valor atual e objetivo.
- Ações rápidas para novo lançamento, pagamento, conta fixa, orçamento e meta.

Não coloque tudo em cards idênticos. Dê destaque ao saldo, varie as proporções dos componentes e agrupe as informações por importância. Gráficos devem usar dados reais. Quando faltarem informações, mostre estados vazios elegantes, com instruções úteis, sem inventar números.

## 4. FUNCIONALIDADES FINANCEIRAS

**Lançamentos:** cadastrar, editar, consultar e excluir receitas, despesas e transferências; incluir descrição, valor, data, categoria, responsável, conta e observações.

**Orçamento:** definir limites por categoria e comparar valores planejados e realizados.

**Contas fixas:** cadastrar contas recorrentes, vencimentos e pagamentos. Gerar ocorrências sem duplicação e nunca marcar automaticamente como pagas.

**Metas:** cadastrar objetivos, valores-alvo, progresso e valores restantes.

**Reserva:** acompanhar o valor acumulado e a meta financeira.

**Filtros:** permitir consultas por mês, ano, responsável, categoria e status, conforme o módulo.

**Responsáveis:** identificar registros de Duda, Lau ou Casal.

**Configurações:** disponibilizar preferências do aplicativo e opções de personalização pertinentes.

## 5. REGRAS DE INTEGRIDADE

- Não misture meses de anos diferentes.
- Não contabilize o mesmo valor duas vezes.
- Transferências entre contas próprias não são receitas nem despesas.
- Não confunda contas cadastradas com pagamentos realizados.
- Não considere informações ausentes como valores confirmados iguais a zero.
- Não misture dados de demonstração com dados reais.
- Confirme exclusões e alterações em massa.
- Preserve os dados após atualizar a página.
- Utilize autenticação e armazenamento persistente quando suportados.
- Não apresente cálculos financeiros como corretos sem validar suas regras.

## 6. IMPLEMENTAÇÃO

Construa primeiro a estrutura visual, a navegação e o dashboard. Depois implemente os demais módulos e integre seus dados.

Priorize componentes reutilizáveis, formulários funcionais, validação dos campos, mensagens de erro, estados vazios e responsividade.

Se alguma funcionalidade não puder ser implementada na plataforma, informe claramente a limitação em vez de simular que funciona.

**Critério de qualidade:** o resultado deve parecer um aplicativo financeiro real, coeso e profissional, com identidade visual marcante, navegação funcional e informações financeiras confiáveis. Ao concluir, informe o que foi implementado, o que foi testado e o que ainda está pendente.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.