Speets Schoonmaakbedrijf
Een schoonmaakbedrijf met 37 jaar ervaring presenteren als de betrouwbare lokale partner — met heldere services, klantcases en een offerte-aanvraag die converteert.
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 37-jarig schoonmaakbedrijf neerzetten als de betrouwbare lokale partner — met heldere services en een offerte-formulier dat écht werkt.
- Op mobiel staat het telefoonnummer altijd binnen duimbereik onderaan het scherm.
- De site laadt onder de 1.5 seconde, ook op een trage 4G-verbinding bij een klant op locatie.
- Per dienst (kantoor, zorg, particulier) een eigen pagina — zo wint Speets Google-zoekopdrachten in Noord-Holland.
- Vacature-formulier is beveiligd tegen spam zonder vervelende reCAPTCHA-puzzels.
Engineering write-up
// hoe deze site technisch in elkaar zit
Een schoonmaakbedrijf van 37 jaar oud verkoopt vooral vertrouwen. De startpagina is ingericht als een trust-funnel: hero → trust-bar (jaartal, klanten, certificaten) → diensten → cases → CTA.
Voor de Expat-Service is een i18n-laag (nl/en) toegevoegd via een optioneel {-$locale}-segment in de routing, met fallback naar nl. SEO-titels en JSON-LD worden per taal gegenereerd.
Het offerte-formulier is server-validated met Zod en stuurt via Resend; spam wordt tegengehouden met een honeypot + Cloudflare Turnstile-token. Geen reCAPTCHA om Google-tracking te vermijden.
Stack en integraties
Routes en componenten
- /→ Branding + diensten-overzicht
- /diensten→ Specialisaties per segment
- /cases→ Klantverhalen + testimonials
- /vacatures→ Recruitment + sollicitatie
- /offerte→ Offerte-aanvraag
<BrandHero /><ServiceMatrix /><CaseCard /><JobCard /><QuoteForm /><TrustBar /><ExpatBlock />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
- 01B2B-bezoeker scant diensten → herkent eigen segment
- 02Cases bouwen vertrouwen op (37 jaar)
- 03Offerte-aanvraag in 3 velden
- 04Lead landt direct in mailbox via Resend
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
Kantoren, zorginstellingen en particulieren in Noord-Holland.
Kernfeatures
- Service- en specialisaties-overzicht
- Klantcases en testimonials
- Vacatures-sectie voor recruitment
- Expat-Service met taalwissel
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
"Professioneel, betrouwbaar en modern."
