feat: create basic markup

1 files changed, 51 insertions, 7 deletions

diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index 6930cc8..d0e29f5 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -1,18 +1,62 @@
 import React, { useState } from 'react';
-import { Typography } from '@material-ui/core/';
+import { Typography, Divider, Grid, Button } from '@material-ui/core/';
 import { makeStyles } from '@material-ui/core/styles';
+import { useNavigate } from '../../hooks/useNavigate';
 
-const useStyles = makeStyles({
-});
+const useStyles = makeStyles(theme => ({
+  logo: {
+    width: theme.spacing(32),
+    height: theme.spacing(32)
+  },
+  leftColumn: {
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  title: {
+    fontWeight: 'bold'
+  }
+}));
 
 const HomePage: React.FC = () => {
   const classes = useStyles();
+  const { navigate } = useNavigate();
 
-  return (
-    <>
-  <Typography variant="h3"> Which one to choose? </Typography>
+  const handleLetsGo = () => {
+    navigate('feed');
+  };
 
-    </>
+  return (
+    <Grid container spacing={4}>
+      <Grid item xs={4} className={classes.leftColumn}>
+        <img src={process.env.PUBLIC_URL + '/which-logo-512.png'} alt="logo" className={classes.logo}/>
+      </Grid>
+      <Grid item xs={5}>
+        <Grid container direction="column" spacing={6}>
+          <Grid item>
+            <Typography variant="h4"> Which one to choose? </Typography>
+            <Divider />
+            <Typography>
+              <p>Have you ever found yourself stuck between two options, not being able to choose any? This is exactly the problem we are going to solve!</p>
+              <p>Share your minor everyday uncertainties with the whole world and see what others think!</p>
+              <Button variant="contained" color="primary" size="large" onClick={handleLetsGo}>
+                let's go! 
+              </Button>
+            </Typography>
+          </Grid>
+          <Grid item>
+            <Typography variant="h4"> About the project </Typography>
+            <Divider />
+            <p>
+              Visit our <a href="https://github.com/">GitHub</a>
+            </p>
+          </Grid>
+          <Grid item>
+            <Typography variant="h4"> Leave feedback </Typography>
+            <Divider />
+          </Grid>
+        </Grid>
+      </Grid>
+    </Grid>
   );
 };