Design the Whole UI and Make it Responsive for Mobile, Tablet, and Computer Screens

[AnkitLuhar]

Is your feature request related to a problem? Please describe.

The current design does not adapt well across different screen sizes (mobile, tablet, and computer). This results in misaligned elements, inconsistent styling, and a poor user experience, especially when switching between devices.

Describe the solution you'd like I would like a complete redesign of the webpage UI that ensures responsiveness for all screen sizes. The solution should include:

1>Mobile: Ensure layouts are stacked and touch-friendly, with proper padding and optimized images.

2>Tablet: Provide a balanced design, with appropriate scaling of elements like buttons, images, and text.

3>Computer: Maintain a clean layout, taking advantage of larger screen space with well-aligned components and optimized content display.

The design should ensure consistency across all devices, with elements like navigation, buttons, and content flowing properly without overlap or misalignment.

Describe alternatives you've considered

1>Using pre-built responsive frameworks such as Bootstrap or TailwindCSS for rapid design fixes.

2>Only fixing specific parts of the design for each screen size, but this might lead to inconsistent UX.

Additional context here is the screenshot of the current webpage:

Assign the issue under the Hacktoberfest2024.

[AnkitLuhar]

@IraSoro kindly assign the issue under the Hacktoberfest2024.