WIP - Landing Page

components/shared/Footer/index.js

@@ -0,0 +1,68 @@
+import {
+  Grid, makeStyles, Container, Typography, Link,
+} from '@material-ui/core';
+import logo from '../../../src/images/logo.svg';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+    backgroundColor: '#f6f7f8',
+  },
+  mainGrid: {
+    padding: theme.spacing(2),
+  },
+  'mr-6': {
+    marginRight: theme.spacing(6),
+  },
+  'mt-2': {
+    marginTop: theme.spacing(2),
+  },
+}));
+
+function Footer() {
+  const classes = useStyles();
+
+  return (
+    <Container className={classes.root}>
+      <Grid container spacing={3} className={classes.mainGrid}>
+        <Link href="/">
+          <img src={logo} width={150} />
+        </Link>
+
+        <Grid container item spacing={3} justify="center">
+          <Link href="/users/login">
+            <Typography variant="subtitle1" className={classes['mr-6']}>
+              Login
+            </Typography>
+          </Link>
+
+          <Link href="/users/signup">
+            <Typography variant="subtitle1" className={classes['mr-6']}>
+              Sign Up
+            </Typography>
+          </Link>
+
+          <Link href="/about">
+            <Typography variant="subtitle1" className={classes['mr-6']}>
+              About
+            </Typography>
+          </Link>
+
+          <Link href="/docs">
+            <Typography variant="subtitle1">
+              Docs
+            </Typography>
+          </Link>
+        </Grid>
+
+        <Grid container item spacing={3} justify="center">
+          <Typography variant="subtitle1" className={classes['mt-2']}>
+            Made with ❤️ by WAA
+          </Typography>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default Footer;

components/shared/landing/Navbar/index.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import Link from 'next/link';
+import {
+  AppBar, Toolbar, Typography, makeStyles, Grid,
+} from '@material-ui/core';
+import logo from '../../../../src/images/logo.svg';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+    marginBottom: '50px',
+  },
+  appbar: {
+    alignItems: 'right',
+    backgroundColor: 'white',
+    color: 'rgb(80, 82, 86)',
+    flexGrow: 1,
+  },
+  toolbar: {
+    minHeight: 46,
+    flexGrow: 1,
+  },
+  login: {
+    marginRight: theme.spacing(1),
+    padding: '5px',
+    '&:hover': {
+      color: '#000',
+    },
+  },
+  signup: {
+    backgroundColor: '#f1f2f4',
+    borderRadius: '5px',
+    paddingRight: '5px',
+    paddingLeft: '5px',
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    '&:hover': {
+      color: '#000',
+    },
+  },
+}));
+
+export default function Navbar() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <AppBar position="fixed" className={classes.appbar}>
+        <Toolbar className={classes.toolbar}>
+          <Link href="/">
+            <img src={logo} width={150} />
+          </Link>
+
+          <Grid container justify="flex-end">
+            <Typography variant="subtitle1" className={classes.login}>
+              <Link href="/users/login">
+                Login
+              </Link>
+            </Typography>
+            <Typography
+              variant="subtitle1"
+              className={classes.signup}
+            >
+              <Link href="/users/signup">
+                Sign Up
+              </Link>
+            </Typography>
+          </Grid>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}

next.config.js

@@ -0,0 +1,3 @@
+const withImages = require('next-images');
+
+module.exports = withImages();

package.json

@@ -19,6 +19,7 @@
     "jsoneditor": "^9.1.1",
     "jsoneditor-react": "^3.0.1",
     "next": "^10.0.1",
+    "next-images": "^1.6.2",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

pages/about.js

@@ -0,0 +1,91 @@
+import {
+  Grid, Button, Container, Typography, Link, makeStyles,
+} from '@material-ui/core';
+
+import Navbar from '../components/shared/landing/Navbar';
+import Footer from '../components/shared/Footer';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+  },
+  'mt-2': {
+    marginTop: theme.spacing(2),
+  },
+  'mt-4': {
+    marginTop: theme.spacing(4),
+  },
+  'mt-6': {
+    marginTop: theme.spacing(6),
+  },
+}));
+
+export default function Home() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Navbar />
+      <Container maxWidth="lg">
+        <Grid container spacing={3}>
+          <Grid container item xs={12} justify="center">
+            <Typography variant="h3" component="h1" className={classes['mt-6']}>
+              Bridge Incompatible API&#39;s
+            </Typography>
+          </Grid>
+          <Grid container item xs={12} alignItems="center" direction="column">
+            <Typography variant="subtitle1">
+              BridgeAPI is a serverless integration platform that
+            </Typography>
+            <Typography variant="subtitle1">
+              empowers users to connect apps through event-driven workflows
+            </Typography>
+            <Link href="/users/signup">
+              <Button
+                color="primary"
+                variant="contained"
+                className={classes['mt-6']}
+              >
+                Get Started
+              </Button>
+            </Link>
+            <Typography variant="subtitle2" className={classes['mt-6']}>
+              Join the developers that are integrating API&#39;s around the world.
+            </Typography>
+          </Grid>
+        </Grid>
+
+        <Grid container spacing={3}>
+          <Grid container item xs={12} justify="center">
+            <Typography variant="h3" component="h1" className={classes['mt-6']}>
+              Bridge Incompatible API&#39;s
+            </Typography>
+          </Grid>
+          <Grid container item xs={12} alignItems="center" direction="column">
+            <Typography variant="subtitle1">
+              BridgeAPI is a serverless integration platform that
+            </Typography>
+            <Typography variant="subtitle1">
+              empowers users to connect apps through event-driven workflows
+            </Typography>
+            <Link href="/users/signup">
+              <Button
+                color="primary"
+                variant="contained"
+                className={classes['mt-6']}
+              >
+                Get Started
+              </Button>
+            </Link>
+            <Typography variant="subtitle2" className={classes['mt-6']}>
+              Join the developers that are integrating API&#39;s around the world.
+            </Typography>
+          </Grid>
+        </Grid>
+
+      </Container>
+      <Footer />
+
+    </div>
+  );
+}