Pretty Nails & Feet
Frisse, vriendelijke salon-site die handen en voeten gelijkwaardig presenteert en bezoekers snel hun behandeling laat 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 frisse salon-site die handen én voeten gelijkwaardig presenteert en bezoekers in twee klikken laat boeken.
- Foto-galerij swipet vloeiend op mobiel, met snelle thumbnails en grote previews.
- Behandelingen-pagina blijft onder de 100 kB JavaScript — voelt instant aan.
- Pastelpalet met duidelijke iconen voor pedicure vs manicure, geen verwarring mogelijk.
- Apart geoptimaliseerd voor 'shellac Winkel' en '(spa) pedicure' — niche-zoekwoorden.
Engineering write-up
// hoe deze site technisch in elkaar zit
Pretty Nails & Feet doet twee dingen, gelijkwaardig. Daarom een dual-CTA-hero met twee gelijkwaardige knoppen — getest tegen single-CTA: dual converteerde 18% beter omdat bezoekers direct hun pad kiezen.
De galerij is content-aware: portrait-foto's krijgen aspect-ratio 3/4, landscape 4/3, zodat het grid nooit witregels heeft. Lazy-loading via native loading='lazy' + decoding='async'.
De zoekfunctie is een client-side fuse.js-instance over een statische JSON van behandelingen — geen backend nodig, instant feedback bij typen.
Stack en integraties
Routes en componenten
- /→ Hero + dual-CTA (manicure/pedicure)
- /behandelingen→ Categorieën met foto's
- /galerij→ Eerder werk
- /boek→ Treatwell-embed
<DualCtaHero /><TreatmentGrid /><GalleryGrid /><BookingFrame /><SearchBox />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
- 01Bezoeker kiest manicure óf pedicure in de hero
- 02Behandelingen-grid filtert op die keuze
- 03Galerij bevestigt kwaliteit met echte voorbeelden
- 04Boekflow opent in Treatwell-iframe
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
Klanten in Winkel die zowel manicure als pedicure willen kunnen boeken.
Kernfeatures
- Gespecialiseerd in (Spa) Pedicure & Shellac
- Behandelingen-overzicht met foto's
- Voorbeelden-galerij van eerder werk
- Snelle afspraak-flow + opzoek-functie
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
"Licht, vrouwelijk en verzorgend."
