fix main wallpaper position

src/components/Carousel/Carousel.jsx

@@ -3,6 +3,7 @@ import { Box, IconButton } from "@mui/material";
 import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import mainImage from "../../assets/images/mainwallpaper.jpg"
+import mainImageMobile from "../../assets/images/mainwallpaper-mobile.jpg"
 
 const Carousel = () => {
 
@@ -10,6 +11,10 @@ const Carousel = () => {
     { img_src: mainImage, alt_name: "Image 1" }
   ]
 
+  const items_mobile = [
+    { img_src: mainImageMobile, alt_name: "Image 1" }
+  ]
+
   const [currentIndex, setCurrentIndex] = React.useState(0);
 
   const handlePrev = () => {
@@ -32,21 +37,21 @@ const Carousel = () => {
         alignItems: "center",
         justifyContent: "center",
         width: "100%",
-        objectPosition:"top center",
+        objectPosition: "top center",
         height: "100vh",
         overflow: "hidden",
       }}
     >
       {/* Filter */}
       <Box sx={{
-        position:"absolute",
-        top:0,
-        right:0,
-        backgroundColor:"rgba(0, 0, 0, 0.3)",
-        width:"100%",
-        height:"100%"
+        position: "absolute",
+        top: 0,
+        right: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.2)",
+        width: "100%",
+        height: "100%"
       }}></Box>
-      
+
       {items.map((item, index) => (
         <Box
           key={index}
@@ -54,44 +59,44 @@ const Carousel = () => {
           src={item.img_src}
           alt={item.alt_name}
           sx={{
+            display: {
+              xs:"none",
+              sm:"none",
+              md:"block",
+              lg:"block"
+            },
             width: "100%",
             height: "100%",
-            objectFit:"cover",
-            objectPosition:"center center",
-            display: index === currentIndex ? "block" : "none",
+            backgroundImage: `url(${item.img_src})`,
+            objectFit: "cover",
+            objectPosition: "center center",
           }}
         />
       ))}
 
-      {/* <IconButton
-        onClick={handlePrev}
-        sx={{
-          position: "absolute",
-          left: 16,
-          top: "50%",
-          transform: "translateY(-50%)",
-          color: "white",
-          backgroundColor: "rgba(0, 0, 0, 0.5)",
-          "&:hover": { backgroundColor: "rgba(0, 0, 0, 0.7)" },
-        }}
-      >
-        <ArrowBackIosIcon />
-      </IconButton> */}
+      {/* Mobile View - Cause the image keep getting wrong offest */}
+      {items_mobile.map((item, index) => (
+        <Box
+          key={index}
+          component="img"
+          src={item.img_src}
+          alt={item.alt_name}
+          sx={{
+            display: {
+              xs:"block",
+              sm:"block",
+              md:"none",
+              lg:"none"
+            },
+            width: "100%",
+            height: "100%",
+            backgroundImage: `url(${item.img_src})`,
+            objectFit: "cover",
+            objectPosition: "center center",
+          }}
+        />
+      ))}
 
-      {/* <IconButton
-        onClick={handleNext}
-        sx={{
-          position: "absolute",
-          right: 16,
-          top: "50%",
-          transform: "translateY(-50%)",
-          color: "white",
-          backgroundColor: "rgba(0, 0, 0, 0.5)",
-          "&:hover": { backgroundColor: "rgba(0, 0, 0, 0.7)" },
-        }}
-      >
-        <ArrowForwardIosIcon />
-      </IconButton> */}
     </Box>
   );
 };

src/components/Navbar/Navbar.jsx

@@ -328,7 +328,12 @@ const Navbar = () => {
                   md:10,
                   lg:10,
                   xl:10
-                }
+                },
+                display: {
+                  xs: "none",
+                  md: "none",
+                  lg: "flex"
+                },
               }}
             >
               <a href="/">

src/components/ProductList/ProductList.jsx

@@ -189,12 +189,12 @@ const ProductList = ({ size = 99999 }) => {
                 top: {
                   xs: 0,
                   sm: 0,
-                  md: 20
+                  md: 10
                 },
                 left: {
                   xs: 0,
                   sm: 0,
-                  md: 20
+                  md: 10
                 },
                 boxShadow: 0,
                 fontSize: 10

src/components/ProductSelected/ProductSelected.jsx

@@ -73,25 +73,30 @@ const ProductSelected = () => {
               }}
             />
 
-            <Button sx={{ 
-              position: "absolute", 
-              top:{
-                xs:0,
-                sm:0,
-                md:20
-              }, 
-              left: {
-                xs:0,
-                sm:0,
-                md:20
-              }, 
-              boxShadow: 0,
-              fontSize: 10
-            }} variant="contained">
+            <Button 
+              sx={{ 
+                position: "absolute", 
+                top:{
+                  xs:0,
+                  sm:0,
+                  md:10,
+                  lg: 20
+                }, 
+                left: {
+                  xs:0,
+                  sm:0,
+                  md:10,
+                  lg: 20
+                }, 
+                boxShadow: 0,
+                fontSize: 10
+              }} 
+              variant="contained"
+            >
               NEW
             </Button>
 
-            <Box sx={{ pt: 3 }}>
+            <Box sx={{ pt: 3,  width: "80%" }}>
               <Typography variant="body1" sx={{ fontWeight: "400", mb: 1 }}>
                 {collection_name}
               </Typography>

src/services/ProductService.js

@@ -17,7 +17,7 @@ const getProducts = async () => {
   while (hasNextCursor) {
 
     const query = `{
-      products(first: ${2}, ${cursor},  sortKey: CREATED_AT) {
+      products(first: ${250}, ${cursor},  sortKey: CREATED_AT) {
         nodes {
           id
           handle