Landing page for an online fitness coach

The task

An online weight-loss coaching program: home workouts from 30 minutes, meals from regular groceries, a weekly plan review. The niche is worn out by “lose 10 kg in a week” promises, so trust is the scarce resource. What the page sells is not the program itself but a free 30-minute consultation, and it has to earn that request from a visitor who has been let down by diets before. A demo project: the coach is fictional, the brief is real.

The solution

The look is a sports app, not a glossy magazine: white background with dark inset sections, a coral accent, lime reserved for results, large numbers, diagonal section dividers. No before-and-after photos and no shaming copy: in this niche they are a legal risk, and they repel the very people who were already promised a miracle once.

• A calorie and BMI calculator built on the Mifflin-St Jeor formula recalculates on every input: daily calories, BMI on a scale, maintenance calories, a comfortable weekly loss pace and a healthy weight range for the given height.
• The result text depends on the BMI range: three variants, and each one points to the free consultation instead of scaring with a number.
• Case studies are laid out as tracker screens: point A, timeframe, point B. Every story’s pace sits in the same 2.0-2.7 kg per month range, so the numbers agree with each other.
• Plans for 1, 3 and 6 months have identical contents and differ only in duration; on mobile the popular card centers itself in the scroller.
• One conversion point: a request form with a name, a contact and the goal in a few words. The contact field accepts a phone number or a Telegram handle.

Details that are easy to miss

• The calculator refuses to do harm: inputs are limited to 16-90 years, 140-220 cm and 40-250 kg, and the daily target never drops below 1200 kcal for women and 1500 for men, whatever the computed deficit.
• The calculator result is announced to screen readers via aria-live; prefers-reduced-motion turns off reveal animations and smooth scrolling.
• Form validation: errors as text under the field, aria-invalid, focus moves to the first invalid field. Consent to personal data processing is a required checkbox linking to the policy page.
• The phone format hint follows the browser language: +7 for Russian-speaking visitors, +1 for everyone else.
• Demo hygiene: a “not medical advice” note in the footer, “results vary” under the case studies, a separate disclaimer page, and noindex both in the meta tag and in HTTP headers, so the page never competes with real coaches in search.
• No build step, no dependencies: the page opens from disk with a double click.

The numbers

Every figure on this page can be verified against the demo sources: sections and pages from the markup, calculator indicators and result variants from the code. Images ship as WebP with a JPG fallback, up to three sizes, lazy-loaded.