(MVP)Filtro e Pesquisa de Cursos

[Rodrigo-Baracho]

Definição
Eu, como usuário da plataforma de ensino,
Desejo buscar e filtrar cursos de acordo com meus interesses e nível de experiência,
Para encontrar rapidamente conteúdos relevantes para minha jornada de aprendizado.

---

Descrição
Implementação de uma funcionalidade que permita aos usuários pesquisar cursos por palavras-chave e aplicar filtros como área de interesse, nível de dificuldade e disponibilidade. Os cursos devem ser exibidos em um layout organizado e fornecer opções de interação claras.

---

Protótipos
https://www.figma.com/board/ZjdUTkddQGgyR4EUGLKFCG/SJ-Learning?node-id=0-1&p=f&t=Ee0eJkG0aXYTss8p-0

---

Critérios de Aceite

1. Banner Inicial e Campo de Pesquisa

Dado que o usuário acessa a página de cursos,
Então ele deve visualizar um banner no topo da página com a frase "O que você quer aprender hoje?".
Abaixo da frase, deve haver um campo de busca centralizado com um placeholder "Digite aqui o que deseja buscar".
Ao lado do campo de busca, deve haver um botão "Buscar" e um ícone de lupa posicionado à esquerda dentro do campo.

2. Exibição dos Filtros

Dado que o usuário deseja refinar sua pesquisa,
Então ele deve visualizar abaixo do campo de busca a frase "Explore nossos cursos".
Ao lado dessa frase, deve haver um botão de filtro representado por um ícone (como um funil) e o texto "Filtrar".
Ao clicar no botão de filtro, o usuário deve visualizar um menu suspenso com as seguintes opções:

Área de Interesse:
Product Management,
UX/UI Design,
Tech Recruiter,
Marketing Growth,
Front-End,
Back-End,
Dados,
Social Media,
Agilista

Nível de Dificuldade:
Iniciante,
Intermediário,
Avançado

3. Campo de Pesquisa e Resultados

Dado que o usuário digita um termo no campo de busca,
Quando ele pressiona "Enter" ou clica no botão "Buscar",
Então o sistema deve exibir cursos que contenham a palavra-chave no título ou descrição.
Se nenhum curso for encontrado, o sistema deve exibir a mensagem "Nenhum curso encontrado. Experimente outros termos ou explore nossas categorias populares".

4. Exibição dos Cursos em Cards

Dado que o usuário realizou uma pesquisa e encontrou cursos,
Quando os resultados são carregados,
Então os cursos devem ser exibidos em formato de grade (cards) contendo:
Imagem representativa do curso
Título do curso
Descrição curta
Botões: "Inscrever-se" e "Ver mais detalhes"

5. Ação ao Clicar em "Ver Mais Detalhes"

Dado que o usuário deseja mais informações sobre um curso,
Quando ele clica no botão "Ver mais detalhes" em um card,
Então o sistema deve redirecioná-lo para a página detalhada do curso, onde ele pode visualizar informações sobre o conteúdo, instrutor e avaliações.

6. Ação ao Clicar em "Inscrever-se"

Dado que o usuário deseja se inscrever em um curso,
Quando ele clica no botão "Inscrever-se",
Então o sistema deve registrá-lo no curso e exibir uma mensagem de confirmação: "Inscrição realizada com sucesso!".
Além disso, o sistema deve redirecioná-lo automaticamente para a página inicial do curso.
Se o usuário já estiver inscrito no curso, o botão "Inscrever-se" deve ser desabilitado e exibir "Já Inscrito".

7. Feedbacks Visuais e Interação

Dado que o usuário interage com a interface,
Quando ele passa o mouse sobre um card de curso,
Então o sistema deve exibir um efeito de realce (ex: borda destacada ou leve aumento de escala).
Quando ele clica em "Ver mais detalhes" ou "Inscrever-se",
Então o sistema deve exibir um feedback visual, como um botão carregando ou uma animação de transição para a nova página.
Ao aplicar um filtro, o botão "Filtrar" deve mudar de cor ou exibir um ícone indicando que um filtro está ativo.