diff --git a/src/components/About.jsx b/src/components/About.jsx
new file mode 100644
index 0000000..5a7570f
--- /dev/null
+++ b/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 (
+
+
+ {text}
+
+ )
+}
+
+const About = () => {
+ const classes = useStyles()
+ const { text, description } = classes
+ const leftSide = classnames(text, description)
+ return (
+
+
+
+ About Liquid Funding
+
+
+ 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.
+
+
+
+
+
+
+
+
+ )
+}
+
+export default About
diff --git a/src/components/MainCointainer.jsx b/src/components/MainCointainer.jsx
index 70c7172..6e7b584 100644
--- a/src/components/MainCointainer.jsx
+++ b/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
}>
+
diff --git a/src/components/base/BreadCrumb.jsx b/src/components/base/BreadCrumb.jsx
index 0554958..978e640 100644
--- a/src/components/base/BreadCrumb.jsx
+++ b/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 (
- All projects
+ {start || 'All projects'}
{{trailString} }
diff --git a/src/components/base/icons/CheckMark.jsx b/src/components/base/icons/CheckMark.jsx
new file mode 100644
index 0000000..3ddb37e
--- /dev/null
+++ b/src/components/base/icons/CheckMark.jsx
@@ -0,0 +1,8 @@
+import React from 'react'
+
+const SVG = () =>
+
+
+
+
+export default SVG
diff --git a/src/components/base/icons/IconByName.jsx b/src/components/base/icons/IconByName.jsx
index a3803c0..b04efba 100644
--- a/src/components/base/icons/IconByName.jsx
+++ b/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
diff --git a/src/images/new_internet.png b/src/images/new_internet.png
new file mode 100644
index 0000000..ddf5401
Binary files /dev/null and b/src/images/new_internet.png differ