fix(home): correct education/Ofsted claims on the landing page #73

Merged
tudor merged 3 commits from fix/homepage-education-accuracy into main 2026-07-21 09:04:57 +00:00
3 changed files with 65 additions and 24 deletions
Showing only changes of commit 1b8adb91ee - Show all commits
+2 -2
View File
@@ -13,7 +13,7 @@ export function EditorialSection({ totalSchools, localAuthorityCount }: Editoria
<div className={styles.editorialGrid}>
<div className={styles.editorialText}>
<div className={styles.editorialKicker}>About school data</div>
<h2 className={styles.editorialHeading}>Making UK school performance data actually readable</h2>
<h2 className={styles.editorialHeading}>Making England&apos;s school performance data actually readable</h2>
<p>
School performance data in England is rich but fragmented. The Department for Education publishes
Key Stage 2 SATs, GCSE attainment, Ofsted outcomes, progress scores, admissions figures and
@@ -23,7 +23,7 @@ export function EditorialSection({ totalSchools, localAuthorityCount }: Editoria
SchoolCompare brings it all into one place. Every school page shows performance against the national
average, explains what the numbers mean, and lets you shortlist schools side by side. Built for
parents, governors, journalists, and anyone who wants to understand a school without reading a
40-page inspection report.
full inspection report.
</p>
</div>
<div className={styles.factbox}>
+38 -12
View File
@@ -869,28 +869,54 @@
color: var(--text-primary, #1a1612);
}
.ofstedBadge {
.ofstedFramework {
align-self: flex-start;
padding: 0.2rem 0.55rem;
padding: 0.15rem 0.5rem;
border-radius: 4px;
background: rgba(45, 125, 125, 0.12);
color: var(--accent-teal, #2d7d7d);
font-size: 0.55rem;
background: rgba(90, 58, 110, 0.12);
color: #5a3a6e;
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.ofstedVerdict {
font-family: var(--font-playfair), 'Playfair Display', serif;
font-size: 1.05rem;
.rcList {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.rcRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.rcArea {
font-size: 0.62rem;
color: var(--text-secondary, #4a453d);
}
.rcChip {
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.52rem;
font-weight: 700;
line-height: 1.2;
color: var(--text-primary, #1a1612);
letter-spacing: 0.03em;
white-space: nowrap;
flex-shrink: 0;
}
.ofstedVerdict em {
.rcChipGood {
background: rgba(45, 125, 125, 0.12);
color: var(--accent-teal, #2d7d7d);
font-style: normal;
}
.rcChipNeutral {
background: var(--accent-gold-bg, rgba(180, 150, 40, 0.12));
color: var(--accent-gold-text, #7a6800);
}
.ofstedMeta {
+25 -10
View File
@@ -12,8 +12,16 @@ export function HowItWorksSection() {
];
const compareRows = [
{ label: 'Reading, Writing & Maths', a: '70%', b: '64%', aHi: true },
{ label: 'Higher standard (RWM)', a: '13%', b: '6%', aHi: true },
{ label: 'Ofsted', a: 'Outstanding', b: 'Good', aHi: true },
{ label: 'Reading progress', a: '+2.1', b: '+0.4', aHi: true },
];
// Report card (Ofsted's framework from Nov 2025): one rating per area of
// school life on a five-point scale, plus a stand-alone safeguarding outcome.
const reportCard: Array<{ area: string; grade: string; good: boolean }> = [
{ area: 'Achievement', grade: 'Strong', good: true },
{ area: 'Curriculum & teaching', grade: 'Expected standard', good: false },
{ area: 'Attendance & behaviour', grade: 'Strong', good: true },
{ area: 'Safeguarding', grade: 'Met', good: true },
];
return (
@@ -49,15 +57,15 @@ export function HowItWorksSection() {
<div className={styles.hiwPhaseLabel}>Secondary · Year 11 · <strong>GCSE Attainment 8</strong></div>
<div className={styles.att8Row}>
<div className={styles.att8BarWrap}>
<div className={styles.att8BarHead}><span>This school</span><span>National avg 50.2</span></div>
<div className={styles.att8BarHead}><span>This school</span><span>National avg 45.9</span></div>
<div className={styles.att8Track}>
<div className={styles.att8Fill} style={{ width: '62%' }} />
<div className={styles.att8NatLine} style={{ left: '50%' }} />
<div className={styles.att8Fill} style={{ width: '68%' }} />
<div className={styles.att8NatLine} style={{ left: '57%' }} />
</div>
</div>
<div className={styles.att8Score}>
<div className={styles.att8Value}>62.4</div>
<div className={styles.att8Delta}>+12.2 vs national</div>
<div className={styles.att8Value}>54.8</div>
<div className={styles.att8Delta}>+8.9 vs national</div>
</div>
</div>
</div>
@@ -77,15 +85,22 @@ export function HowItWorksSection() {
<span className={styles.ofstedBullet} />
<span className={styles.ofstedTitle}>Latest Ofsted inspection</span>
</div>
<span className={styles.ofstedBadge}>OUTSTANDING</span>
<div className={styles.ofstedVerdict}>Rated <em>Outstanding</em> at last inspection.</div>
<div className={styles.ofstedMeta}>Full inspection · March 2024</div>
<span className={styles.ofstedFramework}>Report card · five-point scale</span>
<div className={styles.rcList}>
{reportCard.map(({ area, grade, good }) => (
<div key={area} className={styles.rcRow}>
<span className={styles.rcArea}>{area}</span>
<span className={`${styles.rcChip} ${good ? styles.rcChipGood : styles.rcChipNeutral}`}>{grade}</span>
</div>
))}
</div>
<div className={styles.ofstedMeta}>Full inspection · March 2026</div>
</div>
</div>
<div className={styles.hiwCardBody}>
<div className={styles.hiwStep}>Judgement</div>
<div className={styles.hiwTitle}>Ofsted at a glance</div>
<p className={styles.hiwDesc}>Current grade, inspection date, and a plain-English headline without opening a 40-page report.</p>
<p className={styles.hiwDesc}>Since November 2025, Ofsted rates each area of school life on a five-point scale rather than one overall word. We show every area and the inspection date and, for schools not yet reinspected, the older overall grade they still carry.</p>
</div>
</div>