fix bug on navbar, and add top padding on product details

src/components/Navbar/Navbar.jsx

       if (Array.isArray(data)) {
 
         let navItemData = data.map(({node})=>({title:`${node.toUpperCase()}`, link:`/collection/${node}` }))
+        navItemData = navItemData.filter(({title}) => (title !== "") )
         setNavItem(navItemData);
 
       } else {

src/components/ProductType/ProductType.jsx

 import React from 'react';
 import { Box, Button, Typography } from '@mui/material';
 
-const ProductType = () => {
+const ProductType = ({title}) => {
   return (
     <Box
       sx={{
         }}
       >
         <Typography variant="h4" gutterBottom>
-          Some Type
+          {title}
         </Typography>
         <Button variant="contained" color="primary">
           SHOP NOW

src/pages/Home.jsx

         lg: 750,
       }} />
 
-      {/* <Box sx={{
+      <Box sx={{
         px: {
           xs: 2,
           md: 12,
         <Box sx={{ flexGrow: 1, mt: 10 }}>
           <Grid container spacing={2}>
             <Grid size={12}>
-              <ProductType />
+              <ProductType title={'CLOTHING'}/>
             </Grid>
             <Grid size={{xs:12, md:6}}>
-              <ProductType />
+              <ProductType title={'BEAUTY'}/>
             </Grid>
             <Grid size={{xs:12, md:6}}>
-              <ProductType />
-            </Grid>
-            <Grid size={12}>
-              <ProductType />
+              <ProductType title={'HOME'}/>
             </Grid>
           </Grid>
         </Box>
 
-      </Box> */}
+      </Box>
 
       <NewsLetter />
 

src/pages/Products/Product.jsx

         lg: 10
       }
     }}>
-      <Grid container spacing={0} sx={{ mt: 10, mb:5 }}>
+      <Grid container spacing={0} sx={{ mt: 15, mb:5 }}>
 
         <Grid size={12} sx={{ backgroundColor: "#000", textAlign:"center", display:{xs:"block", md:"none"} }}>
           <img src={logoSrc} alt="Logo"