Footer Component - AgroLogi/FreshShop GitHub Wiki

The Footer component is a reusable React component designed to serve as the footer section of the FreshShop e-commerce website. It provides important links to various pages, social media icons, and branding information. The component utilizes Next.js Image for optimized image rendering and is styled using Tailwind CSS classes.

The Footer component in your code is built using Next.js and Tailwind CSS. It contains the following main sections:

Logo and Brand Name:

• The component uses the Image component from Next.js to display a logo at the top center of the footer.
• Below the logo, the brand name "FreshShop" is displayed with some descriptive text.

Navigation Links:

• There are two sets of navigation links:
• The first set contains links such as "About," "Careers," "History," "Services," "Projects," and "Blog." These are centered and styled to change color slightly on hover.
• The second set includes social media icons for Facebook, Instagram, Twitter, GitHub, and Dribbble. Each icon has an accessible label (using sr-only spans), and the icons are displayed as SVGs.

Styling and Layout:

• The entire footer is wrapped in a div with a gray background.
• Margins, padding, and text alignment are adjusted using Tailwind CSS classes to create a visually appealing layout.
• The justify-center class is used in multiple places to center the elements horizontally.
• The navigation links and social media icons have a hover effect that lightens their color.

Responsive Design:

• The component is designed to be responsive, with padding and layout changes based on screen size (sm, md, lg).
• Overall, this Footer component serves as a structured and user-friendly footer for the FreshShop web application, providing essential navigation and brand identity elements.