Add global shared UI Band component to the root layout file

[nozomione]

Context

Resource: Next.js: Migrate routing hooks, Vercel: Context API with Next.js 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