[Bug]: Make the landing page responsive

[BimleshRB]

Description

Describe the issue happened

Enhancement Request: Make the Site Responsive in React.js

Description

Currently, the project lacks responsiveness across different devices and screen sizes. Making the site responsive would ensure a consistent and optimal viewing experience for all users, regardless of the device they are using.

Details

• Viewport Compatibility: Ensure that the site adjusts seamlessly to different viewport sizes, including mobile, tablet, and desktop devices.
• Media Queries: Implement media queries to apply specific styles based on screen width, optimizing layout and content presentation.
• Flexibility: Ensure that elements such as images, text, and navigation menus adapt fluidly to varying screen sizes.
• Accessibility: Maintain accessibility standards by ensuring that all content remains accessible and readable on smaller screens.

Expected Benefits

• Improved user experience across all devices, leading to higher engagement and satisfaction.
• Increased accessibility, allowing users to access and interact with the site from a wide range of devices.
• Enhanced professionalism and credibility through consistent and polished design.

Additional Notes

Considerations such as touch interactions, font size adjustments, and image optimization may also be relevant when making the site responsive.

Tasks

• Evaluate current site layout and design for responsiveness issues.
• Implement responsive design techniques, such as media queries and flexbox, to address identified issues.
• Test responsiveness across various devices and screen sizes to ensure optimal performance.
• Gather feedback from users to validate improvements and identify any remaining issues.
• Document responsive design strategies and best practices for future reference.

Deadline

[3days]

Attach screenshots

Error message

Check for each and every screen size

Severity

Medium

Steps to reproduce

Install the required packages

npm install
npm start

First check it for each and every screen

Environment

OS: any
Browser: Microsoft Edge
Google Chrome
Mozilla's Firefox
Safari
Version: react js 18.0.0
Language:...javascript

Screenshots

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct