Remove BandContext and useBand and display the band at the page level

### Context

We display the `Band` component (which contains a background image) on the following pages:

- Homepage (blue)
- About (blue)
- Compendia (white/animation)

e.g. ) The blue band image


Currently, this is managed within the `Layout` component using the `BandContext` context and its hook, `useBand`.

The visibility of `Band` is controlled based on the selected route via side effect:

```js
const pathWithBand = ['/', '/about', '/compendia/[type]']

useEffect(() => {
setBand(pathWithBand.includes(pathname))
}, [pathname])
```

### Problem or idea

We want to shift the responsibility of managing the band's visibility from `Layout` to individual page components and remove `BandContext` and `useBand`.

### Solution or next step

- Remove `BandContext` and `useBand` and adjust `Layout`
- Render the corresponding `Band` from the following page components:
- `pages/index.js`
- `pages/about.js`
- `pages/compendia/[type].js`