One barbershop, five complete design directions — Classic, Dark, Street, Minimal and Swiss. Switch live, one click or an arrow key, and the whole brand changes face without losing the conversion path. A self-initiated demo to show art-direction range on a single page.
01 / THE PROBLEM
"Show me an example" is the question that stalls the project.
When a local business asks for a landing page, the conversation gets stuck on taste. The owner can't describe the style they want, and three Pinterest references don't settle it — everyone pictures something different. The result is a revision round you could skip if you could see the same page in different styles, side by side.
I took a fictional barbershop, Navalha, and built five complete art directions of the same landing to solve exactly that: align on taste before producing.
02 / THE APPROACH
Same structure, five skins.
The rule I set myself: the conversion path doesn't change. Hero, priced services, gallery, team, testimonials and a WhatsApp-CTA contact appear in all five styles, in the same order. What changes is the art direction — typography, palette, rhythm, ornament.
Classic is sepia and vintage serif. Dark is black and gold, premium. Street is neon orange, high contrast, giant type. Minimal is black on white with lots of air. Swiss is grid and red hairlines with numbered services. Five brands, one conversion anatomy.
03 / THE BUILD
Instant switch, no framework, one page.
Live switcher. A fixed selector at the bottom changes the style instantly — click or arrow key. Each direction is a function that returns the page's full HTML; switching is a re-render plus a scroll-to-top. No reload, no flash.
Five typefaces with personality. Fraunces for Classic, Bebas Neue for Dark and Street, a sans for Minimal, bold for Swiss. The font carries half the identity — I picked each to pull the style somewhere different.
Conversion preserved across all. A price on each service, a WhatsApp booking CTA, and contact with address and hours show up in all five — because switching style can never cost the conversion.
It's a single HTML file with Tailwind and a little vanilla JS. No build, no backend — open it and it works.
04 / OUTCOME
Five proposals on one screen, taste aligned in a click.
The demo becomes a sales tool: instead of sending loose mockups, I open Navalha with the client and switch styles right in front of them. In seconds they point at what they like, and the project starts with art direction already decided.
Five complete directions, six sections and six priced services — on a single page that changes face without losing the conversion path. It's design range proven live, not promised.
Directions
5
Sections
6
Services
6
File
1 HTML
