Projeto: Atividade 04 - Criação de uma Landing Page

Bem-vindo ao Sabores Autênticos Website, uma landing page fictícia desenvolvido para fins de atividades e projetos de programação. Qualquer semelhança com sites reais é mera coincidência.

Sumário

• Header
• Banner Principal
• Seção "Sobre"
• Seção "Serviços"
• Seção "Testemunhos"
• Seção "Contato"
• Footer
• Estilização com CSS
• Requisitos JavaScript
• Bibliotecas Externas Recomendadas
• Link de Entrega
• Critérios de Avaliação
• Visão Geral da Página
• Sabores Autênticos
• Como Visualizar o projeto localmente
• APIs Utilizadas
• Bibliotecas Externas Utilizadas

Voltar ao Topo

Header

• Inclui o logo da empresa e um menu de navegação com links para as seções:

• Sobre

• Serviços

• Testemunhos

• Contato

• Contém uma chamada para ação (CTA) como "Entre em Contato" ou "Assine Agora".

Voltar ao Topo

Banner Principal

• Utiliza um slider/carrossel para exibir imagens ou conteúdo sobre os principais serviços/produtos oferecidos pela empresa.
• O slider possui navegação com botões de avançar/retroceder e indicadores (círculos ou barras) para cada slide.
• Implementado com uma biblioteca externa, como Swiper.js ou Slick Slider.

Voltar ao Topo

Seção "Sobre"

• Breve introdução da empresa ou produto, com um título e parágrafo descritivo.

Voltar ao Topo

Seção "Serviços"

• Uso de cards ou ícones para descrever os principais serviços ou características do produto.
• Consumo de uma API externa para popular essa seção com dados dinâmicos.

Voltar ao Topo

Seção "Testemunhos"

• Área para exibir depoimentos de clientes satisfeitos, incluindo nome, foto e texto do depoimento.
• Depoimentos podem ser estáticos ou dinâmicos, consumindo uma API de comentários.
• Animações de exibição implementadas com AOS.js.

Voltar ao Topo

Seção "Contato"

• Formulário de contato com campos para nome, email, telefone e mensagem.
• Validação de formulário usando JavaScript para garantir que todos os campos obrigatórios sejam preenchidos corretamente.
• Integração com EmailJS para enviar os dados do formulário para um email.

Voltar ao Topo

Footer

• Contém links para as redes sociais da empresa.
• Informações adicionais, como termos de uso e política de privacidade.

Voltar ao Topo

Estilização com CSS

• Design Responsivo: A página é adaptada para diferentes dispositivos (desktop, tablet, smartphone) utilizando media queries ou um framework como Bootstrap ou Tailwind CSS.
• Slider: Transições suaves entre as imagens e personalização dos botões de navegação e indicadores.
• Seção de Testemunhos: Animações para que os depoimentos apareçam gradualmente à medida que o usuário rola a página.
• Botões CTA: Efeito de hover nos botões, com mudanças de cor e tamanho.

Voltar ao Topo

Requisitos JavaScript

• Consumo de APIs: Implementação de chamadas a APIs externas para carregar serviços e depoimentos usando fetch().

• Validação de Formulário: Validação para garantir que os campos obrigatórios estejam corretamente preenchidos.

• Slider Interativo: Uso de bibliotecas externas para criar um carrossel interativo e fluido.

• Tratamento de Erros: Mensagens apropriadas para erros na chamada de API.

Voltar ao Topo

Bibliotecas Externas Recomendadas

• Swiper.js ou Slick Slider: Para a implementação do slider/carrossel.
• AOS.js: Para animações ao rolar a página.
• Bootstrap ou Tailwind CSS: Para design responsivo.
• EmailJS: Para envio de emails diretamente pelo formulário de contato.

Voltar ao Topo

Link de Entrega

• Submeta o link do repositório GitHub.
• Incluir um arquivo README.md com instruções de como visualizar o projeto localmente, informações sobre as APIs utilizadas e uma breve explicação das bibliotecas externas aplicadas no projeto.

Voltar ao Topo

Critérios de Avaliação

1. Funcionalidade: A página deve estar funcional, com o slider, consumo de API e formulário operando corretamente.
2. Responsividade: O design deve se adaptar bem a dispositivos móveis e desktops.
3. Estilização e Layout: A página deve ser visualmente atraente, com uma boa disposição dos elementos e uso apropriado de CSS.
4. Uso de Bibliotecas Externas: Avaliação do uso adequado de bibliotecas recomendadas e sua implementação correta.
5. Acessibilidade e Semântica: Verificar se foram seguidas as boas práticas de acessibilidade e uso de tags semânticas no HTML.

---

Voltar ao Topo

Visão Geral da Página

Voltar ao Topo

Sabores Autênticos

Uma breve descrição do projeto.

Important

No projeto foi utilizado Bootstrap apenas no Header e Tailwind em todas as seções.
Metatags Open Graph: foi incluído boas práticas de metatags para otimização de redes sociais, como og:title, og:description, e og:image, o que ajuda a melhorar a forma como a página é compartilhada.

A página exibida é uma landing page de restaurante chamada "Sabores Autênticos", projetada para apresentar informações sobre o estabelecimento e seus serviços de maneira organizada e visualmente atraente.

Estrutura da Página:

• Seção Inicial:
  Um banner em destaque com a chamada "Descubra O Sabor Da Nossa Comida" e um botão de chamada para ação.
  
• Sobre Nós: Apresenta a história do restaurante, valores e equipe, com imagens de alta qualidade e ícones para destacar as informações.
  
• Nossa Especialidade: Destaque para os pratos especiais, mostrando uma variedade de itens como hambúrgueres, pizzas, sobremesas e bebidas.
  
• Pratos Mais Populares: Galeria de pratos com preços e botões de ação para fazer um pedido.
  
• Nossos Serviços: Uma seção que destaca os principais serviços oferecidos pelo restaurante, como qualidade de comida, rapidez no atendimento e opções de entrega.
  
• Depoimentos de Clientes: Exibe avaliações de clientes satisfeitos, cada uma com uma foto e um breve comentário.
  
• Peça Agora: Formulário de contato para realizar pedidos, com campos para nome, e-mail e mensagem.
  
• Rodapé: Inclui links para redes sociais, informações da empresa, links úteis e opções de loja online, finalizando com os direitos autorais.
  
• A página possui um design moderno e organizado, usando cores e imagens para criar um ambiente convidativo e fácil de navegar.
  

Voltar ao Topo

Como Visualizar o Projeto Localmente

1. Clone o repositório:

    git clone https://github.com/seu-usuario/nome-do-repositorio.git
   

2. Navegue até o diretório do projeto

    cd nome-do-repositorio
   

3. Instale as dependências do projeto

   npm install
   

4. Inicie o servidor local

   npm start

5. Acesse o projeto no seu navegador: O projeto estará disponível em: http://localhost:3000.

Voltar ao Topo

APIs Utilizadas

• API Local (data.json):
  No projeto, foi criado um servidor Express para servir tanto arquivos estáticos na pasta public (HTML, CSS e JavaScript) quanto uma API interna chamada data.json, que fornece dados específicos para a aplicação. Esta API, disponível em: https://landingpage-restaurante-three.vercel.app/api/data, foi deployada na Vercel e configurada utilizando o arquivo de ambiente vercel.json, que define as rotas e endpoints necessários para seu funcionamento.

  A API complementa as seções "Home", "Sobre Nós", "Nossa Especialidade", "Nossos Serviços" e "Depoimentos de Clientes" da Landing Page, injetando os dados diretamente no conteúdo, tornando o site mais dinâmico e fácil de atualizar.

  EmailJS: Utilizado para integrar o serviço de envio de e-mails diretamente do front-end, permitindo que formulários enviem dados para uma conta de e-mail sem necessidade de backend.

Configuração do vercel.json

O arquivo vercel.json serve para dizer à Vercel como direcionar as rotas. Segue a estrutura do arquivo:

{
"version": 2,
"builds": [
  {
    "src": "server.js",
    "use": "@vercel/node"
  }
],
"routes": [
  {
    "src": "/api/(.*)",
    "dest": "/server.js"
  },
  {
    "src": "/(.*)",
    "dest": "/server.js"
  }
]
}

Bibliotecas Externas Utilizadas

• Bootstrap (v5.3):
  Um framework front-end que facilita o desenvolvimento de layouts responsivos com uma coleção de estilos CSS e componentes JavaScript.

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
      crossorigin="anonymous"
    />

    <!-- Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

• Tailwind CSS (Swiper v11):
  Biblioteca usada para criar carrosséis e sliders interativos, fornecendo recursos avançados de navegação e animação.

    <!-- Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />

    <!-- Tailwind JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

• AOS (Animate On Scroll):
  Uma biblioteca que adiciona animações visuais quando os elementos entram em foco durante o scroll, melhorando a experiência do usuário.

    <!-- AOS CSS -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    <!-- AOS JS -->
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

• EmailJS:
  Uma biblioteca que permite integrar o serviço de envio de e-mails diretamente do front-end, permitindo que formulários enviem dados para uma conta de e-mail sem necessidade de backend.

    <!-- EmailJS -->
    <script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>

• Swiper:
  Uma biblioteca avançada para criação de sliders e carrosséis com suporte a navegação por toques, ideal para sites responsivos.

<!-- Swiper CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<!-- Swipper -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

• Fonte UniSans:
  A fonte UniSans é uma fonte personalizada incluída no projeto através da regra @font-face. Essa técnica permite que a fonte seja carregada diretamente de arquivos locais, garantindo que ela seja aplicada uniformemente em diferentes dispositivos, independentemente de o usuário ter essa fonte instalada em seu sistema.

@font-face {
 font-family: "UniSans";
 src: url("../fonts/Uni\ Sans\ Regular.woff") format("woff"),
      url("../fonts/Uni\ Sans\ Light.woff") format("woff"),
      url("../fonts/Uni\ Sans\ Bold.woff") format("woff"),
      url("../fonts/Uni\ Sans\ Bold\ Italic.woff") format("woff"),
      url("../fonts/Uni\ Sans\ Book.woff") format("woff"),
      url("../fonts/Uni\ Sans\ Book\ Italic.woff") format("woff"),
      url("../fonts/Uni\ Sans\ Medium.woff") format("woff"),
      url("../fonts/Uni\ Sans\ Medium\ Italic.woff") format("woff");
}