## Descrição
A tela atual de busca de freelancers será totalmente remodelada com base no novo design apresentado (modo escuro, cartões mais densos, tags de habilidades, novos filtros laterais, badges de nível, match %, etc.).
A implementação exige quebrar a interface em componentes isolados, seguindo boas práticas e garantindo compatibilidade total com dados reais da API.
## Escopo
1. Estrutura Geral da Página**
- Header atualizado com novas ações (notificações, mensagens e perfil).
- Hero section com título + barra de busca.
- Chips de categorias rápidas ("React", "Design", etc.).
- Layout padrão 2 colunas: filtros à esquerda e listagem à direita.
2. Sidebar de Filtros (componentes separados)**
- **Filtro: Nível de Talento** (Expert, Top Rated, Rising Talent, Novato).
- **Filtro: Valor por hora (slider)**
- **Filtro: Disponibilidade** (Qualquer, Disponível agora, Tempo integral).
- Manter estado no URL (query params) para deep linking.
3. Card de Freelancer (componente principal)**
Cada card deve ser construído como componente isolado contendo:
- Foto/Avatar
- Nome + Título profissional
- Badge de nível (Expert Vetted, Top Rated...)
- Localização
- Rating + estrelas
- Tarifa por hora
- Ganho total
- Número de jobs
- Descrição reduzida
- Tags de habilidades (chips)
- Status online/offline
- Botões: *Ver Perfil* e *Contratar*
- Ícone de “favoritar”
- Badge de match percentage (ex: **98% Match**)
js4. Componente de Paginação**
- Navegação entre páginas com estilo do novo design.
- Exibir “X profissionais encontrados”.
5. Interações e Experiência**
- Hover states para cards, botões e filtros.
- Skeleton loading para carregamento inicial.
- Animações suaves (fade/slide) para renderização dos cards.
6. Integração com API**
- Consumo real da API de freelancers.
- Filtragem por query params.
- Ordenação por relevância, avaliação, valor hora etc.
7. Responsividade Completa**
- Mobile (stack vertical)
- Tablet
- Desktop
- Ajuste automático da sidebar (colapsável no mobile)
## Critérios de aceite (Componentizado)
- [ ] A tela deve reproduzir fielmente o design apresentado, incluindo cores, espaçamentos, sombras, tipografia e proporções.
- [ ] Todos os filtros devem ser funcionais e refletir corretamente na URL.
- [ ] O card do freelancer deve ser 100% componentizado, reutilizável e configurável via props.
- [ ] O sistema deve realizar busca com debounce (300–500ms).
- [ ] O contador deve mostrar corretamente “X profissionais encontrados”.
- [ ] Os botões *Ver Perfil* e *Contratar* devem navegar corretamente.
- [ ] Skeleton loading deve aparecer antes da listagem.
- [ ] A página deve ser totalmente responsiva e sem quebra visual.
- [ ] Todos os badges (Expert, Top Rated, Match %, Skills) devem estar implementados de forma padronizada.
- [ ] Performance: a tela deve carregar em < 1.5s em ambiente de produção.
- [ ] Código deve estar totalmente componentizado e documentado.
- [ ]
## Entregáveis
---
### **1. Componentes Front-end**
- `<FreelancerCard />`
- `<BadgeLevel />`
- `<MatchPercentage />`
- `<SkillsChips />`
- `<SidebarFilters />`
- `<FilterCheckboxGroup />`
- `<HourlyRateSlider />`
- `<AvailabilitySelect />`
- `<Pagination />`
- `<SkeletonFreelancerList />`
2. Página completa**
- Com layout + SEO + responsividade
3. Documentação**
- Documentação dos componentes no padrão (props, states, exemplos).
- Lista de tokens do design usados (cores, espaçamentos, shadows).
- Instruções para integração com backend.
Descrição
Desenvolver o dashboard interativo completo utilizando Charts.js ou ApexCharts, seguindo fielmente o design já fornecido.
O objetivo é entregar um frontend moderno, responsivo e performático, integrado aos templates Django (HTML + CSS + JS com Jinja2 quando necessário).
Este dashboard será usado para visualizações estratégicas e deve incluir gráficos dinâmicos, animações suaves, atualizações de dados e componentes de UI alinhados com o design.
Critérios de Aceite
Dashboard implementado seguindo exatamente o design fornecido (layout, cores, espaçamentos, tipografia, interações).
Todos os gráficos implementados com Charts.js ou ApexCharts (definir a depender do que melhor se alinhar ao design).
HTML semântico, templates Django bem estruturados e componentes isolados quando possível.
JS organizado, preferencialmente modular, sem scripts espalhados/duplicados.
Dashboard totalmente responsivo (desktop, tablet e mobile).
Gráficos com animações e tooltips configurados conforme design.
Integração com dados dinâmicos (mock inicial via variável de template).
Boas práticas de performance (minimizar reflows, evitar repinturas desnecessárias).
CSS padronizado, com classes consistentes.
Página pronta para receber dados reais posteriormente sem retrabalho estrutural.
Escopo
Inclui:
Implementação completa da página de dashboard.
Estruturação dos gráficos (linhas, barras, donut, KPIs etc).
Templates Django integrados (HTML + includes + separação de blocos + context vars).
Scripts JS para renderização e atualização dos gráficos.
CSS conforme o design (Tailwind opcional caso não conflite com design atual).
Integração inicial com dados mock via contexto Django.
Testes visuais (pixel-perfect) comparando com o design.
Não inclui:
Backend real de dados.
Desenvolvimento de API.
Autenticação ou permissões.
Gráficos extras fora do design.
Modo dark (se não estiver no design).
Dependências
Design final do dashboard (figma/imagem/protótipo).
Templates base (base.html, includes etc).
Biblioteca escolhida (Charts.js ou ApexCharts).
Possível integração com app common caso use componentes compartilhados.
Entregáveis
Template completo dashboard.html (ou equivalente).
Arquivo JS dedicado ao dashboard (dashboard.js).
Estilos aplicados conforme design (CSS ou Tailwind, seguindo padrões do projeto).
Todos os gráficos renderizados e funcionando.
Dados mock parametrizados via Django context.
Interações (hover, tooltips, legendas clicáveis, animações).
Versão responsiva final validada.
Documentação breve explicando a estrutura do template e do JS.
Propostas0
Experiênciajunior
OrçamentoR$ 500,00
HTML Semântico (Pleno)
JavaScript Vanilla (Júnior)
CSS Flexbox (Pleno)
Estamos procurando um desenvolvedor Django experiente para refatorar completamente a tela de Gestão de Projetos do nosso web app.
O objetivo é melhorar arquitetura, performance, UX e manutenibilidade, sem alterar a lógica de negócios atual.
O que precisa ser feito:
Implementar um novo layout (fornecemos referência visual se necessário).
Otimizar consultas ao banco e remover código duplicado.
Melhorar a separação entre views, templates e serviços.
Ajustar componentes interativos (listas, filtros, botões de ação).
Tornar o front-end mais responsivo e clean (HTML + JS atual).
Assegurar compatibilidade com o restante da plataforma (Django 4+).
Entrega esperada:
Código refatorado
Commits organizados
Pequena documentação das alterações
Correções gerais no layout do front-end incluindo melhorias no footer, implementação de drop-down com habilidades, ajuste do botão 'Carregar mais' (paginador) e criação de um popup de envio de email durante o registro do usuário.
Propostas2
Experiênciajunior
OrçamentoR$ 300,00
Design de Interface (UI)
Design de Experiência (UX)
Boas práticas de HTML/CSS (Semântica e BEM) (Pleno)
+1