Redesign de interface (frontend)
hoje às 10:11Descrição do Projeto:
Projeto: VMageste (Monorepo)
Objetivo: Reformulação visual completa baseada no tema Metronic (Dark Sidebar).
Restrição crítica: ALTERAÇÃO ESTRITAMENTE VISUAL. Nenhuma lógica de negócio, autenticação, redirecionamento ou integração com API/banco de dados pode ser alterada.
1. Contexto e arquitetura atual
O projeto é um monorepo gerenciado via pnpm, utilizando Next.js 15.5 (App Router) com React 19 e TypeScript. A aplicação frontend principal reside em apps/web.
Stack tecnológica (mantida):
Framework: Next.js 15.5.2 (App Router)
Linguagem: TypeScript 5.x
Estilização: Tailwind CSS v4
UI Components: Radix UI (primitivos) + Lucide React (ícones) + Sonner (Toasts).
Autenticação/BaaS: Supabase (Auth Helpers & JS Client).
Gerenciamento de pacotes: pnpm (Workspaces).
2. Escopo do trabalho (o que deve ser feito)
O objetivo é implementar uma interface profissional, densa e moderna, inspirada fortemente no Metronic 8 (Demo 1 - Dark Sidebar). O desenvolvedor deverá transformar componentes simples e layouts brancos em interfaces ricas visualmente, mantendo a funcionalidade intacta.
2.1. Layout principal (apps/web/src/app/dashboard/layout.tsx)
Atual: Um container flex simples com sidebar cinza claro (bg-gray-50) de largura fixa.
Novo design (Metronic Style):
Sidebar: Lateral esquerda fixa, tema Dark (azul marinho profundo/preto), com logo no topo e menu de navegação com estados de hover e active refinados (ícones coloridos ou destacados).
Header: Barra superior branca/clara (shadow sutil) contendo breadcrumbs, busca global (se houver) e menu de perfil do usuário.
Content Wrapper: Área de conteúdo com background cinza muito suave (#F3F6F9 ou similar) para destacar os cards brancos do conteúdo.
2.2. Navegação (apps/web/src/components/dashboard/DashboardNav.tsx)
Atual: Links simples.
Novo design:
Item de menu com ícone à esquerda (Lucide), texto e seta de expansão (se for submenu).
Efeito de highlight no item ativo (borda lateral ou background translúcido).
2.3. Autenticação (apps/web/src/app/(auth)/login e register)
Atual: Formulários funcionais básicos.
Novo design:
Layout de tela dividida (Split Screen) ou centralizado em card flutuante.
Lado esquerdo (ou fundo): Imagem de branding abstrata ou cor sólida da marca com tipografia impactante.
Formulário: Inputs estilizados (altura maior, bordas suaves), botões com gradiente ou cor primária sólida, tipografia hierarquizada (título grande, subtítulo cinza).
2.4. Tabelas e listas (apps/web/src/app/dashboard/leads)
Contexto: Visualização de leads.
Novo design:
Estilo "Card Widget": A tabela deve estar dentro de um card branco com header (título + botões de ação/filtro).
Tabela: Cabeçalho com uppercase e texto cinza claro (text-xs font-semibold text-gray-400), linhas com hover state (bg-gray-50), paginação estilizada no rodapé do card.
Badges para status (cores suaves com texto escuro, ex: bg-green-100 text-green-700).
3. Mapeamento de rotas existentes
O desenvolvedor deve navegar por estas pastas e aplicar o redesign arquivo por arquivo:
/dashboard -> Raiz do painel. O arquivo page.tsx atual contém um redirecionamento lógico (useEffect para /campaigns ou login). NÃO REMOVER ESTA LÓGICA.
/dashboard/campaigns -> Listagem de campanhas.
/dashboard/leads -> Listagem de leads.
/dashboard/connections -> Configuração de integrações.
/dashboard/[dashboardId] -> Visualização dinâmica de relatórios.
/dashboard/utms, orphans, orphans-edit -> Telas utilitárias de dados.
4. Componentes disponíveis (apps/web/src/components/ui)
Já existem componentes base instalados (provavelmente Shadcn/UI). O desenvolvedor deve estilizar estes componentes ou criar variantes novas usando cva (class-variance-authority) para atingir o visual Metronic, ao invés de criar HTML puro do zero.
Ex: button.tsx, card.tsx, input.tsx, dialog.tsx.
5. Regras de ouro (limitações estritas)
Lógica intocável: Não altere useEffect, chamadas supabase.auth, fetch ou Server Actions. Se um botão faz onClick={handleSave}, ele deve continuar fazendo exatamente isso.
Arquivos de API: A pasta apps/web/src/app/api é PROIBIDA. Não toque nela.
Libs: Não adicione bibliotecas pesadas (como jQuery ou Bootstrap JS). Use o ecossistema React/Next.js já instalado.
Responsividade: O layout Metronic deve colapsar o menu lateral em telas mobile (Hambúrguer Menu).
Resumo para o desenvolvedor:
"Você está recebendo um esqueleto funcional construído em Next.js 15. Sua tarefa é 'vestir' esse esqueleto com um terno de alta costura (Metronic Dark Theme). O backend, o banco de dados e a lógica de redirecionamento já funcionam. Foque 100% em CSS (Tailwind), componentização visual e UX."
Preciso de alguém com disponibilidade imediata e, se possível, integral.
Habilidades desejadas:
Atividades do cliente nesse projeto:
Última visualização: hoje às 10:22
Tem dúvidas? Faça uma pergunta.
ou
Informações adicionais
| Categoria: | Web, Mobile & Software |
|---|---|
| Subcategoria: | Desenvolvimento Web |
| Orçamento: | Aberto |
| Nível de experiência: | Especialista |
| Visibilidade: | Público |
| Propostas: | 6 |
| Interessados: | 9 |
| Tempo restante: | |
| Valor Mínimo: | R$ 50,00 |
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
Upgrade de site de classificados - Atualizando novamente: Site de classificados da cidade, agora com login, classificados recentes, filtros: novo/semi-novo, e espaço para banners de promoções. Gostaria que fosse...
Criação de site para marca de eventos - Montar um site que iniciei no Hostinger de forma profissional, com abas designadas para eventos, lojinha e contato, visando uma melhor execução.
Desenvolvimento de website interno (base em Excel) - Somos uma empresa do setor jurídico-financeiro que trabalha com compra e antecipação de precatórios. Atualmente, utilizamos uma calculadora em Excel que é essenci...
Criação de landing page ou site na Wix - Preciso de um profissional para desenvolver uma landing page ou site na Wix. São mais ou menos cursos que precisam ser colocados no site. Temos todas as informações; o trabalho...
Integração do sistema com Stripe - Possuo um sistema de gestão integrado com a Stripe, porém tem ocorrido erros de comunicação com o banco. Preciso configurar o teste grátis, pagamento recorrente e...
