feat: bug fix

components/cards/cart-card/CartCard.jsx

     people: PropType.string,
     process: PropType.string,
     pairing: PropType.string,
-    available: PropType.Boolean,
-    isFeatured: PropType.Boolean,
+    //available: PropType.Boolean,
+    //isFeatured: PropType.Boolean,
     price: PropType.number,
     customID: PropType.string,
   }),

components/forms/contact/ContactPageForm.jsx

 import {
-  Alert,
   Box,
   Button,
   Container,
   Grid,
-  Snackbar,
   TextField,
   Typography,
 } from '@mui/material';
 import { BASE_PAGE } from '../../../constants/pages';
 import { postQuestion } from '../../../requests/question/postQuestionRequest';
 import { contactPageSchema } from '../../../schemas/contactSchema';
+import Notification from '../../notification/Notification';
 
 const ContactPageForm = () => {
   const { t } = useTranslation('contact');
 
   return (
     <Container component="main" maxWidth="md" sx={{ mb: '60px' }}>
-      <Snackbar
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      <Notification
         open={open}
-        autoHideDuration={3000}
-        onClose={handleCloseNotification}
-      >
-        <Alert
-          onClose={handleCloseNotification}
-          severity="success"
-          sx={{ width: '100%', backgroundColor: 'green', color: 'white' }}
-        >
-          {t('contact:notification')}
-        </Alert>
-      </Snackbar>
+        notification={t('contact:notification')}
+        handleCloseNotification={handleCloseNotification}
+      />
       <Box
         sx={{
           marginTop: 32,

components/forms/shipping-details/ShippingDetailsForm.jsx

 };
 
 ShippingDetailsForm.propTypes = {
-  backBtn: PropType.Boolean,
-  isCheckout: PropType.Boolean,
+  backBtn: PropType.bool,
+  isCheckout: PropType.bool,
   submitHandler: PropType.func,
 };
 

components/hero/Hero.jsx

               alt="profile"
               width={818}
               height={796}
+              priority
             />
           </Box>
         </Box>

components/layout/navbar/DesktopNav.jsx

           justifyContent: 'center',
         }}
       >
-        {items.map((item, i) => (
+        {items.map((item) => (
           <NavItemDesktop
             key={item.id}
             router={router}
           }}
         >
           <Link key="home" href={PROFILE_PAGE}>
-            <Image
-              src="/images/profile.svg"
-              alt="profile"
-              width={24}
-              height={24}
-            />
+            <a>
+              <Image
+                src="/images/profile.svg"
+                alt="profile"
+                width={24}
+                height={24}
+              />
+            </a>
           </Link>
         </Box>
         <Box
           }}
         >
           <Link key="home" href={CART_PAGE}>
-            <Box>
-              {totalQuantity !== 0 && (
-                <Box
-                  sx={{
-                    color: 'white',
-                    zIndex: 3,
-                    width: 20,
-                    height: 20,
-                    borderRadius: 20,
-                    textAlign: 'center',
-                    px: 0.5,
-                    ml: 2.2,
-                    mt: -1,
-                    fontSize: 17,
-                    position: 'absolute',
-                    backgroundColor: 'primary.main',
-                  }}
-                >
-                  {totalQuantity}
-                </Box>
-              )}
-              <Image src="/images/cart.svg" alt="cart" width={24} height={24} />
-            </Box>
+            <a>
+              <Box>
+                {totalQuantity !== 0 && (
+                  <Box
+                    sx={{
+                      color: 'white',
+                      zIndex: 3,
+                      width: 20,
+                      height: 20,
+                      borderRadius: 20,
+                      textAlign: 'center',
+                      px: 0.5,
+                      ml: 2.2,
+                      mt: -1,
+                      fontSize: 17,
+                      position: 'absolute',
+                      backgroundColor: 'primary.main',
+                    }}
+                  >
+                    {totalQuantity}
+                  </Box>
+                )}
+                <Image
+                  src="/images/cart.svg"
+                  alt="cart"
+                  width={24}
+                  height={24}
+                />
+              </Box>
+            </a>
           </Link>
         </Box>
       </Box>

components/layout/navbar/MobileNav.jsx

         }}
       >
         <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
-          <IconButton disableRipple>
-            <CloseIcon color="primary" onClick={toggleDrawer(false)} />
+          <IconButton disableRipple onClick={toggleDrawer(false)}>
+            <CloseIcon color="primary" />
           </IconButton>
 
           {session?.user?._id && (

components/notification/Notification.jsx

+import { Alert, Snackbar } from '@mui/material';
+
+const Notification = ({ handleCloseNotification, notification, open }) => {
+  return (
+    <Snackbar
+      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      open={open}
+      autoHideDuration={3000}
+      onClose={handleCloseNotification}
+    >
+      <Alert
+        onClose={handleCloseNotification}
+        severity="success"
+        sx={{ width: '100%', backgroundColor: 'green', color: 'white' }}
+      >
+        {notification}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default Notification;

components/product-card/ProductCard.jsx

           href={`/products/${product.customID}`}
           passHref
         >
-          <Image
-            src={product.image}
-            alt="product image"
-            width={500}
-            height={390}
-          />
+          <a>
+            <Image
+              src={product.image}
+              alt="product image"
+              width={500}
+              height={390}
+            />
+          </a>
         </NextLink>
       </Box>
       <Box

components/profile-content/ProfileContent.jsx

-import { Alert, Snackbar, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
 import ContentContainer from '../layout/content-wrapper/ContentContainer';
 import PageWrapper from '../layout/page-wrapper/PageWrapper';
 import StepTitle from '../layout/steps-title/StepTitle';
+import Notification from '../notification/Notification';
 
 const ProfileContent = ({ orders }) => {
   const { t } = useTranslation('profile');
   return (
     <PageWrapper>
       <StepTitle title={t('profile:title')} />
-      <Snackbar
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      <Notification
         open={open}
-        autoHideDuration={3000}
-        onClose={handleCloseNotification}
-      >
-        <Alert
-          onClose={handleCloseNotification}
-          severity="success"
-          sx={{ width: '100%', backgroundColor: 'green', color: 'white' }}
-        >
-          {t('profile:notification')}
-        </Alert>
-      </Snackbar>
+        handleCloseNotification={handleCloseNotification}
+        notification={t('profile:notification')}
+      />
 
       <ContentContainer>
         <Box flexGrow={1} sx={{ minWidth: '65%' }}>

public/locales/en/contact.json

   "firstName": "First name",
   "lastName": "Last name",
   "email": "Email",
-  "msg": "Message",
+  "message": "Message",
   "notification": "Question submitted!"
 }