mirror
/
moonstream
kopia lustrzana https://github.com/bugout-dev/moonstream
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

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

pull/638/head
Kellan Wampler 2022-07-14 14:13:43 -04:00
rodzic 4468c56e11
commit 1bf35cdc33
5 zmienionych plików z 73 dodań i 53 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

101
frontend/pages/contact/index.js
Wyświetl plik

@ -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 = () => (
<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.
const Contact = () => {
const router = useRouter();
const formId = "b54d192f-59b1-410a-8ac1-a1e8383c423c";
useEffect(() => {
function handler(event) {
if (
event.data.type === "hsFormCallback" &&
event.data.eventName === "onFormSubmitted"
) {
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>
<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>
</Center>
</Box>
</Box>
</Box>
);
);
};
Contact.getLayout = getLayout;
export async function getStaticProps() {
const layoutProps = getLayoutProps();
// const metaTags = {
// title: "Moonstream: privacy policy",
// description: "Privacy policy and legal information",
// keywords: "moonstream, privacy, policy, legal",
// url: "https://www.moonstream.to/privacy-policy",
// };
// layoutProps.props.metaTags = {
// ...layoutProps.props.metaTags,
// ...DEFAULT_METATAGS,
// ...metaTags,
// };
const metaTags = {
title: "Moonstream: Contact form",
description:
"Form requesting contact information to connect with Moonstream",
keywords: "moonstream, contact, web3, game economy, get acquainted",
url: "https://www.moonstream.to/contact",
};
layoutProps.props.metaTags = { ...layoutProps.props.metaTags, ...metaTags };
return { ...layoutProps };
}

6
frontend/src/components/EngineOverviewDiagram.js
Wyświetl plik

@ -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"

6
frontend/src/components/SVGGraphics/Cloud.js
Wyświetl plik

@ -1,11 +1,11 @@
import { React } from "react";
import { chakra } from "@chakra-ui/react";
const _CloudSVG = (scale) => {
scale = scale || 1.0;
const _CloudSVG = (props) => {
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"

6
frontend/src/components/SVGGraphics/Rectangle.js
Wyświetl plik

@ -1,11 +1,11 @@
import { React } from "react";
import { chakra } from "@chakra-ui/react";
const _RectangleSVG = (scale) => {
scale = scale || 1.0;
const _RectangleSVG = (props) => {
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"

7
frontend/src/components/SVGGraphics/RoundedRect.js
Wyświetl plik

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