fix: adjust style

Author: Holybasil

src/app/cloak/Hero/index.tsx

@@ -26,8 +26,10 @@ const CloakHero = () => {
           flexDirection: ["column", "column", "column", "row"],
           justifyContent: "space-between",
           alignItems: "center",
-          gap: "60px",
+          gap: ["1.2rem", "1.2rem", "6rem"],
           pt: "5%",
+
+          pb: ["4rem", 0],
         }}
       >
         <Stack direction="column" sx={{ gap: ["1.2rem", "3rem"], maxWidth: ["auto", "78rem"] }}>

src/app/cloak/LearnMore/index.tsx

@@ -3,7 +3,7 @@
 import { Box, Container } from "@mui/material"
 
 import Button from "@/components/Button"
-import { CLOAK_HERO_LINKS } from "@/constants"
+import { CLOAK_SIGNUP_URL } from "@/constants"
 import useCheckViewport from "@/hooks/useCheckViewport"
 
 const LearnMore = () => {
@@ -16,8 +16,8 @@ const LearnMore = () => {
           justifyContent: "center",
         }}
       >
-        <Button target="_blank" size={isMobile ? "small" : "medium"} whiteButton href={CLOAK_HERO_LINKS[0].href} className="!w-[280px] md:!w-[340px]">
-          Learn more about Cloak’s design
+        <Button target="_blank" width="250px" whiteButton href={CLOAK_SIGNUP_URL}>
+          Sign up for demo
         </Button>
       </Container>
     </Box>

src/app/cloak/SectionWrapper/index.tsx

@@ -18,8 +18,9 @@ const SectionWrapper = (props: SectionWrapperProps) => {
           <Typography
             sx={{
               typography: "title",
-              fontSize: ["2.4rem", "3.2rem"],
+              fontSize: ["2.8rem", "3.2rem"],
               lineHeight: 1.4,
+              maxWidth: ["30rem", "30rem", "unset"],
               color,
             }}
           >