Overview
IronLogic is a conversion-focused landing page for a fitness meal catering service targeting Indonesian men who struggle to gain muscle mass. The page takes visitors through a 6-section psychological funnel (identify the problem, interactive calorie calculator, pricing) and converts them via WhatsApp.
Challenge
- Indonesian fitness enthusiasts have limited local options for macro-calculated meal prep services with an online presence that feels premium, not generic
- Most catering landing pages in the Indonesian market are static, slow, and feel outdated. They don’t hold attention or build trust
- Potential customers don’t know their actual calorie needs, so they can’t make a confident buying decision
- Mobile users (the majority in Indonesia) often bounce from pages with poor responsiveness or slow load times
Solution
Conversion-Driven Storytelling
- 6-section psychological funnel: Hook, Agitation, Solution, Interactive Demo, Social Proof, Offer
- Every section uses a distinct layout rhythm (left-aligned, right-aligned, centered) to prevent scroll fatigue
- Floating WhatsApp CTA button always visible, with pre-filled messages customized per context
Interactive Calorie Calculator
- Full BMI, BMR (Mifflin-St Jeor equation), and TDEE calculator with Zod schema validation
- Outputs personalized daily calorie target and macro breakdown (protein, carbs, fat)
- One-click “Get Meal Plan for X calories” CTA that sends pre-filled WhatsApp message with the user’s calculated data
Responsive & Optimized
- Mobile-first design across all 6 sections, navbar, and footer
- Animated mobile hamburger menu with smooth height transitions
- Monthly/quarterly pricing toggle with calculated 15% discount display
Results
- User engagement tool: None → Interactive calculator captures attention and generates personalized data
- WhatsApp conversion paths: 1 generic link → 3 context-specific entry points with pre-filled messages
- Animation system: Per-component one-offs → 8 reusable primitives, consistent across 23 components
- Mobile experience: Desktop-first afterthought → Mobile-first responsive design with animated mobile menu
