Movie Details - Copy this React, Tailwind Component to your project

Prompt for Creating a Netflix Style Movie Details Page for "Deadpool & Wolverine" Objective Design a visually striking movie details page that mimics the Netflix style, utilizing the provided movie data for "Deadpool & Wolverine." The page should be engaging, responsive, and user friendly, presenting all relevant details in an organized manner. Layout Design Page Structure: The page should consist of a header, main content area, and footer. Utilize a responsive grid layout that adapts to various screen sizes (desktop, tablet, mobile). Background: Set the backdrop_path (e.g., /dvBCdCohwWbsP5qAaglOXagDMtk.jpg) as the full screen background image. Apply a subtle dark overlay (e.g., rgba(0, 0, 0, 0.6)) to enhance text readability against the backdrop. Header Include a sticky navigation bar with a logo on the left and navigation links on the right (Home, Movies, TV Shows, My List). Add a search bar for user convenience. Main Content Area Movie Poster: Display the movie poster using the poster_path (e.g., /8cdWjvZQUExUUTzyp4t6EDMubfO.jpg) on the left side of the page. Implement a hover effect that slightly enlarges the poster and reveals a short description or play button. Movie Details Section: Title and Tagline: Use a large, bold font for the movie title: Deadpool & Wolverine. Include the tagline below the title in a slightly smaller, italic font: "Come together." Release Information: Display the release date, runtime, and genres in a concise format. Use icons for visual appeal (e.g., a calendar for the release date, a clock for runtime). Present the genres as colorful badges (e.g., "Action," "Comedy," "Science Fiction") that users can click to explore related content. Rating Section: Show the average rating using a star icon, accompanied by the vote count (e.g., "7.7 ★ (3,349 votes)"). Overview Section: Create a dedicated box for the movie overview, maintaining a clean and readable layout. Use a slightly larger font size and a softer background color for better visibility. Production Companies: List the production companies with their logos (from logo_path), aligned in a horizontal row. If no logo is available, display just the company name in a standard font. Add links to each production company’s page if applicable. Collection Details: If the movie is part of a collection, create a section titled "Part of the [Collection Name]". Display the collection's poster image (poster_path) alongside a brief description. Provide a button linking to the collection page. Call to Action Include prominent buttons such as "Watch Now" and "Add to My List", styled with Netflix's characteristic red and white colors. Position these buttons below the movie overview, ensuring they are easily accessible. Footer Design a footer with links to social media, terms of service, and privacy policy. Include any necessary disclaimers about content ownership or availability. Style Guide Use a color palette inspired by Netflix's branding (mainly black, red, and white). Choose modern sans serif fonts for a clean aesthetic. Implement smooth transitions and hover effects for buttons and links to enhance interactivity. Additional Features Implement a modal or lightbox effect for the movie poster, allowing users to see a larger version when clicked. Consider adding a section for user reviews and ratings to foster community engagement.