Add global shared UI Band 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), [Vercel: Context API with Next.js](https://vercel.com/guides/react-context-state-management-nextjs)
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 `Band` in the root layout of the `app` router.

We'll also need to migrate the routing hook `useRouter` and adjust the `BandContext` provider which is used to render the correct band for each route.

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

### Solution or next step
- Refactor `Band` and `BandContext`, and adjust the sub-component as necessary
- Add it to the root layout in the `app` folder