Create a movie-detail-page

[WinterIsCoding23]

Value proposition As a user I want to click on any movie to be able to have more detailed information displayed (genre, director, year, cast, streaming-information)

Description

Acceptance-criteria

• [x] By clicking on a movie-image the user is directed to a movie-detail-page with all relevant information on the respective movie (title, image, director, year, cast, synopsis, etc.)
• [x] The movie-detail-page can be accessed for all movies on the Watchlist
• [x] The movie-detail-page can be accessed for the random-movie
• [x] The navbar-buttons work

Tasks

• [x] Create a new page with a header (title), body (brief movie-information, a synopsis-field and a "currently available for streaming on the following platforms"-field)
• [x] Use [slug] to display the correct movie(s)
• [x] Add styling to the detail page
• [x] Render movie-details in components & import them into movie/[id]/page.js

[WinterIsCoding23]

• [x] Missing information about director, cast
• [x] Find out how to get streaming-info
• [x] Fix structure - error: "Warning: validateDOMNesting(...): bodycannot appear as a child of body." (layout-file is NOT unmounted in next.js 13)
• [x] Fix bug: details NOT stretching over whole page
• [x] Bug-Fix: show margin at unavailable for Streaming
• [x] Add distinction for cast > 9 and cast <= 9
• [x] Add genres + styling