Importação · Curso do Mago — Web

Mago do Pism — design system
importado do Figma

295 frames divididos em 4 fases. Esta página é o índice navegável: cada cartão abre uma tela em alta fidelidade, reconstruída a partir da pseudo-JSX e dos assets do arquivo Figma anexado. As fontes proprietárias (AkagiPro, Othello MT, Libertad) ainda usam substitutos do Google Fonts até você anexar os arquivos originais.

Cor primária · #0E93F2 Type · Montserrat / Quicksand Layout · 1440 base, responsivo Tweaks ✱ — toggle pelo painel superior
FASE 01

Autenticação

5 telas · concluído

Tela de Login

/Autentica-o/Tela-de-Login · 1:38

Abrir →

Esqueci a senha · Pedir e-mail

/Autentica-o/Esqueci-minha-senha · 2:69

Abrir →

Esqueci a senha · E-mail enviado

/Autentica-o/Esqueci-minha-senha2 · 261:6

Abrir →

Esqueci a senha · Nova senha

/Autentica-o/Esqueci-minha-senha3 · 2:76

Abrir →

Esqueci a senha · Sucesso

/Autentica-o/Esqueci-minha-senha4 · 2:226

Abrir →
FASE 02

Plataforma · Alunos

4 telas-chave · estado base

Tela de Início

Avisos · jornada · ações rápidas

Abrir →

Tela de Cursos

Recentes · catálogo · progresso

Abrir →

Tela de Simulados

Gráfico de desempenho · andamento

Abrir →

Tela de Perfil

Dados pessoais · senha · sair

Abrir →
+14 variações restantes modais, estados de erro, listas individuais
FASE 03

Plataforma · Admin

6 telas-chave · estado base

Tela de Início

Dashboard · KPIs em grade 2×N

Abrir →

Tela de Alunos

Tabela · busca · tags por curso

Abrir →

Tela de Cursos

Grid de cards · criar curso

Abrir →

Tela de Módulos

Disciplinas em grade 3×N

Abrir →

Tela de Equipe

Colaboradores · ações editar/excluir

Abrir →

Meu Perfil

Foto · dados · alterar senha

Abrir →
+49 variações restantes modais, sticky notes, criar/editar/deletar
FASE 04

Simulado

5 telas · pronto

Login do simulado

Split com imagem · entrada por e-mail

Abrir →

Briefing

Regras · Modo Bruxo · começar

Abrir →

Dashboard

Desempenho · simulados disponíveis

Abrir →

Em prova

Timer · múltipla escolha · abertas

Abrir →

Gabarito

Grade de questões · acertos e erros

Abrir →
FASE 05A

Plataforma · Secretaria

10 telas · pronto

Painel financeiro

Fluxo de recebíveis · KPIs · faturas

Abrir →

Clientes

Lista de responsáveis · filtros · ações

Abrir →

Cliente · perfil

Dados · faturas · histórico

Abrir →

Formulários

Lista de formulários públicos · link · QR

Abrir →

Formulário · Criar

Wizard: modelo ZapSign + valor

Abrir →

Contas a Receber

Lista completa · status · cobrança

Abrir →

Fatura · detalhe

Itens · timeline · QR Pix

Abrir →

Inadimplência

Aging · risco · ações em massa

Abrir →

Régua de Cobrança

7 etapas · WhatsApp / e-mail · variáveis

Abrir →
FASE 05B

Fluxo público · Matrícula do responsável

7 telas · pronto

Início — Nova ou Rematrícula

Etapa 0 · escolha do fluxo

Abrir →

Nova matrícula · Cadastro

Responsável + aluno · stepper 1/3

Abrir →

Rematrícula · Buscar CPF

Confere e edita os dados do aluno

Abrir →

Contrato (ZapSign-style)

Documento + assinatura digital

Abrir →

Pagamento

Pix / cartão / boleto · QR Code

Abrir →

Confirmação

Boas-vindas · próximos passos

Abrir →

Fatura pública (link)

O pai escolhe Pix ou Boleto

Abrir →