{/* HEADER SECTION - Spacious and elegant, utilizing full horizontal width with premium collegiate styling */}

{logoUrl && (

)}

Year 7 2026/27 Cohort Roadmap

Jumeirah College Dubai

School Bulletin

{/* TERM PROGRESS BAR */}

{["Term 1", "Term 2", "Term 3"].map((termName) => { const isCurrentTerm = currentMilestone.term === termName; const isTermPassed = (termName === "Term 1" && currentMilestone.term !== "Term 1") || (termName === "Term 2" && currentMilestone.term === "Term 3"); const termColor = getTermTheme(termName); return (

{termName} {isTermPassed && (

)}

); })}

{/* HORIZONTAL ROAD CANVAS CONTAINER */}

{/* HORIZONTAL SCROLLING WRAPPER - Synchronized 0.65s tween for mathematically aligned tracking */} {/* HORIZONTAL ROAD PATH */} {/* MILESTONE NODES */} {milestones.map((m, i) => { const isPassed = i < activeIdx; const isActive = i === activeIdx; const termColor = getTermTheme(m.term); const nodeY = getMilestoneY(i); return (

setFragmentStep(i)} style={{ position: "absolute", left: `${m.x}%`, top: `${nodeY}%`, transform: "translate(-50%, -50%)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", zIndex: 2, cursor: "pointer" }} > {m.code} {m.code}

); })} {/* VEHICLE AVATAR (BUS) - Coordinates perfectly synchronized to travel curves smoothly */}

{/* DETAILS POSTCARD - Occupies 1/3 height of layout space */}

{currentMilestone.term} • Milestone {activeIdx + 1} of 21

{currentMilestone.title}

{currentMilestone.date}

{/* FOOTER CONTROLS */}

Tap a milestone node or press Next to travel.

);

Year 7 2026/27 Cohort Roadmap

Start of Term 1