[Enhancement]: Optimize initial load time via route-based code splitting in App.js

### Feature and its Use Cases

### Overview
During a performance review of the web application's initial load sequence, I noticed that all page components (such as `Home`, `Output`, `Previous`, etc.) are imported synchronously at the top level of `App.js`.

### The Bottleneck
Because these components—and their heavy underlying dependencies, such as `pdf-lib`—are bundled together, the browser is forced to download the entire application's JavaScript payload before it can render the initial landing page. This inflates the initial `bundle.js` size and negatively impacts First Contentful Paint (FCP). As the application scales with new features, this bundle will only continue to grow.

### Proposed Architecture Change
Implement route-based code-splitting to load pages dynamically only when the user navigates to them:
1. Convert static page imports to dynamic `React.lazy()` imports.
2. Wrap the `Routes` block in a `` boundary.
3. Provide a lightweight, non-blocking fallback UI (like an `animate-spin` loader matching the EduAid brand colors) to maintain UX during chunk fetching.

*Note: I have already tested this architecture locally and captured the Chrome DevTools Network metrics showing a significant reduction in the initial payload. I will link a PR shortly with the implementation and visual proof.*

### Additional Context

_No response_

### Code of Conduct

- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have searched existing issues to avoid duplicates