From 6045114ca20d8e6245f8d943b687bc90297a6aaf Mon Sep 17 00:00:00 2001
From: Tudor Sitaru <tudor.sitaru@gmail.com>
Date: Tue, 19 May 2026 09:20:35 +0100
Subject: [PATCH] feat(mobile): trim home hero and school-detail hero above the
 fold
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

MOB-06: On phones the home hero stacked eyebrow tag, h1, description
paragraph, search input, button, "Schools near me" and three explore
chips before the user could see the deadlines strip. Hide the eyebrow
and the descriptive paragraph at ≤640px (the h1 already names the
product; the search input is the primary action) and move the
"Start exploring" chips to render after the admissions deadlines —
time-sensitive info now leads, generic discovery follows. Result on
390×844: heading → search → Schools near me → first deadline chip
all fit above the fold.

MOB-11: The school-detail hero took ~2 viewports before the first real
metric. At ≤768px, switch .meta back to row+wrap so the short pills
("Manchester" / "Voluntary aided") flow 2-per-row instead of stacking
3 full rows, and hide the .headerDetails block (headteacher / website /
pupil count / trust) — secondary info that lives in the Pupils &
Inclusion section anyway. Reclaims ~70px of hero so the Ofsted card
and the headline metric surface within a single viewport.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 nextjs-app/components/HomeView.module.css     | 17 ++++++++
 nextjs-app/components/HomeView.tsx            | 39 +++++++++++--------
 .../components/SchoolDetailView.module.css    | 14 ++++++-
 3 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/nextjs-app/components/HomeView.module.css b/nextjs-app/components/HomeView.module.css
index 3f239a9..9641f41 100644
--- a/nextjs-app/components/HomeView.module.css
+++ b/nextjs-app/components/HomeView.module.css
@@ -74,6 +74,23 @@
   }
 }
 
+/* Above the fold on phones, every line costs. Drop the eyebrow tag and the
+   long descriptive paragraph — the h1 already names the product, and the
+   search input is the primary action users came to perform. */
+@media (max-width: 640px) {
+  .heroSection {
+    padding-top: 0.75rem;
+    margin-bottom: 1rem;
+  }
+  .heroEyebrow,
+  .heroDescription {
+    display: none;
+  }
+  .heroTitle {
+    font-size: 1.65rem;
+  }
+}
+
 /* View Toggle */
 .viewToggle {
   display: flex;
diff --git a/nextjs-app/components/HomeView.tsx b/nextjs-app/components/HomeView.tsx
index b960310..53a3531 100644
--- a/nextjs-app/components/HomeView.tsx
+++ b/nextjs-app/components/HomeView.tsx
@@ -269,23 +269,6 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
             </button>
             {geoError && <p className={styles.geoError} role="alert">{geoError}</p>}
           </div>
-          <div className={styles.exploringRow}>
-            <span className={styles.exploringLabel}>Start exploring</span>
-            <div className={styles.exploringChips}>
-              <a href="/rankings" className={styles.exploringChip}>
-                <span className={styles.chipDot} aria-hidden="true" />
-                Top-rated primary schools
-              </a>
-              <a href="/rankings" className={styles.exploringChip}>
-                <span className={styles.chipDot} aria-hidden="true" />
-                Top-rated secondary schools
-              </a>
-              <a href="/compare" className={styles.exploringChip}>
-                <span className={styles.chipDot} aria-hidden="true" />
-                Start a comparison
-              </a>
-            </div>
-          </div>
         </div>
       )}
 
@@ -335,6 +318,28 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
         </section>
       )}
 
+      {/* Secondary discovery — moved below deadlines so the admissions
+          countdown (time-sensitive) shows ahead of generic "explore" links. */}
+      {!isSearchActive && initialSchools.schools.length === 0 && (
+        <div className={styles.exploringRow}>
+          <span className={styles.exploringLabel}>Start exploring</span>
+          <div className={styles.exploringChips}>
+            <a href="/rankings" className={styles.exploringChip}>
+              <span className={styles.chipDot} aria-hidden="true" />
+              Top-rated primary schools
+            </a>
+            <a href="/rankings" className={styles.exploringChip}>
+              <span className={styles.chipDot} aria-hidden="true" />
+              Top-rated secondary schools
+            </a>
+            <a href="/compare" className={styles.exploringChip}>
+              <span className={styles.chipDot} aria-hidden="true" />
+              Start a comparison
+            </a>
+          </div>
+        </div>
+      )}
+
       {/* How it works — only on landing page */}
       {!isSearchActive && (
         <section className={styles.howItWorks}>
diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css
index edc5ff3..56b0154 100644
--- a/nextjs-app/components/SchoolDetailView.module.css
+++ b/nextjs-app/components/SchoolDetailView.module.css
@@ -855,11 +855,23 @@
         font-size: 1.25rem;
     }
 
+    /* Pills wrap horizontally instead of stacking — short tokens like
+       "Manchester" / "Voluntary aided" fit 2 per row instead of 3 full
+       rows of empty horizontal space. */
     .meta {
-        flex-direction: column;
+        flex-direction: row;
+        flex-wrap: wrap;
         gap: 0.375rem;
     }
 
+    /* Secondary header info (headteacher, website, pupil count, trust)
+       isn't needed above the fold on phones — pupil count lives in the
+       Pupils & Inclusion section, website is one scroll away. Reclaim
+       the ~3 vertical lines so the actual metrics surface sooner. */
+    .headerDetails {
+        display: none;
+    }
+
     .metricsGrid {
         grid-template-columns: repeat(2, 1fr);
     }