Fazer 8 telas responsivas no Figma

Serão 9 telas responsivas (para web-app), montadas no Figma.
Principalmente o Ambiente do Aluno será compilado no futuro como um App, aproveitando que será desenvolvido com Fluter.


Segue a descrição de cada tela:

Tela de Login
- O usuário informa email/CPF e senha de login. Procura o email na tabela de professores. Se encontrar, confere a senha. Se bater, joga o usuário no Ambiente do Professor.
- Se não encontrar, procura o email na tabela alunos e confere a senha. Se bater, joga o usuário no ambiente de Alunos
- Observe que no campo de login, o usuário pode informar ou Email ou cpf
- campos do form: "email ou cpf" e "senha"


ambiente do professor: tela inicial: listagem de cursos
o software deverá mostrar uma grid com os cursos criados pelo professor, com as seguintes colunas: nome do curso, num alunos inscritos, qtde de alunos que concluíram o curso, ícone para editar, ícone para inativar ou ativar. A grid deverá ser passível de ordenar por coluna ao clicar no título da coluna.

(Lista os cursos criados pelo professor específico, no formato de Cards, e tem o botão "Criar Curso" e "Editar Curso". Na frente de cada curso, tem um checkbox pra sinalizar se o curso está Ativo ou Inativo. ATENÇÃO: ao Criar um curso, nós vamos colocar o professor em um Wizard de criação onde ele primeiro cadastra o curso, depois ele indica a qual Trilha de Aprendizagem este curso pertence (ou permite criar uma trilha sem sair da tela pra ir em outro lugar) e em seguida abre a tela para adicionar as aulas no curso. Não podemos fazer o Professor ter que ficar cadastrando cada coisa em um menu separado, e sim em uma jornada.


Ambiente do Professor: Criar/Editar Trilha de Aprendizagem
- Crude para criar grupos para agrupar cursos em determinados assuntos.
- Campos do form: "nome da trilha" e "descrição"


ambiente do professor: criar/editar curso
- crude com os campos da tabela cursos
- e tem ali uma listagem das aulas adicionadas neste curso e as opções de "adicionar aula" ou "editar aula" ou "deletar aula".
- Na listagem de aulas do curso, ter a possibilidade de o Professor arrastar e mudar a ordem das aulas.
- Campos do form: "nome do curso", "descrição", "certificado (editor de html)", "upload da imagem do card" e "campo checkbox pra marcar como ativo ou inativo"
- atenção: ao criar um curso, nós vamos colocar o professor em um wizard de criação onde ele primeiro cadastra o curso, depois ele indica a qual trilha de aprendizagem este curso pertence (ou permite criar uma trilha sem sair da tela pra ir em outro lugar) e em seguida abre a tela para adicionar as aulas no curso. Não podemos fazer o Professor ter que ficar cadastrando cada coisa em um menu separado, e sim em uma jornada.


Ambiente do Professor: Criar/Editar Aula
- crude com os campos da tabela aulas, com as aulas vinculadas ao curso em que está. No tipo de aula, quando for Texto/html, disponibilizar um pequeno editor html pra facilitar pro usuário alterar cor, tamanho de fonte, incluir imagem, incluir hiperlink, etc.
- Por enquanto, não teremos a opção prova para o tipo de aula
- campos do form: "título da aula", "tipo de conteúdo (drop down)", "conteúdo (editor de html) e "campo checkbox pra marcar como ativo ou inativo"


ambiente do professor: listagem de alunos
- o software deverá mostrar uma lista dos alunos com paginação a cada 100, estando em uma grid com as colunas: nome, cursos inscritos, cursos concluídos, qtde aulas assistidas. E ao clicar no nome do aluno, abrirá a tela com detalhes do mesmo: uma grid dos cursos inscritos, data de inscrição, data de conclusão, Número de aulas assistidas, Qtde de Logins feitos.

Ambiente do Professor: Detalhe do Aluno
- Mostra o nome do aluno e uma grid dos cursos que ele iniciou (pegar dados da tabela ANDAMENTO) exibindo uma barrinha mostrando a completude e nas outras colunas: Aula em que está, data de último login, quantidade de logins, Data de Início e Data de Conclusão.
- Possibilitar ordenar a grid por coluna.


Ambiente do Aluno: Dashboard: Deverá mostrar uma listagem dos cursos mostrando no formato de Cards, em 3 grupos: a) Cursos em Andamento, são os cursos que o aluno se inscreveu mas ainda não concluiu; b) Cursos Disponíveis, são os cursos que o aluno não se inscreveu; e c) Cursos Concluídos, são os cursos que o aluno concluiu. IMPORTANTE: tem que ser responsivo.

Curso
- Quando o aluno clicar em um card de um curso, o software deverá abrir uma tela onde, na coluna da esquerda (20% da tela) ele mostra uma lista das aulas do curso, mostrando em verde as aulas concluídas, em vermelho a última aula em que ele parou e em cinza as aulas seguintes. E na coluna da direita (80% da tela) ele exibe o conteúdo daquela aula, com um botão para avançar para a próxima aula e outro para voltar pra aula anterior. IMPORTANTE: tem que ser responsivo.
- Quando ele clica em um curso, abre a tabela ANDAMENTO e verifica qual foi a última aula que ele viu e abre nesta aula.
- Se ele ainda não tem andamento registrado naquele curso, cria o registro.
- Nesta tela, tem o botão de "Avançar" (pra próxima aula) e "Voltar" (pra aula anterior). - Ao clicar, atualiza a página pra aula que está indo, e atualiza a tabela andamento com o novo valor de idaula e para percentual_completude
- se a aula que está abrindo na tela é video, mostrar player de vídeo com o "embeded" do vídeo. Se for áudio, mostrar um player de áudio.
- Quando concluir o curso, o que vai exibir é o Certificado de Conclusão
- Na coluna da esquerda, ele vai mostrar as aulas que existem naquele curso, na ordem, indicando quais o aluno já fez, onde ele está e quais ainda precisa fazer. E mostrar o percentual de completude do curso