Este projeto consiste no desenvolvimento de duas páginas web interativas para a Lacrei Saúde, utilizando Next.js. O objetivo é demonstrar a criação de uma interface responsiva, com um header e footer estilizados, e conteúdo principal junto com botões de navegação funcionais.
- TypeScript e feito em Next.JS
- Style-Components;
- Style guide a ser seguido;
- Responsividade.
Antes de iniciar o desenvolvimento, revisei o guia de estilo da Lacrei Saúde para garantir que o projeto estivesse alinhado com a identidade visual da marca. O foco foi criar uma experiência de usuário coesa e atraente.
O primeiro passo foi desenvolver o cabeçalho (header) da página. O header inclui:
- Ícone ilustrativo: Colocado no canto esquerdo do cabeçalho.
- Botões de Navegação: Centralizados, incluindo links para as páginas principais: Home, Quem somos, Propósito, e About.
- Barra de Pesquisa: Localizada no canto esquerdo, para facilitar a pesquisa no site (decorativo).
O footer foi projetado para fornecer informações adicionais e links importantes, como:
- Contato da Lacrei Saúde.
- Links para redes sociais.
- Informações de copyright.
O conteúdo principal foi adicionado após o desenvolvimento do header e footer. Utilizei imagens para destacar informações importantes e tornar a página mais visualmente atraente. Adicionei também botões que redirecionam para conteúdos úteis no site da Lacrei Saúde, como:
Visite a lacrei saúde: Link para a página principal da Lacrei Saúde. O que nos motiva: Link para a página sobre os valores da Lacrei Saúde. Saber mais +: Direcionamente para a segunda página que contém um texto e imagem sobre o propósito da Lacrei Saúde.
Realizei testes de responsividade para garantir que o site funcionasse bem em diferentes tamanhos de tela.
Além disso, utilizei o Jest para implementar testes simples e validar o funcionamento do código.
Após a conclusão do desenvolvimento e testes, o projeto foi implementado e está disponível para acesso público. O link para a aplicação ao vivo pode ser encontrado aqui.