feat: added custom components

components/cards/card-container/CardContainer.jsx

+import { Box } from '@mui/system';
+
+const CardContainer = ({ children }) => {
+  return (
+    <Box
+      sx={{
+        ml: { md: 2 },
+        mt: { xs: 5, md: 0 },
+        display: 'flex',
+        flexDirection: {
+          xs: 'column',
+          sm: 'row',
+          lg: 'column',
+        },
+        justifyContent: { sm: 'space-between' },
+        flexWrap: 'wrap',
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default CardContainer;

components/cards/data-card/DataCard.jsx

       sx={{
         backgroundColor: '#f2f2f2',
         mb: 2,
-        py: 2,
+        p: 2,
         mx: { xs: 0, sm: 1 },
-        width: { xs: '100%', sm: '44%', md: '30%', lg: '100%' },
+        width: { xs: '100%', sm: '44%', md: '100%', lg: '100%' },
       }}
     >
       <Box

components/cards/order-card/OrderCard.jsx

 const OrderCard = ({ data }) => {
   return (
     <Card
+      height="100%"
       sx={{
-        width: '100%',
         backgroundColor: '#f2f2f2',
-        p: 2,
         mb: 2,
+        p: 2,
+        mx: { xs: 0, sm: 1 },
+        width: { xs: '100%', sm: '47%', md: '100%', lg: '100%' },
       }}
     >
       <Box

components/cards/order-summary-card/OrderSummaryCard.jsx

-import { Button, Divider, Paper, Typography } from '@mui/material';
+import { Button, Card, Divider, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 const OrderSummaryCard = ({ data }) => {
   const router = useRouter();
   return (
-    <Paper
-      sx={{ p: 3, width: '100%', mb: 2, backgroundColor: '#f1f1f1' }}
-      elevation={3}
-    >
+    <Card sx={{ p: 3, width: '100%', mb: 2, backgroundColor: '#f1f1f1' }}>
       <Typography
         sx={{
           fontSize: 26,
         Once the checkout process begins you will have an hour to complete your
         checkout otherwise you will be returned back to the cart to start over.
       </Typography>
-    </Paper>
+    </Card>
   );
 };
 

components/cart-content/CartContent.jsx

-import { Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { destroyCookie } from 'nookies';
 import { useEffect, useState } from 'react';
 import { useStore, useStoreUpdate } from '../../store/cart-context';
 import CartCard from '../cards/cart-card/CartCard';
 import OrderSummaryCard from '../cards/order-summary-card/OrderSummaryCard';
+import EmptyCart from '../empty-cart/EmptyCart';
+import ContentContainer from '../layout/content-wrapper/ContentContainer';
+import PageWrapper from '../layout/page-wrapper/PageWrapper';
 import StepTitle from '../layout/steps-title/StepTitle';
 
 const CartContent = () => {
         ></CartCard>
       ));
     } else {
-      return (
-        <Typography
-          sx={{
-            mr: { lg: 1 },
-            mt: 6,
-            height: '100%',
-            textAlign: 'center',
-            fontSize: { xs: 36, md: 45 },
-            mb: { md: 5 },
-          }}
-        >
-          Your cart is currently empty
-        </Typography>
-      );
+      return <EmptyCart />;
     }
   };
 
   return (
-    <Box sx={{ py: 10, height: '100%', width: '100%' }}>
+    <PageWrapper>
       <StepTitle title="Items in Your Cart" breadcrumbsArray={['Cart']} />
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: { xs: 'column', md: 'row' },
-          mr: { xs: 2, md: 12 },
-          ml: { xs: 2, md: 12 },
-        }}
-      >
+      <ContentContainer>
         <Box sx={{ mt: 2, mr: { md: 2, minWidth: '65%' }, mb: { xs: 6 } }}>
           {mapProductsToDom()}
         </Box>
             }}
           ></OrderSummaryCard>
         </Box>
-      </Box>
-    </Box>
+      </ContentContainer>
+    </PageWrapper>
   );
 };
 

components/checkout-content/CheckoutContent.jsx

-import { Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { useStore } from '../../store/cart-context';
 import { useCheckoutDataUpdate } from '../../store/checkout-context';
+import CardContainer from '../cards/card-container/CardContainer';
 import DataCard from '../cards/data-card/DataCard';
 import ShippingDetailsForm from '../forms/shipping-details/ShippingDetailsForm';
+import ContentContainer from '../layout/content-wrapper/ContentContainer';
+import PageWrapper from '../layout/page-wrapper/PageWrapper';
 import StepTitle from '../layout/steps-title/StepTitle';
+import PageDescription from '../page-description/PageDescription';
 
 const CheckoutContent = () => {
   const { cartStorage } = useStore();
   };
 
   return (
-    <Box sx={{ py: 10, height: '100%', width: '100%' }}>
+    <PageWrapper>
       <StepTitle
         title="Items in Your Cart"
         breadcrumbsArray={['Cart', 'Checkout']}
       />
-      <Box sx={{ ml: { xs: 2, md: 12 }, my: 2 }}>
-        <Typography sx={{ fontSize: 20 }}>
-          The following fields will be used as the shipping details for your
-          order
-        </Typography>
-      </Box>
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: { xs: 'column', lg: 'row' },
-          mr: { xs: 2, md: 12 },
-          ml: { xs: 2, md: 12 },
-        }}
-      >
-        <Box flexGrow={1}>
+      <PageDescription
+        description="The following fields will be used as the shipping details for your
+          order"
+      />
+      <ContentContainer>
+        <Box flexGrow={1} sx={{ minWidth: '65%' }}>
           <ShippingDetailsForm
             backBtn={true}
             isCheckout={true}
             submitHandler={submitHandler}
           ></ShippingDetailsForm>
         </Box>
-        <Box
-          sx={{
-            ml: { lg: 2 },
-            mt: { xs: 5, md: 5, lg: 2 },
-            display: 'flex',
-            flexDirection: { xs: 'column', sm: 'row', lg: 'column' },
-            justifyContent: { sm: 'space-between', md: 'flex-start' },
-            flexWrap: 'wrap',
-          }}
-        >
-          {mapProductsToDom()}
-        </Box>
-      </Box>
-    </Box>
+        <CardContainer>{mapProductsToDom()}</CardContainer>
+      </ContentContainer>
+    </PageWrapper>
   );
 };
 

components/empty-cart/EmptyCart.jsx

+import { Typography } from '@mui/material';
+
+const EmptyCart = () => {
+  return (
+    <Typography
+      sx={{
+        mr: { lg: 1 },
+        mt: 6,
+        height: '100%',
+        textAlign: 'center',
+        fontSize: { xs: 36, md: 45 },
+        mb: { md: 5 },
+      }}
+    >
+      Your cart is currently empty
+    </Typography>
+  );
+};
+
+export default EmptyCart;

components/grid-item/GridItem.jsx

+const GridItem = ({ children }) => {
+  return <p>Hello</p>;
+};
+
+export default GridItem;

components/layout/content-wrapper/ContentContainer.jsx

+import { Box } from '@mui/system';
+
+const ContentContainer = ({ children }) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: { xs: 'column', md: 'row' },
+        mr: { xs: 2, md: 12 },
+        ml: { xs: 2, md: 12 },
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default ContentContainer;

components/layout/page-wrapper/PageWrapper.jsx

+import { Box } from '@mui/system';
+
+const PageWrapper = ({ children }) => {
+  return <Box sx={{ py: 10, height: '100%', width: '100%' }}>{children}</Box>;
+};
+
+export default PageWrapper;

components/page-description/PageDescription.jsx

+import { Typography } from '@mui/material';
+import { Box } from '@mui/system';
+
+const PageDescription = ({ description }) => {
+  return (
+    <Box sx={{ ml: { xs: 2, md: 12 }, my: 3 }}>
+      <Typography sx={{ fontSize: 20 }}>{description}</Typography>
+    </Box>
+  );
+};
+
+export default PageDescription;

components/profile-content/ProfileContent.jsx

 import { useState } from 'react';
 import { updateUser } from '../../requests/user/userUpdateRequest';
 import { useUserUpdate } from '../../store/user-context';
+import CardContainer from '../cards/card-container/CardContainer';
 import OrderCard from '../cards/order-card/OrderCard';
 import ShippingDetailsForm from '../forms/shipping-details/ShippingDetailsForm';
+import ContentContainer from '../layout/content-wrapper/ContentContainer';
+import PageWrapper from '../layout/page-wrapper/PageWrapper';
 import StepTitle from '../layout/steps-title/StepTitle';
 
 const ProfileContent = ({ orders }) => {
     ));
 
   return (
-    <Box sx={{ py: 10, height: '100%', width: '100%' }}>
-      <StepTitle title="Items in Your Cart" />
+    <PageWrapper>
+      <StepTitle title="Welcome to your user account" />
       <Snackbar
         anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
         open={open}
         </Alert>
       </Snackbar>
 
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: { xs: 'column', md: 'row' },
-          mr: { xs: 2, md: 12 },
-          ml: { xs: 2, md: 12 },
-        }}
-      >
-        <Box
-          sx={{
-            width: { xs: '100%', md: '100%' },
-            mt: 2,
-            mr: { md: 2 },
-            mb: { xs: 6 },
-          }}
-        >
+      <ContentContainer>
+        <Box flexGrow={1} sx={{ minWidth: '65%' }}>
           <Typography sx={{ fontSize: 20, mb: 3 }}>
             Save details for later
           </Typography>
             enableBtn={enableBtn}
           ></ShippingDetailsForm>
         </Box>
-
-        <Box
-          sx={{
-            mt: 2,
-            maxWidth: { sm: '100%', lg: '10%' },
-            minWidth: { md: '40%' },
-          }}
-        >
-          <Typography sx={{ fontSize: 20, mb: 3 }}>Previous Orders</Typography>
-          {mapOrdersToDom()}
+        <Box sx={{ mt: { xs: 5, md: 0 } }}>
+          <Typography
+            sx={{ fontSize: 20, mb: { xs: -2, md: 3 }, ml: { md: 3 } }}
+          >
+            Previous Orders
+          </Typography>
+          <CardContainer>{mapOrdersToDom()}</CardContainer>
         </Box>
-      </Box>
-    </Box>
+      </ContentContainer>
+    </PageWrapper>
   );
 };
 

components/review-content/ReviewContent.jsx

   useCheckoutData,
   useCheckoutDataUpdate,
 } from '../../store/checkout-context';
+import PageWrapper from '../layout/page-wrapper/PageWrapper';
 import StepTitle from '../layout/steps-title/StepTitle';
 
 let initialRender = true;
   }, [checkoutStorage]);
 
   return (
-    <Box sx={{ py: 10, height: '100%', width: '100%' }}>
+    <PageWrapper>
       <StepTitle
         title="Review"
         breadcrumbsArray={['Cart', 'Checkout', 'Shipping', 'Payment', 'Review']}
           </Box>
         </Box>
       </Box>
-    </Box>
+    </PageWrapper>
   );
 };
 

components/shipping-content/ShippingContent.jsx

-import { Checkbox, FormControlLabel, Typography } from '@mui/material';
+import { Checkbox, FormControlLabel } from '@mui/material';
 import { Box } from '@mui/system';
 import { useRouter } from 'next/router';
 import { setCookie } from 'nookies';
   useCheckoutDataUpdate,
 } from '../../store/checkout-context';
 import { stripe } from '../../utils/helpers/stripe';
+import CardContainer from '../cards/card-container/CardContainer';
 import DataCard from '../cards/data-card/DataCard';
+import ContentContainer from '../layout/content-wrapper/ContentContainer';
+import PageWrapper from '../layout/page-wrapper/PageWrapper';
 import StepTitle from '../layout/steps-title/StepTitle';
+import PageDescription from '../page-description/PageDescription';
 import ButtonGroup from './shipping-btnGroup/ButtonGroup';
 import ShippingData from './shipping-data/ShippingData';
 import ShippingModal from './shipping-modal/ShippingModal';
   };
 
   return (
-    <Box container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
+    <PageWrapper>
       <StepTitle
         title="Shipping"
         breadcrumbsArray={['Cart', 'Checkout', 'Shipping']}
       />
-      <Box sx={{ ml: { xs: 2, md: 12 }, my: 2 }}>
-        <Typography sx={{ fontSize: 20 }}>
-          The following fields will be used as the shipping details for your
-          order
-        </Typography>
-      </Box>
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: { xs: 'column', lg: 'row' },
-          mr: { xs: 2, md: 12 },
-        }}
-      >
-        <Box flexGrow={1} sx={{ minWidth: '65%', ml: { xs: 2, md: 12 } }}>
+      <PageDescription
+        description="The following fields will be used as the shipping details for your
+          order"
+      />
+      <ContentContainer>
+        <Box flexGrow={1} sx={{ minWidth: '65%' }}>
           <ShippingData
             email={checkoutData?.userInfo?.email}
             address={checkoutData?.userInfo?.address}
             handleBackToCart={handleBackToCart}
           />
         </Box>
-        <Box
-          sx={{
-            ml: { xs: 2, md: 12, lg: 2 },
-            mt: { xs: 5, md: 5, lg: 2 },
-            display: 'flex',
-            flexDirection: { xs: 'column', sm: 'row', lg: 'column' },
-            justifyContent: { sm: 'flex-start' },
-            flexWrap: 'wrap',
-          }}
-        >
-          {mapProductsToDom()}
-        </Box>
-      </Box>
+        <CardContainer>{mapProductsToDom()}</CardContainer>
+      </ContentContainer>
       <ShippingModal
         open={open}
         handleClose={handleClose}
         handleChangeShipping={handleChangeShipping}
         handleChangeContact={handleChangeContact}
       />
-    </Box>
+    </PageWrapper>
   );
 };
 

components/shipping-content/shipping-data/ShippingData.jsx

           justifyContent: 'space-between',
           backgroundColor: '#f2f2f2',
           alignItems: 'center',
-          mt: 2,
           mb: 2,
           borderRadius: 2,
           p: 1,