Feat(frontend): implement 404 Not Found page with routing fallback for MVP demo safety

[Cleopatra-K]

Overview

Create a reusable 404 Not Found page that acts as a safe fallback for unimplemented routes, broken navigation, and incomplete MVP features during Demo 1.

This page will also serve as a controlled "feature not ready yet" experience for users clicking unfinished UI elements.

---

Functional Scope

This page will be triggered by:

• Invalid URLs
• Unimplemented routes
• Temporary placeholder navigation (buttons/tabs not yet built)

---

Tasks

Component Setup

• Create NotFoundComponent under pages/not-found
• Add route entry in app.routes.ts
• Configure wildcard route **

UI Design

• Display 404 message clearly
• Add short explanation (e.g. "This feature is not available in MVP yet")
• Add primary action button (Back to Dashboard)
• Add secondary action (Go to Login or Home)

UX / Demo Safety

• Ensure all broken/unimplemented navigation routes land here
• Ensure message is demo-friendly (not error-heavy)
• Add optional "contact/support" placeholder text

Styling

• Use shared design system (colors, spacing, typography)
• Responsive (mobile/tablet/desktop)
• Match app layout system

---

Acceptance Criteria

• Any unknown route shows the 404 page
• Clicking broken/unimplemented links shows the 404 page
• Navigation button works correctly
• UI is consistent with app theme
• Fully responsive

---

Definition of Done (DoD)

• Component created and routing configured
• All acceptance criteria above are met
• Jest unit test written for the component
• Reviewed and approved via PR
• Merged into dev with no pipeline failures
• Closes this issue via PR reference (e.g. Closes #X)

---

Dependencies

• Requires routing system setup (app.routes.ts)

---

Notes

This page is not just an error page — it is a controlled MVP fallback system for demo stability.