From 15da060e4af37fbae919e0edf25f108266de2585 Mon Sep 17 00:00:00 2001
From: Tudor <tudor@Tudors-MacBook-Pro.local>
Date: Tue, 21 Jul 2026 12:22:49 +0100
Subject: [PATCH] feat(admissions): surface easy-to-miss deadlines as callout
 boxes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The selective-school registration and faith-school SIF warnings were
added as prose in the criteria steps, where they read as ordinary
sentences and were easy to skim past. Pulled them into structured
callout boxes with an amber "note" treatment (using the page's own
gold accent tokens), a warning glyph, and a bold lead-in — so the two
deadlines parents most often miss actually stand out.

- Added a `callouts` field to Step; render as a callout group between
  the body and the tool link (both primary and secondary timelines).
- Reverted the warning text back out of the step bodies so it isn't
  duplicated.

Verified with tsc --noEmit and next build.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
---
 .../components/AdmissionsView.module.css      | 52 +++++++++++++++++++
 nextjs-app/components/AdmissionsView.tsx      | 49 ++++++++++++++++-
 2 files changed, 99 insertions(+), 2 deletions(-)

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 && <div className={styles.stepDate}>{step.date}</div>}
                 <div className={styles.stepTitle}>{step.title}</div>
                 <p className={styles.stepBody}>{step.body}</p>
+                {step.callouts && step.callouts.length > 0 && (
+                  <div className={styles.calloutGroup}>
+                    {step.callouts.map((c) => (
+                      <div key={c.title} className={styles.callout}>
+                        <span className={styles.calloutIcon} aria-hidden="true">!</span>
+                        <div className={styles.calloutText}>
+                          <div className={styles.calloutTitle}>{c.title}</div>
+                          <p className={styles.calloutBody}>{c.body}</p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
                 {step.tool && (
                   <a
                     href={step.tool.href}
@@ -355,6 +387,19 @@ export function AdmissionsView() {
                 {step.date && <div className={styles.stepDate}>{step.date}</div>}
                 <div className={styles.stepTitle}>{step.title}</div>
                 <p className={styles.stepBody}>{step.body}</p>
+                {step.callouts && step.callouts.length > 0 && (
+                  <div className={styles.calloutGroup}>
+                    {step.callouts.map((c) => (
+                      <div key={c.title} className={styles.callout}>
+                        <span className={styles.calloutIcon} aria-hidden="true">!</span>
+                        <div className={styles.calloutText}>
+                          <div className={styles.calloutTitle}>{c.title}</div>
+                          <p className={styles.calloutBody}>{c.body}</p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
                 {step.tool && (
                   <a
                     href={step.tool.href}