diff --git a/nextjs-app/components/AdmissionsView.module.css b/nextjs-app/components/AdmissionsView.module.css index 2751877..06b457d 100644 --- a/nextjs-app/components/AdmissionsView.module.css +++ b/nextjs-app/components/AdmissionsView.module.css @@ -442,6 +442,58 @@ line-height: 1; } +/* ─── Easy-to-miss callouts ──────────────────────────── */ + +.calloutGroup { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-top: 0.7rem; +} + +.callout { + display: flex; + gap: 0.55rem; + padding: 0.6rem 0.75rem; + background: var(--accent-gold-bg, rgba(201, 162, 39, 0.12)); + border: 1px solid rgba(201, 162, 39, 0.28); + border-left: 3px solid var(--accent-gold, #c9a227); + border-radius: 8px; +} + +.calloutIcon { + flex-shrink: 0; + width: 1.05rem; + height: 1.05rem; + margin-top: 0.1rem; + border-radius: 50%; + background: var(--accent-gold, #c9a227); + color: #fff; + font-size: 0.72rem; + font-weight: 800; + line-height: 1.05rem; + text-align: center; +} + +.calloutText { + min-width: 0; +} + +.calloutTitle { + font-size: 0.82rem; + font-weight: 700; + color: var(--accent-gold-text, #7a6800); + line-height: 1.3; + margin-bottom: 0.15rem; +} + +.calloutBody { + font-size: 0.82rem; + color: var(--text-secondary, #5c564d); + line-height: 1.5; + margin: 0; +} + /* ─── Tips ───────────────────────────────────────────── */ .tips { diff --git a/nextjs-app/components/AdmissionsView.tsx b/nextjs-app/components/AdmissionsView.tsx index b3d8264..82ec508 100644 --- a/nextjs-app/components/AdmissionsView.tsx +++ b/nextjs-app/components/AdmissionsView.tsx @@ -54,6 +54,9 @@ interface Step { title: string; body: string; highlight?: 'deadline' | 'offer'; + /* Easy-to-miss, deadline-sensitive warnings surfaced as callout boxes + rather than buried in the body prose. */ + callouts?: { title: string; body: string }[]; /* How SchoolCompare helps at this stage of the journey */ tool?: { label: string; href: string }; } @@ -61,7 +64,17 @@ interface Step { const SECONDARY_STEPS: Step[] = [ { title: 'Check entry criteria', - body: 'Look at each school\'s admissions policy — catchment areas, faith criteria, sibling priority, and aptitude tests vary widely. Two deadlines catch parents out: grammar and other selective schools need separate entrance-test registration months earlier (often by September), and faith schools often want a supplementary information form sent directly to the school alongside the council application.', + body: 'Look at each school\'s admissions policy — catchment areas, faith criteria, sibling priority, and aptitude tests vary widely.', + callouts: [ + { + title: 'Selective schools register earlier', + body: 'Grammar and other selective schools need separate entrance-test registration months earlier — often by September, well before the 31 October deadline.', + }, + { + title: 'Faith schools may need an extra form', + body: 'Many faith schools require a supplementary information form (SIF) sent directly to the school, on top of the council application.', + }, + ], tool: { label: 'Find schools & view their admissions history', href: '/' }, }, { @@ -100,7 +113,13 @@ const SECONDARY_STEPS: Step[] = [ const PRIMARY_STEPS: Step[] = [ { title: 'Research entry criteria', - body: 'Faith schools, language units, and distance-based catchments differ by school. Start by reading each school\'s admissions policy — and note that faith schools often require a supplementary information form sent directly to the school, in addition to the council application.', + body: 'Faith schools, language units, and distance-based catchments differ by school. Start by reading each school\'s admissions policy on their website or the council\'s website.', + callouts: [ + { + title: 'Faith schools may need an extra form', + body: 'Many faith schools require a supplementary information form (SIF) sent directly to the school, in addition to the council application.', + }, + ], tool: { label: 'Find schools & view their admissions history', href: '/' }, }, { @@ -307,6 +326,19 @@ export function AdmissionsView() { {step.date &&
{step.body}
+ {step.callouts && step.callouts.length > 0 && ( +{c.body}
+{step.body}
+ {step.callouts && step.callouts.length > 0 && ( +{c.body}
+