feat: add responsive footer with logo, links, and contact section

[biswajit-sarkar-007]

Pull Request Description

Overview

This pull request introduces a new responsive footer component to the website. The footer includes essential elements such as a company logo, quick links, terms and conditions, and contact information. It is designed to be fully responsive, ensuring a consistent and user-friendly experience across various screen sizes, from desktops to mobile devices.

Key Features

• Logo Section: Displays the company logo with a brief description. The logo scales down appropriately on smaller screens for better visibility.
• Quick Links: A list of important navigation links, including Home, Books, Feedback, About Us, and Contact Us, with hover effects for better user interaction.
• Terms and Conditions: A section containing legal information related to the website.
• Contact Information: Provides the company’s phone number, email, and location with appropriate icons for easy identification.

Responsive Design

• The footer layout is optimized for various screen sizes:
  • Desktop: The footer items are aligned horizontally, with equal spacing between them.
  • Tablet and Mobile: The items stack vertically on smaller screens with centered alignment and reduced spacing for improved mobile-friendliness.
• Font sizes, padding, and margins adjust dynamically to enhance readability on all devices.

Code Improvements

• Used flexbox for flexible and modern layout structure.
• Added media queries for responsive behavior, including font size adjustments, logo scaling, and flexible padding.
• Included hover effects on the links for improved user interaction.

How to Test

1. View the footer on different screen sizes (desktop, tablet, and mobile).
2. Ensure that the logo, links, and contact details are visible and appropriately aligned.
3. Check the hover effects on the navigation links.
4. Verify that the footer elements remain evenly spaced and legible as the screen size changes.

Screenshots

Before:

After: