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