How Smile First Dental was designed and built

The concept

Smile First Dental is a portfolio concept for a modern family and cosmetic practice. The brief was to make a dental site feel less like a clinic brochure and more like a calm, well-organised product page: everything a nervous new patient wants to know, presented in floating white panels on a steel-blue frame so the eye always has somewhere quiet to rest.

Palette and type

The whole site runs on one dominant colour, a muted steel blue, used as a page-wide frame behind white rounded panels. Text is a deep navy ink rather than pure black, which keeps the contrast high without feeling harsh. A single grotesque family, Inter, carries every weight from the giant hero headline down to the uppercase micro-labels, so the hierarchy comes from size and spacing rather than from mixing typefaces.

Structure

The site is a full multi-page build: a home page, a services index with a dedicated page for every one of the twenty-seven treatments, plus About, Team, New Patients, Insurance and Financial, Smile Gallery, Reviews and Contact. Service pages share one template so that every treatment gets the same depth of explanation, a related-services list and a consistent call to action. The header collapses into a full-screen mobile menu with a tap-to-call action, and every page repeats the practice hours, phone number and address in the footer.

Signature motion

The hero headline reveals word by word from behind a clipping mask as the page loads, and the panels beneath it rise into place in a short stagger. A live chip in the hero reads the visitor's current day and time in Arizona and tells them at a glance whether the office is open. Lower on the page a team carousel crossfades between portraits, and the FAQ section runs on a dark panel with an accordion that opens one answer at a time. All of it is driven by native scrolling with lightweight scroll-triggered classes, and every animation is turned off automatically for visitors who prefer reduced motion.

Imagery

Every photograph on the site is licensed stock photography, art-directed so that each image matches the copy it sits beside: the lead dentist is shown in a white coat inside a real treatment room, the hygienists and assistants are in scrubs, the office tour uses bright contemporary operatories and reception areas, and the smile gallery uses close-up results photography grouped by treatment. No patient photographs appear anywhere on the site.

Stack

Plain HTML, CSS and vanilla JavaScript with no build step, so the whole site deploys as a static folder. Forms are wired for Netlify Forms with a honeypot field. The site was checked at phone, tablet and desktop widths for horizontal overflow, colour contrast and broken links before launch.