Issue: Implement "What's Popular" Horizontal Slider with Cards
Description:
Implement a "What's Popular" horizontal slider . The slider should display several media cards in a scrollable, horizontal layout, with multiple tabs for different categories such as "Streaming," "On TV," "For Rent," and "In Theaters."
Expected Behavior:
Display a title section at the top that reads "What's Popular."
Below the title, there should be four clickable tabs: "Streaming," "On TV," "For Rent," and "In Theaters."
Each tab should filter and display relevant media content when clicked.
The cards should display the following:
Image: The movie or TV show poster.
Title: The name of the media.
Release Date: The date the media was released.
Rating Circle: A circular rating bar with the average vote (e.g., 82%, 79%).
The slider should be scrollable horizontally with smooth scrolling behavior.
Technical Requirements:
Horizontal Slider Component: Use a slider library (such as react-slick) or a custom implementation with CSS for smooth horizontal scrolling.
Card Component: Create a reusable MediaCard component for each media item.
Dynamic Data: The card content should be populated dynamically using API data (e.g., movie or TV show data from an API like TMDB).
Responsive Styling: Ensure the layout works seamlessly across different screen sizes (desktop, tablet, mobile).
Assets:
Use placeholder images and text if actual data is not yet available.
Issue: Implement "What's Popular" Horizontal Slider with Cards
Description:
Implement a "What's Popular" horizontal slider . The slider should display several media cards in a scrollable, horizontal layout, with multiple tabs for different categories such as "Streaming," "On TV," "For Rent," and "In Theaters."
Expected Behavior:
Technical Requirements:
react-slick) or a custom implementation with CSS for smooth horizontal scrolling.MediaCardcomponent for each media item.Assets:
Use placeholder images and text if actual data is not yet available.