Nesse projeto, nosso objetivo é criar uma Landing Page, ou seja, um site de apenas uma página cujo objetivo é atrair clientes e despertar curiosidade e interesse nos serviços e/ou produtos de uma empresa. Durante a construção desse site, serão estudados e praticados os seguintes conteúdos:
- HTML
- CSS
- Flex
- Grid
- DOM
Você deverá desenvolver uma Landing Page para uma das empresas fictícias apresentadas.
Lembre-se: a Landing Page é a primeira página de um site institucional e deve ter apenas uma página html com seções diferentes, ser atrativa para clientes, fornecendo informações sobre a empresa e seus produtos/serviços.
As empresas fictícias vão desde um banco digital a uma empresa de seguros, passando por um serviço de aluguel de repúblicas para estudantes universitários e uma plataforma de crédito para pessoas empreendedoras de periferia.
É importante que a página seja construída com criatividade, então não se limite às características fornecidas sobre as empresas fictícias. Para ajudar no desenvolvimento da página, foram disponibilizadas referências de outras Landing Pages; use-as como inspiração!
Empresas fictícias
O F4Bank é um projeto de um grande banco público brasileiro para competir com as startups que tem surgido, como Nubank, Banco Inter e Banco Neon. Você precisa criar uma landing page que comunique, além da proposta do banco, os produtos "Cartão sem taxa" e "Conta corrente digital", reforçando a segurança de um banco tradicional com décadas de história no país.
O 4Food é um projeto de uma grande rede de supermercados que está buscando se digitalizar e criar um sistema de compras e entregas recorrentes por aplicativo. Você precisa criar uma landing page que comunique a velocidade e praticidade da solução, destacando a possibilidade de realizar (i) compras de supermercado online e (ii) compras de comidas prontas com uma frequência semanal.
4Comfort é uma nova empresa cuja proposta é oferecer o tênis mais confortável possível. Seguindo modelos americanos como Allbirds e Atom, o tênis é voltado para um público que trabalha em ambientes casuais (startups, empresas de tecnologia, escritórios modernos etc.) e se destaca por ser vendido exclusivamente online.
F4Life é uma empresa de aluguéis de repúblicas para pessoas universitárias. Similar aos modelos de Quinto Andar e Loft, a empresa realiza reformas e prepara moradias para recepção de pessoas universitárias em um ambiente específico e otimizado para a vida de graduação. Você precisa criar uma landing page que chame a atenção de pessoas que estão na graduação e ofereça os produtos "moradia compartilhada" e "kitnets".
A Upfour é uma empresa que fornece crédito para moradores da periferia começarem seu próprio negócio. Similar a modelos como Creditas, mas concentrado apenas em moradores de periferia, a empresa oferece dois serviços: (i) crédito pessoal ; (ii) sistema de controle e orientação financeira. Você precisa construir um site capaz de atingir esse público em específico, reforçando a oportunidade de mudança de vida e de tornar-se protagonista em seu contexto social.
A Log4 é uma empresa de uma grande varejista que, após liderar o mercado de móveis, cama, mesa e banho, resolveu entrar no mercado puro de logística para competir com empresas como Loggi e MadeiraMadeira. Seus dois principais produtos são (i) a distribuição rápida de itens pequenos via motoboys/ciclistas e (ii) a distribuição rápida de móveis ou itens de grande tamanho. Você precisa criar um site capaz de comunicar a tradição e confiança do grupo varejista, mas também se posicionar como uma nova solução de tecnologia que traz velocidade aos clientes.
A 4Cars é uma empresa que tem surfado na onda dos apps de motoristas. Sua proposta é oferecer carros para serem alugados por motoristas a um custo razoável, aumentando a oportunidade para quem não têm dinheiro para comprar um carro. Seus concorrentes atuais são empresas tradicionais, como Localiza, e startups, como Kovi. Você tem duas linhas de produto: (i) carros populares e (ii) transporte de luxo. Você precisa criar um site capaz de comunicar modernidade e baixo custo, se posicionando como uma plataforma totalmente digital e de fácil acesso para motoristas jovens que estão buscando entrar nesse mercado.
A 4Safe é uma empresa focada na digitalização dos produtos de seguridade. Sua proposta é oferecer seguros de vida, de carro e outros para clientes jovens que não gostam da burocracia das seguradoras tradicionais (ex: Porto Seguro). Você tem duas linhas de produto para desenvolver: (i) seguro de vida e (ii) seguro de carro. É importante comunicar um tom jovem, mas, ao mesmo tempo, passando bastante segurança para seus clientes, dada a natureza do produto.
A sua Landing Page deve conter:
-
Uma seção inicial ou principal: Esta é a seção que visitantes vêem primeiro quando acessam seu site.
-
Logomarca: A logomarca fornecida pelo cliente, que deve ser apresentada de forma clara e em um local estratégico da página.
-
Paleta de cores: Uma paleta de cores baseada na logomarca fornecida pelo cliente.
-
Cabeçalho e Rodapé: O cabeçalho deve conter informações importantes sobre a sua empresa, como botões de navegação e opções de contato. Já o rodapé pode incluir informações adicionais, como endereço e links de redes sociais.
-
Redes Sociais: Incluir pelo menos 2 ícones para redes sociais, visíveis e clicáveis.
-
Formulário de Contato: Inclua um formulário de contato para que os visitantes possam se comunicar com a empresa fictícia. O formulário deverá solicitar, no mínimo, um e-mail para contato. (veja um exemplo nesse vídeo: https://coda.io/d/_duQBJ-J3TJr/Funcionalidades_suFtt#_lu2rX)
-
Responsividade: Sua landing page deve ser responsiva e adaptável a diferentes tamanhos de tela, como smartphones e desktops. Além disso, é importante testar sua landing page em diferentes dispositivos, como o iPhone 6/7/8 para a versão mobile, e em uma tela de 1280px de largura para a versão desktop.
-
Botões: Todos os botões devem estar funcionando com alguma lógica javascript.
-
Seções: Conter, pelo menos, 2 seções diferentes.
Sugestões de Seção (você não precisa se limitar a elas)
* Quem somos * Nossos produtos/serviços * Contato * Nosso time * Trabalhe conosco * Cases de sucesso * Onde estamos * FAQ/Perguntas Frequentes * Promoções -
Deploy: O site deve estar publicado na internet através do surge ou outra ferramenta.
- Faça o fork desse repositório e realize o clone da sua cópia
seu-nome-de-usuario/projeto-landing-page.Quer uma dica?
- Crie os arquivos do projeto dentro deste repo;
- Lembre-se de abrir os PRs para seu próprio repositório.
- Para isso, você precisará fazer o projeto utilizando branches. Não faça as alterações direto na branch
main!
- Crie o surge do seu projeto e pegue o link da publicação(deploy);
- Adicione o link do surge no README do seu projeto;
- Tire print das páginas do seu projeto, na versão desktop e mobile e cole no README;
- Abra um novo Pull Request (PR) com a frase PR para correção. Caso não saiba como fazê-lo, assista a esse vídeo.
- Envie o link do seu PR e do surge no formulário de entrega.