Fixing error in height calculation with SVG graphics. Adding redirect on form submit to the /contact page. Adding metadata to the /contact page.

frontend/pages/contact/index.js

@@ -1,54 +1,75 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Box, Image, Center, VStack, Text, Spinner } from "@chakra-ui/react";
 import { getLayout, getLayoutProps } from "../../src/layouts/WideInfoPage";
 import HubspotForm from "react-hubspot-form";
+import { useRouter } from "next/router";
 
-const Contact = () => (
+const Contact = () => {
-  <Box>
+  const router = useRouter();
-    <Box px="1.5rem" m="auto" mb={8} minWidth="1000px" minHeight="100vh">
+  const formId = "b54d192f-59b1-410a-8ac1-a1e8383c423c";
-      <Image></Image>
+
-      <Center>
+  useEffect(() => {
-        <VStack>
+    function handler(event) {
-          <Text my={5} fontSize={["lg", "xl"]} textAlign="center">
+      if (
-            Thanks for your interest in Moonstream.
+        event.data.type === "hsFormCallback" &&
-            <br />
+        event.data.eventName === "onFormSubmitted"
-            Please answer some questions to help us get acquainted with you.
+      ) {
+        if (event.data.id === formId) {
+          router.push("/");
+        }
+      }
+    }
+
+    window.addEventListener("message", handler);
+    return () => {
+      window.removeEventListener("message", handler);
+    };
+  });
+
+  return (
+    <Box>
+      <Box px="1.5rem" m="auto" mb={8} minWidth="1000px" minHeight="100vh">
+        <Image></Image>
+        <Center>
+          <VStack>
+            <Text my={5} fontSize={["lg", "xl"]} textAlign="center">
+              Thanks for your interest in Moonstream.
+              <br />
+              Please answer some questions to help us get acquainted with you.
+            </Text>
+          </VStack>
+        </Center>
+        <HubspotForm
+          portalId="8018701"
+          formId={formId}
+          loading={<Spinner colorScheme="primary" speed="1s" />}
+        />
+        <Center>
+          <Text my={5} fontSize={["md", "lg"]} textAlign="center" width="60%">
+            <i>
+              Click the button to submit your answers. We&apos;ll reach out
+              directly within 3 days. You will not receive any marketing emails
+              from us.
+            </i>
           </Text>
-        </VStack>
+        </Center>
-      </Center>
+      </Box>
-      <HubspotForm
-        portalId="8018701"
-        formId="b54d192f-59b1-410a-8ac1-a1e8383c423c"
-        loading={<Spinner colorScheme="primary" speed="1s" />}
-      />
-      <Center>
-        <Text my={5} fontSize={["md", "lg"]} textAlign="center" width="60%">
-          <i>
-            Click the button to submit your answers. We&apos;ll reach out
-            directly within 3 days. You will not receive any marketing emails
-            from us.
-          </i>
-        </Text>
-      </Center>
     </Box>
-  </Box>
+  );
-);
+};
 
 Contact.getLayout = getLayout;
 
 export async function getStaticProps() {
   const layoutProps = getLayoutProps();
-  // const metaTags = {
+  const metaTags = {
-  //   title: "Moonstream: privacy policy",
+    title: "Moonstream: Contact form",
-  //   description: "Privacy policy and legal information",
+    description:
-  //   keywords: "moonstream, privacy, policy, legal",
+      "Form requesting contact information to connect with Moonstream",
-  //   url: "https://www.moonstream.to/privacy-policy",
+    keywords: "moonstream, contact, web3, game economy, get acquainted",
-  // };
+    url: "https://www.moonstream.to/contact",
-  // layoutProps.props.metaTags = {
+  };
-  //   ...layoutProps.props.metaTags,
+  layoutProps.props.metaTags = { ...layoutProps.props.metaTags, ...metaTags };
-  //   ...DEFAULT_METATAGS,
-  //   ...metaTags,
-  // };
   return { ...layoutProps };
 }
 

frontend/src/components/EngineOverviewDiagram.js

@@ -65,7 +65,7 @@ const _EngineOverviewDiagram = () => {
             h={["73", "73", "114px"]}
             position="relative"
           >
-            <RoundedRectSVG scale={1} />
+            <RoundedRectSVG scaling={1.0} />
             <Center
               position="absolute"
               left="0"
@@ -128,7 +128,7 @@ const _EngineOverviewDiagram = () => {
             h={["160px", "160px", "205px"]}
             position="relative"
           >
-            <RectangleSVG scale={0.8}></RectangleSVG>
+            <RectangleSVG scaling={0.8}></RectangleSVG>
             <Center
               position="absolute"
               w={["155px", "155px", "189px"]}
@@ -194,7 +194,7 @@ const _EngineOverviewDiagram = () => {
             h={["120px", "120px", "188px"]}
             position="relative"
           >
-            <CloudSVG scale={0.5}></CloudSVG>
+            <CloudSVG scaling={0.5}></CloudSVG>
             <Center
               position="absolute"
               paddingTop="30px"

frontend/src/components/SVGGraphics/Cloud.js

@@ -1,11 +1,11 @@
 import { React } from "react";
 import { chakra } from "@chakra-ui/react";
 
-const _CloudSVG = (scale) => {
+const _CloudSVG = (props) => {
-  scale = scale || 1.0;
+  const _scale = props.scaling || 1.0;
   return (
     <svg
-      height={250 * scale}
+      height={250 * _scale}
       viewBox="0 0 407 250"
       fill="white"
       xmlns="http://www.w3.org/2000/svg"

frontend/src/components/SVGGraphics/Rectangle.js

@@ -1,11 +1,11 @@
 import { React } from "react";
 import { chakra } from "@chakra-ui/react";
 
-const _RectangleSVG = (scale) => {
+const _RectangleSVG = (props) => {
-  scale = scale || 1.0;
+  const _scale = props.scaling || 1.0;
   return (
     <svg
-      height={265 * scale}
+      height={265 * _scale}
       viewBox="0 0 245 265"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

frontend/src/components/SVGGraphics/RoundedRect.js

@@ -1,12 +1,11 @@
 import { React } from "react";
 import { chakra } from "@chakra-ui/react";
 
-const _RoundedRectSVG = (scale) => {
+const _RoundedRectSVG = (props) => {
-  scale = scale || 1.0;
+  const _scale = props.scaling || 1.0;
-  console.log(scale);
   return (
     <svg
-      height={134 * scale}
+      height={134 * _scale}
       viewBox="0 0 472 134"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"