Landing page for a renovation company

The task

SmetaFix is a Moscow company that renovates apartments on a fixed-price estimate. A demo project: the company is fictional, the brief is real. A client in this niche fears three things: the estimate grows by half mid-project, the renovation drags on, the crew vanishes with the prepayment. The page has to answer each fear with evidence and lead the visitor to a free measurement request.

The solution

• The visual language is an engineering blueprint: visible 1px borders, a graph-paper background, dimension lines next to key figures, section numbers 01/, 02/. Prices are set in monospace JetBrains Mono. No stock photos of builders in hard hats.
• The hero is split: the offer on the left, a calculator framed as a drawing title block on the right. The estimate is reachable without scrolling - the main scenario of the niche.
• The calculator computes a price range entirely in the browser: floor area, renovation type, six add-ons. Nothing goes to a server, and the page says so plainly.
• Before layout, the copy went through an audit: 19 findings, 8 of them critical - numbers contradicting each other across sections, promises a static page cannot keep, legal risks such as publishing third-party contacts.

Details that are easy to miss

• Forms do not submit without a required consent checkbox; the privacy policy is a separate page next to the landing, not a dead link.
• The phone mask follows the browser language: +7 format for Russian-speaking visitors, +1 for everyone else. Validation counts digits, errors appear as text under the field.
• Every number on the page sits in a single registry and is cross-checked: 540 finished apartments over 11 years, 97% on-time delivery and 16 penalty payouts do not contradict each other.
• The footer and a dedicated page state directly that the company details are fictional and this is a demo. The page never pretends to be a real business.
• No build step: the landing opens straight from disk. Images are WebP with a JPG fallback in up to three widths, lazy-loaded below the first screen, and animations respect prefers-reduced-motion.

The numbers

Every figure on the tiles above is verifiable against the demo sources: pages and sections from the markup, stages and photos from the gallery files, calculator options from the page code. Images load lazily, each at the width the screen actually needs.