Sarah Hair Salon started with a homepage that looked like every other SaaS product: Process section, Guarantees, Stats, featured products, a blog. All nice, but none of it told a visitor “this is a salon you want to walk into.” The redesign changes that — completely.
Why a redesign at all
The original layout was built as a generic web application template. It made sense when the site needed to go live fast. But once it started attracting real visitors from Liberec, it became obvious — this doesn’t look like a salon website. It looks like a tech product that happens to mention hair.
The goal was straightforward: make it look like a salon, not a tech product. Editorial structure, real photos, a story instead of a feature list.
What changed
33 files, 783 lines added, 1,311 deleted. Not cosmetic adjustments — a ground-up rebuild.
Hero section
The original hero had a video on mobile and a static photo with overlay on desktop. The new hero:
- Mobile: salon reel video with subtle overlays (gradient + vignette) — unchanged, it worked well
- Desktop: crossfading slideshow of real work photos — no stock, no AI-generated images. Five photos rotating every 5.5 seconds, no color gradients, just a dark scrim and soft vignette
- Slide indicators for orientation
Editorial sections
Instead of generic blocks (Process, Guarantees, Stats), the page now has sections that make sense for a salon:
- Stylists — names, photos (pulled directly from provider records, not stock), each stylist’s focus
- Service Highlights worlds of services instead of a generic list
- New Clients — a section for people who haven’t visited the salon yet
- Final CTA — a clear call to action at the bottom
Navigation as a journey
Navigation now matches the section order on the page: Salon → Stylists → Services → Gallery → Pricing → Contact. Clicking any nav link scrolls to the corresponding section — no jumps, no confusion.
Pricing on its own page
Pricing used to live on the homepage. Now it has its own /cenik page with prices fetched live from the booking system — no manual updates, always current data.
Gallery and lightbox
The gallery lightbox got a technical fix: moved through a portal to escape the MotionReveal transform container, so it fills the full viewport on mobile. Previously, the lightbox broke on smaller screens. Now it works cleanly.
What disappeared
Equally important as what was added is what got removed:
- Process — a generic “How it works” section that didn’t belong on a salon site
- ServiceGuarantees — service guarantees nobody reads
- StatsBanner — “satisfied customers” numbers that don’t make sense for a salon
- FeaturedProducts — e-shop products displayed on the homepage where they don’t belong
- AnimatedCounter — an animated counter without context
- LatestBlog — a blog section on the homepage that distracted from the main content
All of these were dead weight — built as part of the template, but never matching what a salon actually needs to show.
Photos without compromise
The original site used AI-generated and stock photography. The redesign replaces all of it with real photos from the stylists’ actual work. Stylist photos come directly from provider records in the booking system — no generated portraits, no stock faces.
This matters for a salon. Customers come for a specific stylist and want to see what their work looks like. The website should answer that question immediately.
Takeaway
A redesign isn’t about adding another animation or recoloring buttons. It’s about understanding that a salon’s website shouldn’t look like a SaaS product’s. Sarah Hair Salon’s homepage now shows what matters: the stylists, their work, the salon atmosphere, and a path to booking. Everything else is gone.