Making a descent home page

client/src/styles/styles.scss

@@ -357,3 +357,61 @@ header.menu{
     }
   }
 }
+
+.homePage{
+  padding-top: 70px;
+  padding-bottom: 70px;
+  margin-right: auto;
+  margin-left: auto;
+  @media screen and (min-width: $break-small) {
+    width: 750px;
+  }
+  @media screen and (min-width: $break-middle) {
+    width: 970px;
+  }
+  @media screen and (min-width: 1200px) {
+    width: 1170px;
+  }
+  .title{
+    padding: 0 0 10px 0;
+    font-size: 45px;
+    line-height: 55px;
+    padding: 40px 0 0.5em 0;
+    font-weight: 100;
+  }
+  .subtitle{
+    padding-bottom: 5px;
+    font-size: 20px;
+    line-height: 19px;
+    font-weight: 100;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 1em;
+
+  }
+  .column{
+    vertical-align: top;
+    display: inline-block;
+    width: 100%;
+    padding: 10px;
+    @media screen and (min-width: $break-small) {
+      width: 50%;
+    }
+    p{
+      font-size: 16px;
+      line-height: 25px;
+      margin-bottom: 0.75em;
+      margin-top: 0.75em;
+      font-size: 16px;
+      font-weight: 300;
+      color: #5a6266;
+      text-size-adjust: 100%;
+      a{
+        text-decoration: none;
+        transition: all 0.3s ease-in-out 0s;
+        color: #CC5835;
+      }
+    }
+  }
+
+}

client/src/views/home/index.js

@@ -1,15 +1,43 @@
 import React, { Component } from 'react'
 import BannerTopBar from '../BannerTopBar'
+import { Typography } from '@material-ui/core'
 
 class Home extends Component {
   render () {
     return (
-      <BannerTopBar
-        size='big'
-        title='Advanced Algos Platform'
-        text='Enabling the evolutionary race towards the emergence of superalgos'
-        backgroundUrl='https://aacorporatesitedevelop.azurewebsites.net/img/photos/superalgos-platform.jpg'
-      />
+      <React.Fragment>
+        <BannerTopBar
+          size='big'
+          title='Advanced Algos Platform'
+          text='Enabling the evolutionary race towards the emergence of superalgos'
+          backgroundUrl='https://aacorporatesitedevelop.azurewebsites.net/img/photos/superalgos-platform.jpg'
+        />
+        <div className='homePage'>
+          <Typography variant='h1' align='center' className='title'>Welcome to the Superalgos Platform!</Typography>
+          <Typography variant='h2' align='center' className='subtitle'>CO-CREATE >> COMPETE >> EVOLVE</Typography>
+          <div className='column'>
+            <Typography align='justify'>
+              Before you begin, please be aware <strong>this is a development environment in pre-alpha stage</strong>.
+              The features available as of today are limited but already functional.
+              However, you may encounter occasional instability and errors.
+            </Typography>
+            <Typography align='justify'>
+            The Superalgos Platform is the place is which we meet to collaborate in the quest to make trading algorithms evolve.
+            You will be able to register, create or join a team, fork a functional trading bot and eventually put it to compete with other people's forks.
+            </Typography>
+          </div>
+          <div className='column'>
+            <Typography align='justify'>
+              Feel free to explore the menu in the top-right corner or visit the <a href='https://www.advancedalgos.net/documentation-quick-start.shtml' target='_blank'>Quick Start Guide</a>.
+              Reporting of bugs at the corresponding <a href='https://github.com/AdvancedAlgos' target='_blank' rel='nofollow'>Advanced Algos Github repository</a> is highly appreciated.
+            </Typography>
+            <Typography align='justify'>
+              Get in touch with the rest of the community and get answers to your questions in our <a href='https://t.me/advancedalgoscommunity' target='_blank' rel='nofollow'>Telegram Group</a>.
+              Have fun!
+            </Typography>
+          </div>
+        </div>
+      </React.Fragment>
     )
   }
 }