Beauty Salon Website
Salão Loha
A one-page site for a neighbourhood salon in Osasco, built to be found and to start a WhatsApp conversation: services, an 8-photo portfolio, map and social links, in plain HTML with no build step.
Some details omitted under NDA
The problem it solved
A neighbourhood salon in Osasco needed one thing: to be found and to start a WhatsApp conversation. No online booking, no catalogue, no customer accounts.
In a case like this a system would be expensive and would get in the way. What works is a page that loads fast on a phone and puts the visitor in touch in one tap.
What the site delivers
The services at first glance
Hair, manicure, hair therapy and waxing, each with its own card.
A portfolio of 8 photos
Photos open enlarged, with zoom, thumbnails and tap navigation on a phone.
Where it is
A Google map embedded in the page, with the salon address.
WhatsApp always in view
A floating button with a message bubble that draws attention every so often.
Social links
Links to Instagram, Facebook and TikTok, where the salon posts day to day.
Navigation that follows the reader
The menu highlights the section being read and closes itself on a phone.
How it turned out
- The page is plain HTML, CSS and JavaScript with no build step, so it loads fast and costs almost nothing to keep online.
- Contact happens on WhatsApp, which is where this clientele already is, rather than in a form nobody answers.
- Honest about the scope: there is no booking, no contact form and no admin panel. Changing a line of text or a price is a code change.
- And one correction to the description: the animated calendar at the top is a Lottie icon beside the button, not a diary with available times.
In numbers
1
single page
8
photos in the portfolio
0
build steps to publish
For technical visitors
The rest of this page is written for whoever decides the purchase. This block is for whoever has to maintain the site.
- One index.html of 424 lines with css/style.css and js/main.js. The package.json has no dependencies and no scripts: it exists only to pin the Node version at deploy.
- Bootstrap 5 with local CSS and the bundle JS from a CDN with subresource integrity.
- FancyBox 4 configured in main.js with zoom, share, slideshow, fullscreen and thumbnails, over 8 gallery items, with mobile tap handling.
- A hand-written scroll spy: a reference line at 35% of the viewport, throttled with requestAnimationFrame, a passive listener and a special case at the bottom of the page.
- The scroll reveal is a listener of our own toggling Animate.css classes. There is no AOS in this project.
- A single Lottie calendar icon, 32 by 32 pixels and 4.8 KB, plus 14 lord-icon elements.
- Deployed on Vercel with a one-year immutable cache for images, CSS and JS. A robots.txt and a one-URL sitemap.