Diamond Gloss Beautysalon
Een luxe beautysalon in Hoorn neerzetten als verwen-bestemming — alles draait om sfeer, premium beeldtaal en moeiteloos boeken.
Preview op desktop en mobiel
Wat je hierboven ziet is een echte screenshot van de live site op desktop — direct uit de browser, geen mock-up.
Echte mobiele rendering — knoppen worden duim-vriendelijk, blokken stapelen verticaal, lettergrootte schaalt mee.
De volledige pagina in één beeld
Zo ziet de hele site eruit als je 'm helemaal naar beneden scrolt — alle secties, in volgorde.
Wat betekent dit eigenlijk?
Voor als je geen developer bent — hier is wat we deden, zonder jargon.
Een luxe beautysalon neerzetten als verwen-bestemming met sfeervolle visuals én een soepele boekingsflow voor 4 verschillende behandelingen.
- Het multi-behandelingen-menu vouwt netjes uit op mobiel zonder een wall-of-text te worden.
- Sfeer-foto's worden voor-geladen op het juiste formaat per scherm — geen 4K-bestanden naar een telefoon.
- Donkere, glamour-gerichte palette met goud-accenten; toegankelijk getest op contrast.
- Live chat-bubble draait alleen als de bezoeker scrollt — geen tracking-overhead vooraf.
Engineering write-up
// hoe deze site technisch in elkaar zit
Vier behandel-categorieën in één menu zonder de bezoeker te verzuipen — opgelost met een tab-component die op mobiel converteert naar een horizontale chip-rij. Aria-roles 'tablist'/'tab'/'tabpanel' correct doorgevoerd.
De cursussen-pagina is een tweede conversiekanaal: schemes worden naast elkaar gerenderd via CSS-grid met subgrid voor uitgelijnde rijen — modern CSS, geen tabel-hacks.
Live chat is bewust extern (Tawk.to) en wordt pas geladen na user-interactie via dynamic import, zodat de initial bundle niet groeit.
Stack en integraties
Routes en componenten
- /→ Luxe sfeer + behandelingen-menu
- /behandelingen→ Multi-categorie menu
- /cursussen→ Opleidingen-overzicht
- /galerij→ Salon-sfeer
- /boek→ Salonized-embed
<LuxeHero /><CategoryTabs /><CourseCard /><GalleryMasonry /><ChatBubble /><BookingFrame />src/ ├─ routes/ # file-based routing (TanStack) ├─ components/ # presentational + UI primitives ├─ lib/ # data, helpers, schema └─ styles.css # design tokens (oklch)
Conversie-flow
// pad van bezoeker → klant
- 01Hero zet sfeer (luxe + verzorgd)
- 02Behandelingen via tabs (wimpers/nagels/brows/tanden)
- 03Live chat-bubble vangt twijfels op
- 04Boeken in iframe of telefonisch
Performance, toegankelijkheid en SEO
- WCAG 2.2 AA contrast op alle tekstniveaus
- Toetsenbord-volledige navigatie + zichtbare focus-rings
- Semantische landmarks (header/main/footer/nav)
- Alt-teksten op alle inhoudelijke afbeeldingen
- prefers-reduced-motion gerespecteerd
- Per-route <title> en meta description
- Open Graph + Twitter Card per pagina
- JSON-LD (LocalBusiness / Service / Product)
- Sitemap.xml + robots.txt
- Canonical tags + responsive viewport
Wat we bouwden
Doelgroep
Vrouwen die een complete beauty-ervaring zoeken: nagels, wimpers, brows en bleken.
Kernfeatures
- Multi-behandelingen menu (wimpers, nagels, brows, tanden)
- Cursussen-pagina voor opleidingen
- Sfeervolle galerij van het salon
- Live chat-bubble voor snelle vragen
Deliverables
- ›Volledige source in Git
- ›Vaste prijs + 7 dagen oplevering
- ›1 jaar hosting + SSL inbegrepen
- ›Gratis kleine wijzigingen 30 dagen
Brand kit
Visuele identiteit zoals die op de live site terugkomt — klik op een kleur om de hex-code te kopiëren.
Kleurpalet
Dark modeTypografie
Stijl
"Luxe, ingetogen en elegant."
