Frontend redesign

package.json

@@ -5,9 +5,14 @@
   "private": true,
   "dependencies": {
     "@airgap/beacon-sdk": "^3.1.0",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@fontsource/roboto": "^4.5.7",
     "@ledgerhq/hw-app-tezos": "^6.27.1",
     "@ledgerhq/hw-transport-webhid": "^6.27.1",
     "@ledgerhq/logs": "^6.10.0",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.9.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",

src/components/AboutUs/index.tsx

@@ -0,0 +1,34 @@
+import { Grid, Typography } from '@mui/material'
+import Illustration from '../../assets/images/AboutusIllustration.svg'
+
+function AboutUs() {
+    return (
+        <Grid container spacing={2} justifyContent="space-between" sx={{
+            padding: '20px'
+        }}>
+            <Grid item xs={6} alignItems='center'>
+                <Typography variant='h2' component='h2' sx={{
+                    color: "#ffffff",
+                    marginBottom: '5vh',
+                    marginTop: '10vh'
+                }}>
+                    About Us
+                </Typography>
+                <Typography variant='body1' component='body' sx={{
+                    color: "#ffffff",
+                    marginBottom: '5vh',
+                }}>
+                    Cryptonomic is an NYC-based company committed to decentralization and digital sovereignty. We provide tools and smart contracts which enable higher level decentralized and consortium applications. By embracing all aspects of decentralized technology we are helping build the economy of the future.
+                </Typography>
+            </Grid>
+            <Grid item xs={5}>
+                <img src={Illustration} alt='illustration' style={{
+                    height: '85vh',
+                    width: '35vw'
+                }} />
+            </Grid>
+        </Grid>
+    )
+}
+
+export default AboutUs

src/components/ContactUs/index.tsx

@@ -0,0 +1,46 @@
+import { Grid, Typography } from '@mui/material'
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+import Illustration from '../../assets/images/Contactus.svg'
+
+function ContactUs() {
+    return (
+        <Grid container spacing={2} justifyContent="space-between" sx={{
+            padding: '20px'
+        }}>
+            <Grid item xs={6} alignItems='center'>
+                <Typography variant='h2' component='h2' sx={{
+                    color: "#ffffff",
+                    marginBottom: '5vh',
+                    marginTop: '10vh'
+                }}>
+                    Contact us
+                </Typography>
+                <Typography variant='body1' component='body' sx={{
+                    color: "#ffffff",
+                }}>
+                    For all inquiries, please contact us at <a href="mailto:support@cryptonomic.tech">support@cryptonomic.tech</a>.
+                </Typography>
+                <br />
+                <Typography variant='body1' component='body' sx={{
+                    color: "#ffffff",
+                    marginBottom: '5vh',
+                    alignItems: 'center',
+                    display: 'flex'
+                }}>
+                    We are located at:
+
+                    <LocationOnIcon color="secondary" sx={{
+
+                    }} /> 100 Bogart Street, Brooklyn, NY 11206 USA</Typography>
+            </Grid>
+            <Grid item xs={5}>
+                <img src={Illustration} alt='illustration' style={{
+                    height: '85vh',
+                    width: '35vw'
+                }} />
+            </Grid>
+        </Grid>
+    )
+}
+
+export default ContactUs

src/components/Footer/index.tsx

@@ -0,0 +1,111 @@
+import { Grid, Typography } from '@mui/material'
+import { Link } from 'react-router-dom'
+import Logo from '../../assets/images/Logo.png'
+import GitHubIcon from '@mui/icons-material/GitHub';
+import LinkedInIcon from '@mui/icons-material/LinkedIn';
+import LocalPhoneIcon from '@mui/icons-material/LocalPhone';
+import EmailIcon from '@mui/icons-material/Email';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+import FooterImage from '../../assets/images/Footerimage.svg'
+import ArticleIcon from '@mui/icons-material/Article';
+import TwitterIcon from '@mui/icons-material/Twitter';
+
+export default function Footer() {
+    return (
+        <Grid container item spacing={8} direction='row' justifyContent='center'>
+            <Grid item xs={5}>
+                <img className="inline" src={Logo} alt="logo" />
+                <Typography variant='body1' sx={{
+                    color: "#ffffff",
+                    marginBottom: '5vh',
+                    marginTop: '5vh'
+                }}>
+                    We are building a rich suite of tools to make developing and deploying blockchain applications easier. Our stack has helped us build multiple user tools and reliably host always-on global infrastructure.
+                </Typography>
+                <img className="inline" src={FooterImage} alt="logo" />
+            </Grid>
+            <Grid container item xs={6}>
+                <Grid container item xs={12} direction='row' justifyContent='space-around'>
+                    <Grid container direction='column' spacing={2} item xs={3} sx={{
+                        width: '10vw'
+                    }}>
+                        <Grid item>
+                            <Typography variant='body1' sx={{
+                                color: "#ffffff",
+                                marginBottom: '10px'
+                            }}>Pages
+                            </Typography>
+                        </Grid>
+                        <Grid item>
+                            <Link to="/about">
+                                About us
+                            </Link>
+                        </Grid>
+                        <Grid item>
+                            <Link to="/contact">
+                                Contact us
+                            </Link>
+                        </Grid>
+                    </Grid>
+                    <Grid container direction='column' spacing={2} item xs={3} sx={{
+                        width: '10vw'
+                    }}>
+                        <Grid item>
+                            <Typography variant='body1' sx={{
+                                color: "#ffffff",
+                                marginBottom: '10px'
+                            }}>Services</Typography>
+                        </Grid>
+                        <Grid item>
+                            <Link to="/contact">
+                                Consulting
+                            </Link>
+                        </Grid>
+                        <Grid item>
+                            <Link to="/contact">
+                                Blockchain Applications
+                            </Link>
+                        </Grid>
+                    </Grid>
+                    <Grid container item xs={3} direction='column' rowSpacing={1}>
+
+                        <Grid item>
+                            <Typography variant='body1' sx={{
+                                color: "#ffffff",
+                                marginBottom: '10px'
+                            }}>Contact</Typography>
+                        </Grid>
+                        <Grid container alignItems='center' item>
+                            <LocalPhoneIcon color="secondary" />
+                            <Typography sx={{
+                                color: "#ffffff",
+                                fontSize: "10px"
+                            }}>(406) 555-0120</Typography></Grid>
+                        <Grid container alignItems='center' item>
+                            <EmailIcon color="secondary" />
+                            <Typography sx={{
+                                color: "#ffffff",
+                                fontSize: "10px"
+                            }}>support@cryptonomic.tech</Typography>
+                        </Grid>
+                        <Grid container alignItems='center' item sx={{
+                            width: '18vw'
+                        }}>
+                            <LocationOnIcon color="secondary" />
+                            <Typography sx={{
+                                color: "#ffffff",
+                                fontSize: "10px",
+                            }}> 100 Bogart Street, Brooklyn, NY 11206 USA</Typography>
+                        </Grid>
+                    </Grid>
+                </Grid>
+                <Grid container item xs={12} alignItems='center' justifyContent='flex-end' spacing={2}>
+                    <Grid item><a href='https://github.com/Cryptonomic' rel="noreferrer" target='_blank'><GitHubIcon color="secondary" /></a></Grid>
+                    <Grid item><a href='https://twitter.com/CryptonomicTech' rel="noreferrer" target='_blank'><TwitterIcon color="secondary" /></a></Grid>
+                    <Grid item><a href='https://medium.com/the-cryptonomic-aperiodical' rel="noreferrer" target='_blank'><ArticleIcon color="secondary" /></a></Grid>
+                    <Grid item><a href='https://www.linkedin.com/company/cryptonomic' rel="noreferrer" target='_blank'><LinkedInIcon color="secondary" /></a></Grid>
+                </Grid>
+            </Grid>
+        </Grid>
+    )
+}