Add motion animations to Button and CabinetMaintenance components; update form validation and styling

src/components/Button.jsx

@@ -1,13 +1,16 @@
 import PropTypes from 'prop-types';
+import { motion } from 'motion/react';
 
 function Button({text, onClick}) {
     return (
-        <button 
+        <motion.button 
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
             className="px-12 py-2 text-lg text-white dark:text-primary-dark rounded-full bg-primary dark:bg-secondary-dark" 
             onClick={onClick}
         >
             {text}
-        </button>
+        </motion.button>
     )
 }
 

src/components/FormBox.jsx

@@ -1,10 +1,23 @@
-import { PropTypes } from 'prop-types';
-import clsx from 'clsx';
+import { PropTypes } from "prop-types";
+import clsx from "clsx";
 
 function FormBox({ title, children, alt = false }) {
   return (
-    <form className={clsx(alt ? 'bg-secondary-variant dark:bg-secondary-variant-dark border-secondary-variant dark:border-secondary-variant-dark' : 'bg-surface-variant dark:bg-surface-variant-dark', 'transition-color-mode font-body border-secondary dark:border-secondary-dark border-2 p-4 rounded-3xl relative h-full')}>
-      <label className={clsx(alt && 'bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark', 'font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full')}>
+    <form
+      className={clsx(
+        alt
+          ? "bg-secondary-variant dark:bg-secondary-variant-dark border-secondary-variant dark:border-secondary-variant-dark"
+          : "bg-surface-variant dark:bg-surface-variant-dark",
+        "transition-color-mode font-body border-secondary dark:border-secondary-dark border-2 p-4 rounded-3xl relative h-full"
+      )}
+    >
+      <label
+        className={clsx(
+          alt &&
+            "bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark",
+          "font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full"
+        )}
+      >
         {title}
       </label>
       {children}
@@ -18,4 +31,4 @@ FormBox.propTypes = {
   alt: PropTypes.bool,
 };
 
-export default FormBox;
+export default FormBox;

src/components/MenuBar.jsx

@@ -1,33 +1,56 @@
 import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import { useState } from "react";
 
-function SubMenu({ items }) {
+function SubMenu({ items, isVisible, onLinkClick }) {
   const { t } = useTranslation();
   return (
-    <div className="absolute left-0 z-50 invisible transition-all duration-200 -translate-y-6 shadow-sm opacity-0 top-full border-t-3 border-primary dark:border-primary-dark bg-secondary dark:bg-secondary-dark rounded-2xl shadow-surface-variant-dark dark:shadow-primary group-hover:visible group-hover:translate-y-0 group-hover:opacity-100">
+    <div
+      className={clsx(
+        "absolute left-0 z-50 shadow-sm top-full border-t-3 border-primary dark:border-primary-dark bg-secondary dark:bg-secondary-dark rounded-2xl shadow-surface-variant-dark dark:shadow-primary",
+        isVisible ? "block" : "hidden"
+      )}
+    >
       {items.map((subItem, index) => (
-        <div key={index} className="px-6 py-2 cursor-pointer text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4">
+        <div
+          key={index}
+          className="px-6 py-2 cursor-pointer text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4"
+          onClick={onLinkClick}
+        >
           <Link to={subItem.path}>{t(subItem.name)}</Link>
         </div>
       ))}
-      <svg className="absolute top-0 left-6 mt-[-13px] fill-primary dark:fill-primary-dark" width="16" height="13" viewBox="0 0 16 13" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        className="absolute top-0 left-6 mt-[-13px] fill-primary dark:fill-primary-dark"
+        width="16"
+        height="13"
+        viewBox="0 0 16 13"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path d="M6.26795 1C7.03775 -0.333332 8.96225 -0.333334 9.73205 0.999999L14.9282 10C15.698 11.3333 14.7358 13 13.1962 13H2.80385C1.26425 13 0.301996 11.3333 1.0718 10L6.26795 1Z" />
       </svg>
     </div>
   );
-};
+}
 
 function MenuBar({ menuItems }) {
   const { t } = useTranslation();
+  const [activeMenu, setActiveMenu] = useState(null);
   return (
     <div className="flex justify-between pt-5 pb-2 text-base font-body">
-      {menuItems.map((item, index) =>
-        <div key={index} className="relative pb-3 cursor-pointer group">
-          {t(item.name)}
-          {item.submenu.length > 0 && <SubMenu items={item.submenu} />}
+      {menuItems.map((item, index) => (
+        <div 
+          key={index} 
+          className="relative pb-3 cursor-pointer"
+          onMouseEnter={() => setActiveMenu(index)}
+          onMouseLeave={() => setActiveMenu(null)}
+        >
+          <Link to={item.path}>{t(item.name)}</Link>
+          {item.submenu.length > 0 && <SubMenu items={item.submenu} isVisible={ activeMenu === index } onLinkClick={() => setActiveMenu(null)}/>}
         </div>
-      )}
+      ))}
     </div>
   );
 }
@@ -42,18 +65,20 @@ MenuBar.propTypes = {
           path: PropTypes.string.isRequired,
         })
       ),
-      path: PropTypes.string
+      path: PropTypes.string,
     })
-  ).isRequired
+  ).isRequired,
 };
 
 SubMenu.propTypes = {
   items: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,
-      path: PropTypes.string.isRequired
+      path: PropTypes.string.isRequired,
     })
-  ).isRequired
+  ).isRequired,
+  isVisible: PropTypes.bool.isRequired,
+  onLinkClick: PropTypes.func.isRequired,
 };
 
 export default MenuBar;