alpha structure proposal

frontend/pages/index.js

@@ -1,6 +1,6 @@
 import React, {
   useState,
-  // useContext,
+  useContext,
   Suspense,
   useEffect,
   useLayoutEffect,
@@ -31,46 +31,46 @@ import {
 } from "../src/core/providers/AnalyticsProvider/constants";
 import { AWS_ASSETS_PATH } from "../src/core/constants";
 import mixpanel from "mixpanel-browser";
-// import UIContext from "../src/core/providers/UIProvider/context";
+import UIContext from "../src/core/providers/UIProvider/context";
-// const SplitWithImage = dynamic(
+const SplitWithImage = dynamic(
-//   () => import("../src/components/SplitWithImage"),
+  () => import("../src/components/SplitWithImage"),
-//   {
+  {
-//     ssr: false,
+    ssr: false,
-//   }
+  }
-// );
+);
-// const GiSuspicious = dynamic(() =>
+const GiSuspicious = dynamic(() =>
-//   import("react-icons/gi").then((mod) => mod.GiSuspicious)
+  import("react-icons/gi").then((mod) => mod.GiSuspicious)
-// );
+);
 
-// const GiHook = dynamic(() =>
+const GiHook = dynamic(() =>
-//   import("react-icons/gi").then((mod) => mod.GiHook)
+  import("react-icons/gi").then((mod) => mod.GiHook)
-// );
+);
 
-// const IoTelescopeSharp = dynamic(() =>
+const IoTelescopeSharp = dynamic(() =>
-//   import("react-icons/io5").then((mod) => mod.IoTelescopeSharp)
+  import("react-icons/io5").then((mod) => mod.IoTelescopeSharp)
-// );
+);
 
-// const AiFillApi = dynamic(() =>
+const AiFillApi = dynamic(() =>
-// import("react-icons/ai").then((mod) => mod.AiFillApi)
+  import("react-icons/ai").then((mod) => mod.AiFillApi)
-// );
+);
 
-// const BiTransfer = dynamic(() =>
+const BiTransfer = dynamic(() =>
-// import("react-icons/bi").then((mod) => mod.BiTransfer)
+  import("react-icons/bi").then((mod) => mod.BiTransfer)
-// );
+);
 
-// const RiDashboardFill = dynamic(() =>
+const RiDashboardFill = dynamic(() =>
-// import("react-icons/ri").then((mod) => mod.RiDashboardFill)
+  import("react-icons/ri").then((mod) => mod.RiDashboardFill)
-// );
+);
-// const FaFileContract = dynamic(() =>
+const FaFileContract = dynamic(() =>
-// import("react-icons/fa").then((mod) => mod.FaFileContract)
+  import("react-icons/fa").then((mod) => mod.FaFileContract)
-// );
+);
-// const GiMeshBall = dynamic(() =>
+const GiMeshBall = dynamic(() =>
-// import("react-icons/gi").then((mod) => mod.GiMeshBall)
+  import("react-icons/gi").then((mod) => mod.GiMeshBall)
-// );
+);
 
-// const GiLogicGateXor = dynamic(() =>
+const GiLogicGateXor = dynamic(() =>
-// import("react-icons/gi").then((mod) => mod.GiLogicGateXor)
+  import("react-icons/gi").then((mod) => mod.GiLogicGateXor)
-// );
+);
 
 const ConnectedButtons = dynamic(
   () => import("../src/components/ConnectedButtons"),
@@ -97,7 +97,7 @@ const assets = {
   smartDevelopers: `${AWS_ASSETS_PATH}/smart+contract+developers.png`,
 };
 const Homepage = () => {
-  // const ui = useContext(UIContext);
+  const ui = useContext(UIContext);
   const [background, setBackground] = useState("background720");
   const [backgroundLoaded720, setBackgroundLoaded720] = useState(false);
   const [backgroundLoaded1920, setBackgroundLoaded1920] = useState(false);
@@ -264,30 +264,14 @@ const Homepage = () => {
                           understand exactly how people are using your smart
                           contracts.
                         </chakra.span>
-                        {/* <chakra.span
-                          fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
-                          display="inline-block"
-                          color="blue.300"
-                        >
-                          Access this data through the Moonstream dashboard or
-                          API
-                        </chakra.span> */}
                       </Stack>
                     </Flex>
                   </Box>
                 </chakra.header>
               </GridItem>
 
-              <GridItem
+              <GridItem px="7%" colSpan="12" pt={0} minH="100vh">
-                px="7%"
-                colSpan="12"
-                // 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"
@@ -296,7 +280,6 @@ const Homepage = () => {
                 >
                   <Text
                     mb={18}
-                    // mb={[12, 12, 12, null, 48]}
                     fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
                   >
                     We believe that the blockchain is for everyone. This
@@ -419,7 +402,7 @@ const Homepage = () => {
                   />
                 </Flex>
               </GridItem>
-              {/* <GridItem
+              <GridItem
                 px="7%"
                 colSpan="12"
                 pt={["1rem", "1rem", "5.125rem", null, "5.125rem"]}
@@ -492,6 +475,8 @@ const Homepage = () => {
                   mirror={true}
                   colorScheme="orange"
                   badge={`Centralized exchange prices`}
+                  title={`Market data - just in time! `}
+                  body={`Moonstream is your tool of choice to built algorithms and tools which need to source data from exchange services. Whether it is on-chian automatic market maker, or centralized exchange - get numbers in one dashboard`}
                   bullets={[
                     {
                       text: `Get API access to your stream`,
@@ -547,22 +532,24 @@ const Homepage = () => {
                   }}
                   elementName={"element3"}
                   colorScheme="blue"
-                  badge={`Know your people`}
+                  title={`What really matters - is people`}
+                  badge={`stay social`}
+                  body={`It's all about the community. Stay informed about what happens in social networks, news portals and rss feeds`}
                   bullets={[
                     {
-                      text: `Subscribe to social media tags and people`,
+                      text: `Use our AI to get semantics and find patterns`,
-                      icon: IoTelescopeSharp,
+                      icon: GiMeshBall,
                       color: "blue.50",
                       bgColor: "blue.900",
                     },
                     {
-                      text: `Automatically process content with our semantics AI analysis`,
+                      text: `Secure your community wellbeing by automatically detecting social scam`,
                       icon: GiSuspicious,
                       color: "blue.50",
                       bgColor: "blue.900",
                     },
                     {
-                      text: `Register webhooks to connect your infrastructure`,
+                      text: `Register on-chain webhooks to take action`,
                       icon: GiHook,
                       color: "blue.50",
                       bgColor: "blue.900",
@@ -627,7 +614,7 @@ const Homepage = () => {
                   ]}
                   imgURL={assets["smartDevelopers"]}
                 />
-              </GridItem> */}
+              </GridItem>
               <GridItem
                 placeItems="center"
                 w="100%"
@@ -711,52 +698,3 @@ export async function getStaticProps() {
 }
 
 export default Homepage;
-
-// <chakra.span pl={2} px={12} py={2}>
-// <Text mb={3}></Text>
-// <Text mb={3}>
-//   Right now our source of data is Ethereum blockchain. Our goal is to
-//   provide a live view of the transactions taking place on every public
-//   blockchain - from the activity of specific accounts or smart
-//   contracts to updates about general market movements.
-// </Text>
-// <Text mb={3}>
-//   This information comes from the blockchains themselves, from their
-//   mempools/transaction pools, and from centralized exchanges, social
-//   media, and the news. This forms a stream of information tailored to
-//   your specific needs.
-// </Text>
-// <Text mb={3}>
-//   We’re giving you a macro view of the crypto market with direct
-//   access from Moonstream dashboards to execute transactions. You can
-//   also set up programs which execute (on- or off-chain) when your
-//   stream meets certain conditions.
-// </Text>
-// <Text mb={3}>
-//   Moonstream is accessible through dashboard, API and webhooks.
-// </Text>
-// <Text mb={3}>
-//   Moonstream’s financial inclusion goes beyond providing access to
-//   data. All of our work is open source as we do not believe that
-//   proprietary technologies are financially inclusive.
-// </Text>
-// <Text mb={3}>
-//   You can read{" "}
-//   <Link
-//     textColor="orange.900"
-//     isExternal
-//     href="https://github.com/bugout-dev/moonstream"
-//   >
-//     our code on GitHub.
-//   </Link>{" "}
-//   and keep track of our progress using{" "}
-//   <Link
-//     textColor="orange.900"
-//     isExternal
-//     href="https://github.com/bugout-dev/moonstream/milestones"
-//   >
-//     the Moonstream milestones
-//   </Link>
-//   .
-// </Text>
-// </chakra.span>