Landing Page

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

Enunciado

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

Projeto F4Bank

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.

Logo aqui

Projeto 4Food

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.

Logo aqui

Projeto 4Comfort

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.

Logo aqui

Projeto F4Life

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

Logo aqui

Projeto Upfour.

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.

Logo aqui

Projeto Log4

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.

Logo aqui

Projeto 4Cars

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.

Logo aqui

Projeto 4Safe

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.

Logo aqui

O enunciado completo está no Sistema do Estudante, na sessão de Projetos.

Lista de requisitos

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.

Instruções para preparar o seu repositório

• 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!

Instruções de entrega

1. Crie o surge do seu projeto e pegue o link da publicação (deploy).

2. Edite o README do seu projeto:

   1. Remova o texto existente no README.
   2. Adicione o título do seu projeto.
   3. Inclua o link do Surge para acesso ao projeto.
   4. Descreva as funcionalidades principais do projeto.
   5. Adicione capturas de tela das páginas do projeto nas versões desktop e mobile, e insira-as no README.

3. Faça um commit com a frase “[documentação] criei a descrição do projeto”.

4. Abra um novo Pull Request (PR) com a frase “PR para correção”.

5. Clique em Merge Pull Request para enviar todas as suas alterações para a branch main.

6. Copie o link do Pull Request e o envie o link do seu PR no formulário de entrega.