Landing Page - Projeto Netuno

Este repositório contém o código-fonte de uma landing page desenvolvida como parte de um desafio técnico. A landing page foi criada utilizando um design fornecido no Figma.

Instruções de Instalação e Execução

Pré-requisitos

• Navegador web (Chrome, Firefox, Edge, etc.)
• Git (opcional, para clonar o repositório)

Clonando o Repositório

Para rodar o projeto em um ambiente local, siga os passos abaixo:

1. Clone o repositório:

           
   `git clone https://github.com/ligiastalves/lp_projetonetuno.git` 
   

2. Navegue até a pasta do projeto:

           
   `cd lp_projetonetuno` 
   

3. Abra o arquivo index.html em seu navegador de preferência para visualizar a landing page.

Visualização Online

Você também pode visualizar e testar o site diretamente através do link hospedado na plataforma Vercel:

https://lp-projetonetuno.vercel.app/

Explicação das Tecnologias Utilizadas

HTML e CSS

O site foi desenvolvido usando HTML para estruturar o conteúdo e CSS para estilizar a página.

• HTML: Escolhi HTML por ser a linguagem padrão para estruturação de páginas web, proporcionando uma base sólida para criar layouts bem organizados.
• CSS: CSS foi utilizado para estilizar os elementos da página, como cores, fontes, margens e posicionamento. Optei por não utilizar frameworks frontend como Bootstrap, pois ainda estou me aprofundando no aprendizado dessas tecnologias. Todo o estilo foi personalizado para atender ao design fornecido.

Essas tecnologias foram escolhidas pela sua simplicidade, capacidade de customização e pelo fato de que me permitiram aplicar os conhecimentos adquiridos em projetos anteriores, caso haja interesse podem ser vistos aqui em meu github.

Descrição dos Desafios Enfrentados

Manipulação de Imagens do Figma

Um dos principais desafios foi trabalhar com as imagens extraídas do Figma. Como não tinha experiência anterior com essa ferramenta, tive dificuldades para exportar as imagens corretamente, especialmente aquelas com múltiplas camadas (sombra, elementos adicionais). As imagens não apareciam no site conforme esperado.

Solução

Para resolver esse problema, optei por recriar as imagens utilizando o Canva, uma ferramenta que já domino e que é gratuita. Essa solução me permitiu alcançar um resultado visual semelhante ao design original. Especificamente, refiz as imagens da página inicial (dos jovens estudantes), da seção "O Projeto" e da seção "Os Problemas".

Padronização de Ícones na Seção "Sua Jornada"

Outro desafio foi padronizar os ícones na seção "Sua Jornada". Havia ícones de tamanhos variados, como 54px por 54px e 54px por 36px, o que resultava em uma aparência desproporcional.

Solução

Decidi padronizar todos os ícones, também utilizando o site Canva, deixando todas na medida 54px por 54px, garantindo uma aparência uniforme e mais próxima ao design fornecido.

Possíveis Melhorias

Dada mais disponibilidade de tempo, algumas melhorias que eu gostaria de ter implementado são:

• Integração com Firebase: Implementar um script que conecte o formulário da landing page a um banco de dados Firebase, permitindo que os dados submetidos sejam armazenados e gerenciados. Isso aumentaria a funcionalidade da página, tornando-a mais interativa.

• Uso de Frameworks Frontend: Com mais tempo para aprender e aplicar frameworks como Bootstrap ou Tailwind CSS, o desenvolvimento poderia ser mais rápido e o design mais consistente, especialmente em termos de responsividade.

• Otimização de Imagens: Melhorar a qualidade das imagens exportadas do Figma, utilizando ferramentas mais adequadas para esse processo. Isso poderia resultar em um design final ainda mais fiel ao original.