ui correction

src/components/Carousel/Carousel.jsx

@@ -32,6 +32,7 @@ const Carousel = () => {
         alignItems: "center",
         justifyContent: "center",
         width: "100%",
+        objectPosition:"top center",
         height: "100vh",
         overflow: "hidden",
       }}
@@ -45,13 +46,14 @@ const Carousel = () => {
           sx={{
             width: "100%",
             height: "100%",
-            objectFit: "cover",
+            objectFit:"cover",
+            objectPosition:"center center",
             display: index === currentIndex ? "block" : "none",
           }}
         />
       ))}
 
-      <IconButton
+      {/* <IconButton
         onClick={handlePrev}
         sx={{
           position: "absolute",
@@ -64,9 +66,9 @@ const Carousel = () => {
         }}
       >
         <ArrowBackIosIcon />
-      </IconButton>
+      </IconButton> */}
 
-      <IconButton
+      {/* <IconButton
         onClick={handleNext}
         sx={{
           position: "absolute",
@@ -79,7 +81,7 @@ const Carousel = () => {
         }}
       >
         <ArrowForwardIosIcon />
-      </IconButton>
+      </IconButton> */}
     </Box>
   );
 };

src/components/CategoryList/CategoryList.jsx

@@ -14,15 +14,13 @@ const CategoryList = ({ productType }) => {
       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"
@@ -33,13 +31,18 @@ const CategoryList = ({ productType }) => {
       >
         {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

@@ -20,7 +20,7 @@ const CollectionList = ({ productType }) => {
   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

@@ -1,6 +1,6 @@
 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 = () => {
@@ -20,7 +20,8 @@ const Footer = () => {
       <img src={logoSrc} alt="Logo"
         style={{
           width: 150,
-          height: 50,
+          height: 23,
+          marginBottom: 25
         }}
       />
 
@@ -103,7 +104,7 @@ const Footer = () => {
               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

@@ -8,7 +8,7 @@ import Header from "../Header";
 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";
@@ -161,7 +161,7 @@ const Navbar = () => {
               <img src={logoSrc} alt="Logo"
                 style={{
                   width: 150,
-                  height: 50,
+                  height: 25,
                 }} />
             </a>
           </Box>

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

@@ -1,6 +1,6 @@
 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 (
@@ -30,7 +30,7 @@ const MobileNav = ({ open, onClose, menu = [] }) => {
             alt="Logo"
             style={{
               width: 150,
-              height: 50,
+              height: 25,
             }}
           />
         </a>

src/components/NewsLetter/NewsLetter.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import bgImage from "../../assets/images/newsletterwallpaper.jpg"
 import { Box, Button, TextField, InputAdornment, Typography } from '@mui/material';
 
 
@@ -11,6 +12,7 @@ const NewsLetter = () => {
         width: '100%',
         height: 0,
         paddingTop: '600px', // This sets the height based on top padding
+        backgroundImage:`url(${bgImage})`,
         overflow: 'hidden',
         display: "flex"
       }}
@@ -50,9 +52,15 @@ const NewsLetter = () => {
                   <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

@@ -124,10 +124,10 @@ const ProductList = ({ size = 99999 }) => {
         (product) => {
 
           if(collection == 'all'){
-            debugger
+            
             return product.productType === productType
           } else {
-            debugger
+            
             return product.productType === productType && product.collections.nodes.some(data => data.title === collection)
           }
 
@@ -162,7 +162,7 @@ const ProductList = ({ size = 99999 }) => {
   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={{
@@ -188,16 +188,16 @@ const ProductList = ({ size = 99999 }) => {
           </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>
@@ -214,7 +214,7 @@ const ProductList = ({ size = 99999 }) => {
         sx={{
           display: "flex",
           justifyContent: "space-between",
-          py:1,
+          py:0,
           flexDirection:{
             xs:"column",
             sm:"row",
@@ -249,7 +249,12 @@ const ProductList = ({ size = 99999 }) => {
               onChange={(event) => {
                 setCategory(event.target.value);
               }}
-              input={<BootstrapInput />}
+              sx={{
+                '& .MuiSelect-select':{
+                  border:"none"
+                }
+              }}
+              input={<BootstrapInput  />}
               name="type"
             >
               <MenuItem value={'all'}>All</MenuItem>
@@ -264,6 +269,11 @@ const ProductList = ({ size = 99999 }) => {
               onChange={(event) => {
                 setCollection(event.target.value);
               }}
+              sx={{
+                '& .MuiSelect-select':{
+                  border:"none"
+                }
+              }}
               input={<BootstrapInput />}
               name="type"
             >
@@ -279,6 +289,11 @@ const ProductList = ({ size = 99999 }) => {
               onChange={(event) => {
                 setSort(event.target.value);
               }}
+              sx={{
+                '& .MuiSelect-select':{
+                  border:"none"
+                }
+              }}
               input={<BootstrapInput />}
               name="sort"
             >
@@ -293,7 +308,7 @@ const ProductList = ({ size = 99999 }) => {
 
       {/* 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

@@ -43,17 +43,17 @@ const ProductSelected = () => {
             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

@@ -16,9 +16,8 @@ const SocialMedia = () => {
       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

@@ -1,4 +1,7 @@
-
+@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 */
 
@@ -24,6 +27,7 @@
   
   body {
     margin: 0;
+    font-family: 'Proxima-Nova', sans-serif;
   }
   
   /**
@@ -348,4 +352,7 @@
   
   [hidden] {
     display: none;
-  }
+  }
+
+
+

src/pages/Home.jsx

@@ -68,7 +68,7 @@ const Home = () => {
         lg: 750,
       }} />
 
-      <Box sx={{
+      {/* <Box sx={{
         px: {
           xs: 2,
           md: 12,
@@ -98,7 +98,7 @@ const Home = () => {
           </Grid>
         </Box>
 
-      </Box>
+      </Box> */}
 
       <NewsLetter />