Overview
IronLogic is a landing page for a fitness meal catering service in Indonesia. The target audience is specific: men who want to gain muscle but don’t have the time or knowledge to calculate macros and prep their own meals every day.
The page isn’t just a product showcase. It’s a 6-section psychological funnel that walks visitors through a journey: identify their problem, calculate their actual calorie needs with an interactive tool, see social proof, and convert through WhatsApp. Every design choice serves that conversion path.
I built this to demonstrate what a high-converting Indonesian landing page looks like when you treat it as a sales funnel rather than a brochure.
Challenge
The Indonesian fitness catering market has a gap. The services exist, but the websites representing them feel like afterthoughts. Specifically:
- Most catering landing pages in the Indonesian market are static, slow, and look outdated. They don’t hold attention or build trust with fitness-minded customers who expect a premium feel
- Potential customers have no idea what their actual calorie needs are, so they can’t evaluate meal plans with any confidence
- Mobile users make up the majority in Indonesia. Pages that aren’t mobile-first lose them within seconds
- There’s no interactive element on any competitor page. Visitors scroll, read, and leave without engaging
Solution
Conversion-Driven Storytelling
I structured the page as a 6-section funnel: Hook, Agitation, Solution, Interactive Demo, Social Proof, and Offer. Each section uses a different layout rhythm (left-aligned, right-aligned, centered) to prevent scroll fatigue and keep the eye moving.
- A floating WhatsApp CTA stays visible throughout the page, with pre-filled messages customized to match whichever section the visitor is currently reading
- Copy follows a problem-agitate-solve framework rather than listing features
Interactive Calorie Calculator
This is the centerpiece of the page. I built a full BMI, BMR (Mifflin-St Jeor equation), and TDEE calculator with Zod schema validation.
- Visitors input their stats and get a personalized daily calorie target with a macro breakdown (protein, carbs, fat)
- A one-click CTA sends a pre-filled WhatsApp message containing their calculated data, so the business receives a qualified lead with context instead of a generic “Hi, I’m interested”
Responsive and Optimized
The entire page is mobile-first, not adapted from desktop as an afterthought.
- All 6 sections, navbar, and footer are designed for small screens first, then scale up
- Animated mobile hamburger menu with smooth height transitions
- Monthly/quarterly pricing toggle with a calculated 15% discount display
Results
- User engagement → Interactive calculator captures attention and generates personalized data visitors can act on immediately
- WhatsApp conversion paths → 3 context-specific entry points with pre-filled messages, replacing a single generic link
- Animation system → 8 reusable primitives applied consistently across 23 components, replacing scattered one-off animations
- Mobile experience → Mobile-first responsive design with animated mobile menu, not a desktop-first afterthought
