ui correction

src/components/Carousel/Carousel.jsx

         alignItems: "center",
         justifyContent: "center",
         width: "100%",
+        objectPosition:"top center",
         height: "100vh",
         overflow: "hidden",
       }}
           sx={{
             width: "100%",
             height: "100%",
-            objectFit: "cover",
+            objectFit:"cover",
+            objectPosition:"center center",
             display: index === currentIndex ? "block" : "none",
           }}
         />
       ))}
 
-      <IconButton
+      {/* <IconButton
         onClick={handlePrev}
         sx={{
           position: "absolute",
         }}
       >
         <ArrowBackIosIcon />
-      </IconButton>
+      </IconButton> */}
 
-      <IconButton
+      {/* <IconButton
         onClick={handleNext}
         sx={{
           position: "absolute",
         }}
       >
         <ArrowForwardIosIcon />
-      </IconButton>
+      </IconButton> */}
     </Box>
   );
 };

src/components/CategoryList/CategoryList.jsx

       setCategorys([...categorys, ...data])
     })
 
-
-
   }, [])
 
 
   return (
     <Box sx={{ flexGrow: 1, mt: 10 }}>
 
-      {categorys.length > 0 && <Typography variant="h4" sx={{ textAlign: "center", mb: 5, fontWeight: "bolder" }}>SHOP BY CATEGORY</Typography>}
+      {categorys.length > 0 && <Typography variant="h4" sx={{ textAlign: "center", mb: 5}}>SHOP BY CATEGORY</Typography>}
 
       <Box
         display="flex"
       >
         {categorys.map((label, index) => (
           <Button 
+           sx={{
+            py:2,
+            px:4,
+            
+           }}
             onClick={()=>{
               sessionStorage.removeItem('amber-select-collection')
               sessionStorage.setItem('amber-select-category', label)
               window.location.href = "/products" 
             }}
             key={index} variant="contained" color="primary">
-            {label}
+            <Typography variant="body1" sx={{fontWeight:"bold"}}>{label}</Typography>
           </Button>
         ))}
         

src/components/CollectionList/CollectionList.jsx

   return (
     <Box sx={{ flexGrow: 1, mt: 10 }}>
 
-      { collections.length > 0 && <Typography variant="h4" sx={{textAlign:"center", mb:5, fontWeight:"bolder"}}>COLLECTIONS</Typography>}
+      { collections.length > 0 && <Typography variant="h4" sx={{textAlign:"center", mb:5}}>COLLECTIONS</Typography>}
 
       <Grid container spacing={2}>
 

src/components/Footer/Footer.jsx

 import React from 'react';
 import { Box, Typography, TextField, Button, InputAdornment } from '@mui/material';
-import logoSrc from "../../assets/svg/logofooter.svg";
+import logoSrc from "../../assets/images/amberlogofooter.png";
 import Grid from '@mui/material/Grid2';
 
 const Footer = () => {
       <img src={logoSrc} alt="Logo"
         style={{
           width: 150,
-          height: 50,
+          height: 23,
+          marginBottom: 25
         }}
       />
 
               InputProps={{
                 startAdornment: (
                   <InputAdornment position="end">
-                    <Button variant='contained' sx={{ mr: 2 }}>
+                    <Button variant='contained' sx={{position:"absolute", right:0, height:"100%" }}>
                       Subscribe
                     </Button>
                   </InputAdornment>

src/components/Navbar/Navbar.jsx

 import SearchIcon from "@mui/icons-material/Search";
 import LocalMallIcon from '@mui/icons-material/LocalMall';
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import logoSrc from "../../assets/svg/logo.svg";
+import logoSrc from "../../assets/images/amberlogo.png";
 import { styled } from '@mui/material/styles';
 import { MenuItem, Select, FormControl, Badge, Typography } from '@mui/material';
 import MobileNav from "./components/MobileNav";
               <img src={logoSrc} alt="Logo"
                 style={{
                   width: 150,
-                  height: 50,
+                  height: 25,
                 }} />
             </a>
           </Box>

src/components/Navbar/components/MobileNav/MobileNav.jsx

 import React from "react";
 import { Drawer, Box, List, ListItem, ListItemButton, ListItemText } from "@mui/material";
-import logoSrc from "../../../../assets/svg/logo.svg";
+import logoSrc from "../../../../assets/images/amberlogo.png";
 
 const MobileNav = ({ open, onClose, menu = [] }) => {
   return (
             alt="Logo"
             style={{
               width: 150,
-              height: 50,
+              height: 25,
             }}
           />
         </a>

src/components/NewsLetter/NewsLetter.jsx

 import React from 'react';
+import bgImage from "../../assets/images/newsletterwallpaper.jpg"
 import { Box, Button, TextField, InputAdornment, Typography } from '@mui/material';
 
 
         width: '100%',
         height: 0,
         paddingTop: '600px', // This sets the height based on top padding
+        backgroundImage:`url(${bgImage})`,
         overflow: 'hidden',
         display: "flex"
       }}
                   <Button
                     variant="contained"
                     color="primary"
-                    sx={{ height: "100%", borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
+                    sx={{ 
+                      height: "100%", 
+                      borderTopLeftRadius: 0, 
+                      borderBottomLeftRadius: 0,
+                      position:"absolute",
+                      right:0
+                    }}
                   >
-                    Send
+                    Subscribe
                   </Button>
                 </InputAdornment>
               )

src/components/ProductList/ProductList.jsx

         (product) => {
 
           if(collection == 'all'){
-            debugger
+            
             return product.productType === productType
           } else {
-            debugger
+            
             return product.productType === productType && product.collections.nodes.some(data => data.title === collection)
           }
 
   const renderProduct = (id, img_url, title, collection, price, currency, extra_desc) => {
 
     return (
-      <Grid item size={{ xs: 6, sm: 6, md: 3 }}>
+      <Grid item size={{ xs: 6, sm: 6, md: 4 }}>
         <Box
           onClick={() => { window.location.href = `/products/${id}` }}
           sx={{
           </Button> */}
 
           <Box sx={{ py: 5 }}>
-            <Typography variant="body2" >
+            <Typography variant="body1" sx={{fontWeight:"400", mb:1}}>
               {collection}
             </Typography>
-            <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
+            <Typography variant="h4" sx={{ fontWeight: "bolder", mb:1 }}>
               {title}
             </Typography>
-            <Typography variant="body" >
+            <Typography variant="body1" sx={{fontWeight:"400", mb:1}}>
               {`${currency} ${parseFloat(price).toFixed(2)}`}
             </Typography>
-            <Typography variant="body2" sx={{ mt: 2 }}>
+            <Typography variant="body1" sx={{ mt: 2 }}>
               {extra_desc}
             </Typography>
           </Box>
         sx={{
           display: "flex",
           justifyContent: "space-between",
-          py:1,
+          py:0,
           flexDirection:{
             xs:"column",
             sm:"row",
               onChange={(event) => {
                 setCategory(event.target.value);
               }}
-              input={<BootstrapInput />}
+              sx={{
+                '& .MuiSelect-select':{
+                  border:"none"
+                }
+              }}
+              input={<BootstrapInput  />}
               name="type"
             >
               <MenuItem value={'all'}>All</MenuItem>
               onChange={(event) => {
                 setCollection(event.target.value);
               }}
+              sx={{
+                '& .MuiSelect-select':{
+                  border:"none"
+                }
+              }}
               input={<BootstrapInput />}
               name="type"
             >
               onChange={(event) => {
                 setSort(event.target.value);
               }}
+              sx={{
+                '& .MuiSelect-select':{
+                  border:"none"
+                }
+              }}
               input={<BootstrapInput />}
               name="sort"
             >
 
       {/* LIST */}
       <Box sx={{ mb: 5 }}>
-        <Grid container spacing={1} columns={12}>
+        <Grid container spacing={0.3} columns={12}>
           {filteredProducts.map((product, index) => {
 
             let { id, title, compareAtPriceRange, images, collections } = product

src/components/ProductSelected/ProductSelected.jsx

             NEW
           </Button> */}
 
-          <Box sx={{ py: 5 }}>
-            <Typography variant="body2" >
+          <Box sx={{ pb: 5, pt:3 }}>
+            <Typography variant="body1" sx={{fontWeight:"400", mb:1}}>
               {collection}
             </Typography>
-            <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
+            <Typography variant="h5" sx={{ fontWeight: "bolder", mb:1}}>
               {title}
             </Typography>
-            <Typography variant="body" >
+            <Typography variant="body1" sx={{fontWeight:"400"}}>
               {`${currency} ${parseFloat(price).toFixed(2)}`}
             </Typography>
-            <Typography variant="body2" sx={{ mt: 2 }}>
+            <Typography variant="body1" sx={{ mt: 2 }}>
               {extra_desc}
             </Typography>
           </Box>

src/components/SocialMedia/SocialMedia.jsx

       sx={{
         display: 'flex',
         flexDirection: { xs: 'column', sm: 'row' }, // Stack on small screens
-        justifyContent: { xs: 'center', sm: 'space-around' }, // Adjust spacing
-        alignItems: 'center',
-        gap: { xs: 2, sm: 5 }, // Smaller gap on small screens
+        justifyContent: 'center',
+        gap: 8,
         padding: 2,
         py: 4,
         borderTop: '1px solid #CFCFCF',

src/index.css

-
+@font-face {
+  font-family: 'Proxima-Nova';
+  src: url(./assets/fonts/ProximaNova-Regular.otf);
+}
 
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
   
   body {
     margin: 0;
+    font-family: 'Proxima-Nova', sans-serif;
   }
   
   /**
   
   [hidden] {
     display: none;
-  }
+  }
+
+
+

src/pages/Home.jsx

         lg: 750,
       }} />
 
-      <Box sx={{
+      {/* <Box sx={{
         px: {
           xs: 2,
           md: 12,
           </Grid>
         </Box>
 
-      </Box>
+      </Box> */}
 
       <NewsLetter />