[WIP] New landing page

src/Root/index.tsx

@@ -7,7 +7,7 @@ import Landing from "./Landing";
 
 function Root() {
     const isApp = (): boolean => {
-        return window.location.host.includes("app");
+        return window.location.host.includes("app.maiadao");
         //return true;
     };
 

src/views/Landing/LandingLayout.tsx

@@ -0,0 +1,16 @@
+import { useMediaQuery, makeStyles } from "@material-ui/core";
+import React from "react";
+
+const useStyles = makeStyles({
+    root: {
+        background: "linear-gradient(105deg, #B97DDD 0%, #1D3473 40%);",
+    },
+});
+
+const LandingLayout: React.FC = ({ children }) => {
+    const isDesktop = useMediaQuery("(min-width:772px)");
+    const styles = useStyles();
+    return <div className={isDesktop ? "" : styles.root}>{children}</div>;
+};
+
+export default LandingLayout;

src/views/Landing/components/Background/background.scss

@@ -8,6 +8,7 @@
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-color: transparentize($color: #4a483555, $amount: 0);
+    z-index: -1;
 
     .landing-background-wrap {
         margin-left: auto;
@@ -22,7 +23,7 @@
             font-weight: normal;
             font-size: 16px;
             line-height: 18px;
-            color: #FFFFFF;
+            color: #ffffff;
             white-space: pre-wrap;
             text-align: end;
         }
@@ -36,7 +37,6 @@
         z-index: 1;
 
         img {
-
             background-repeat: no-repeat;
             background-size: 100% 100%;
             width: 100%;
@@ -52,7 +52,6 @@
         z-index: 1;
 
         img {
-
             width: 100%;
             height: 100%;
         }
@@ -63,4 +62,4 @@
     .landing-background {
         display: none;
     }
-}
+}

src/views/Landing/components/Footer/Footer.tsx

@@ -0,0 +1,156 @@
+import { Box, Grid, styled, Typography, Link } from "@material-ui/core";
+import React from "react";
+
+const Title = styled(Typography)({
+    color: "white",
+    fontFamily: "Montserrat Bold",
+    fontSize: 22,
+});
+
+const TextLink = styled(Link)({
+    color: "white",
+    cursor: "pointer",
+});
+
+const Text = styled(Typography)({
+    color: "white",
+    fontFamily: "Montserrat Medium",
+    fontSize: 18,
+});
+
+const FootNote = styled(Typography)({
+    color: "white",
+    fontFamily: "Montserrat Medium",
+    fontSize: 12,
+});
+
+const Footer = () => {
+    return (
+        <Box bgcolor="#1D3473" minHeight={400} pt={10}>
+            <Grid container direction="row" justifyContent="center">
+                <Grid item xs={6} md={4} lg={3}>
+                    <Title paragraph align="center">
+                        Community
+                    </Title>
+                    <Grid container direction="column">
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Discord</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Twitter</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Telegram</TextLink>
+                            </Text>
+                        </Grid>
+                    </Grid>
+                </Grid>
+                <Grid item xs={6} md={4} lg={3}>
+                    <Title paragraph align="center">
+                        Tools
+                    </Title>
+                    <Grid container direction="column">
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">DefiLlama</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">CoinGecko</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">CoinMarketCap</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Discord</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Bridge List</TextLink>
+                            </Text>
+                        </Grid>
+                    </Grid>
+                </Grid>
+
+                <Grid item xs={6} md={4} lg={3}>
+                    <Title paragraph align="center">
+                        Info
+                    </Title>
+                    <Grid container direction="column">
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Discord</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Docs</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">FAQ's</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Media Kit</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Legacy Website</TextLink>
+                            </Text>
+                        </Grid>
+                    </Grid>
+                </Grid>
+                <Grid item xs={6} md={4} lg={3}>
+                    <Title paragraph align="center">
+                        Participate
+                    </Title>
+                    <Grid container direction="column">
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Governance</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Propose Partnership</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Join as Contributor</TextLink>
+                            </Text>
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Grid>
+
+            <Box mt={10} px={4} pb={10}>
+                <FootNote>
+                    Use of hermes.maiadao.io (the “Site”) and the Hermes Protocol (the “Protocol”) is strictly at your own risk. Before using the Protocol, users should fully
+                    understand and accept the risks involved, which include, but are not limited to, front-end errors, bugs, hacks, regulatory and tax uncertainty, and total loss
+                    of funds. Do not deploy funds you cannot afford to lose. No representations or warranties are made as to the safety of funds deployed, and Hermes Protocol or
+                    Maia DAO will not be liable or responsible for any losses incurred. By using the Site or the Protocol, you represent and warrant that your use does not violate
+                    any law, rule or regulation in your jurisdiction of residence. Nothing on the Site or any of Hermes Protocol's and Maia DAO's social media channels should be
+                    considered financial advice.
+                </FootNote>
+            </Box>
+        </Box>
+    );
+};
+
+export default Footer;

src/views/Landing/components/Footer/index.ts

@@ -0,0 +1,3 @@
+import Footer from "./Footer";
+
+export default Footer;

src/views/Landing/components/Header/Header.tsx

@@ -0,0 +1,27 @@
+import type { FC } from "react";
+import { Box, Typography } from "@material-ui/core";
+import maiaLogoWhite from "src/assets/icons/maialogowhite.png";
+import { styled } from "@material-ui/core/styles";
+
+const MenuLink = styled(Typography)({
+    color: "white",
+    fontFamily: "Montserrat Bold",
+    fontSize: "24px",
+    marginRight: "30px",
+    textTransform: "uppercase",
+    cursor: "pointer",
+});
+
+const Header: FC = () => {
+    return (
+        <Box display="flex" justifyContent="space-between" height={120} alignItems="center">
+            <img src={maiaLogoWhite} alt="Logo MAIA" width={110} height={110} />
+            <Box display="flex">
+                <MenuLink color="initial">Staking</MenuLink>
+                <MenuLink color="initial">Dashboard</MenuLink>
+            </Box>
+        </Box>
+    );
+};
+
+export default Header;

src/views/Landing/components/Header/index.ts

@@ -0,0 +1,3 @@
+import Header from "./Header";
+
+export default Header;