Como objetivo principal do desafio, criar uma Landing Page apresentando um produto que resolvesse o seguinte problema: "Explique por que as empresas devem ter a acesso e serem clientes da HubLocal", com base nesse problema resolvi criar o lançamento de um aplicativo de celular, visto que atualmente existem muitos usuários de mobile(realizei algumas pesquisas e a HubLocal não possui nenhuma aplicação mobile), tive contato pela primeira vez com TypeScript e configurando o ESLint com o EditorConfig.
Contando um pouco o processo do Design, eu tentei dar uma atenção a mais, já que é uma ferramente que eu estou estudando atualmente, pela falta de tempo só consegui explorar a parte da paleta de cores, desenvolvi tudo no Figma.
Inicialmente esboçei um Wireframe com algumas ideias, após o Wireframe feito, pensei um pouco sobre as cores e cheguei na decisão de manter a paleta da própria HubLocal (Azul e verde). Depois dei uma refinada no design desenvolvendo duas variações Desktop e Mobile.
- React.js
- Next.js
-
Header:
- Contendo um header simples com um menu de navegação e um CTA para o usuário baixar o aplicativo.
-
Hero:
- Simples contendo apenas informações necessárias também com um CTA.
- Uma foto fullscreen passando um tom agradável.
-
Cards Diferenciais:
- Contem 3 cards com alguns cases importantes.
- No mobile ele vira um slide utilziando a biblioteca React slideshow image.
-
Cases:
- Alguns cases dando mais informações sobre o aplicativo.
- Um padrão de landing page imagem/texto com um CTA levando o usuário para um ponto especifico.
-
Banner CTA:
- Um banner com um CTA explicando as duas plataformas de download.
-
Dúvidas frequentes (FAQ):
- Possui um Accordion simples utilizando o Material UI.
-
Planos:
- Alguns 'planos' para usuários desbloquar mais ferramentas do aplicativo.
-
Footer:
- Footer simples intencionalmente, com alguns links importantes e as redes sociais, impedindo a poluição visual.
Não consegui alcançar o 100% de 'Accessibility' por causa do pacote de slide
Visite o site: CLICANDO AQUI!
