Markup initial Contribute page

3 files changed, 114 insertions, 3 deletions

diff --git a/src/components/ContentSection/ContentSection.js b/src/components/ContentSection/ContentSection.js
index d5b9340..fc431f3 100644
--- a/src/components/ContentSection/ContentSection.js
+++ b/src/components/ContentSection/ContentSection.js
@@ -9,8 +9,18 @@ import {
 
 const useStyles = makeStyles(theme => ({
   content: {
-    padding: theme.spacing(2),
-  }
+    padding: theme.spacing(0, 2, 1, 2),
+    marginBottom: theme.spacing(1),
+
+    '& a': {
+      color: theme.palette.secondary.light,
+    },
+    '& .MuiButton-root': {
+      color: theme.palette.background.paper,
+      margin: theme.spacing(2, 2, 2, 0),
+      fontWeight: 'bold',
+    },
+  },
 }));
 
 const ContentSection = ({ sectionName, children }) => {
diff --git a/src/index.js b/src/index.js
index b14708e..f9d7e32 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,6 +8,7 @@ import theme from "./theme";
 import Header from './components/Header/Header';
 import Timer from "./pages/Timer/Timer";
 import Scoreboard from "./pages/Scoreboard/Scoreboard";
+import Contribute from "./pages/Contribute/Contribute";
 
 
 const App = () => {
@@ -24,8 +25,13 @@ const App = () => {
             setRecentSolutions={setRecentSolutions}
           />
         );
+
       case 'scoreboard':
-        return (<Scoreboard/>);
+        return (<Scoreboard />);
+
+      case 'contribute':
+        return (<Contribute />);
+
       default:
         return (
           <p>
diff --git a/src/pages/Contribute/Contribute.js b/src/pages/Contribute/Contribute.js
new file mode 100644
index 0000000..b837021
--- /dev/null
+++ b/src/pages/Contribute/Contribute.js
@@ -0,0 +1,95 @@
+import React from 'react';
+
+import {
+  Typography,
+  Link,
+  Button,
+  makeStyles,
+} from "@material-ui/core";
+
+import Window from "../../components/Window/Window";
+import ContentSection from "../../components/ContentSection/ContentSection";
+
+
+const useStyles = makeStyles(theme => ({
+  mono: {
+    padding: theme.spacing(4),
+  }
+}));
+
+
+const Contribute = () => {
+  const classes = useStyles();
+
+  return (
+    <Window type="mono">
+      <div className={classes.mono}>
+        <ContentSection sectionName="Thank You for using ChronoCube!">
+          <Typography>
+            <p>
+              ChronoCube is an Open-Source application, and we welcome anyone who desires to help our project!
+            </p>
+          </Typography>
+        </ContentSection>
+        <ContentSection sectionName="Technology stack">
+          <Typography>
+            <p> We only use modern and most relevant technologies to achieve the best results! </p>
+            <p>
+              <ul>
+                <li><Typography><a href="#">
+                  Django REST Framework
+                </a></Typography></li>
+                <li><Typography><a href="#">
+                  React.js
+                </a></Typography></li>
+                <li><Typography><a href="#">
+                  Material UI components
+                </a></Typography></li>
+              </ul>
+              <Typography> Special thanks to other Open-Source projects which made ChronoCube possible: </Typography>
+              <ul>
+                <li><Typography><a href="#">
+                  react-window
+                </a></Typography></li>
+                <li><Typography><a href="#">
+                  react-virtualized-auto-sizer
+                </a></Typography></li>
+              </ul>
+            </p>
+          </Typography>
+        </ContentSection>
+        <ContentSection sectionName="How can I contribute to the project?">
+          <Typography>
+            <p> Thank You for considering helping our project! </p>
+            <p>
+              All the development process is being tracked on
+              the <a href="https://github.com/users/Eug-VS/projects/3">KanBan board</a>.
+              You can always check it to see what is the current state of the project.
+              To contribute your code, fork our repository and then open
+              a <a href="https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests">
+              Pull Request</a>. We will carefully review and, hopefully, accept it!
+              If you are unfamiliar with this kind of workflow, we recommend
+              reading <a href="https://github.com/features/project-management/">GitHub guidelines</a>.
+            </p>
+            <p>
+              We always welcome newcomers! If you are unfamiliar with certain technologies or even with the
+              development in general, it is great time to start learning something new!
+              Our community will kindly assist every your step, and with us you can easily become
+              highly-evaluated developer!
+            </p>
+          </Typography>
+          <Button variant="contained" color="secondary" href="https://github.com/Eug-VS/chrono-cube/issues/new">
+            Suggest feature
+          </Button>
+          <Button variant="contained" color="secondary" href="https://github.com/Eug-VS/chrono-cube/issues/new">
+            Report a bug
+          </Button>
+        </ContentSection>
+      </div>
+    </Window>
+  );
+
+};
+
+
+export default Contribute;