Demo project

Landing page for a dental clinic

Implant options comparison, a quiz, and a medical disclaimer done right.

design and build · HTML · CSS · JS

Open demo

4 questionsquiz computes plan and price on screen
3 outcomesquiz result branches by tooth count
11sections on the landing page
4pages: landing plus service pages
20 photosclinic, doctors, steps, reviews
Demo first screen: Landing page for a dental clinic

The task

DentaPro is a dental clinic in Saint Petersburg with a single offer: a dental implant at one all-inclusive fixed price. A demo project: the company is fictional, the brief is real. Patients postpone implants for years over three fears: it is expensive, it hurts, and the price quoted on the phone doubles once you are in the chair. The page has to defuse each fear and lead to a free consultation booking with a CT scan.

The solution

  • One price across the whole page: 42,900 rubles repeats across the whole page and never diverges. The installment math checks out to the last ruble: 42,900 / 12 = 3,575 per month.
  • A comparison table, all-inclusive against an itemized price list with asterisks, answers the main fear: hidden extras.
  • A 4-question quiz recalculates the option, price and timeline right on screen: three branches by tooth count plus adjustments for how long ago the tooth was removed. The visitor gets a preliminary plan, not a bare phone-capture form.
  • The “it hurts” objection is handled without promising painlessness: medical advertising in this market cannot guarantee outcomes, so the copy honestly describes anesthesia and what recovery feels like.
  • The visual tone is clinical calm: the Fraunces serif, dark bands for the hero, the numbers block and the final CTA, teal with muted gold. The design guide bans red and close-up surgery shots.

Details that are easy to miss

  • Forms do not submit without a consent checkbox: it has its own error text, the phone field has a mask and a 10-digit check, and the invalid field gets aria-invalid and receives focus.
  • The quiz answer about chronic conditions is processed only in the browser and never enters the request: health information is a special category of personal data under local privacy law.
  • Legal hygiene of the niche: a contraindications disclaimer, a note that the clinic is fictional, a “not a public offer” clause, separate privacy and disclaimer pages.
  • No build step: static HTML, CSS and vanilla JS, the page opens straight from disk. The only external request is Google Fonts.
  • 20 photos are served through picture with WebP and JPG in several sizes; everything except the hero is lazy-loaded, and prefers-reduced-motion turns off counters and reveal animations.

How it is built

The page runs without site builders or heavy scripts: the static files open straight from disk. Photos ship as WebP and JPG in several sizes - the browser downloads exactly one that fits the screen.