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 →

Tela de Comunidade

Chat da turma · read-only · reações

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 →

Lista · mês e período por curso

Criar e editar lista com mês por 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 →

Tela de Comunidades

Lista de chats · texto, áudio e documentos

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

Simulado

7 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 →

Simulados · treino liberado

Selo Treino no card expirado

Abrir →

Início do treino

Aviso: sem correção, sem nota

Abrir →

Início do treino · já fez

Nota original preservada

Abrir →

Treino concluído · resultado

Acertos e gabarito das objetivas

Abrir →

Admin · dados do simulado

Liberar como treino após o prazo

Abrir →

Em prova

Timer · múltipla escolha · abertas

Abrir →

Gabarito

Grade de questões · acertos e erros

Abrir →

Documentos do simulado

PDFs por dia · baixar · visualizar · link público

Abrir →

Admin · Documentos

Upload de PDFs · compartilhar link para alunos

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 →
FASE 05

Rematrícula

4 telas · estado base

Pop-up · Rematrícula

Aviso promocional ao entrar no site

Abrir →

Aba · Rematrícula

Landing com mural, breakdown por curso e mecânica do PISM

Abrir →

Config · Pop-up Rematrícula

Editar imagem, texto e link · preview

Abrir →

Editar Página de Rematrícula

Todo conteúdo editável — mural, cursos, PISM, comparativo, WhatsApp

Abrir →
FASE 07

Aulas ao Vivo · Calendário · Gravações · Agenda

28 telas · 4 blocos

07A · Aluno · Ao vivo

Ao vivo · Aulas

Lista cronológica · badge ao vivo pulsante · próximas aulas

Abrir →

Ao vivo · Calendário (aba)

Grade semanal · eventos por turma · cores por curso

Abrir →

Pré-aula

Preview da câmera · microfone · participantes · entrar

Abrir →

Sala do aluno

Vídeo do professor · chat · levantar a mão · tiles de alunos

Abrir →

Sala do aluno · Pergunta anônima

Chat com opção "Enviar como anônimo" ligada · aviso de que o nome não aparece

Abrir →

Sala do aluno · Anônimo desligado

Opção bloqueada quando o professor desliga perguntas anônimas

Abrir →

Sala do aluno · Enquete (votando)

Pergunta do professor · opções · enviar resposta (também no celular)

Abrir →

Sala do aluno · Enquete (resultado)

Resposta enviada · barras com votos e % ao vivo

Abrir →

07B · Professor · Painel

Professor · Início

Aula do dia · próximas aulas · gravações pendentes

Abrir →

Professor · Aulas

Lista de aulas · upload de gravação · publicar

Abrir →

Sala do professor

Transmissão · gravação · silenciar alunos · chat · tiles de câmera · menu de efeitos

Abrir →

Detalhe do Aluno · Desempenho

KPIs de presença · presenças recentes · desempenho nos simulados

Abrir →

Sala do professor · Fundo e efeitos

Preview da câmera · desfoque · fundos prontos · efeitos animados

Abrir →

Sala do professor · Câmeras dos alunos

Fechar todas as câmeras · controle por aluno · estado com câmeras fechadas

Abrir →

Sala do professor · Chat anônimo

Configurações do chat · toggle "Permitir perguntas anônimas" · pergunta de Anônimo

Abrir →

Sala do professor · Criar enquete

Pergunta · opções · lançar para a turma

Abrir →

Sala do professor · Resultado da enquete

Barras com contagem e % ao vivo · quem ainda não votou

Abrir →

07C · Gestor de Conteúdo

Banco de Gravações

Escolha de turma · gravações por data · publicar no curso · baixar arquivo

Abrir →

Publicar conteúdo

Formulário de publicação · botão "Ver como aluno"

Abrir →

Ver como aluno · Computador

Pré-visualização do que o aluno enxerga antes de publicar

Abrir →

Ver como aluno · Celular

Mesma pré-visualização na largura do celular

Abrir →

Admin · Presença por turma

Matriz aluno × aula · % de presença · filtros por turma e período

Abrir →

Admin · Presença por aula

Lista por aula · presente, falta, justificada · filtros de status e busca

Abrir →

Admin · Fundos da câmera

Aba de Aulas ao vivo · lista com ordem e status · novo/editar fundo com upload · excluir

Abrir →

07D · Admin · Agenda

Curso · Calendário

Grade semanal e mensal · blocos por professor · remarcar e cancelar aula

Abrir →

Nova agenda recorrente

Professor · dias da semana · horário · duração padrão 1h · período · aviso de conflito

Abrir →

Nova agenda · Compartilhar

Compartilhar agenda com outras turmas · aviso do que é compartilhado

Abrir →