Implement Movie Categories Page with Details

[ahmedalsanadi]

Implement Movie Categories Page with Details

Assigned to: @ahmedalsanadi

Description

Create a new page in the Next.js application that displays popular, top-rated, upcoming, and now-playing movies. This page will serve two purposes:

1. Display Categories of Movies:

• The page will fetch and display four different categories of movies using the Movie Database API:
  • Popular Movies
  • Top-Rated Movies
  • Upcoming Movies
  • Now Playing Movies
• Each category will display movie cards (with thumbnails, titles, and release dates).

2. Movie Details:

• When a user clicks on a movie card, they should be redirected to a detailed page for that specific movie.
• The URL should include the movie’s ID (e.g., /movies/[id]).
• The details page should display the following information:
  • Movie poster
  • Title
  • Overview/description
  • Release date
  • Genre
  • Rating (e.g., 4.5/5)
  • Any other relevant information
• Use the Movie Database API to fetch the details for the selected movie.

---

Additional Notes:

• The page should be responsive and utilize client-side rendering where appropriate to ensure a smooth user experience.
• Use the existing dark/light mode feature to ensure the page is styled properly in both modes.
• Ensure proper error handling (e.g., displaying a message if data can't be fetched).
• Include a loading indicator when fetching data.

---

Tasks:

• [x] Fetch and display movies in four categories (Popular, Top-Rated, Upcoming, Now Playing).
• [x] Create a clickable card component for each movie.
• [x] Implement a dynamic movie details page that shows more detailed information when a movie card is clicked.
• [x] Ensure the page is responsive and properly styled.
• [x] Implement error handling and loading states.