Amore Nails Glamour
Een glamoureuze nagelstudio-site die de salon-ervaring laat aanvoelen via lookbook-styling en directe online boekingen.
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 sfeer-eerst salon-site: de lookbook trekt aandacht, daarna stapt de bezoeker zonder gedoe in de boekingsflow.
- Foto's worden in een mozaïek geladen die zich aanpast aan elk schermformaat — ook 320 px breed blijft het mooi.
- Beelden komen in moderne formaten (avif/webp) binnen, zodat 4G-bezoekers niet hoeven wachten.
- Klassieke lettertype-combinatie (Playfair + Inter) voor 'premium' gevoel, met fluid type op kleine schermen.
- Boekingen lopen via Salonized — de salon hoeft niets handmatig bij te houden.
Engineering write-up
// hoe deze site technisch in elkaar zit
Beauty-merken concurreren op sfeer, niet op feiten. De lookbook is dus geen extra pagina maar de spil: een masonry-layout met content-aware aspect ratios, lazy-geladen via IntersectionObserver, gehoste plaatjes via Cloudinary met automatic format negotiation (avif/webp).
Typografisch wisselen we Playfair Display (display) en Inter (UI) — een klassieke high-contrast pairing die op kleine schermen netjes terugschaalt via fluid clamp()-typografie.
De boekingsflow is bewust extern (Salonized) zodat de salon zelf geen synchronisatie-rituelen hoeft uit te voeren. Wij omarmen het iframe achter een design-system-frame zodat het toch eigen aanvoelt.
Stack en integraties
Routes en componenten
- /→ Hero, behandelingen-teaser, lookbook
- /behandelingen→ Categorieën + prijzen
- /lookbook→ Filterbare galerij
- /boek→ Iframe naar Salonized
<GlamHero /><TreatmentGrid /><MasonryLookbook /><PriceList /><BookingFrame /><AnimatedQuote />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
- 01Lookbook trekt aandacht → klant scrollt naar behandelingen
- 02Behandeling-kaart toont duur, prijs, 'boek nu'
- 03Boekflow opent in modal (Salonized) zonder context-switch
- 04Bevestiging + reminder-mail uit Salonized-pipeline
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 verzorgde, premium nagelstudio-ervaring zoeken.
Kernfeatures
- Visueel rijke lookbook van eerdere creaties
- Online afsprakenmodule per behandeling
- Heldere prijslijst met categorieën
- Mood-board sfeer met diepe paarse tinten
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, verzorgd en elegant met zachte texturen."
