Currently, when users navigate to an invalid or non-existent route in Docspect, the application displays a blank white screen instead of a proper 404 page.
To improve user experience and maintain design consistency, a stylized, visually appealing, and responsive 404 page should be implemented.
The contributor should first share and get confirmation on the design mockup (wireframe/sketch/screenshot) before starting the coding implementation.
Expected Behavior
A custom 404 page should be displayed when the user navigates to any invalid route.
The page should:
Match Docspect’s overall theme, typography, and color scheme.
Contain a friendly message (document/legal-themed preferred, e.g., “Oops! This document doesn’t exist 📄”).
Include a clear navigation option back to the Home page (button or link).
Be fully responsive for both mobile and desktop views.
Be visually appealing, with subtle animations or effects (e.g., fade-in, pulse, or soft glow).
Current Behavior
Navigating to a non-existent route currently shows a blank white screen.
Steps to Reproduce
Open Docspect.
Navigate to a random invalid route, e.g., /random-invalid-page.
Observe that no 404 page is displayed (only a blank screen).
Acceptance Criteria
A NotFound component is added with appropriate styling and theme integration.
Design mockup is shared and approved first before code implementation.
Fully responsive layout for both mobile and desktop.
Contains at least one navigation option back to the Home page.
Matches Docspect’s UI theme and branding.
PR should include 2 screenshots:
404 page – Desktop view
404 page – Mobile view
References
Inspiration can be taken from modern, themed 404 pages (examples: Spotify, Netlify).
A proffesional document/legal-themed tone is preferred to stay consistent with Docspect.
Currently, when users navigate to an invalid or non-existent route in Docspect, the application displays a blank white screen instead of a proper 404 page.
To improve user experience and maintain design consistency, a stylized, visually appealing, and responsive 404 page should be implemented.
The contributor should first share and get confirmation on the design mockup (wireframe/sketch/screenshot) before starting the coding implementation.
Expected Behavior
A custom 404 page should be displayed when the user navigates to any invalid route.
The page should:
Match Docspect’s overall theme, typography, and color scheme.
Contain a friendly message (document/legal-themed preferred, e.g., “Oops! This document doesn’t exist 📄”).
Include a clear navigation option back to the Home page (button or link).
Be fully responsive for both mobile and desktop views.
Be visually appealing, with subtle animations or effects (e.g., fade-in, pulse, or soft glow).
Current Behavior
Navigating to a non-existent route currently shows a blank white screen.
Steps to Reproduce
Open Docspect.
Navigate to a random invalid route, e.g., /random-invalid-page.
Observe that no 404 page is displayed (only a blank screen).
Acceptance Criteria
A NotFound component is added with appropriate styling and theme integration.
Design mockup is shared and approved first before code implementation.
Fully responsive layout for both mobile and desktop.
Contains at least one navigation option back to the Home page.
Matches Docspect’s UI theme and branding.
PR should include 2 screenshots:
404 page – Desktop view
404 page – Mobile view
References
Inspiration can be taken from modern, themed 404 pages (examples: Spotify, Netlify).
A proffesional document/legal-themed tone is preferred to stay consistent with Docspect.