📝 Conteúdo

• Visão Geral do Projeto
  • Tecnologias
  • Critérios de Aceite
    • Nível Fácil
    • Nível Médio
    • Nível Difícil
    • Bônus Feito
• Configurações do Projeto
  • Informações Iniciais
  • Clonando o Repositório
  • Instalando as Dependências
  • Ambiente de Desenvolvimento
  • Ambiente de Produção
  • Executar testes

💻 Visão Geral do Projeto

Esse projeto é uma Landing Page de uma hamburgueria fictícia chamada Empire Burger. Nela há seções sobre as Ofertas Especiais, Horário de Funcionamento, cardápio contendo os ingredientes e preços, cards com os feedbacks dos clientes e a localização do estabelecimento.

Para facilitar a codificação do projeto foi usado um protótipo do Figma como base, o autor do layout é o Designer Tiago Alves. Clique aqui para abrir o protótipo no Figma.

Veja como está ficando o projeto aqui: https://aldiransantos-empireburger.netlify.app/

🚀 Tecnologias

• HTML5
• CSS
  • Flexbox
  • Grid Layout
  • Sass
• Javascript
  • Vue.js
  • Swiper

✅ Critérios de Aceite

Nível Fácil

• Criar as seguintes seções: Menu, Banner Hero, Ofertas Especiais, Onde fica o Nosso Castelo e Footer;

  • Desktop
  • Tablet
  • Mobile

• Ao clicar em um item do menu, o usuário deverá ser levado para a seção correspondente;

• Na seção Ofertas Especiais os elementos devem ser organizados com o uso da propriedade "display: grid" do CSS;

• As informações do card da oferta (nome do prato e gramagem) devem estar no HTML, a única imagem deve ser a foto do prato com o preço;

• Na seção Onde fica o Nosso Castelo você deverá incorporar uma localização do Google Maps.

Nível Médio

• Todos os requisitos do Nivel Fácil;

  • Desktop
  • Tablet
  • Mobile

• Criar as seguintes seções: Cardápio, Atendimento e Nossas Entregas;

  • Desktop
  • Tablet
  • Mobile

• Na seção Cardápio os preços devem ser formatados com o método Intl.NumberFormat;

• O card Horário de Funcionamento deverá ter os estados aberto e fechado, o estado será alterado conforme o horário do navegador do usuário.

Nível Difícil

• Todos os requisitos do Nivel Fácil e Médio;

  • Desktop
  • Tablet
  • Mobile

• Criar as seguintes seções: Nossa Realeza e Publicações do Instagram;

  • Desktop
  • Tablet
  • Mobile

• Buscar a lista de itens do cardápio via API;

• Buscar a lista de depoimentos via API;

• Na seção Nossa Realeza os depoimentos deverão estar em um carrossel funcional;

• O texto de cada depoimento deverá estar limitado em quatro linhas. Você pode usar a propriedade "clamp" do CSS.

Bônus feito

• Versão do site para Tablet
• Menu Dropdown animado para as versões Mobile e Tablet
• Hover e animação para os botões Contato, Comprar Agora, Cardápio e Solicitar Pedido
• Modal ao clicar no botão de Contato
• Modal ao clicar no botão de Ver Cardápio Completo

🔧 Configurações do Projeto

Informações Iniciais

Para que você possa iniciar o projeto é necessário ter em sua máquina o Git e o Node.js previamente instalados. Caso não possua-os em seu computador, aqui estão os links para você baixar e realizar a instalação:

• Git
• Node.js

Clonando o Repositório

Antes mesmo de você clonar o projeto e ter esses arquivos em seu computador, você pode fazer um Fork do projeto e trazer direto para o seu Github. O botão de Fork fica no canto superior direito do projeto. Após isso você pode clonar o projeto pegando o link clicando no botão verde [<> Clone] e em seguida copiando a url abaixo de HTTPS.

Com a url copiada, você pode abrir o bash do Git ou o próprio terminal do VSCode (caso você esteja usando ele) e digitar o comando abaixo. Atente-se para substituir a parte < url-do-repositorio > pelo link do projeto copiado.

git clone <url-do-repositorio>

Instalando as Dependências

Ainda no terminal digite o comando:

npm install

Ambiente de Desenvolvimento

Digite o comando abaixo para compilar os arquivos e executar um servidor de desenvolvimento:

npm run serve

Ambiente de Produção

Digite o comando abaixo para compilar and minificar os arquivos para produção:

npm run build