Landing page for an online exam-prep school

The task

An online school prepares high-school students for the national math exam and sells to two audiences at once: parents pay, teenagers study. The parent needs transparency and proof of results; the teenager needs to be talked to as an equal, without condescension. The page has to walk both to a free diagnostic request and survive the hardest question in this niche: how do you back up the score you promise. A demo project: the school, Profil80, is fictional, the brief is real.

The solution

• The visual language is a smart notebook: warm paper tones, a grid-paper background, math formulas as SVG decorations in the margins, marker-style underlines beneath key numbers. No cartoons, no stock photos of happy schoolchildren.
• The diagnostic form sits right in the hero: zero clicks to reach it. A second form closes the page.
• Instead of a single average score, a distribution chart puts the school next to the national results: one number can mislead, a distribution is visible in full.
• The price calculator derives the course cost from the actual plan rates and compares it with a private tutor using the range quoted in the page copy, not a number pulled out of thin air.
• Before layout, the copy went through an edit with a registry of numbers: every figure cross-checked against the rest, arithmetic conflicts removed, and a teachers section added - without it the claimed 1400 graduates looked implausible.

Details that are easy to miss

• The form collects a minor’s data, so consent comes from the legal guardian: a required checkbox with its own error text, and the request does not leave without it.
• The phone mask follows the browser language: +7 for Russian-speaking visitors, +1 for everyone else.
• The chart is an inline SVG with an aria-label where every number is duplicated as text: a screen reader can read the graph.
• Counters and section reveal animations are disabled under prefers-reduced-motion.
• No build step: plain HTML, CSS and vanilla JS, the page opens from disk with a double click. The _headers file sets noindex and the footer marks the materials as a demo, so the page never competes in search with real schools.

What to check in the demo

Every number above can be verified on the pages themselves: the 11 sections and both forms live on the landing page, the calculator reprices the course on the fly, and the score chart is duplicated as text for screen readers. Images load lazily, in WebP with a JPG fallback, in two sizes for different screens.