add About page

create initial about layout

src/components/About.jsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import classnames from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import BreadCrumb from './base/BreadCrumb'
+import Typography from '@material-ui/core/Typography'
+import Icon from './base/icons/IconByName'
+import NewInternet  from '../images/new_internet.png'
+
+const style = () => ({
+  main: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(48, [col] 1fr)',
+    gridTemplateRows: '4rem 4rem 8rem 5rem 5rem 5rem'
+  },
+  breadCrumb: {
+    gridColumn: '3 / 48'
+  },
+  bullet: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  imgContainer: {
+    gridColumn: '26 / 48',
+    gridRow: '2 / 6',
+  },
+  img: {
+    width: '100%',
+    height: '100%'
+  },
+  title:{
+    fontSize: '20px',
+    fontWeight: 'bold',
+    gridColumn: '3 / 23'
+  },
+  text: {
+    fontSize: '16px',
+  },
+  description: {
+    gridColumn: '3 / 25'
+  }
+})
+
+const useStyles = makeStyles(style)
+const BulletText = ({ text, className }) => {
+  return (
+    <div className={className} >
+      <Icon name="check" />
+      <span style={{ marginLeft: '1em' }}>{text}</span>
+    </div>
+  )
+}
+
+const About = () => {
+  const classes = useStyles()
+  const { text, description } = classes
+  const leftSide = classnames(text, description)
+  return (
+    <div className={classes.main}>
+      <BreadCrumb
+        className={classes.breadCrumb}
+        start={'About'}
+      />
+      <Typography className={classes.title} gutterBottom>
+        About Liquid Funding
+      </Typography>
+      <Typography className={leftSide}>
+        Liquid funding facilitates self-soverign, autonomous development of socio-economic services and infrastructure. On liquid funding anyone can pitch a project and request funding, from anyone. Fund, build, together.
+      </Typography>
+      <BulletText text="Fund and build the features you want to see in Status" className={classnames(leftSide, classes.bullet)}/>
+      <BulletText text="Transparent funding flows and accountability" className={classnames(leftSide, classes.bullet)}/>
+      <BulletText text="Permissionless project creation and funding" className={classnames(leftSide, classes.bullet)}/>
+      <div className={classes.imgContainer}>
+        <img src={NewInternet} className={classes.img} />
+      </div>
+    </div>
+  )
+}
+
+export default About

src/components/MainCointainer.jsx

@@ -25,6 +25,7 @@ import ProjectIcon from '@material-ui/icons/Work';
 import { ScaleLoader } from 'react-spinners'
 import Loading from '../components/base/Loading'
 
+const About = lazy(() => import('./About.jsx'))
 const ListProjects = lazy(() => import('./projects/ListProjects'))
 const FundsManagement = lazy(() => import('./FundsManagement'))
 const ContractAdmin = lazy(() => import('./ContractAdmin'))
@@ -268,6 +269,7 @@ function PersistentDrawerLeft({ loading, account, children, enableEthereum, loca
         <div className={classNames(classes.appBar)}>
           <Suspense fallback={<Loading />}>
             <Switch>
+              <Route path="/about" component={About} />
               <Route path="/(|list-projects)" component={ListProjects} />
               <Route path="/dashboard" component={Dashboard} />
               <Route path="/admin" component={ContractAdmin} />

src/components/base/BreadCrumb.jsx

@@ -15,13 +15,13 @@ const useStyles = makeStyles({
   }
 })
 
-function BreadCrumb({ className, trail }){
+function BreadCrumb({ className, start, trail }){
   const classes = useStyles()
   const trailString = trail ? ` > ${trail.join(' > ')}` : ''
   return (
     <div className={classnames(classes.main, className)}>
       <Link className={classes.link} to={'/'}>
-        All projects
+        {start || 'All projects'}
       </Link>
       {<span>{trailString}</span>}
     </div>

src/components/base/icons/CheckMark.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+
+const SVG = () =>
+  <svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fillRule="evenodd" clipRule="evenodd" d="M16.2071 0.292893C16.5976 0.683417 16.5976 1.31658 16.2071 1.70711L6.20711 11.7071C5.81658 12.0976 5.18342 12.0976 4.79289 11.7071L0.792893 7.70711C0.402369 7.31658 0.402369 6.68342 0.792893 6.29289C1.18342 5.90237 1.81658 5.90237 2.20711 6.29289L5.5 9.58579L14.7929 0.292893C15.1834 -0.0976311 15.8166 -0.0976311 16.2071 0.292893Z" fill="black"/>
+  </svg>
+
+export default SVG

src/components/base/icons/IconByName.jsx

@@ -1,15 +1,18 @@
 import React from 'react'
 import OneOnOneChat from './OneOnOneChat'
 import BoxArrow from './BoxArrow'
+import CheckMark from './CheckMark'
 import Photo from './Photo'
 import AddPerson from './AddPerson'
 
 const ADD_PERSON = 'addPerson'
+const CHECK = 'check'
 const ONE_ON_ONE_CHAT = 'oneOnOneChat'
 const BOX_ARROW = 'boxArrow'
 const PHOTO = 'photo'
 const icons = {
   [ADD_PERSON]: AddPerson,
+  [CHECK]: CheckMark,
   [ONE_ON_ONE_CHAT]: OneOnOneChat,
   [BOX_ARROW]: BoxArrow,
   [PHOTO]: Photo