new UI update

src/components/Footer/Footer.jsx

@@ -16,8 +16,8 @@ const Footer = () => {
         mt: 15,
         px: {
           xs: 2,
-          md: 12,
-          lg: 20
+          md: 5,
+          lg: 5
         }
       }}
     >

src/components/Navbar/Navbar.jsx

@@ -12,6 +12,7 @@ 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";
+import SideCart from "../SideCart/SideCart";
 import MenuIcon from "@mui/icons-material/Menu";
 import SearchProduct from "../SearchProduct"
 import CategoryIcon from '@mui/icons-material/Category';
@@ -120,7 +121,8 @@ const Navbar = () => {
   const products = useSelector((state) => state.products.products.data)
   const [cartAmount, setCartAmount] = useState(0);
 
-  const [open, setOpen] = useState(false);
+  const [openSideMenu, setOpenSideMenu] = useState(false);
+  const [openSideCart, setOpenSideCart] = useState(false);
   const [navItem, setNavItem] = useState([]);
 
   const [displayCollection, setDisplayCollection] = useState({
@@ -290,8 +292,8 @@ const Navbar = () => {
         <Toolbar sx={{
           px: {
             xs: 2,
-            md: 10,
-            lg: 20
+          md: 5,
+          lg: 5
           },
           py: 0.5
         }} disableGutters>
@@ -307,7 +309,7 @@ const Navbar = () => {
             }}>
 
               <IconButton
-                onClick={() => setOpen(true)}
+                onClick={() => setOpenSideMenu(true)}
                 className="navItem"
                 sx={{
                   backgroundColor: "transparent",
@@ -422,14 +424,17 @@ const Navbar = () => {
                 </LanguageSelect>
               </FormControl> */}
 
-              <IconButton onClick={()=>{setShowSearch(true)}}>
+              <IconButton onClick={() => { setShowSearch(true) }}>
                 <SearchIcon className="navItem" style={{
                   transition: "all 0.3s ease-in-out",
                   color: (isAtTop) ? "white" : "black",
                 }} />
               </IconButton>
 
-              <Badge sx={{ cursor: "pointer" }} onClick={() => { window.location.href = "/cart" }} badgeContent={cartAmount} color="primary">
+              <Badge
+                sx={{ cursor: "pointer" }}
+                onClick={() => { setOpenSideCart(true) }}
+                badgeContent={cartAmount} color="primary">
                 <LocalMallIcon className="navItem" style={{
                   transition: "all 0.3s ease-in-out",
                   color: (isAtTop) ? "white" : "black",
@@ -488,10 +493,11 @@ const Navbar = () => {
         </Box>
 
       </AppBar>
-      {showSearch && <SearchProduct onClose={()=>{setShowSearch(false)}}/>}
+      {showSearch && <SearchProduct onClose={() => { setShowSearch(false) }} />}
+
+      <MobileNav open={openSideMenu} menu={navItem} onClose={() => { setOpenSideMenu(false) }} />
+      <SideCart open={openSideCart} onClose={()=>{setOpenSideCart(false)}}/>
 
-      <MobileNav open={open} menu={navItem} onClose={() => { setOpen(false) }} />
-      
     </>
   );
 };

src/components/ProductSelected/ProductSelected.jsx

@@ -124,9 +124,6 @@ const ProductSelected = () => {
               }}>
                 {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
               </Typography>
-              <Typography variant="body2" sx={{ mt: 2 }}>
-                {extra_desc}
-              </Typography>
             </Box>
           </Box>
         </a>
@@ -137,12 +134,19 @@ const ProductSelected = () => {
 
 
   return (
-    <Box sx={{
-      mb: 5,
-    }}>
+    <Box>
 
       {/* OFFSET PURPOSE */}
-      <Grid size={{ xs: 12, md: 4 }} sx={{ mx: "auto", display: "flex", alignItems: "center", justifyContent: "center", my: 4 }}>
+      <Grid
+        size={{ xs: 12, md: 4 }}
+        sx={{
+          mx: "auto",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          my: 4,
+          mb: 0
+        }}>
         <ChevronLeftIcon
           style={{
             cursor: "pointer",
@@ -163,39 +167,42 @@ const ProductSelected = () => {
         />
       </Grid>
 
-      <Swiper
-        modules={[Scrollbar, A11y]}
-        spaceBetween={20}
-        breakpoints={{
-          0: { slidesPerView: 2 }, // For very small screens
-          640: { slidesPerView: 2 }, // For screens >= 640px
-          1024: { slidesPerView: 4 }, // For screens >= 1024px
-        }}
-        pagination={{ clickable: true }}
-        scrollbar={{ draggable: true }}
-        onSwiper={(swiper) => (swiperRef.current = swiper)}
-      >
-        {filterProducts.map((product, index) => {
-
-          let { handle, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants } = product
-
-          let minPrice = minVariantPrice.amount
-          let minPriceCurrency = minVariantPrice.currencyCode
-          let maxPrice = maxVariantPrice.amount
-          let maxPriceCurrency = maxVariantPrice.currencyCode
-
-          let img_url = images[0]?.url
-          let collection_name = collections[0]?.title
-
-          return (
-            <SwiperSlide>
-              {renderProduct(handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "")}
-            </SwiperSlide>
-          )
-
-        })}
-
-      </Swiper>
+      <Box sx={{mt:2}}>
+        <Swiper
+          modules={[Scrollbar, A11y]}
+          spaceBetween={10}
+          breakpoints={{
+            0: { slidesPerView: 2 }, // For very small screens
+            640: { slidesPerView: 2 }, // For screens >= 640px
+            1024: { slidesPerView: 4 }, // For screens >= 1024px
+          }}
+          pagination={{ clickable: true }}
+          scrollbar={{ draggable: true }}
+          onSwiper={(swiper) => (swiperRef.current = swiper)}
+        >
+          {filterProducts.map((product, index) => {
+
+            let { handle, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants } = product
+
+            let minPrice = minVariantPrice.amount
+            let minPriceCurrency = minVariantPrice.currencyCode
+            let maxPrice = maxVariantPrice.amount
+            let maxPriceCurrency = maxVariantPrice.currencyCode
+
+            let img_url = images[0]?.url
+            let collection_name = collections[0]?.title
+
+            return (
+              <SwiperSlide>
+                {renderProduct(handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "")}
+              </SwiperSlide>
+            )
+
+          })}
+
+        </Swiper>
+      </Box>
+
     </Box>
   );
 };

src/components/VideoAds/VideoAds.jsx

@@ -9,9 +9,14 @@ const VideoAds = ({ video_url, height, width }) => {
       sx={{
         position: 'relative',
         overflow: 'hidden',
-        width: width || '100%',
-        height: height || '300px',
-        
+        width: '100%',
+        height: {
+          xs:230,
+          sm:330,
+          md:520,
+          lg:675,
+          xl:850
+        },
       }}
     >
       <video

src/pages/Cart.jsx

@@ -58,8 +58,8 @@ const Cart = () => {
       <Box sx={{
         px: {
           xs: 2,
-          md: 12,
-          lg: 20
+          md: 5,
+          lg: 5
         },
         mb: {
           xs: 0,

src/pages/Checkout.jsx

@@ -19,8 +19,8 @@ const Checkout = () => {
     <Box sx={{
       px: {
         xs: 2,
-        md: 12,
-        lg: 20
+        md: 5,
+        lg: 5
       },
       mb: {
         xs: 0,

src/pages/Collection.jsx

@@ -24,8 +24,8 @@ const Collection = () => {
       <Box sx={{
         px: {
           xs: 2,
-          md: 12,
-          lg: 20
+          md: 5,
+          lg: 5
         },
         mb: {
           xs: 0,

src/pages/Home.jsx

@@ -26,13 +26,8 @@ const Home = () => {
       <Box sx={{
         px: {
           xs: 2,
-          md: 12,
-          lg: 20
-        },
-        mb: {
-          xs: 0,
           md: 5,
-          lg: 10
+          lg: 5
         }
       }}>
 
@@ -40,17 +35,13 @@ const Home = () => {
         
       </Box>
 
-      <VideoAds width={"100%"} height={{
-        xs: 250,
-        md: 500,
-        lg: 750,
-      }} />
+      <VideoAds />
 
       <Box sx={{
         px: {
           xs: 2,
-          md: 12,
-          lg: 20
+          md: 5,
+          lg: 5
         },
         mb: {
           xs: 2,
@@ -78,9 +69,9 @@ const Home = () => {
       <NewsLetter />
 
       <Box sx={{ px:{
-        xs:2,
-        md:12,
-        lg:20
+        xs: 2,
+        md: 5,
+        lg: 5
       }, mb: 10 }}>
 
         <SocialMedia />

src/pages/Products/Product.jsx

@@ -49,8 +49,8 @@ const Product = () => {
     <Box sx={{
       px: {
         xs: 2,
-        md: 12,
-        lg: 20
+        md: 5,
+        lg: 5
       },
       mb: {
         xs: 0,