fix cover img on desktop and mobile

forbole · Nov 16, 2023 · aea1869 · aea1869
1 parent d3abc5c
commit aea1869
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 13 deletions.
diff --git a/public/images/assets/bg_desktop_horse.webp b/public/images/assets/bg_desktop_horse.webp
diff --git a/public/images/assets/bg_desktop_red_background.webp b/public/images/assets/bg_desktop_red_background.webp
diff --git a/public/images/assets/bg_mobile_horse.webp b/public/images/assets/bg_mobile_horse.webp
diff --git a/public/images/assets/bg_mobile_red_background.webp b/public/images/assets/bg_mobile_red_background.webp
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
@@ -84,17 +84,19 @@ const Layout = ({
     }
 
     return {
-      backgroundImage: redBg
-        ? "url(/images/assets/bg1.png)"
-        : "url(/images/assets/bg2.png)",
+      background: redBg
+        ? "url(/images/assets/bg_desktop_horse.webp), url(/images/assets/bg_desktop_red_background.webp)"
+        : "url(/images/assets/bg_desktop_red_background.webp)",
       backgroundRepeat: "no-repeat",
-      backgroundPosition: redBg ? "0 -4vw" : "0 0",
+      backgroundPosition: redBg ? "15vw -1vw, 0 0" : "0 0",
       backgroundColor: color.primary,
-      backgroundSize: "100% 98vw",
+      backgroundSize: redBg ? "70% 55vw, 105vw" : "100vw 100vw",
       [theme.breakpoints.between("mobile", 550)]: {
         backgroundImage: redBg
-          ? "url(/images/assets/bg1.png)"
-          : "url(/images/assets/bg2.png)",
+          ? "url(/images/assets/bg_mobile_horse.webp), url(/images/assets/bg_mobile_red_background.webp)" 
+          : "url(/images/assets/bg_mobile_red_background.webp)",
+      backgroundPosition: redBg ? "-40vw 10vw, 0 0" : "0 0",
+      backgroundSize: "180vw 150vw, 110vw",
       },
     };
   })();

diff --git a/src/screens/home/index.tsx b/src/screens/home/index.tsx
@@ -49,38 +49,37 @@ const Home: FC<Props> = ({ pages }) => {
         >
           <Stack
             alignItems="center"
-            mt="47%"
+            mt="40%"
             sx={{
               [theme.breakpoints.between("mobile", 550)]: {
                 position: "absolute",
                 top: 0,
                 left: "0",
                 right: "0",
                 margin: "auto",
-                marginTop: "126%",
+                marginTop: "135%",
                 zIndex: "1",
               },
             }}
           >
             <Typography
               sx={{
                 textAlign: "center",
-                fontWeight: "bold",
+                fontWeight: 590,
                 color: "white",
                 textShadow: "0px 0px 20px rgba(0, 0, 0, 0.60)",
                 letterSpacing: "0.832px",
                 [theme.breakpoints.up("laptop")]: {
                   fontSize: "64px",
-                  mt: "-100px",
-                  mb: "-15px"
+                  mb: "0px",
                 },
                 [theme.breakpoints.up("tablet")]: {
                   fontSize: "48px",
                   mb: "65px",
                 },
                 [theme.breakpoints.down("tablet")]: {
                   fontSize: "32px",
-                  mb: "22px",
+                  mb: "25px",
                   px: "10%",
                 },
               }}