fix: add styled 404 page to docs website

[DhruvGoyal404]

Description

Fixes keploy/keploy#3441

This PR adds a styled 404 page to the Keploy docs website, replacing the current auto-redirect behavior.

Problem

Currently, when users navigate to non-existent pages (e.g., /docs/xyz), they are automatically redirected to /docs/ without any feedback, causing confusion.

Solution

Implemented a fully styled 404 page with:

• Bunny illustration (from blog-website)
• "Back to Home" button (navigates to /docs/)
• "Go to Previous Page" button (uses browser history)
• Responsive two-column layout (desktop: side-by-side, mobile: stacked)
• Dark/Light mode support (uses Docusaurus theme variables)
• Helpful links section (Installation Guide, Glossary, GitHub)
• Accessibility features (ARIA labels, keyboard navigation)

Changes Made

• Modified: src/theme/NotFound/Content/index.js (replaced auto-redirect with styled component)
• Added: static/img/404-not-found.png (bunny illustration)
• Added: static/img/error-404.png (alternative 404 image)

Screenshots

Desktop View:

Mobile View:

Dark Mode:

Testing

✅ Tested on invalid routes (/docs/this-does-not-exist)
✅ "Back to Home" button works
✅ "Go to Previous Page" button works
✅ Responsive layout verified (mobile + desktop)
✅ Dark/Light mode toggle verified
✅ No console errors

Checklist

• Code follows project style guidelines
• Tested locally
• No breaking changes
• DCO sign-off included
• Responsive design implemented
• Accessibility features added

[github-actions]

Thank you and congratulations 🎉 for opening your very first pull request in keploy

[Copilot]

Pull request overview

This PR replaces the auto-redirect behavior on 404 pages with a fully styled, user-friendly error page that provides clear navigation options and helpful resources for users who land on non-existent pages.

Key Changes:

• Replaced automatic redirect with a styled 404 page featuring informative messaging
• Implemented responsive two-column layout with illustration and navigation buttons
• Added dark/light mode support using Docusaurus theme variables

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The condition window.history.length > 1 is not a reliable way to check if there's a previous page in the browsing history. The window.history.length property includes forward history entries and always includes the current page, so it will typically be >= 1 even when there's no previous page to go back to.

This means users who navigate directly to a 404 page (e.g., by typing a URL or following an external link) will still see the "Go to Previous Page" button, but clicking it will navigate them to /docs/ anyway since goBack() won't work as expected.

Consider either removing the conditional check and always using history.push('/docs/') as a fallback, or implementing a more robust solution such as tracking navigation state or simply always redirecting to the home page when the button is clicked.

Suggested change

	// Check if there's previous page in history
	if (window.history.length > 1) {
	history.goBack();
	} else {
	// If no history, go to home
	history.push('/docs/');
	}
	// Always go to docs homepage to avoid unreliable history checks
	history.push('/docs/');

[Achanandhi-M]

Hey @DhruvGoyal404 , the changes look really good, However, from our side, we don’t want to include any bunny image or custom design for the 404 page.

If a user types a 404 URL or visits a non-existent page, it should simply redirect to /docs (the docs homepage). Please update it accordingly. Also please fix the Copilot suggestions.

[DhruvGoyal404]

Sure @Achanandhi-M sir, onto it, will update with the work asap!

[DhruvGoyal404]

@Achanandhi-M Sir,

I've updated the PR as requested!

Changes made:

• ✅ Removed bunny illustration (404-not-found.png and error-404.png)
• ✅ Removed all custom styling and navigation buttons
• ✅ Implemented simple auto-redirect
• ✅ Fixed Copilot's suggestion about history.goBack() being unreliable
• ✅ Ran Prettier to fix all formatting issues

New implementation:
The 404 page now uses a simple useEffect hook to instantly redirect users to the docs homepage without displaying any UI. This is exactly as you requested - no custom design, just a clean redirect.

Please let me know if any other changes are needed!

[Achanandhi-M]

Hey @DhruvGoyal404, could you please fix the failing pipelines? Also, please add a short video showing your changes—it will make the review easier for me. Thanks!

[DhruvGoyal404]

@Achanandhi-M Sir,

I've fixed all the failing pipelines!

Changes made:

• ✅ Resolved merge conflicts
• ✅ Fixed DCO by signing off all commits (now passing!)
• ✅ Ran prettier to fix all formatting issues
• ✅ Other checks are awaiting your approval to run

Demo video:

Untitled.design.1.mp4

The video shows the 404 page instantly redirecting to [/docs/] from any invalid URL.

All checks should pass once you approve the workflows. Ready for review!

[Achanandhi-M]

Hey @DhruvGoyal404, I noticed that many files were changed that don’t seem necessary for this commit. Could you please review and fix those issues? Thanks!

[DhruvGoyal404]

@Achanandhi-M Sir,
I've cleaned up the PR as requested!
Changes made:

• Removed all unnecessary file changes (CSS, images, configs)
• Now only 1 file is modified!
• Clean commit history with proper DCO sign-off
• All commits signed off

The working video was attached previously for your ease of review! The PR now contains only the 404 redirect functionality. Could you please re-review? Thanks!