ManiProtein
Desenvolvimento de landing page para um projeto de inovação
Landing page do ManiProtein, proposta de proteína vegetal feita a partir da mandioca que venceu o Inovathon FIMAN 2025. Construí a interface e o código do site; a ideia do produto e o pitch foram desenvolvidos pela equipe.
- Tipo
- Landing page de projeto de inovação
- Meu papel
- Interface e desenvolvimento front-end
- Equipe
- 5 integrantes
- Resultado
- 1º lugar no Inovathon FIMAN 2025
Problema e objetivo
O problema
No Inovathon da FIMAN, a equipe criou o ManiProtein: uma proteína vegetal feita a partir da mandioca, vegana, sem glúten, sem lactose e sem alergênicos comuns. A proposta precisava de uma presença digital que explicasse a ideia com clareza e passasse credibilidade para a banca e para possíveis parceiros.
O objetivo do site
Apresentar produto, inovação, diferenciais e equipe em uma página curta, que funcionasse como apoio ao pitch e terminasse em um caminho direto para contato.
Minha participação
O que eu fiz
Desenvolvi a landing page: organização das seções, layout, estilos e o JavaScript do formulário de contato e das animações. Também publiquei o site e apoiei a estruturação da apresentação da equipe.
O que foi coletivo
A proposta do produto, a pesquisa e o pitch foram construídos pela equipe de cinco integrantes. O 1º lugar no Inovathon é um resultado do grupo.
Tecnologias
- HTML5
- CSS3
- JavaScript
- Boxicons
- Git e GitHub
Estrutura e funcionalidades
A página segue a ordem em que um visitante precisa entender a proposta:
- InícioTítulo animado e duas chamadas: conhecer a inovação ou falar com a equipe.
- InovaçãoPesquisa, produção e sustentabilidade em três cards curtos.
- DiferenciaisOs benefícios do produto, também em três cards.
- EquipeOs cinco integrantes, com foto e links.
- ContatoFormulário que abre o e-mail da equipe já preenchido.
- Título animado que alterna os atributos do produto, só com CSS.
- Animações de entrada ao rolar, com
IntersectionObserver. - Contato sem backend: nome e mensagem viram um e-mail pronto para enviar.
- Menu de navegação com atalhos para cada seção.
Decisões técnicas
- HTML, CSS e JavaScript, sem framework. Uma página estática é rápida de construir no prazo da competição e simples de publicar.
- Efeito principal só com CSS. O título animado não depende de JavaScript para funcionar.
- Animação só quando aparece. O
IntersectionObserverevita animar o que o visitante ainda não está vendo. mailtoem vez de servidor. O contato funciona sem backend, sem custo e sem guardar dados de visitantes.
Desafios e soluções
Muitos atributos para comunicar logo de cara
Vegano, sem lactose, sem glúten, sem alergênicos e acessível: tudo importante, mas uma lista longa no topo perde força.
Um título que alterna
O título “ManiProtein é…” troca o atributo em loop com uma animação CSS, mostrando um destaque por vez sem ocupar mais espaço.
Conteúdo técnico para qualquer público
Pesquisa, processo de produção e sustentabilidade precisam ser entendidos por quem não conhece o assunto.
Cards curtos com ícones
As seções Inovação e Diferenciais usam três cards cada, com ícone, título e uma frase, para que a leitura seja rápida.
Contato sem servidor
O site é estático e foi feito em contexto de competição, sem tempo nem necessidade de criar um backend.
E-mail pré-preenchido com JavaScript
O formulário valida nome e mensagem e abre a janela de e-mail com destinatário, assunto e texto já preenchidos.
Resultados verificáveis
- 1º lugar no Inovathon FIMAN 2025, conquistado pela equipe.
- Landing page publicada em maniprotein.felipezfroes.com.
- Código público no GitHub.
Aprendizados
- Transformar uma proposta técnica em uma página que qualquer pessoa entende.
- Entregar rápido em contexto de competição, priorizando o que apoia o pitch.
- Resolver um requisito (contato) com JavaScript simples, sem infraestrutura extra.
- Alinhar o site ao pitch, trabalhando com uma equipe multidisciplinar.
Galeria
