Error Pages - HURE Features

Overview

HURE features custom error pages that maintain brand consistency while helping users navigate back to useful content. Error messages use real estate terminology for a cohesive experience.

404 - Not Found

Design Elements

Map Icon Badge: “Error 404” with location pin
Headline: “Address Not Found”
Clever Copy: “We searched all 3,148 counties. This one’s not on the map.”
Brand Colors: Navy header, gold accents

Three helpful options presented as cards:

Card	Icon	Title	Subtitle	Link
Home	🏠	Home	Back to the beginning	`/`
Map	🗺️	Explore the Map	Find your next hometown	`/map`
Contact	📞	Contact Us	We’re here to help	`/#contact`

Primary CTA

“Back to Home” Button: Prominent navy button with arrow icon
Links to homepage

Standard site footer with:

Quick Links
Contact information
Copyright notice

500 - Server Error

Similar design pattern with:

Headline: “Something Went Wrong”
Copy: “Our team has been notified and is working on it.”
Retry Option: Button to refresh the page

Implementation

Astro Configuration

Error pages are defined in src/pages/:

src/pages/
├── 404.astro          # Not found handler
└── 500.astro          # Server error handler

Automatic Routing

Astro automatically serves these pages for:

Non-existent routes → 404.astro
Server errors → 500.astro

SSR vs SSG

For static builds, 404 is pre-rendered. For SSR deployments, both pages are rendered dynamically.

Design Philosophy

Brand Consistency

Uses standard header/footer
Maintains navigation options
Consistent typography and colors

Helpful, Not Frustrating

Clear explanation of what happened
Multiple paths back to content
Contact option for assistance

Real Estate Themed

“Address Not Found” instead of “Page Not Found”
“searched all 3,148 counties” references the database
Map exploration encouraged

Accessibility

Semantic HTML structure
Keyboard navigable cards
Screen reader friendly messaging
High contrast text

Testing Results

✅ 404 page displays for invalid URLs
✅ Navigation cards link correctly
✅ Back to Home button works
✅ Header navigation functional
✅ Footer renders completely
✅ Mobile responsive design
✅ Screen reader compatibility