Add global shared UI Footer component to the root layout file

### Context
Resource: [Next.js: Migrate routing hooks](https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-5-migrating-routing-hooks)

Currently, the following UI components are shared globally and rendered in the `Layout` component for the `page` router:

- `Band`
- `ParticlesBg`
- `BackToTopButton`
- `Header`
- `GlobalNav`
- `GithubAnchor`
- `LogoAnchor`
- `NavDropDown`
- `NavIcon`
- `NavLink`
- **`Footer`**
- `Notification`
- `PageTitle`

In this issue, we want to render `Footer` in the root layout of the `app` router. We'll also need to migrate the routing hook `useRouter`.

### Problem or idea
As stated above, refactor the `Footer` component and render it in the root layout of the `app` router.

### Solution or next step
- Refactor `Footer`
- Add it to the root layout in the `app` folder