Huisdierfoto: A Lifetime Print
Productsite die het emotionele verhaal achter elk huisdierportret vertelt en bezoekers stap-voor-stap door het bestelproces 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 emotioneel verhaal als opening, daarna een rustige bestelflow waarin je materialen vergelijkt en in een paar klikken bestelt.
- Op mobiel schuiven materialen langs in een swipe-vergelijking — geen kleine, frustrerende dropdowns.
- Hoge-resolutie foto's worden lazy geladen: pas zichtbaar als ze in beeld komen.
- Warme, ambachtelijke beeldtaal in plaats van koude e-commerce — het voelt persoonlijk.
- Tweetalig (NL/EN) met aparte URL's, zodat Engelstalige klanten ook gevonden worden.
Engineering write-up
// hoe deze site technisch in elkaar zit
Dit is verkopen op emotie met een tweetalige UI eronder. Routes worden via een optionele {-$locale}-segment afgehandeld, content via een typed key-store zodat ontbrekende vertalingen build-time falen.
De materialen-vergelijking is een CSS-grid met aspect-ratio en object-fit, zonder JS — werkt zelfs als hydratie zou falen. Cadeaubonnen lopen via Stripe Checkout (hosted) zodat we geen PCI-scope dragen.
Beeldtaal wordt via een vast aspect-ratio gepubliceerd en met Cloudinary CDN gegenereerd in webp/avif, met srcset op 2 breakpoints — voldoende voor een fotosite zonder bundle-bloat.
Stack en integraties
Routes en componenten
- /→ Verhaal + materialen
- /materialen→ Vergelijking glans/mat/metaal
- /cadeaubon→ Bestelflow met Stripe
- /proces→ Stap-voor-stap uitleg
<StoryHero /><MaterialCompare /><GiftcardForm /><ProcessTimeline /><LangSwitch /><TestimonialCarousel />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 leest emotioneel verhaal → materialen-pagina
- 02Vergelijkt afwerkingen in side-by-side render
- 03Voegt cadeaubon toe → Stripe Checkout (hosted)
- 04Bevestiging + persoonlijke bedankmail (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
Huisdiereigenaren die een tijdloos aandenken zoeken in premium printkwaliteit.
Kernfeatures
- Materialen-vergelijking (glans, mat, metaal)
- Cadeaubon-flow voor verjaardagen
- Tweetalig (NL/EN) met taal-switch
- Warme, ambachtelijke beeldtaal
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, familiair en natuurlijk — tijdloos."
