[Feature] Implement a Custom 404 Not Found Page

[Aditya948351]

Description

Right now, navigating to a broken link shows the default Next.js 404 page, which breaks the immersion of the DevPath application.

Proposed Solution

1. Create a app/not-found.tsx (or pages/404.tsx depending on the router).
2. Design a beautiful, DevPath-branded 404 page.
3. Include a "Return Home" button to help the user get back to safety.

Expected Outcome

A cohesive brand experience even when users hit a dead end.

[saurabhhhcodes]

I would like to work on this under GSSoC 2026.

Plan:

• confirm whether the project uses the App Router or Pages Router
• add a DevPath-branded custom 404 page in the correct route location
• include a clear return-home action and keep it responsive/accessibility friendly
• run lint/build before opening the PR

Please assign this to @saurabhhhcodes if the approach works.

[nishupr]

Hey @Aditya948351 !

I'd love to work on this issue. I've already explored the codebase and have a clear implementation plan ready to go.

Approach

Since DevPath uses the Next.js App Router, I'll create app/not-found.tsx which Next.js automatically renders for any unmatched routes - no extra configuration needed.

Design Plan

• Terminal-window card UI - a dark-themed card with a macOS-style title bar, fitting the developer aesthetic of DevPath
• Branded color palette - using DevPath's existing design tokens to keep everything cohesive
• Animated background - floating code symbols ({}, =>, 404, //) drifting in the background for depth and character
• Bold 404 typography - large, gradient display text so users immediately understand what happened
• Clear messaging -a friendly, developer-flavored description of the error without being alarming

Components / Features

• app/not-found.tsx using the App Router convention
• "Return Home" primary CTA button → redirects to /
• "View Roadmap" secondary button as an alternative path forward
• Fully responsive layout for mobile and desktop
• Smooth entrance animations with staggered reveals
• No external dependencies - pure Next.js + CSS

Files to be Added/Modified

app/not-found.tsx   ← new file (primary deliverable)

Could you please assign this issue to me?

[Aditya948351]

@saurabhhhcodes and @nishupr Both can work on this!

As that page was already implemented but there are some issues like when should it come, look into that and add in description that on what cases it comes!
Also share the screenshot of the implemented page both of you, best one will be merged in accordance with both UI and some minor Backend Fix.