From d4abb56c2258a2826d23bc05c7143ec21456f50e Mon Sep 17 00:00:00 2001
From: Tudor <tudor.sitaru@gmail.com>
Date: Thu, 5 Mar 2026 13:00:34 +0000
Subject: [PATCH] feat(ui): redesign landing page search and empty states

- Hide empty state placeholder on initial load

- Add prominent hero mode to FilterBar when no search is active

- Fix SchoolCard test TypeScript and assertion errors
---
 .../__tests__/components/SchoolCard.test.tsx  |  8 ++---
 nextjs-app/components/FilterBar.module.css    | 19 ++++++++++++
 nextjs-app/components/FilterBar.tsx           |  5 ++--
 nextjs-app/components/HomeView.tsx            | 30 ++++++++-----------
 4 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/nextjs-app/__tests__/components/SchoolCard.test.tsx b/nextjs-app/__tests__/components/SchoolCard.test.tsx
index 5f99621..d7b1958 100644
--- a/nextjs-app/__tests__/components/SchoolCard.test.tsx
+++ b/nextjs-app/__tests__/components/SchoolCard.test.tsx
@@ -2,11 +2,12 @@
  * SchoolCard Component Tests
  */
 
+import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { SchoolCard } from '@/components/SchoolCard';
 import type { School } from '@/lib/types';
 
-const mockSchool: School = {
+const mockSchool = {
   urn: 100001,
   school_name: 'Test Primary School',
   local_authority: 'Westminster',
@@ -16,9 +17,8 @@ const mockSchool: School = {
   latitude: 51.5074,
   longitude: -0.1278,
   rwm_expected_pct: 75.5,
-  rwm_higher_pct: 25.3,
   prev_rwm_expected_pct: 70.0,
-};
+} as School;
 
 describe('SchoolCard', () => {
   it('renders school information correctly', () => {
@@ -58,6 +58,6 @@ describe('SchoolCard', () => {
     render(<SchoolCard school={mockSchool} />);
 
     // Should show upward trend (75.5 > 70.0)
-    expect(screen.getByText('↗')).toBeInTheDocument();
+    expect(screen.getByTitle('Previous year: 70.0%')).toBeInTheDocument();
   });
 });
diff --git a/nextjs-app/components/FilterBar.module.css b/nextjs-app/components/FilterBar.module.css
index 7d0f71c..274a2d0 100644
--- a/nextjs-app/components/FilterBar.module.css
+++ b/nextjs-app/components/FilterBar.module.css
@@ -13,6 +13,25 @@
   pointer-events: none;
 }
 
+.heroMode {
+  padding: 2.5rem;
+  max-width: 800px;
+  margin: 0 auto 3rem auto;
+  box-shadow: 0 8px 24px rgba(26, 22, 18, 0.08);
+  border-width: 2px;
+  border-color: var(--accent-coral, #e07256);
+}
+
+.heroMode .omniInput {
+  font-size: 1.25rem;
+  padding: 1.25rem 1.5rem;
+}
+
+.heroMode .searchButton {
+  font-size: 1.25rem;
+  padding: 1.25rem 2.5rem;
+}
+
 .searchSection {
   margin-bottom: 1rem;
 }
diff --git a/nextjs-app/components/FilterBar.tsx b/nextjs-app/components/FilterBar.tsx
index 642a63b..16adb6c 100644
--- a/nextjs-app/components/FilterBar.tsx
+++ b/nextjs-app/components/FilterBar.tsx
@@ -8,9 +8,10 @@ import styles from './FilterBar.module.css';
 
 interface FilterBarProps {
   filters: Filters;
+  isHero?: boolean;
 }
 
-export function FilterBar({ filters }: FilterBarProps) {
+export function FilterBar({ filters, isHero }: FilterBarProps) {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -72,7 +73,7 @@ export function FilterBar({ filters }: FilterBarProps) {
   const hasActiveFilters = currentSearch || currentLA || currentType || currentPostcode;
 
   return (
-    <div className={`${styles.filterBar} ${isPending ? styles.isLoading : ''}`}>
+    <div className={`${styles.filterBar} ${isPending ? styles.isLoading : ''} ${isHero ? styles.heroMode : ''}`}>
       <form onSubmit={handleSearchSubmit} className={styles.searchSection}>
         <div className={styles.omniBoxContainer}>
           <input
diff --git a/nextjs-app/components/HomeView.tsx b/nextjs-app/components/HomeView.tsx
index 1152af7..8bb502e 100644
--- a/nextjs-app/components/HomeView.tsx
+++ b/nextjs-app/components/HomeView.tsx
@@ -29,6 +29,7 @@ export function HomeView({ initialSchools, filters }: HomeViewProps) {
 
   const hasSearch = searchParams.get('search') || searchParams.get('postcode');
   const isLocationSearch = !!searchParams.get('postcode');
+  const isSearchActive = !!(hasSearch || searchParams.get('local_authority') || searchParams.get('school_type'));
 
   // Close bottom sheet if we change views or search
   useEffect(() => {
@@ -45,6 +46,7 @@ export function HomeView({ initialSchools, filters }: HomeViewProps) {
       
       <FilterBar
         filters={filters}
+        isHero={!isSearchActive}
       />
 
       {/* Location Info Banner with View Toggle */}
@@ -107,26 +109,18 @@ export function HomeView({ initialSchools, filters }: HomeViewProps) {
           </div>
         )}
 
-        {initialSchools.schools.length === 0 ? (
+        {initialSchools.schools.length === 0 && isSearchActive ? (
           <EmptyState
-            title={hasSearch ? "No schools found" : "Search for Schools"}
-            message={
-              hasSearch
-                ? "Try adjusting your search criteria or filters to find schools."
-                : "Use the search above to find schools by name or search by location to discover schools near a postcode."
-            }
-            action={
-              hasSearch
-                ? {
-                    label: 'Clear all filters and show featured schools',
-                    onClick: () => {
-                      window.location.href = '/';
-                    },
-                  }
-                : undefined
-            }
+            title="No schools found"
+            message="Try adjusting your search criteria or filters to find schools."
+            action={{
+              label: 'Clear all filters',
+              onClick: () => {
+                window.location.href = '/';
+              },
+            }}
           />
-        ) : resultsView === 'map' && isLocationSearch ? (
+        ) : initialSchools.schools.length > 0 && resultsView === 'map' && isLocationSearch ? (
           /* Map View Layout */
           <div className={styles.mapViewContainer}>
             <div className={styles.mapContainer}>