Merge pull request #679 from bugout-dev/landing-page-redesign

Fixed cropping issue on iphone size.

frontend/pages/contact/index.js

@@ -36,6 +36,7 @@ const Contact = () => {
         mb={8}
         minHeight="100vh"
         textColor="black"
+        position="relative"
       >
         <Icon
           as={BiArrowBack}
@@ -56,9 +57,9 @@ const Contact = () => {
               fontSize={["md", "lg", "xl"]}
               textAlign="center"
             >
-              Thanks for your interest in Moonstream.
-              <br />
-              Please answer some questions to help us get acquainted with you.
+              Thanks for your interest in Moonstream. Our tools are fully
+              customized to your project. <br /> Please answer these questions
+              to get started:
             </Text>
           </VStack>
         </Center>

frontend/pages/index.js

@@ -112,12 +112,12 @@ const Homepage = () => {
             borderWidth={"1px"}
             _hover={{ transform: "scale(1.05)", transition: "0.42s" }}
             cursor="pointer"
-            m={[2, 3, 3, 4, 8, 12]}
-            minW={["155px", "180px", "200px", "240px"]}
-            h={["200px", "300px"]}
+            m={2}
+            minW={["120px", "120px", "200px", "240px"]}
+            h={["200px", "200px", "300px"]}
           >
             <ChakraImage
-              boxSize={["120px", "200px", null]}
+              boxSize={["120px", "120px", "200px", null]}
               objectFit="contain"
               src={image}
               alt={altText}
@@ -289,9 +289,9 @@ const Homepage = () => {
                                   ]}
                                   fontSize={["sm", "md"]}
                                 >
-                                  transaction volume.
+                                  transaction volume
                                   <br />
-                                  And growing
+                                  and growing
                                 </Text>
                               </Stack>
                             </Flex>
@@ -509,7 +509,6 @@ const Homepage = () => {
                   justifyContent={["flex-end", "flex-end", "center"]}
                   w="100%"
                   spacing={["0px", "40px"]}
-                  mx={[-1, -2, -4]}
                   paddingTop="20px"
                 >
                   <Feature