ManiProtein
Building a landing page for an innovation project
Landing page for ManiProtein, a plant-based protein made from cassava that won Inovathon FIMAN 2025. I built the website's interface and code; the product idea and the pitch were developed by the team.
- Type
- Landing page for an innovation project
- My role
- Interface and front-end development
- Team
- 5 members
- Result
- 1st place at Inovathon FIMAN 2025
Problem and goal
The problem
At FIMAN's Inovathon, the team created ManiProtein: a plant-based protein made from cassava that is vegan, gluten-free, lactose-free and free of common allergens. The idea needed an online presence that explained it clearly and felt credible to the judges and to potential partners.
The website's goal
Present the product, the innovation, its benefits and the team on a short page that supported the pitch and ended with a direct way to get in touch.
My role
What I did
I built the landing page: section structure, layout, styling and the JavaScript for the contact form and animations. I also published the site and helped structure the team's pitch.
What was a team effort
The product concept, the research and the pitch were developed by the five-person team. First place at the Inovathon is a team result.
Technologies
- HTML5
- CSS3
- JavaScript
- Boxicons
- Git & GitHub
Structure and features
The page follows the order in which a visitor needs to understand the idea:
- HeroAnimated headline and two calls to action: explore the innovation or contact the team.
- InnovationResearch, production and sustainability in three short cards.
- BenefitsThe product's key benefits, also in three cards.
- TeamAll five members, with photos and links.
- ContactA form that opens the team's email, already filled in.
- Animated headline that cycles through the product's attributes using CSS only.
- Scroll-triggered entrance animations with
IntersectionObserver. - Contact without a backend: name and message become a ready-to-send email.
- Navigation menu with shortcuts to each section.
Technical decisions
- HTML, CSS and JavaScript, no framework. A static page is quick to build within a competition deadline and simple to publish.
- The main effect is CSS-only. The animated headline doesn't depend on JavaScript to work.
- Animate only what's visible.
IntersectionObserveravoids animating content the visitor can't see yet. mailtoinstead of a server. Contact works with no backend, no cost and no visitor data stored.
Challenges and solutions
Too many attributes to communicate up front
Vegan, lactose-free, gluten-free, allergen-free and affordable: all important, but a long list at the top loses impact.
A rotating headline
The “ManiProtein é…” (“ManiProtein is…”) headline loops through the attributes with a CSS animation, highlighting one at a time without taking up more space.
Technical content for any audience
Research, the production process and sustainability had to make sense to people unfamiliar with the subject.
Short cards with icons
The Innovation and Benefits sections use three cards each — an icon, a title and one sentence — so they can be scanned quickly.
Contact without a server
The site is static and was built during a competition, with neither the time nor the need for a backend.
A pre-filled email with JavaScript
The form validates the name and message, then opens an email compose window with the recipient, subject and text already filled in.
Verifiable results
- 1st place at Inovathon FIMAN 2025, won by the team.
- Landing page live at maniprotein.felipezfroes.com (in Portuguese).
- Public source code on GitHub.
What I learned
- Turning a technical proposal into a page anyone can understand.
- Shipping fast during a competition by prioritizing what supports the pitch.
- Solving a requirement (contact) with plain JavaScript and no extra infrastructure.
- Aligning the website with the pitch while working in a multidisciplinary team.
Gallery
