Style & Smile
A dark, gold-accented site for a men's barber shop and beard lounge. Services are filterable, a four-step drawer builds the appointment, and the confirmation opens in WhatsApp.
Overview
Style & Smile is a men's barber shop and beard lounge in Rohtak, Haryana. The build is an editorial, dark-mode site with a service menu, a barber roster, a gallery, and a booking drawer.
Callback forms add friction between choosing a service and confirming a time. The menu, prices, and barber choice were spread across conversations, so customers had to ask before they could decide.
Goals
- Make services, durations, and prices scannable on a phone.
- Let a customer build a booking in four steps without an account.
- Confirm through WhatsApp rather than inventing an availability API.
- Carry a premium identity without hiding the practical details.
My contribution
- Art direction and design system
- Front-end implementation and component structure
- Service filtering and booking drawer
- Responsive layout and content structure
Design & engineering decisions
Gold on onyx, serif on sans
The identity pairs a champagne gold accent with an almost-black surface, an editorial serif for display lines, and a clean sans for interface copy. The contrast does the luxury work; there is no glassmorphism or decorative gradient.
The menu is the product
Services are grouped into cuts, beard work, grooming combos, and facials. Each card states duration, price, and badges such as Most Requested. Selecting a service updates a running total in the booking drawer.
WhatsApp instead of a fake calendar
The drawer collects services, barber, date and time, name, and mobile number, then formats a prefilled WhatsApp message. There is no pretend availability, payment, or confirmation backend.
Photography carries the atmosphere
The supplied grooming photography is cropped into a tight editorial grid rather than used as a full-bleed background. The interface stays readable and the images keep their own composition.
Architecture
- Booking state is client-side; there is no calendar, payment, or availability API.
- The confirmation step opens WhatsApp with a prefilled message.
- The project is a local build and has not been publicly deployed.
Implementation
- Service categories filter the menu without a page reload.
- The drawer keeps selected services, barber, date, time, and contact details in one state object.
- The WhatsApp URI is composed from the current selection and opened in a new tab.
- The layout uses a small set of reusable section and card primitives rather than a separate component per block.
Challenges
Luxury without hiding the price
Premium barber sites often bury the menu in atmosphere. Here the price and duration are always visible, and the gold accent is reserved for actions and emphasis.
Booking without a backend
A real availability system was out of scope. The WhatsApp handoff is honest about what it is: a prepared message, not a confirmed appointment.
Outcome
A complete local build, not publicly deployed. The flow stops at a prefilled WhatsApp message; there is no calendar, payment, or availability service behind it.
What I learned
For a local business, the shortest path to a booking is often the messaging app already on the customer's phone..