Rozies Nagelsalon
Een verfijnde salon-site die het 'verwennerij'-gevoel meteen overbrengt en bezoekers naadloos naar het inplannen van een afspraak leidt.
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 verfijnde nagelsalon-site die het 'verwennerij'-gevoel meteen overbrengt en bezoekers naadloos naar een afspraak leidt.
- Behandelingen zijn op mobiel uitklapbaar — duur en prijs in één tik zichtbaar.
- De afspraak-knop is altijd één klik weg, ongeacht waar je op de pagina bent.
- Zachte rozetinten met een hoog-contrast CTA, zodat de boek-knop nooit wegvalt.
- Lokale SEO ingericht op 'nagelsalon Hoogwoud' — Google Business gekoppeld.
Engineering write-up
// hoe deze site technisch in elkaar zit
Een lokale salon staat of valt bij hoe persoonlijk de site aanvoelt. Daarom geen stockfoto's: hero gebruikt het echte interieur van de salon, geserveerd in avif/webp via picture-element met fallback.
De behandelingen-lijst is een semantische <dl>: behandeling als <dt>, prijs+duur als <dd>. Goed voor screenreaders en goed voor JSON-LD waarin we ze als Service-items publiceren.
Magnetic-product-USP's zijn pure CSS-cards met var(--brand)-tokens — geen extra JS, geen externe icons. De hele pagina laadt in één RTT op 4G.
Stack en integraties
Routes en componenten
- /→ Sfeer + uitnodiging tot boeken
- /behandelingen→ Tarieven + duur per behandeling
- /over→ Persoonlijk verhaal
- /boek→ Salonized-embed
<WarmHero /><TreatmentList /><AboutBlock /><MagneticUSP /><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
- 01Sfeer-hero → 'plan een afspraak'-CTA boven de vouw
- 02Behandelingen-lijst met prijs/duur in één scan
- 03'Over mij' overtuigt via persoonlijke toon
- 04Boekflow opent inline (Salonized) — geen externe redirect
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 in en rond Hoogwoud die zoeken naar persoonlijke nagelverzorging.
Kernfeatures
- Behandelingen-overzicht met duur en prijs
- 'Over mij'-blok met persoonlijke touch
- Magnetic-producten USP's
- Online afspraak-flow
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
Light modeTypografie
Stijl
"Warm en elegant met een vrouwelijke touch."
