Footer - Copy this React, Tailwind Component to your project
Design a fully responsive footer for a Netflix like dashboard. The footer should include the following elements: Structure: A container that holds the footer content. Links to important pages: About Us, Contact, Privacy Policy, Terms of Service, Help Center. Social media icons/links for platforms like Facebook, Twitter, and Instagram. A copyright statement. Styling: Use a dark background (similar to Netflix) with white text. Ensure links change color on hover (use Netflix red for hover effects). Arrange the footer items in a flexible layout that adjusts based on screen size (using Flexbox or Grid). Make sure the footer elements stack vertically on smaller screens while maintaining a clean and centered layout. Responsiveness: Implement media queries to adjust the layout for different screen sizes (desktop, tablet, mobile). Ensure that the text and links are easily readable on all devices. Accessibility: Include appropriate ARIA roles and ensure color contrast meets accessibility standards. Feel free to adjust any part of the prompt based on your specific design requirements or preferences! You said: i want full featured each details prompt of netflix footer ChatGPT said: ChatGPT Here’s a detailed prompt for creating a fully responsive footer for a Netflix like dashboard, including all features, design elements, and responsive behavior: Detailed Prompt for a Netflix like Footer: 1. Layout Structure: Create a <footer> element with a class name (e.g., class="footer"). Inside the footer, use a <div> with a class (e.g., class="footer container") to contain all footer content. Add a <div> for links (class="footer links") that contains: Links for: About Us Contact Privacy Policy Terms of Service Help Center Add another <div> for social media links (class="footer social") that includes: Icons or text links for: Facebook Twitter Instagram Finally, include a <div> for the copyright notice (class="footer bottom"): Text stating the copyright (e.g., © 2024 Netflix Clone. All rights reserved.) 2. Styling: Overall Footer: Set a background color of dark gray or black (#141414). Use white (#ffffff) for text color. Add padding of 20px to the footer for spacing. Center align all text in the footer. Footer Links: Set the links to be displayed in a horizontal row with flexbox: Use display: flex; and justify content: center; to align links. Allow links to wrap with flex wrap: wrap; for smaller screens. Add margin between links (e.g., margin: 0 15px;). Change link color to white and remove underlines (text decoration: none;). Implement a hover effect that changes the color to Netflix red (#e50914). Social Media Links: Style social icons or text links similarly to the footer links. Add slight margin between social icons (e.g., margin: 0 10px;). Copyright Notice: Set a smaller font size (e.g., font size: 14px;) for the copyright text. Center this text and ensure it has some top margin for spacing. 3. Responsive Behavior: Use media queries to adjust styles for different screen sizes: For tablets (max width: 768px): Stack footer elements vertically (flex direction: column;). Ensure links still wrap properly and are centered. For mobile devices (max width: 480px): Reduce margin between footer links for better space management (e.g., margin: 0 10px;). Adjust the font sizes for better readability (e.g., slightly smaller for links and copyright text). 4. Accessibility Considerations: Ensure sufficient color contrast between text and background for readability. Add aria labels to social media links for screen readers. Ensure that all links are navigable using keyboard controls and that they have visible focus states.
