https://github.com/renan1102/desafio_ls

https://github.com/renan1102/desafio_ls

nextjs responsive styled-components styleguide typescript

Last synced: 17 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/renan1102/desafio_ls
• Owner: Renan1102
• Created: 2024-09-07T20:28:57.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-17T17:08:37.000Z (2 months ago)
• Last Synced: 2024-10-10T17:22:04.403Z (about 1 month ago)
• Topics: nextjs, responsive, styled-components, styleguide, typescript
• Language: CSS
• Homepage: https://desafio-ls.vercel.app
• Size: 248 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Desafio Lacrei Saúde

## [Clique aqui para ver <-](https://desafio-ls.vercel.app/)

## Descrição

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.


## Construção com:

- TypeScript e feito em Next.JS

- Style-Components;

- Style guide a ser seguido;

- Responsividade.

## 1.Planejamento e Design

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.

## 2. Desenvolvimento do Header

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).

## 3. Desenvolvimento do Footer

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.

## 4. Desenvolvimento do Conteúdo Principal

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.

## 5. Testes e Validação

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.

## 6. Deploy

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.