Hero met intentie-wizard New
Hero for an estate agent, clinic or coworking space: visitors first pick an intent (sell, buy, valuation, rent), then answer one or two follow-up questions and get a matching proposal. Steps swap with View Transitions (fallback: instant swap), focus moves to the new question, arrow keys move through options. States: postcode error, loading for the valuation, result and confirmation.
Van Rijn Makelaardij · NVM · Leiden
Verkopen of kopen in Leiden begint met de goede eerste vraag
Wij verkochten sinds 2019 ruim 640 woningen in Leiden, Oegstgeest en Leiderdorp. Vertel ons wat je van plan bent, dan weet je binnen een minuut wat de volgende stap is.
- 8,9 gemiddeld op Funda
- 23 dagen gemiddelde looptijd
- 101,4% van de vraagprijs
How to use it
- Paste the HTML where the page sections should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Hero met intentie-wizard · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="mvr">
<div class="mvr__in">
<div class="mvr__copy">
<p class="mvr__brand"><span class="mvr__mark" aria-hidden="true">vR</span>Van Rijn Makelaardij · NVM · Leiden</p>
<h2 class="mvr__h">Verkopen of kopen in Leiden begint met de goede eerste vraag</h2>
<p class="mvr__lead">Wij verkochten sinds 2019 ruim 640 woningen in Leiden, Oegstgeest en Leiderdorp. Vertel ons wat je van plan bent, dan weet je binnen een minuut wat de volgende stap is.</p>
<ul class="mvr__facts"><li><b>8,9</b> gemiddeld op Funda</li><li><b>23 dagen</b> gemiddelde looptijd</li><li><b>101,4%</b> van de vraagprijs</li></ul>
</div>
<div class="mvr__media"><img src="https://neddev.com/lab-media/hero-intentiewizard-1.webp" alt="Grachtenpanden aan het Rapenburg in Leiden in de herfst" loading="lazy"></div>
<div class="mvr__wiz">
<div class="mvr__wiz-top"><p class="mvr__prog" aria-live="polite"></p><button class="mvr__reset" type="button" hidden><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10a6 6 0 1 0 2-4.5M4 4v3.5h3.5"/></svg>Opnieuw beginnen</button></div>
<div class="mvr__bar" aria-hidden="true"><i></i></div>
<div class="mvr__body"></div>
</div>
</div>
</div>
</div>/* Hero met intentie-wizard · NedDev · eigen werk. */
/* fonts (Fontshare): sentient@400,500 + satoshi@400,500,700 */
.mvr{--mvr-paper:#f6f1ea;--mvr-ink:#1b1f2a;--mvr-red:#b23a2b;--mvr-red2:#952e21;--mvr-line:#e2d8c8;--mvr-mut:#5a5e67;--mvr-err:#a3291c;background:var(--mvr-paper);color:var(--mvr-ink);font-family:'Satoshi',sans-serif;box-sizing:border-box}
.mvr *,.mvr *::before,.mvr *::after{box-sizing:border-box}
.mvr button:focus-visible,.mvr a:focus-visible,.mvr input:focus-visible{outline:2px solid var(--mvr-red);outline-offset:2px}
.mvr__in{position:relative;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:560px}
.mvr__copy{padding:48px 190px 40px 48px;display:flex;flex-direction:column}
.mvr__brand{display:flex;align-items:center;gap:10px;margin:0 0 30px;font-size:13px;font-weight:700;letter-spacing:.02em}
.mvr__mark{display:grid;place-items:center;width:34px;height:34px;background:var(--mvr-red);color:#fff;font-family:'Sentient',serif;font-size:15px;font-weight:500;border-radius:2px}
.mvr__h{font-family:'Sentient',serif;font-weight:500;font-size:clamp(30px,3.4vw,46px);line-height:1.06;letter-spacing:-.015em;margin:0 0 16px;max-width:17ch}
.mvr__lead{font-size:16px;line-height:1.6;color:var(--mvr-mut);margin:0;max-width:44ch}
.mvr__facts{list-style:none;margin:auto 0 0;padding:28px 0 0;display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:var(--mvr-mut)}
.mvr__facts b{display:block;font-family:'Sentient',serif;font-weight:500;font-size:24px;color:var(--mvr-ink);font-variant-numeric:tabular-nums}
.mvr__media{position:relative;overflow:hidden;background:#c9c0b2}
.mvr__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mvr__wiz{position:absolute;left:calc(50% - 150px);bottom:36px;width:440px;background:#fff;border-radius:4px;padding:22px 24px 24px;box-shadow:0 30px 60px -28px rgba(27,31,42,.45);z-index:2}
.mvr__wiz-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:24px}
.mvr__prog{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mvr-mut);font-variant-numeric:tabular-nums}
.mvr__reset{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 6px;margin-right:-6px;font:600 13px 'Satoshi',sans-serif;color:var(--mvr-mut);cursor:pointer;border-radius:3px;transition:color .18s}
.mvr__reset:hover{color:var(--mvr-red)}
.mvr__reset svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mvr__bar{height:2px;background:var(--mvr-line);margin:10px 0 16px}
.mvr__bar i{display:block;height:100%;width:0;background:var(--mvr-red);transition:width .35s cubic-bezier(.2,.7,.2,1)}
.mvr__body{view-transition-name:mvr-body}
.mvr__q{font-family:'Sentient',serif;font-weight:500;font-size:23px;line-height:1.15;margin:0 0 14px;outline:none}
.mvr__opts{display:grid;gap:8px}
.mvr__opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--mvr-line);border-radius:3px;padding:13px 14px;font:500 15px 'Satoshi',sans-serif;color:var(--mvr-ink);cursor:pointer;transition:border-color .16s,background-color .16s}
.mvr__opt svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--mvr-mut);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s,stroke .16s}
.mvr__opt:hover{border-color:var(--mvr-ink);background:#fbf8f3}
.mvr__opt:hover svg{transform:translateX(3px);stroke:var(--mvr-red)}
.mvr__opt:active{background:#f3ede4}
.mvr__opt small{display:block;font-size:12.5px;color:var(--mvr-mut);font-weight:400;margin-top:2px}
.mvr__back{background:none;border:0;padding:0;margin:14px 0 0;font:600 13px 'Satoshi',sans-serif;color:var(--mvr-mut);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.mvr__back:hover{color:var(--mvr-ink)}
.mvr__row{display:grid;grid-template-columns:1fr 110px;gap:10px}
.mvr__lbl{display:block;font-size:13px;font-weight:700;margin:0 0 6px}
.mvr__inp{width:100%;height:48px;font:600 16px 'Satoshi',sans-serif;color:var(--mvr-ink);background:#fbf8f3;border:1.5px solid var(--mvr-line);border-radius:3px;padding:0 12px;outline:none;transition:border-color .16s}
.mvr__inp:hover{border-color:#cbbfab}
.mvr__inp:focus-visible{border-color:var(--mvr-ink);outline:none;box-shadow:0 0 0 3px rgba(178,58,43,.16)}
.mvr__inp[aria-invalid=true]{border-color:var(--mvr-err)}
.mvr__err{margin:8px 0 0;font-size:13px;font-weight:700;color:var(--mvr-err);min-height:0}
.mvr__err:empty{display:none}
.mvr__go{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;height:50px;margin-top:14px;border:0;border-radius:3px;background:var(--mvr-red);color:#fff;font:700 15px 'Satoshi',sans-serif;cursor:pointer;text-decoration:none;transition:background-color .16s}
.mvr__go:hover{background:var(--mvr-red2)}
.mvr__go:active{transform:translateY(1px)}
.mvr__go:disabled{background:#c9a39d;cursor:progress}
.mvr__spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:mvr-spin .7s linear infinite}
@keyframes mvr-spin{to{transform:rotate(360deg)}}
.mvr__res-k{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mvr-red)}
.mvr__big{font-family:'Sentient',serif;font-size:30px;line-height:1.1;margin:2px 0 8px;font-variant-numeric:tabular-nums}
.mvr__p{margin:0;font-size:14.5px;line-height:1.55;color:var(--mvr-mut)}
.mvr__slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.mvr__slot{position:relative}
.mvr__slot input{position:absolute;opacity:0}
.mvr__slot span{display:block;text-align:center;padding:9px 4px;border:1.5px solid var(--mvr-line);border-radius:3px;font-size:13px;line-height:1.3;cursor:pointer;transition:border-color .16s,background-color .16s}
.mvr__slot span b{display:block;font-size:14px}
.mvr__slot span:hover{border-color:var(--mvr-ink)}
.mvr__slot input:checked+span{border-color:var(--mvr-red);background:#fbefec}
.mvr__slot input:focus-visible+span{outline:2px solid var(--mvr-red);outline-offset:2px}
.mvr__done{display:flex;gap:12px;align-items:flex-start}
.mvr__done svg{width:28px;height:28px;flex:none;fill:none;stroke:#2f6b3f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@supports (view-transition-name:none){
::view-transition-old(mvr-body){animation:mvr-out .18s ease-in both}
::view-transition-new(mvr-body){animation:mvr-in .28s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes mvr-out{to{opacity:0;transform:translateX(-14px)}}
@keyframes mvr-in{from{opacity:0;transform:translateX(18px)}}
@media (max-width:1000px){.mvr__wiz{left:auto;right:24px;width:400px}.mvr__copy{padding-right:40px}}
@media (max-width:820px){.mvr__in{grid-template-columns:1fr;min-height:0}.mvr__copy{padding:28px 16px 20px}.mvr__facts{margin-top:0;padding-top:20px;gap:18px}.mvr__media{height:200px;order:-1}.mvr__wiz{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:-40px 16px 20px;padding:18px 16px 20px}.mvr__brand{margin-bottom:18px}}
@media (max-width:420px){.mvr__slots{grid-template-columns:1fr 1fr 1fr}.mvr__slot span{font-size:12px}.mvr__q{font-size:21px}}
@media (prefers-reduced-motion:reduce){.mvr *{animation:none!important;transition:none!important}}// Hero met intentie-wizard · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.mvr');if(!w)return;
var body=w.querySelector('.mvr__body'),prog=w.querySelector('.mvr__prog'),bar=w.querySelector('.mvr__bar i'),reset=w.querySelector('.mvr__reset');
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
var ARR='<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg>';
var path=[],total=1;
var START={q:'Waar kunnen we je mee helpen?',o:[['verkopen','Ik wil mijn huis verkopen'],['kopen','Ik wil een huis kopen'],['waarde','Ik wil weten wat mijn huis waard is'],['huren','Ik zoek een huurwoning'],['anders','Ik heb een andere vraag']]};
var LEN={verkopen:4,kopen:3,waarde:3,huren:3,anders:2};
function swap(fn){if(document.startViewTransition&&!reduce){document.startViewTransition(fn);}else fn();}
function head(q){return '<h3 class="mvr__q" tabindex="-1">'+q+'</h3>';}
function opts(list){return '<div class="mvr__opts">'+list.map(function(o){return '<button type="button" class="mvr__opt" data-v="'+o[0]+'"><span>'+o[1]+(o[2]?'<small>'+o[2]+'</small>':'')+'</span>'+ARR+'</button>';}).join('')+'</div>';}
function back(){return path.length?'<button type="button" class="mvr__back" data-back>Vorige vraag</button>':'';}
function adres(btn){return '<form class="mvr__f" novalidate><div class="mvr__row"><div><label class="mvr__lbl" for="mvr-pc">Postcode</label><input id="mvr-pc" class="mvr__inp" maxlength="7" placeholder="2311 EZ" autocomplete="postal-code"></div><div><label class="mvr__lbl" for="mvr-nr">Huisnr.</label><input id="mvr-nr" class="mvr__inp" maxlength="6" placeholder="48" inputmode="numeric"></div></div><p class="mvr__err" id="mvr-err" aria-live="assertive"></p><button class="mvr__go" type="submit">'+btn+ARR+'</button></form>';}
function slots(){var D=['zo','ma','di','wo','do','vr','za'],M=['jan','feb','mrt','apr','mei','jun','jul','aug','sep','okt','nov','dec'],d=new Date(),out=[],h=['10:00','14:30','17:00'];
while(out.length<3){d.setDate(d.getDate()+1);if(d.getDay()===0)continue;out.push('<label class="mvr__slot"><input type="radio" name="mvr-slot"'+(out.length?'':' checked')+'><span><b>'+D[d.getDay()]+' '+d.getDate()+' '+M[d.getMonth()]+'</b>'+h[out.length]+'</span></label>');}return '<div class="mvr__slots" role="radiogroup" aria-label="Kies een moment">'+out.join('')+'</div>';}
function view(){
var k=path[0],s=path.length,html='';
if(!s){html=head(START.q)+opts(START.o);}
else if(k==='verkopen'&&s===1){html=head('Wanneer wil je ongeveer verkopen?')+opts([['3m','Binnen drie maanden'],['1j','Binnen een jaar'],['ori','Ik oriënteer me nog']])+back();}
else if(k==='verkopen'&&s===2){html=head('Waar staat je huis?')+adres('Volgende');}
else if(k==='verkopen'&&s===3){html='<p class="mvr__res-k">Voorstel</p>'+head('Plan een gratis verkoopgesprek bij je thuis')+'<p class="mvr__p">'+(path[1]==='ori'?'Geen haast: we vertellen je wat je huis nu doet en wat je kunt verbeteren voor de verkoop.':'Marieke van Rijn komt langs, bekijkt je woning en geeft je binnen 2 werkdagen een vraagprijsadvies.')+'</p>'+slots()+'<button type="button" class="mvr__go" data-confirm>Bevestig afspraak'+ARR+'</button>'+back();}
else if(k==='kopen'&&s===1){html=head('Heb je al een huis op het oog?')+opts([['ja','Ja, ik wil gaan bieden','Biedingen in Leiden gaan vaak binnen een week'],['nee','Nee, ik ben nog aan het zoeken']])+back();}
else if(k==='kopen'&&s===2){html=path[1]==='ja'?'<p class="mvr__res-k">Voorstel</p>'+head('Aankoopbegeleiding vanaf € 2.950')+'<p class="mvr__p">Wij bekijken het huis met je, adviseren over je bod en regelen de bouwkundige keuring. Bel vandaag, dan kijken we morgen al mee.</p><a class="mvr__go" href="tel:+31715140620">Bel 071 514 06 20'+ARR+'</a>'+back():'<p class="mvr__res-k">Voorstel</p>'+head('Maak een zoekprofiel aan')+'<p class="mvr__p">Je krijgt woningen die bij je passen per mail, vaak een paar dagen voordat ze op Funda staan.</p><a class="mvr__go" href="#">Zoekprofiel maken'+ARR+'</a>'+back();}
else if(k==='waarde'&&s===1){html=head('Over welk huis gaat het?')+adres('Toon indicatie')+back();}
else if(k==='waarde'&&s===3){var n=+(path[1]||'0'),lo=385+((n*37)%160),hi=lo+30;html='<p class="mvr__res-k">Indicatie voor '+path[2]+'</p><p class="mvr__big">€ '+lo+'.000 tot € '+hi+'.000</p><p class="mvr__p">Op basis van 7 verkopen binnen 500 meter sinds januari 2026 (voorbeelddata). Een taxatie op locatie maakt dit preciezer.</p><a class="mvr__go" href="#">Plan gratis waardebepaling'+ARR+'</a>'+back();}
else if(k==='huren'&&s===1){html=head('Wat is je maximale huur per maand?')+opts([['a','Tot € 1.200'],['b','€ 1.200 tot € 1.800'],['c','Meer dan € 1.800']])+back();}
else if(k==='huren'&&s===2){var c={a:3,b:6,c:4}[path[1]];html='<p class="mvr__res-k">Nu beschikbaar</p>'+head(c+' huurwoningen in jouw prijsklasse')+'<p class="mvr__p">In Leiden-Centrum, Merenwijk en Oegstgeest. Bezichtigen kan meestal binnen 3 dagen.</p><a class="mvr__go" href="#">Bekijk huuraanbod'+ARR+'</a>'+back();}
else if(k==='anders'){html='<p class="mvr__res-k">Direct contact</p>'+head('Bel of mail Marieke van Rijn')+'<p class="mvr__p">Makelaar-eigenaar, bereikbaar op werkdagen van 8:30 tot 18:00. Mail: marieke@voorbeeld.nl</p><a class="mvr__go" href="tel:+31715140620">Bel 071 514 06 20'+ARR+'</a>'+back();}
else if(k==='verkopen'&&s===4){html='<div class="mvr__done"><svg viewBox="0 0 28 28" aria-hidden="true"><circle cx="14" cy="14" r="12"/><path d="M8.5 14.5l3.5 3.5 7.5-8"/></svg><div>'+head('Afspraak staat, tot dan')+'<p class="mvr__p">Je krijgt binnen 5 minuten een bevestiging per mail met de agenda-uitnodiging. Verzetten kan via de link in die mail.</p></div></div>';}
return html;
}
function paint(focus){
total=path.length?LEN[path[0]]:3;var step=Math.min(path.length+1,total);
body.innerHTML=view();
prog.textContent=path[0]==='verkopen'&&path.length===4?'Afgerond':'Stap '+step+' van '+total;
bar.style.width=(path[0]==='verkopen'&&path.length===4?100:Math.round(step/total*100))+'%';
reset.hidden=!path.length;
if(focus){var h=body.querySelector('.mvr__q');if(h)h.focus({preventScroll:true});}
}
function go(fn){swap(function(){fn();paint(true);});}
body.addEventListener('click',function(e){
var o=e.target.closest('.mvr__opt');if(o){go(function(){path.push(o.getAttribute('data-v'));});return;}
if(e.target.closest('[data-back]')){go(function(){path.pop();if(path[0]==='waarde'&&path.length===2)path.pop();});return;}
if(e.target.closest('[data-confirm]')){go(function(){path.push('ok');});}
});
body.addEventListener('submit',function(e){e.preventDefault();var f=e.target,pc=f.querySelector('#mvr-pc'),nr=f.querySelector('#mvr-nr'),er=f.querySelector('.mvr__err'),b=f.querySelector('.mvr__go');
[pc,nr].forEach(function(x){x.removeAttribute('aria-invalid');});
var m=pc.value.replace(/\s+/g,'').toUpperCase().match(/^([1-9]\d{3})([A-Z]{2})$/);
if(!m){pc.setAttribute('aria-invalid','true');pc.setAttribute('aria-describedby','mvr-err');er.textContent='Vul een postcode in als 2311 EZ.';pc.focus();return;}
if(!/^\d{1,5}[a-zA-Z]?$/.test(nr.value.trim())){nr.setAttribute('aria-invalid','true');nr.setAttribute('aria-describedby','mvr-err');er.textContent='Vul je huisnummer in, bijvoorbeeld 48 of 12a.';nr.focus();return;}
var adr=m[1]+' '+m[2]+' '+nr.value.trim();
if(path[0]==='waarde'){b.disabled=true;b.innerHTML='<span class="mvr__spin" aria-hidden="true"></span>Verkopen in de buurt ophalen';
setTimeout(function(){go(function(){path.push(nr.value.replace(/\D/g,''),adr);});},1100);}
else go(function(){path.push(adr);});
});
body.addEventListener('keydown',function(e){if(e.key!=='ArrowDown'&&e.key!=='ArrowUp')return;var l=[].slice.call(body.querySelectorAll('.mvr__opt'));var i=l.indexOf(document.activeElement);if(i<0)return;e.preventDefault();l[(i+(e.key==='ArrowDown'?1:l.length-1))%l.length].focus();});
reset.addEventListener('click',function(){go(function(){path=[];});});
paint(false);
}
init(document.querySelector('.jouw-container'));More page sections
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →