Movie Details Modal - Copy this React, Tailwind Component to your project
Prompt: description: > Create a movie screen interface similar to Netflix, complete with categories, a featured section, and detailed movie cards. The interface should include the following elements and specifications. main_layout: theme: dark navigation_bar: options: Home Movies TV Shows My List Search Bar categories: Trending Now New Releases Popular on Netflix Action Comedy Drama featured_section: description: > A large banner at the top of the page showcasing a featured movie or TV show. details: includes: high quality background image title brief description buttons: Play Add to My List effect: smooth transition cycling through multiple featured items images: url: https://www.movieposterdb.com/poster/2a56d2c9 url: https://www.movieposterdb.com/poster/4f93a93b url: https://www.movieposterdb.com/poster/6b78d47e movie_tv_show_cards: description: > Each card should display a movie poster or thumbnail, title, and a brief rating or category label. When hovered over, the card should expand slightly and show additional details such as a brief description, rating, and a "Play" button. organization: horizontal scrolling enabled for each row under their respective categories movies: trending_now: name: Inception image: https://www.movieposterdb.com/poster/2a56d2c9 name: The Dark Knight image: https://www.movieposterdb.com/poster/4f93a93b name: Avengers: Endgame image: https://www.movieposterdb.com/poster/6b78d47e new_releases: name: Dune image: https://www.movieposterdb.com/poster/9a78e67f name: No Time to Die image: https://www.movieposterdb.com/poster/1b23d4e5 name: Spider Man: No Way Home image: https://www.movieposterdb.com/poster/3c45e7f8 popular_on_netflix: name: Stranger Things image: https://www.movieposterdb.com/poster/5d67f89a name: Money Heist image: https://www.movieposterdb.com/poster/7e89f01b name: The Witcher image: https://www.movieposterdb.com/poster/0a12d34c action: name: John Wick image: https://www.movieposterdb.com/poster/8b45d67e responsive_design: description: > The interface should be fully responsive, adapting seamlessly to different screen sizes (desktop, tablet, mobile). Ensure that the navigation bar, featured section, and movie cards adjust appropriately on smaller screens. additional_features: description: > Include a modal or popup that appears when a movie/TV show card is clicked, providing detailed information such as a full description, cast, trailers, and similar recommendations. features: search_functionality: > Allows users to search for movies/TV shows by title, genre, or actor. my_list_feature: > Users can save their favorite movies/TV shows for easy access. technologies: description: > Use modern web technologies such as HTML5, CSS3, and JavaScript frameworks like React or Vue.js for a dynamic and interactive user experience. Ensure that the interface is visually appealing, user friendly, and optimized for performance.
