Changes needed in the frontend

[MatiSalinas]

Description

The frontend needs to be responsive to ensure a good user experience. FormLab has to be rewrited to use react-hook-form

Objectives

• Disable animations on News component
• add media queries for mobile
• turn navBar into a menu
• rewrite formLab with react-hook-form All changes will be made in a branch front_responsive.

[MatiSalinas]

Steps Taken to Implement Responsive Changes and Rewrite FormLab with react-hook-form

1. Disabled Animations on News Component:

   • I introduced a flag to detect if the device is mobile (isMobile). If the device is not mobile, the animations from framer-motion are still enabled, otherwise, they are disabled for a smoother experience on mobile devices.

2. Added Media Queries for Mobile:

   • Media queries were added for devices with a screen width of 800px or less.
   • Most display: flex styles were adjusted to display: column, and the width of several components was set to 100vw to ensure the layout adapts properly on smaller screens.

3. Transformed Navbar into a Menu:

   • The isMobile flag was again used to provide a different menu layout for mobile devices.
   • On mobile, the navbar was replaced with a collapsible menu for better usability and space optimization.

4. Rewrote FormLab with react-hook-form:

   • I replaced the previous state management for form responses with the register method from react-hook-form to handle form data.
   • Form validation was integrated using zod for schema-based validation, ensuring proper error handling and cleaner code.

These changes were made in the front_responsive branch.