From b387b9bfe059d7946e7083cc0d85d2ef104535ca Mon Sep 17 00:00:00 2001 From: = Date: Thu, 29 Oct 2020 15:28:30 -0400 Subject: [PATCH 1/3] Starting on homepage --- components/shared/landing/Navbar/index.js | 80 +++++++++++++++++ components/shared/landing/navbar.js | 3 - pages/index.js | 100 +++++++++------------- 3 files changed, 121 insertions(+), 62 deletions(-) create mode 100644 components/shared/landing/Navbar/index.js delete mode 100644 components/shared/landing/navbar.js diff --git a/components/shared/landing/Navbar/index.js b/components/shared/landing/Navbar/index.js new file mode 100644 index 0000000..f1c29e3 --- /dev/null +++ b/components/shared/landing/Navbar/index.js @@ -0,0 +1,80 @@ +import React from 'react'; +import Link from 'next/link'; +import { + AppBar, Toolbar, Typography, IconButton, makeStyles, Grid, +} from '@material-ui/core'; +import { FaPlus as Logo } from 'react-icons/fa'; + +const useStyles = makeStyles((theme) => ({ + root: { + flexGrow: 1, + marginBottom: '70px', + }, + 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 ( +
+ + + + + + + + + + + + Login + + + + + Sign Up + + + + + +
+ ); +} diff --git a/components/shared/landing/navbar.js b/components/shared/landing/navbar.js deleted file mode 100644 index c81027a..0000000 --- a/components/shared/landing/navbar.js +++ /dev/null @@ -1,3 +0,0 @@ -function Navbar() {} - -export default Navbar; diff --git a/pages/index.js b/pages/index.js index 43956d9..db394a4 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,65 +1,47 @@ -import Head from 'next/head' -import styles from '../styles/Home.module.css' +import { Grid, Paper, makeStyles } from '@material-ui/core'; -export default function Home() { - return ( -
- - Create Next App - - - -
-

- Welcome to Next.js! -

- -

- Get started by editing{' '} - pages/index.js -

+import Navbar from '../components/shared/landing/Navbar'; -
- -

Documentation →

-

Find in-depth information about Next.js features and API.

- +const useStyles = makeStyles((theme) => ({ + root: { + flexGrow: 1, + }, + paper: { + padding: theme.spacing(2), + textAlign: 'center', + color: theme.palette.text.secondary, + }, +})); - -

Learn →

-

Learn about Next.js in an interactive course with quizzes!

- - - -

Examples →

-

Discover and deploy boilerplate example Next.js projects.

- - - -

Deploy →

-

- Instantly deploy your Next.js site to a public URL with Vercel. -

- -
-
+export default function Home() { + const classes = useStyles(); - + return ( +
+ + + + xs=12 + + + xs=6 + + + xs=6 + + + xs=3 + + + xs=3 + + + xs=3 + + + xs=3 + +
- ) + ); } From 2b27a314a4dec3feee521669c699d17668100308 Mon Sep 17 00:00:00 2001 From: = Date: Mon, 2 Nov 2020 16:58:17 -0500 Subject: [PATCH 2/3] Working on landing page --- components/shared/Footer/index.js | 68 +++++++++++++++ components/shared/landing/Navbar/index.js | 18 ++-- components/shared/landing/footer.js | 3 - next.config.js | 3 + package-lock.json | 65 ++++++++++++++ package.json | 1 + pages/about.js | 91 +++++++++++++++++++ pages/index.js | 102 ++++++++++++++++------ public/vercel.svg | 4 - src/images/logo.svg | 2 + 10 files changed, 312 insertions(+), 45 deletions(-) create mode 100644 components/shared/Footer/index.js delete mode 100644 components/shared/landing/footer.js create mode 100644 next.config.js create mode 100644 pages/about.js delete mode 100644 public/vercel.svg create mode 100644 src/images/logo.svg diff --git a/components/shared/Footer/index.js b/components/shared/Footer/index.js new file mode 100644 index 0000000..37ee8b6 --- /dev/null +++ b/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 ( + + + + + + + + + + Login + + + + + + Sign Up + + + + + + About + + + + + + Docs + + + + + + + Made with ❤️ by WAA + + + + + ); +} + +export default Footer; diff --git a/components/shared/landing/Navbar/index.js b/components/shared/landing/Navbar/index.js index f1c29e3..36adfd6 100644 --- a/components/shared/landing/Navbar/index.js +++ b/components/shared/landing/Navbar/index.js @@ -1,14 +1,14 @@ import React from 'react'; import Link from 'next/link'; import { - AppBar, Toolbar, Typography, IconButton, makeStyles, Grid, + AppBar, Toolbar, Typography, makeStyles, Grid, } from '@material-ui/core'; -import { FaPlus as Logo } from 'react-icons/fa'; +import logo from '../../../../src/images/logo.svg'; const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, - marginBottom: '70px', + marginBottom: '50px', }, appbar: { alignItems: 'right', @@ -49,18 +49,12 @@ export default function Navbar() { - - - + - + Login @@ -68,7 +62,7 @@ export default function Navbar() { variant="subtitle1" className={classes.signup} > - + Sign Up diff --git a/components/shared/landing/footer.js b/components/shared/landing/footer.js deleted file mode 100644 index 254c156..0000000 --- a/components/shared/landing/footer.js +++ /dev/null @@ -1,3 +0,0 @@ -function Footer() {} - -export default Footer; diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..811e02c --- /dev/null +++ b/next.config.js @@ -0,0 +1,3 @@ +const withImages = require('next-images'); + +module.exports = withImages(); diff --git a/package-lock.json b/package-lock.json index 6a7043e..f3db484 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3955,6 +3955,27 @@ "flat-cache": "^2.0.1" } }, + "file-loader": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz", + "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==", + "requires": { + "loader-utils": "^2.0.0", + "schema-utils": "^3.0.0" + }, + "dependencies": { + "schema-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", + "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", + "requires": { + "@types/json-schema": "^7.0.6", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + } + } + } + }, "file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", @@ -4999,6 +5020,19 @@ } } }, + "mime-db": { + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz", + "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==" + }, + "mime-types": { + "version": "2.1.27", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz", + "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==", + "requires": { + "mime-db": "1.44.0" + } + }, "minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -5245,6 +5279,15 @@ "webpack-sources": "1.4.3" } }, + "next-images": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/next-images/-/next-images-1.6.2.tgz", + "integrity": "sha512-tmINk0NzJ/D7Kk16x9gOgTd9wlcVG4IfyEcQqt/SY31miwuv5pzUhT7fakO2fYPrXimHOEPBaacCz1G6jADcbQ==", + "requires": { + "file-loader": "^6.0.0", + "url-loader": "^4.0.0" + } + }, "next-tick": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz", @@ -7448,6 +7491,28 @@ } } }, + "url-loader": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz", + "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==", + "requires": { + "loader-utils": "^2.0.0", + "mime-types": "^2.1.27", + "schema-utils": "^3.0.0" + }, + "dependencies": { + "schema-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", + "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", + "requires": { + "@types/json-schema": "^7.0.6", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + } + } + } + }, "use": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", diff --git a/package.json b/package.json index c4ec5ae..c5d026c 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "formik": "^2.2.1", "formik-material-ui": "^3.0.0", "next": "9.5.5", + "next-images": "^1.6.2", "prop-types": "^15.7.2", "react": "16.14.0", "react-dom": "16.14.0", diff --git a/pages/about.js b/pages/about.js new file mode 100644 index 0000000..ea597ce --- /dev/null +++ b/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 ( +
+ + + + + + Bridge Incompatible API's + + + + + BridgeAPI is a serverless integration platform that + + + empowers users to connect apps through event-driven workflows + + + + + + Join the developers that are integrating API's around the world. + + + + + + + + Bridge Incompatible API's + + + + + BridgeAPI is a serverless integration platform that + + + empowers users to connect apps through event-driven workflows + + + + + + Join the developers that are integrating API's around the world. + + + + + +
+ +
+ ); +} diff --git a/pages/index.js b/pages/index.js index db394a4..7ab7250 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,15 +1,28 @@ -import { Grid, Paper, makeStyles } from '@material-ui/core'; +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, + background: 'white', }, - paper: { - padding: theme.spacing(2), - textAlign: 'center', - color: theme.palette.text.secondary, + 'mt-2': { + marginTop: theme.spacing(2), + }, + 'mt-4': { + marginTop: theme.spacing(4), + }, + 'mt-6': { + marginTop: theme.spacing(6), + }, + palette: { + background: { + default: 'white', + }, }, })); @@ -19,29 +32,66 @@ export default function Home() { return (
- - - xs=12 - - - xs=6 - - - xs=6 - - - xs=3 + + + + + Bridge Incompatible API's + + + + + BridgeAPI is a serverless integration platform that + + + empowers users to connect apps through event-driven workflows + + + + + + Join the developers that are integrating API's around the world. + + - - xs=3 - - - xs=3 - - - xs=3 + + + + + Bridge Incompatible API's + + + + + BridgeAPI is a serverless integration platform that + + + empowers users to connect apps through event-driven workflows + + + + + + Join the developers that are integrating API's around the world. + + - + + +
+
); } diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index fbf0e25..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 0000000..6c1c42c --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file From f1a7c26c8facb00623b57f6136acdf15480ddd4c Mon Sep 17 00:00:00 2001 From: = Date: Mon, 2 Nov 2020 17:14:05 -0500 Subject: [PATCH 3/3] Colored containers with bottom CTA --- pages/index.js | 50 +++++++++++++++++++++++++++++++++----------------- 1 file changed, 33 insertions(+), 17 deletions(-) diff --git a/pages/index.js b/pages/index.js index 7ab7250..62b031d 100644 --- a/pages/index.js +++ b/pages/index.js @@ -19,10 +19,14 @@ const useStyles = makeStyles((theme) => ({ 'mt-6': { marginTop: theme.spacing(6), }, - palette: { - background: { - default: 'white', - }, + 'm-4': { + margin: theme.spacing(4), + }, + 'm-6': { + margin: theme.spacing(6), + }, + manage: { + backgroundColor: '#f6f7f8', }, })); @@ -55,43 +59,55 @@ export default function Home() { Get Started - + Join the developers that are integrating API's around the world. + + - - - Bridge Incompatible API's + + + Some Title - BridgeAPI is a serverless integration platform that + Maybe a 2 x 2 grid with some icons and light text on the right side - empowers users to connect apps through event-driven workflows + dont ask me what to do for this box. I am out of ideas. + + + + Some small test here + + + + + + + + + + Some Call To Action - - Join the developers that are integrating API's around the world. - - -
); }