(MVP)Detalhes do Curso

[Rodrigo-Baracho]

Definição
Como um usuário acessando o curso,
Eu quero visualizar uma página detalhada e organizada do curso,
Para que eu possa entender sua estrutura, visualizar os módulos, acompanhar meu progresso e acessar conteúdos complementares.

---

Descrição
Permitir que o usuário visualize detalhes do curso, acompanhe seu progresso e acesse conteúdos complementares.

---

Protótipos
Wireframes ou fluxo gramas que representem visualmente a User Story descrita.

Acesso: https://www.figma.com/board/ZjdUTkddQGgyR4EUGLKFCG/SJ-Learning?node-id=1558-2810&t=PZE1mQTYFG1cWbS1-0

---

Critérios de Aceite
Todos os requisitos que demonstrem o funcionamento do produto, apresentados em um formato de lista numerada.

1. Critério 1: Título do Curso e Descrição

Título em Destaque: O título do curso deve ser exibido na parte superior da página, em um formato de fácil leitura, com uma fonte grande (entre 24-32px), de forma destacada para captar imediatamente a atenção do usuário.

Descrição do Curso: Logo abaixo do título, uma breve descrição do curso (de 2 a 3 linhas) deve ser exibida, introduzindo o conteúdo, objetivos e público-alvo. A descrição deve ser escrita de forma clara e acessível, evitando termos técnicos excessivos.

2. Critério 2: Duração Total do Curso

A duração estimada do curso (em horas) deve estar visível logo abaixo da descrição, em formato como "Duração total: 12h". Esta informação orienta o usuário sobre o tempo necessário para completar o curso.

3. Critério 3: Progresso do Curso

Barra de Progresso com Percentual: Uma barra de progresso com o percentual concluído deve ser exibida abaixo do título, mostrando o avanço do usuário (ex.: "45% concluído").

Atualização Automática: O indicador de progresso deve atualizar automaticamente conforme o usuário avança nas aulas, promovendo uma visualização contínua do progresso.

4. Critério 4: Estrutura dos Módulos e Aulas

Aba “Módulos”: A página deve incluir uma aba "Módulos", onde serão listados todos os módulos do curso.

Exibição de Aulas e Progresso por Módulo: Cada módulo deve mostrar o número de aulas totais e quantas concluídas dentro disso (ex.: "2/5 aulas concluídas") em uma fonte menor e em cor cinza, ao lado direito do título do módulo.

Funcionalidade Colapsável: Cada módulo deve ser colapsável/expansível. Quando o usuário clica no módulo, a lista de aulas é exibida ou ocultada, facilitando a navegação e a organização do conteúdo.

Funcionalidade Colapsável: Cada módulo deve ser colapsável/expansível. Quando o usuário clica no módulo, a lista de aulas é exibida ou ocultada, facilitando a navegação e a organização do conteúdo.

Tempo de módulo: Cada módulo deve mostrar quanto de tempo será gasto conforme a soma dos tempos de vídeos e/ou leitura. Esse tempo deve aparecer em horas ou minutos “arrendondados”, conforme formato exemplo 5h10min. (O (link/local da imagem que pode servir para uma eventual inspiração visual estará disponível ao fim deste card em informações adicionais)

Critério 5: Conteúdos Complementares - Aba "Recomendações"

Aba de Recomendações: Ao lado da aba “Módulos”, a aba "Recomendações" exibe conteúdos adicionais como livros, podcasts e outros materiais que complementam o curso.

Organização em Categorias: Na aba "Recomendações", os materiais devem ser divididos em categorias/seções na página, como "Livros" e "Podcasts". Caso haja recomendações apenas de livros, somente o título Livros aparecerá, se houver livros e podcasts, aparecerão ambas as seções. Primeiro de livros com os cards de livros e logo abaixo os de podcasts.

Apresentação de Conteúdos: Abaixo do título da seção (livros, podcasts), devem ser apresentados até 3 “cards” retangulares exibidos horizontalmente em um formato, com capa, título e uma breve descrição (até 150 caracteres) sobre sua relevância. Caso haja apenas um podcast recomendado, haverá apenas um card retangular alinhado a esquerda da tela.

Botão de Acesso a recomendação: Cada material possui um botão "Acessar" que direciona o usuário para plataformas externas, como Amazon para livros e Spotify para podcasts em novas abas do browser.

Ver Mais: Quando há mais de três recomendações por categoria, um botão de seta aparece no canto direito, levando o usuário a visualizar mais opções, em formato carrossel. (O (link/local da imagem que pode servir para uma eventual inspiração visual estará disponível ao fim deste card em informações adicionais).

Critério 6: Funcionalidade “Continuar Curso”

Botão Destacado: Um botão “Continuar Curso” deve estar no topo da página, ao lado do título e descrição alinhado à direita, e estar habilitado quando o usuário tiver pausado o curso em uma aula específica.

Acesso à Última Aula Assistida: Ao clicar no botão, o usuário deve ser levado diretamente à última aula assistida, sem a necessidade de procurar manualmente onde parou.

Comportamento ao Finalizar o Curso: O botão deve ser removido quando todas as aulas já forem vistas, indicando que o curso foi concluído trocando a frase “Continuar Curso”.

Informações Adicionais

Link para inspirações visuais (localizadas no Épico 2: Catálogo de Cursos - História de Usuário: 7. Visualização do Catálogo de Cursos)

https://docs.google.com/document/d/1_gnewbv37Nkd-r5Q2Wl_rkEAFMh-2FLz/edit#heading=h.u5ufs44qv1b