feat: improve 404 NotFound UI and add brand header

[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 and aligns the design with the DevCard UI system.

Closes #591

---

Type of Change

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

---

What Changed

• Improved layout sizing of the 404 container for better spacing and visual balance
• Increased card width and padding for a more premium UI feel
• Enhanced “DevCard” brand header styling for stronger visual hierarchy
• Refined gradient styling and typography consistency
• Improved overall readability and spacing of 404 page elements
• Updated NotFound.tsx and NotFound.css

---

How to Test

1. Run the web app locally
2. Navigate to any invalid route (e.g. /random-page)
3. Verify the 404 page renders correctly
4. Check that:
   • DevCard branding is visible and prominent
   • Layout is centered and well-spaced
   • Button redirects back to home correctly

---

Checklist

• My code follows the project's coding style (pnpm -r run lint passes).
• TypeScript compiles without errors (pnpm -r run typecheck).
• I have added or updated tests for the changes I made.
• All tests pass locally (pnpm -r run test).
• 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

Before

After

---

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.

[vercel]

@Yogender-verma is attempting to deploy a commit to the Prashantkumar Khatri's projects Team on Vercel.

A member of the Team first needs to authorize it.

[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: Thu, 18 Jun 2026 03:09:37 GMT

[ShantKhatri]

Kindly reviewing that the, before version is better than the after one.

[Yogender-verma]

wanted to add the brand name DEVCARD on the top

[ShantKhatri]

wanted to add the brand name DEVCARD on the top

I appreciate that, but it's not aligning with the current design standards.

[Yogender-verma]

would u like if i add the naame just out of the box and maintain everything same??

like this?

If not I am really very sorry

[ShantKhatri]

would u like if i add the naame just out of the box and maintain everything same?? like this?

If not I am really very sorry

That's totally fine. You can try something like this:

Here we have some other references:
https://www.magnific.com/free-photos-vectors/404-page-dark/2#uuid=37604de6-e979-4ddb-a260-6f29310c6a40
https://saaspo.com/page-types/saas-404-page-examples

But we need very minimalistic, and also creative, it would be better. You can share me, what you are selecting. May be can ping me here or on discord.

[ShantKhatri]

would u like if i add the naame just out of the box and maintain everything same?? like this? If not I am really very sorry

That's totally fine. You can try something like this: Here we have some other references: https://www.magnific.com/free-photos-vectors/404-page-dark/2#uuid=37604de6-e979-4ddb-a260-6f29310c6a40 https://saaspo.com/page-types/saas-404-page-examples

But we need very minimalistic, and also creative, it would be better. You can share me, what you are selecting. May be can ping me here or on discord.

Be with the theme. Eager to see what you'll be selecting.

[Yogender-verma]

Oky will do it soon