changes-mobile

src/components/Community/CommunityBanner.jsx

@@ -18,7 +18,7 @@ const BannerContent = [
   },
 ];
 
-const CommunityBanner = () => {
+const CommunityBanner = () => { 
   return (
     <Box
       height={"100vh"}

src/components/Footer/MobileFooter.jsx

@@ -50,7 +50,7 @@ const MobileFooter = () => {
                       color={"#B0B0B0"}
                       fontFamily={"Mona Sans"}
                       fontWeight={"500"}
-                      fontSize={"22px"}
+                      fontSize={"16px"}
                     >
                       Explore
                     </Text>

src/components/HomePage/HomeBanner.jsx

@@ -78,11 +78,11 @@ const HomeBanner = () => {
               },
               "@media (max-width: 600px)": {
                 fontSize: "38px",
-                marginBottom: "2rem",
+                marginBottom: "1rem",
               },
               "@media (max-width: 412px)": {
-                fontSize: "40px",
-                marginTop: "2rem",
+                fontSize: "38px",
+                marginTop: "1rem",
               },
             }}
           >
@@ -177,6 +177,16 @@ const HomeBanner = () => {
                   borderRadius: "0px",
                   opacity: "1",
                 },
+                "@media (max-width: 600px)": {
+                  fontSize: "14px",
+                  width: "230px",
+                  height: "44px",
+                  marginTop: "2rem",
+                  bgGradient:
+                    "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+                  color: "#000",
+                  fontWeight: "600",
+                },
               }}
               _hover={{
                 color: "#000",

src/components/HomePage/WhitePaper.jsx

@@ -101,9 +101,14 @@ const WhitePaper = () => {
                 opacity: "1",
               },
               "@media (max-width: 600px)": {
-                fontSize: "13px",
-                minW: "147px",
-                minH: "39px",
+                fontSize: "14px",
+                minWidth: "230px",
+                minHeight: "44px",
+                marginTop: "2rem",
+                bgGradient:
+                  "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+                color: "#000",
+                fontWeight: "600",
               },
             }}
             _hover={{

src/components/MobileMenu/MobileMenu.jsx

@@ -128,7 +128,7 @@ export const MobileMenu = () => {
               </Box>
             </Link>
           </Box>
-          <CloseIcon color={"#fff"} fontSize={"25px"} onClick={handleClick} />
+          <CloseIcon color={"#fff"} fontSize={"16px"} onClick={handleClick} />
         </Box>
 
         <Accordion allowToggle>
@@ -142,7 +142,7 @@ export const MobileMenu = () => {
                   fontWeight={"500"}
                   fontSize={"20px"}
                 >
-                  LEARN
+                  LEARN cdcdc
                 </Text>
               </Box>
               <AccordionIcon color={"#fff"} fontSize={"28px"} />