Desenvolvimento de Front-end + Integração Api

Introdução: Somo uma empresa de educação, com foco em preparação em concursos públicos. Atualmente vendemos cursos online de diversas carreiras entre elas as principais, Carreiras Policiais, Bancárias, Tribunais, Fiscais e Administrativas.
Os produtos serão exibidos em GRIDs dentro de páginas específicas, com visual basicamente de um e-commerce.
Cada carreiras possui uma página (dinâmica) que carrega categorias de Cursos como por exemplo Polícia Federal, Polícia Civil, Polícia Militar e assim por diante. Cada Categoria de Curso possui também uma página (dinâmica) que carrega os Cursos Relacionados a esta categoria por por exemplo Curso Intensivo da Polícia Federal, Curso de Exercícios da Polícia Federal e assim por diante.


Para melhor entendimento do projeto, acesse o projeto/protótipo inicial:

http://www.zass.ws

Telas de design:

https://invis.io/NRQ2GOFWX9A - desktop
https://invis.io/ZGQN7VOXSK3 - mobile

Objetivo: Desenvolvimento de projeto de Front-end Desktop e Mobile e integração com API
O Projeto de Design foi desenvolvimento responsivo, mas com funções adicionais na versão mobile.

Requerimentos:

1. Utilizar Laravel como framework back-end.
2. Utilização minimalista de framework front-end. Apenas componentes presentes no projeto devem estar presentes nos assets gerados como resultado.
3. Utilizar webpack (já presente no Laravel).
4. Realizar split de assets (css e js) para carregamento otimizado, conforme necessidade de cada página.
5. Utilizar sass e bem para escrever estilos css.
6. Utilizar ES6 pra código JS.
7. Utilizar VueJS como framework JS.
8. Implementar técnicas de SEO on page (https://rockcontent.com/blog/seo-on-page/ e https://neilpatel.com/br/blog/o-guia-rapido-e-pratico-para-seo-on-page/).
9. Implementar técnicas de acessibilidade (https://developers.google.com/web/fundamentals/accessibility/?hl=pt-br e https://imasters.com.br/acessibilidade/sobre-wai-aria-acessibilidade-e-semantica e https://medium.com/@oieduardorabelo/10-diretrizes-para-melhorar-sua-acessibilidade-na-web-6e35844f9859)
10. Atenção à semântica das tags HTML.
11.
Utilizar boas práticas de codificação (referência: Clean Code: A Handbook of Agile Software Craftsmanship)
12. Considere a ferramenta Google Lighthouse (presente no Chrome) para auditoria.

O projeto contempla: (Overview)

1.    Estruturação de html/css referente ao design proposto

2.    Desenvolvimento de Página Inicial (home)
a.

Menu Dropdown
b. Banner Rotativo
c. Carrossel de Imagens (box de produtos)
d.

Filtro de pesquisas avançado
e. Grid de Produtos
f. Pricing table


3.

Página de Carreiras de Cursos
a. Breadcrump
b. Container para Vídeo ou Imagem

4.

Página de Categoria dentro das Carreiras
a. Grid de Produtos

5. Página do Curso/Produto
a.

Container para Vídeo ou Imagem
b. Blocos de Informação com opção Mostrar/Esconder
c. Pricing table
d.

Contact Form

6. Página de Contato
a. Contact Fom
b.

Texto padrão

7. Página de Checkout
a. Interface no protótipo enviado

8.

Página de Professores
a. Grid com foto + nome do professor

9. Página de Depoimentos
a.

Grid com foto + nome do aluno e depoimento


10.    Página Plano de Recompensar
a. Banner Rotativo
b.

Itens com texto
c. Grid de Produtos

11.    Paginas Padrão (texto, imagem, vídeo combinados)
a.

O que tem de novo
b. Recompensas aprovados
c. Novos métodos de ensino
d.

Perguntas frequentes
e. Garantia de 30 dias
f. Promoções e descontos
g.

Sobre a empresa
h. Estrutura
i. Termos de uso
j.

Política de privacidade