Footer - Copy this React, Tailwind Component to your project
Background part: The main background of the footer is in a dark charcoal color (#333333), creating a contrast with the main part of the page and giving the footer a status. The elements within the footer contrast with the background by using white color (#FFFFFFFF) for text and elements, providing good readability. Logo and brief information: The left side of the footer features the platform logo (scales of justice with pixels) in deep blue (#003366) and turquoise (#00B3B3) colors. The logo can also be adapted for dark backgrounds using light elements (e.g. white). Next to the logo is a brief text describing the platform's mission, such as: “LegalTech platform for legal process automation and risk analysis”. The text is in Roboto Regular font, color white (#FFFFFFFF). Navigation links: In the center of the footer there is a block with navigation links. They lead to the main pages of the platform: “About the platform”, “Legal advice”, “Risk analysis”, “Documents”, “Contacts”. Links are made in white color (#FFFFFFFF) with color change on hovering to turquoise (#00B3B3), which provides interactivity. The font for links is Roboto Regular. The links themselves are arranged in a column or grid, depending on the screen width, which maintains visual harmony and structure. Contact Information and Social Media: A block of contact information is placed on the right side, including the company's phone number, email and office address. The text of the contact information is in white (#FFFFFFFF), and meaningful elements such as phone number or email can be highlighted in deep blue (#003366) for emphasis. Below the contact information can be social media icons if the platform has a presence on social networks (e.g. LinkedIn, Twitter). Icons are made in a minimalistic style, corresponding to the corporate palette: white with a change to turquoise (#00B3B3) on mouseover. Privacy Policy and Terms of Use: At the bottom of the footer are links to the Privacy Policy and Terms of Use, in small Roboto Regular font. These links are also highlighted in white (#FFFFFFFFFF), with the effect of changing color when hovering to turquoise (#00B3B3). The text is neatly arranged so as not to overwhelm the perception. Copywriting: At the very bottom of the footer is a line with the copyright, such as: “© 2024 Judify. All rights reserved.” The font is Roboto Regular and the text color is silver gray (#A5A5A5A5) so as not to be distracting but still visible. If required, partner or license information can be included next to the copyright. Adaptability and responsiveness: The footer is fully adaptive and displays correctly on all devices. On mobile devices, the footer elements rearrange into a vertical block for easy interaction. Text and icons are scaled to maintain readability on all screen resolutions. Responsive design: Footer elements are automatically rearranged based on screen width. For example, navigation links can be grouped into a drop down menu on mobile devices to save space. Visual separators: Separation lines between the main footer blocks (for example, between navigation links and contact information) can be used to structure elements. These lines are in silver gray (#A5A5A5A5) and add neatness to the interface.
