Incontro — Italiaanse Keuken
De Italiaanse keuken van Chef Sergio digitaal vertalen — sfeervolle visuals, heldere menukaart en een soepele reserveringsflow voor een Hoornse bestemming.
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 Italiaans restaurant digitaal op smaak brengen — sfeervolle menukaart, naadloze reserveringen, en aparte routes voor catering en seizoens-events.
- De menukaart op mobiel scrollt verticaal per categorie, niet als een onleesbare PDF.
- Reserveringsmodule laadt pas als je 'm opent — de hoofdpagina blijft snel.
- Warme, donker-gele tinten en serif-typografie geven een echte trattoria-sfeer.
- JSON-LD voor restaurant + menu-schema; verschijnt in Google met openingstijden en prijsklasse.
Engineering write-up
// hoe deze site technisch in elkaar zit
Restaurants converteren op honger en sfeer. De hero is een full-bleed beeld met een dunne overlay (linear-gradient → rgba(0,0,0,.4)) zodat tekstcontrast voldoet aan WCAG AA zonder de foto te verzwakken.
De menukaart is gepubliceerd als JSON-LD Menu/MenuSection/MenuItem. Google laat hierdoor rijke resultaten zien (gerechten + prijzen direct in de SERP).
Seizoenspopups (zoals Valentine's Dinner) draaien op een feature-flag in de routedata, zodat we kunnen activeren/deactiveren zonder rebuild.
Stack en integraties
Routes en componenten
- /→ Sfeer + menukaart-teaser
- /menu→ Volledige kaart + proeverij
- /reserveren→ Formitable-embed
- /catering→ Catering-aanvraag
- /contact→ Locatie + openingstijden
<MoodyHero /><MenuSection /><TastingMenu /><ReservationFrame /><CateringForm /><SeasonalPopup />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
- 01Sfeer-hero → menukaart-teaser
- 02Menukaart per gang, met prijs en allergenen
- 03Reserveringsflow via Formitable in één klik
- 04Seizoens-popup voor Valentine/kerst/etc.
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
Stellen, gezinnen en zakelijke gasten die een complete Italiaanse avond zoeken.
Kernfeatures
- Menukaart en proeverij-formules
- Online reserveringen met datum/tijd
- Catering-pagina voor events
- Seizoens-popup (bv. Valentine's Dinner)
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
"Warm, uitnodigend en culinair."
