feat: add branded 404 page UI

[Yogender-verma]

Summary

This PR improves the 404 Not Found page UI by enhancing visual hierarchy, increasing layout spacing, and introducing a branded header for better product identity consistency. It improves the overall user experience when navigating to invalid routes.

Closes #591

---

Type of Change

• Bug fix
• New feature
• Refactor (no functional change)
• UI / Design change
• Tests only
• Documentation
• Infrastructure / DevOps
• Security

---

What Changed

• Update existing NotFound.tsx component (no new page required)
• Update NotFound.css to improve spacing and visual structure
• Enhance branding placement and styling at the top of the card
• Maintain existing routing and fallback logic (* route)
• Ensure no functional changes — only UI/UX improvements

---

How to Test

1. Run the web app:
   npm run dev:web
2. Open the app in browser
3. Navigate to a non-existent route:
   http://localhost:5173/random-page
4. Verify:
   • 404 page loads correctly
   • Blue gradient background is visible
   • Card UI is centered and responsive
   • Button redirects to home page

---

Checklist

• My code follows the project's coding style (npm run lint passes).
• TypeScript compiles without errors (npm run typecheck --workspaces --if-present).
• I have added or updated tests for the changes I made.
• All tests pass locally (npm run test --workspaces --if-present).
• I have updated documentation where necessary.
• No new console.log or debug statements left in the code.
• Breaking changes are documented in this PR description.

---

Screenshots / Recordings

---

Additional Context

This change focuses purely on UI/UX improvements and branding consistency. No functional routing or backend logic was modified. Future improvements could include subtle animations or micro-interactions for the 404 state.

[github-actions]

Hi @Yogender-verma,

Thanks for opening this pull request.

This PR has been automatically classified based on the files modified.

Applied Labels

• gssoc:approved
• web

Primary Review Area

• web

Reviewer

@ShantKhatri has been identified as the primary reviewer for this pull request.

If you have any questions regarding the affected area or implementation details, feel free to reach out to the assigned reviewer.

Thank you for your contribution!

[github-actions]

CI — All Checks Passed

Backend — SKIP

Check	Result
Lint	-
Test	-
Typecheck	-

Mobile — SKIP

Check	Result
Lint	-
Test	-

Web — PASS

Check	Result
Build	PASS

---

Last updated: Mon, 22 Jun 2026 10:19:43 GMT

[Harxhit]

LGTM. Approving

[github-actions]

Congratulations @Yogender-verma on getting PR #636 merged!

Thank you for your contribution to the project.

To receive the appropriate GSSoC labels and recognition, please mention @Harxhit in the #get-labels channel on our Discord server and share your merged PR link.