From 2605a5b7a482b2f04d2e89f2ad5fd4ae4f705e86 Mon Sep 17 00:00:00 2001
From: Tim Pechersky <tim.pechersky@gmail.com>
Date: Thu, 19 Aug 2021 14:48:17 +0200
Subject: [PATCH 1/3] added github button, changed title, added OSS row

---
 frontend/pages/index.js                   | 53 +++++++++++++--
 frontend/src/components/SplitWithImage.js | 79 +++++++++++++++--------
 2 files changed, 98 insertions(+), 34 deletions(-)

diff --git a/frontend/pages/index.js b/frontend/pages/index.js
index a1d8fc69..b31a3911 100644
--- a/frontend/pages/index.js
+++ b/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`}
diff --git a/frontend/src/components/SplitWithImage.js b/frontend/src/components/SplitWithImage.js
index c1e8dbdd..217e3438 100644
--- a/frontend/src/components/SplitWithImage.js
+++ b/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",
-    "2xl": "xl",
+    xl: "lg",
+    "2xl": "lg",
   });
 
   const ui = useContext(UIContext);
@@ -109,20 +112,25 @@ const SplitWithImage = ({
           </Flex>
         )}
         <Stack spacing={4} justifyContent="center">
-          <Text
-            id={`MoonBadge ${elementName}`}
-            // id={`MoonBadge${elementName}`}
-            textTransform={"uppercase"}
-            color={useColorModeValue(`${colorScheme}.50`, `${colorScheme}.900`)}
-            fontWeight={600}
-            fontSize={"sm"}
-            bg={useColorModeValue(`${colorScheme}.900`, `${colorScheme}.50`)}
-            p={2}
-            alignSelf={mirror && !ui.isMobileView ? "flex-end" : "flex-start"}
-            rounded={"md"}
-          >
-            {badge}
-          </Text>
+          <Stack direction="row">
+            <Text
+              id={`MoonBadge ${elementName}`}
+              // id={`MoonBadge${elementName}`}
+              textTransform={"uppercase"}
+              color={useColorModeValue(
+                `${colorScheme}.50`,
+                `${colorScheme}.900`
+              )}
+              fontWeight={600}
+              fontSize={"sm"}
+              bg={useColorModeValue(`${colorScheme}.900`, `${colorScheme}.50`)}
+              p={2}
+              alignSelf={mirror && !ui.isMobileView ? "flex-end" : "flex-start"}
+              rounded={"md"}
+            >
+              {badge}
+            </Text>
+          </Stack>
           <Heading>{title}</Heading>
           <Text color={`primary.500`} fontSize={"lg"}>
             {body}
@@ -150,16 +158,33 @@ const SplitWithImage = ({
             })}
             <Container>
               <Center>
-                <Button
-                  colorScheme={colorScheme}
-                  variant="outline"
-                  mt={[0, 0, null, 16]}
-                  fontSize={["xs", "sm", "lg", null, "lg"]}
-                  size={buttonSize}
-                  onClick={cta.onClick}
-                >
-                  {cta.label}
-                </Button>
+                <Flex w="100%" flexWrap="wrap">
+                  <Button
+                    colorScheme={colorScheme}
+                    variant="outline"
+                    mt={[0, 0, null, 16]}
+                    fontSize={["xs", "sm", "lg", null, "lg"]}
+                    size={buttonSize}
+                    onClick={cta.onClick}
+                  >
+                    {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>

From b69a4b77d2c356ef437bf9e7fcf66c6f8ad242c1 Mon Sep 17 00:00:00 2001
From: Tim Pechersky <tim.pechersky@gmail.com>
Date: Fri, 20 Aug 2021 21:04:50 +0200
Subject: [PATCH 2/3] added github icon and OSS subtitle

---
 frontend/pages/index.js                   |  3 +-
 frontend/src/components/SplitWithImage.js | 86 ++++++++++++-----------
 2 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/frontend/pages/index.js b/frontend/pages/index.js
index b31a3911..8623eb13 100644
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@@ -303,7 +303,7 @@ const Homepage = () => {
                   >
                     {` We believe in financial inclusion. Proprietary technologies
                     are not financially inclusive. That's why all our software
-                    is`}
+                    is `}
                     <chakra.span
                       display="inline-block"
                       textColor="secondary.900"
@@ -316,6 +316,7 @@ const Homepage = () => {
                 <Heading
                   {...HEADING_PROPS}
                   textAlign="center"
+                  mt={16}
                   pb={[12, 12, 12, null, 48]}
                 >
                   Data you can add to your stream:
diff --git a/frontend/src/components/SplitWithImage.js b/frontend/src/components/SplitWithImage.js
index 217e3438..1547dade 100644
--- a/frontend/src/components/SplitWithImage.js
+++ b/frontend/src/components/SplitWithImage.js
@@ -10,9 +10,7 @@ import {
   Icon,
   useColorModeValue,
   Button,
-  Center,
   useBreakpointValue,
-  Spacer,
 } from "@chakra-ui/react";
 import React, { useContext } from "react";
 import UIContext from "../core/providers/UIProvider/context";
@@ -71,15 +69,18 @@ const SplitWithImage = ({
   cta,
   socialButton,
 }) => {
-  const buttonSize = useBreakpointValue({
-    base: "md",
-    sm: "md",
-    md: "md",
-    lg: "lg",
-    xl: "lg",
-    "2xl": "lg",
+  var buttonSize = useBreakpointValue({
+    base: { single: "sm", double: "xs" },
+    sm: { single: "md", double: "sm" },
+    md: { single: "md", double: "sm" },
+    lg: { single: "lg", double: "lg" },
+    xl: { single: "lg", double: "lg" },
+    "2xl": { single: "lg", double: "lg" },
   });
 
+  //idk why but sometimes buttonSize gets undefined
+  if (!buttonSize) buttonSize = "lg";
+
   const ui = useContext(UIContext);
 
   const [isVisible, setVisible] = React.useState(true);
@@ -156,37 +157,42 @@ const SplitWithImage = ({
                 />
               );
             })}
-            <Container>
-              <Center>
-                <Flex w="100%" flexWrap="wrap">
-                  <Button
-                    colorScheme={colorScheme}
-                    variant="outline"
-                    mt={[0, 0, null, 16]}
-                    fontSize={["xs", "sm", "lg", null, "lg"]}
-                    size={buttonSize}
-                    onClick={cta.onClick}
-                  >
-                    {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>
+
+            <Flex
+              w="100%"
+              flexWrap="nowrap"
+              display={["column", "column", null, "row"]}
+            >
+              <Button
+                colorScheme={colorScheme}
+                w={["100%", "100%", "fit-content", null]}
+                maxW={["250px", null, "fit-content"]}
+                variant="outline"
+                mt={[0, 0, null, 16]}
+                // fontSize={["xs", "sm", "lg", null, "lg"]}
+                size={socialButton ? buttonSize.double : buttonSize.single}
+                onClick={cta.onClick}
+              >
+                {cta.label}
+              </Button>
+
+              {socialButton && (
+                <RouteButton
+                  isExternal
+                  w={["100%", "100%", "fit-content", null]}
+                  maxW={["250px", null, "fit-content"]}
+                  href={socialButton.url}
+                  mt={[0, 0, null, 16]}
+                  // fontSize={["xs", "sm", "lg", null, "lg"]}
+                  size={socialButton ? buttonSize.double : buttonSize.single}
+                  variant="outline"
+                  colorScheme="primary"
+                  leftIcon={<FaGithubSquare />}
+                >
+                  git clone moonstream
+                </RouteButton>
+              )}
+            </Flex>
           </Stack>
         </Stack>
         {(!mirror || ui.isMobileView) && (

From 1162bf61f7d8b340ea6df1ce85d05668198c09b3 Mon Sep 17 00:00:00 2001
From: Tim Pechersky <tim.pechersky@gmail.com>
Date: Fri, 20 Aug 2021 21:05:25 +0200
Subject: [PATCH 3/3] cleanup

---
 frontend/src/components/SplitWithImage.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/components/SplitWithImage.js b/frontend/src/components/SplitWithImage.js
index 1547dade..32711fd4 100644
--- a/frontend/src/components/SplitWithImage.js
+++ b/frontend/src/components/SplitWithImage.js
@@ -169,7 +169,6 @@ const SplitWithImage = ({
                 maxW={["250px", null, "fit-content"]}
                 variant="outline"
                 mt={[0, 0, null, 16]}
-                // fontSize={["xs", "sm", "lg", null, "lg"]}
                 size={socialButton ? buttonSize.double : buttonSize.single}
                 onClick={cta.onClick}
               >
@@ -183,7 +182,6 @@ const SplitWithImage = ({
                   maxW={["250px", null, "fit-content"]}
                   href={socialButton.url}
                   mt={[0, 0, null, 16]}
-                  // fontSize={["xs", "sm", "lg", null, "lg"]}
                   size={socialButton ? buttonSize.double : buttonSize.single}
                   variant="outline"
                   colorScheme="primary"
@@ -202,7 +200,6 @@ const SplitWithImage = ({
               alt={"feature image"}
               src={imgURL}
               objectFit={"contain"}
-              // boxSize={ui.isMobileView ? "lg" : null}
             />
           </Flex>
         )}