added github button, changed title, added OSS row

frontend/pages/index.js

@@ -19,6 +19,7 @@ import {
   SimpleGrid,
   useMediaQuery,
   Grid,
+  Text,
   GridItem,
 } from "@chakra-ui/react";
 import dynamic from "next/dynamic";
@@ -28,7 +29,6 @@ import useModals from "../src/core/hooks/useModals";
 import useRouter from "../src/core/hooks/useRouter";
 import { MIXPANEL_PROPS } from "../src/core/providers/AnalyticsProvider/constants";
 import UIContext from "../src/core/providers/UIProvider/context";
-
 const SplitWithImage = dynamic(
   () => import("../src/components/SplitWithImage"),
   {
@@ -244,17 +244,21 @@ const Homepage = () => {
                         textAlign="center"
                         alignItems="center"
                         spacing={6}
-                        maxW="1620px"
+                        maxW={["1620px", null, null, null, "1620px", "2222px"]}
                         px="7%"
                         h="100%"
                         pt={["10vh", null, "20vh"]}
                       >
-                        <Heading size="2xl" fontWeight="semibold" color="white">
+                        <Heading
+                          fontSize={["lg", "4xl", "5xl", "5xl", "5xl", "6xl"]}
+                          fontWeight="semibold"
+                          color="white"
+                        >
                           All the crypto data you care about in a single stream
                         </Heading>
                         <chakra.span
                           my={12}
-                          fontSize={["lg", null, "xl"]}
+                          fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
                           display="inline-block"
                           color="primary.200"
                         >
@@ -263,7 +267,7 @@ const Homepage = () => {
                           pool to Elon Musk’s latest tweets.
                         </chakra.span>
                         <chakra.span
-                          fontSize={["lg", null, "xl"]}
+                          fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
                           display="inline-block"
                           color="primary.300"
                         >
@@ -279,10 +283,36 @@ const Homepage = () => {
               <GridItem
                 px="7%"
                 colSpan="12"
-                pt={["20px", "20px", "100px", null, "120px"]}
+                // pt={["20px", "20px", "100px", null, "120px"]}
+                pt={0}
                 pb={["20px", "56px", null, "184px"]}
                 minH="100vh"
               >
+                <chakra.span
+                  // {...HEADING_PROPS}
+                  textAlign="center"
+                  fontWeight="600"
+                  fontSize="lg"
+                  w="100%"
+                  h="fit-content"
+                >
+                  <Text
+                    mb={18}
+                    // mb={[12, 12, 12, null, 48]}
+                    fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
+                  >
+                    {` We believe in financial inclusion. Proprietary technologies
+                    are not financially inclusive. That's why all our software
+                    is`}
+                    <chakra.span
+                      display="inline-block"
+                      textColor="secondary.900"
+                    >
+                      <i>open source</i>
+                    </chakra.span>
+                  </Text>
+                </chakra.span>
+
                 <Heading
                   {...HEADING_PROPS}
                   textAlign="center"
@@ -290,7 +320,6 @@ const Homepage = () => {
                 >
                   Data you can add to your stream:
                 </Heading>
-
                 <SimpleGrid columns={[1, 2, 2, 4, null, 4]}>
                   <Stack spacing={1} px={1} alignItems="center">
                     <ChakraImage
@@ -486,6 +515,16 @@ const Homepage = () => {
                       toggleModal("hubspot-developer");
                     },
                   }}
+                  socialButton={{
+                    url: "https://github.com/bugout-dev/moonstream/",
+                    network: "github",
+                    label: "See our github",
+                    onClick: () => {
+                      track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
+                        [`${MIXPANEL_PROPS.BUTTON_CLICKED}`]: `Github link in landing page`,
+                      });
+                    },
+                  }}
                   elementName={"element3"}
                   colorScheme="primary"
                   badge={`For smart contract developers`}

frontend/src/components/SplitWithImage.js

@@ -12,10 +12,12 @@ import {
   Button,
   Center,
   useBreakpointValue,
+  Spacer,
 } from "@chakra-ui/react";
-// import Xarrow, { useXarrow } from "react-xarrows";
 import React, { useContext } from "react";
 import UIContext from "../core/providers/UIProvider/context";
+import { FaGithubSquare } from "react-icons/fa";
+import RouteButton from "../components/RouteButton";
 
 const Feature = ({ text, icon, iconBg, bullets }) => {
   return (
@@ -67,14 +69,15 @@ const SplitWithImage = ({
   mirror,
   elementName,
   cta,
+  socialButton,
 }) => {
   const buttonSize = useBreakpointValue({
     base: "md",
     sm: "md",
     md: "md",
     lg: "lg",
-    xl: "xl",
+    xl: "lg",
-    "2xl": "xl",
+    "2xl": "lg",
   });
 
   const ui = useContext(UIContext);
@@ -109,11 +112,15 @@ const SplitWithImage = ({
           </Flex>
         )}
         <Stack spacing={4} justifyContent="center">
+          <Stack direction="row">
             <Text
               id={`MoonBadge ${elementName}`}
               // id={`MoonBadge${elementName}`}
               textTransform={"uppercase"}
-            color={useColorModeValue(`${colorScheme}.50`, `${colorScheme}.900`)}
+              color={useColorModeValue(
+                `${colorScheme}.50`,
+                `${colorScheme}.900`
+              )}
               fontWeight={600}
               fontSize={"sm"}
               bg={useColorModeValue(`${colorScheme}.900`, `${colorScheme}.50`)}
@@ -123,6 +130,7 @@ const SplitWithImage = ({
             >
               {badge}
             </Text>
+          </Stack>
           <Heading>{title}</Heading>
           <Text color={`primary.500`} fontSize={"lg"}>
             {body}
@@ -150,6 +158,7 @@ const SplitWithImage = ({
             })}
             <Container>
               <Center>
+                <Flex w="100%" flexWrap="wrap">
                   <Button
                     colorScheme={colorScheme}
                     variant="outline"
@@ -160,6 +169,22 @@ const SplitWithImage = ({
                   >
                     {cta.label}
                   </Button>
+                  <Spacer />
+                  {socialButton && (
+                    <RouteButton
+                      isExternal
+                      href={socialButton.url}
+                      mt={[0, 0, null, 16]}
+                      fontSize={["xs", "sm", "lg", null, "lg"]}
+                      size={buttonSize}
+                      variant="outline"
+                      colorScheme="primary"
+                      leftIcon={<FaGithubSquare />}
+                    >
+                      Check out our github
+                    </RouteButton>
+                  )}
+                </Flex>
               </Center>
             </Container>
           </Stack>