const { Button, Card, Icon, Badge, Tag, Stepper } = window.UnibridgeNLDesignSystem_3cb2d1; const SERVICES = [ ["graduation-cap","University enrolment","We file your application at up to five Dutch universities and chase every decision."], ["house","Housing check","We introduce you to a licensed platform and you find your own room there. Then we check the rent is legal and read the contract before you sign."], ["id-card","Permit & BSN","Your university files the permit itself. We prepare the documents and make sure your BSN appointment is booked in time."], ["wallet","Bank & insurance","A Dutch IBAN, student health insurance and your OV chip card, sorted."], ["plane-takeoff","Arrival week","We are on the phone through your first week: what to do in which order, what to sign, and what to walk away from."], ["calendar-check","Deadline tracking","One checklist with every date, so nothing expires in a mailbox."] ]; const UNI_LOGOS = [ ["University of Amsterdam","uva.nl"],["VU Amsterdam","vu.nl"],["TU Delft","tudelft.nl"], ["Utrecht University","uu.nl"],["Leiden University","universiteitleiden.nl"],["Erasmus University Rotterdam","eur.nl"], ["University of Groningen","rug.nl"],["Eindhoven University of Technology","tue.nl"],["Maastricht University","maastrichtuniversity.nl"], ["Radboud University","ru.nl"],["University of Twente","utwente.nl"],["Tilburg University","tilburguniversity.edu"] ]; /* Scroll-scrubbed scene: the journey advances as the panel is pinned. */ const CHAPTERS = [ { k:"Apply", t:"We file, you study", d:"Up to five applications, documents certified, every deadline two weeks ahead of the university's own.", icon:"graduation-cap", label:"Application file", stat:"5", statLabel:"universities filed", rows:[["check","Diploma certified & translated"],["check","Motivation letter reviewed"],["check","IELTS 6.5 verified"],["clock","UvA decision expected 12 Apr"]] }, { k:"Live", t:"A room, checked before you sign", d:"A licensed letting agency we work with sources verified listings. We read the contract line by line.", icon:"house", label:"Housing check", stat:"3", statLabel:"listings screened before you commit", rows:[["check","Registration allowed at address"],["check","Deposit capped at two months"],["check","Contract read by your advisor"],["clock","Viewing booked 18 Apr, 14:00"]] }, { k:"Stay", t:"Permit, BSN, and the paperwork nobody explains", d:"Residence permit filed, municipality appointment booked inside your arrival week.", icon:"id-card", label:"Permit & BSN", stat:"14", statLabel:"days to decision", rows:[["check","Proof of funds letter accepted"],["check","Residence permit filed by university"],["check","Health insurance arranged"],["clock","Municipality appointment 2 Sep"]] }, { k:"Arrive", t:"Your first week, in the right order", d:"We plan your first week hour by hour and stay on the phone while you work through it, in your language.", icon:"plane-takeoff", label:"Arrival week", stat:"7", statLabel:"days, fully set up", rows:[["check","Arrival day planned hour by hour"],["check","Told what to photograph before you sign anything"],["check","Bank, SIM and transport card in the right order"],["clock","We answer within the hour, all week"]] } ]; /* Scroll-scrubbed chapters. The parent owns ONE scroll listener and hands each row its own 0→1 travel through the viewport, so the panels drift, tilt and settle as you read, and the tracker above them fills in step. */ function useRowTravel(count) { const refs = React.useRef([]); const [ps, setPs] = React.useState(() => new Array(count).fill(0)); React.useEffect(() => { const reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduced) { setPs(new Array(count).fill(0.5)); return; } let raf = 0; const read = () => { raf = 0; const vh = window.innerHeight || 1; setPs(refs.current.map(el => { if (!el) return 0; const r = el.getBoundingClientRect(); return Math.min(1, Math.max(0, (vh - r.top) / (vh + r.height))); })); }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(read); }; window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); read(); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); cancelAnimationFrame(raf); }; }, [count]); return [refs, ps]; } function ChapterRow({ c, n, t, setRef }) { const flip = n % 2 === 1; const ease = Math.min(1, Math.max(0, (t - 0.08) / 0.30)); // entrance const leave = Math.min(1, Math.max(0, (1.04 - t) / 0.22)); // soft exit const vis = Math.min(ease, leave); const drift = (0.5 - t) * 64; // panel parallax const textDrift = (0.5 - t) * 22; const live = t > 0.30 && t < 0.86; return (
{String(n+1).padStart(2,'0')} · {c.k}

{c.t}

{c.d}

); } /** Sticky chapter tracker: fills as the four rows travel past. */ function JourneyTracker({ ps }) { const each = 1 / CHAPTERS.length; const fill = Math.min(1, ps.reduce((sum,t) => sum + Math.min(1, Math.max(0, (t - 0.22) / 0.42)) * each, 0)); const active = ps.reduce((acc,t,i) => (t > 0.30 ? i : acc), 0); return (
{CHAPTERS.map((c,i)=>{ const on = i <= active; return ( {String(i+1).padStart(2,'0')} {c.k} ); })}
); } function JourneyScene() { const y = useScrollY(); const [refs, ps] = useRowTravel(CHAPTERS.length); // overflow:clip, not hidden — hidden would make this section the sticky tracker's // scrollport and stop it sticking; clip still trims the aurora and starfield. return (
); } const UB_COMPARE = [ { k:"alone", title:"On your own", sub:"Forums, embassy PDFs and hope.", tone:"quiet", rows:[ ["Price","Costs surface one at a time: translations, deposits, re-applications."], ["Route","You guess which universities will take you, and pay to find out."], ["Expertise","Advice written for a different country, a different year."], ["Fit","You adapt to whatever you manage to find in time."] ] }, { k:"agency", title:"A typical agency", sub:"Twelve destinations, one brochure.", tone:"quiet", rows:[ ["Price","A headline fee, with extras billed once you're committed."], ["Route","A predetermined package, the same one everybody is sold."], ["Expertise","Every country at once, none of them in depth."], ["Fit","You are moved toward whichever package is for sale."] ] }, { k:"ub", title:"UniBridge NL", sub:"One country, one plan, one price.", tone:"gold", rows:[ ["Price","Fixed price, agreed in writing before anything begins."], ["Route","Built around your profile, your goals and your preferences."], ["Expertise","One destination. One area of expertise. The Netherlands."], ["Fit","No one-size-fits-all routes. We find the one that fits you."] ] } ]; function CompareColumn({ c }) { const gold = c.tone === 'gold'; return (

{c.title}

{gold && Us}

{c.sub}

{c.rows.map(([label,text])=>(
{label}

{text}

))}
); } function CompareSection({ go }) { return (
Why UniBridge

The same move, three very different ways to make it

One country, a price fixed before we start, and a route built for your profile rather than pulled off a shelf.

{UB_COMPARE.map((c,i)=>( ))}
Nothing is charged until you accept a plan.
); } function HomeScreen({ go }) { const y = useScrollY(); const heroFade = Math.max(0, 1 - Math.max(0, y - 140) / 480); const heroLift = Math.min(90, Math.max(0, y - 140) * 0.22); const heroScale = 1 + Math.min(0.05, Math.max(0, y - 140) * 0.00012); return (
{/* ── Hero ── */}
{/* ── Logo marquee ── */}
Universities we help students apply to
( e.currentTarget.style.opacity=1} onMouseLeave={e=>e.currentTarget.style.opacity=.6}> {name} )}/> {/* ── Statement ── */}

Moving countries is thirty small deadlines wearing one big coat. We keep every one of them.

{/* ── Scroll-scrubbed journey ── */} {/* ── Services ── */}
What we do

Everything between an offer letter and your first lecture
{SERVICES.map(([icon,t,d],i)=>( go('services')} padding="var(--space-8)" style={{height:'100%'}}>

{t}

{d}

 ))}
{/* ── Why UniBridge (comparison) ── */} {/* ── Dashboard panel ── */}
Your dashboard

Every date, document and decision in one place

No inbox archaeology. You always know what is done, what is with us, and what needs you today.
{[[16,"universities we help you apply to"],[13,"cities in the Netherlands"],[1,"advisor, start to arrival"]].map(([n,l])=>(
{l}
))}
Your checklist
{/* ── Three steps ── */}
How it works

Three steps, twelve weeks
{[["01","Tell us your plan","Fifteen minutes. Study level, field, budget, cities you'd live in."],["02","We build your route","A shortlist you'll actually get into, with dates and costs written out."],["03","You arrive settled","Your first week planned in order, with us on the phone while you work through it."]].map(([n,t,d],i)=>(
{n}

{t}

{d}

 ))}
{/* ── What we commit to. Replaces placeholder testimonials: real student quotes go back here once we have written permission to publish them. ── */}

What we commit to, including when the answer is no

We are a young company, so we would rather tell you how we work than show you quotes you have no way to check.
{[["message-circle","We will talk you out of it","If your grades do not clear a programme, you hear that on the free call, before you have paid us anything or wasted an application fee."],["shield-check","No promises we cannot keep","We do not own housing and we do not sit on admissions panels. What we control is that your file is complete, on time, and that somebody reads your rental contract before you sign it."],["users","One advisor, start to arrival","The same person handles your case from first question to arrival week, in English, Nederlands, Hindi, Tamil or Telugu. You will not be passed around a call centre."]].map(([ic,t,q],i)=>(

{t}

{q}

 ))}
{/* ── The handbook ── */}
Doing it yourself

The whole thing, written down, for €19

Sixty-two pages on the residence permit, BSN, DigiD, housing and rent law, banking, health insurance, the huisarts, SIM cards, transport and working here. In the order things actually happen to you.
{/* ── Closing CTA ── */}
); } Object.assign(window, { HomeScreen, JourneyScene, CompareSection });