Bubble Wash Brilliance
Een no-nonsense wasstraat-site die in één oogopslag prijzen, openingstijden en het reserveren van een tijdslot toont.
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 snelle, glasheldere site waar autorijders binnen 5 seconden zien wat het kost en meteen een tijdslot kunnen reserveren.
- Op telefoon staan prijs, programma en 'reserveer'-knop direct in beeld — geen scrollen vereist.
- De pagina laadt razendsnel doordat de tarieven al klaar staan voordat de browser code uitvoert.
- Donker met fel oranje, zodat de actieknop er bij elk lichtniveau uitspringt.
- Elk wasprogramma is apart vindbaar in Google, niet verstopt in één lange pagina.
Engineering write-up
// hoe deze site technisch in elkaar zit
Een wasstraat verkoopt geen verhaal — die verkoopt tijd. De architectuur is daarop ingericht: above-the-fold staan prijs, programma en CTA in één semantisch <section>, zonder lazy-loaded blokken die de LCP saboteren.
De reserveringsflow is volledig client-side gerenderd na hydratie, maar het tarievenoverzicht wordt server-side gestreamd zodat zoekmachines elk programma indexeren. Tijdslots komen real-time uit een Cal.com-embed, met een fallback van statische openingstijden bij netwerk-fail.
De donkere look is geen smaakje maar een conversie-keuze: hoog contrast tussen accent-oranje en navy maakt de CTA on-screen onmiskenbaar — getest met simulated low-vision rendering.
Stack en integraties
Routes en componenten
- /→ Hero, USP-strip, programma's, CTA
- /programmas→ Tarieftabel met USP per pakket
- /reserveer→ Tijdslot-keuze + bevestiging
- /contact→ Locatie, openingstijden, route
<HeroDark /><ProgramCard /><PriceTable /><TimeslotPicker /><OpeningHours /><MapEmbed /><StickyCta />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 landt → ziet prijzen + USP's binnen 1 viewport
- 02Klik op programma → details + 'reserveer'-CTA
- 03Tijdslot kiezen in calendar (Cal.com)
- 04Bevestiging via e-mail (Resend) + agenda-invite
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
Particuliere autobezitters die snel en transparant hun wagen willen laten wassen.
Kernfeatures
- Prijsoverzicht per wasprogramma met USP's
- Online reserveringsmodule met tijdslots
- Locatie- en openingstijdenblok
- Strakke donkere look met heldere CTA's
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
"Modern, efficiënt en gericht op kwaliteit."
