desafio-html-css/REQUISITOS.md

# Requisitos do projetos

Aqui estão os requisitos que serão avaliados:

## Header 

- [ ] Replicar os estilos do layout no Figma em cada breakpoint
  - [ ] ultra wide 
  - [ ] desktop
  - [ ] tablet
  - [ ] mobile
- [ ] deve manter a responsividade entre os breakpoints 

### Header - Logo
- [ ] Replicar o tamanho para cada breakpoint
  - [ ] ultra wide
  - [ ] desktop
  - [ ] tablet
  - [ ] mobile
- [ ] deve conter textos alternativos para a logo
- [ ] deve conter um link para a home ("/")
- [ ] algum efeito de hover ao passar o mouse sobre a logo

### Header - Search Bar 
- [ ] Replicar os estilos do layout no Figma em cada breakpoint
  - [ ] ultra wide 
  - [ ] desktop
  - [ ] tablet
  - [ ] mobile
- [ ] a estilização deve ser feita no tag input (textos, cores, espaçamentos)
- [ ] texto de placeholder deve ser o mesmo do layout
- [ ] deve manter a responsividade entre os breakpoints
- [ ] ao passar o mouse sobre o ícone de busca, deve haver um efeito.
- [ ] devo conseguir fazer a submissão do formulário clicando no o botão de busca ou com o apertando da tecla enter
- [ ] ao fazer a busca o usuário deve ser redirecionado para a página com o resultado da busca 
  - nao precisa implementar a pagina de resultado, apenas o redirecionar com a url correta
  - para o termo _"iphone"_ deve redirecianar para a url `/search?q=iphone` 
  - para o termo _"iphone vermelho"_ deve redirecianar para a url `/search?q=iphone%20vermelho`
  - esse padrão de url deve ser seguido para todos os termos de busca
  - esse padrão e' conhecido como query string

### Header - Login 
- [ ] Replicar os estilos do layout no Figma em cada breakpoint
  - [ ] ultra wide
  - [ ] desktop
  - [] tablet
  - [ ] mobile
- [ ] deve manter a responsividade entre os breakpoints
- [ ] deve conter um link para a página de login (`"/login"`)
- [ ] dever ter um efeito de hover ao passar o mouse sobre o link

### Header - Cart 
- [ ] Replicar os estilos do layout no Figma em cada breakpoint
  - [ ] ultra wide
  - [ ] desktop
  - [ ] tablet
  - [ ] mobile
- [ ] deve manter a responsividade entre os breakpoints
- [ ] ao clicar no botão de carrinho, deve redirecionar para a página de carrinho (`"/cart"`)
- [ ] dever ter um efeito de hover ao passar o mouse sobre o botão

### Header - menuBottom
- [ ] Replicar os estilos do layout no Figma em cada breakpoint
  - [ ] ultra wide
  - [ ] desktop
  - [ ] tablet
  - [ ] mobile
- [ ] deve manter a responsividade entre os breakpoints
- [ ] Os links devem conter efeitos de hover
- [ ] A url para os textos deve ser:
  - [ ] "Cursos" -> "/Cursos"
  - [ ] "Saiba mais" -> "/saiba-mais"
  - [ ] "Institucional" -> "/institucional"