add project header

src/components/base/Button.jsx

@@ -31,7 +31,7 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
     fontSize: '5.4vw',
     [theme.breakpoints.up('md')]: {
-      fontSize: '1.4vw'
+      fontSize: '14px'
     }
   },
   progress: {

src/components/projects/ListProjects.jsx

@@ -16,6 +16,7 @@ import { getTokenLabel } from '../../utils/currencies'
 import { getAmountFromWei } from '../../utils/pledges'
 import { getDateFromTimestamp } from '../../utils/dates'
 import { FundingContext } from '../../context'
+import ProjectsHeader from './ProjectsHeader'
 
 const isOdd = num => num % 2
 function FundingDetail({ classes, pledgesInfos, goal, goalToken, cellStyling }) {
@@ -147,15 +148,7 @@ function ListProjects() {
   const titleStyle = isSmall ? classes.tableTitleSmall : classes.tableTitle
   return (
     <div className={classes.main}>
-      <Typography className={classnames(classes.title, classes.fullWidth)}>
-        Liquid Funding
-      </Typography>
-      <Typography className={classnames(classes.subTitle, classes.fullWidth)}>
-        Fund. Build. Together.
-      </Typography>
-      <Typography className={titleStyle}>
-        All Projects
-      </Typography>
+      <ProjectsHeader className={titleStyle} />
       {!isSmall && <TableHeader classes={classes} />}
       {!isSmall ? <TableRows profiles={profiles} classes={classes} /> : <TableCards profiles={profiles} classes={classes} />}
       <Divider className={classes.divider} />

src/components/projects/ProjectsHeader.jsx

@@ -0,0 +1,127 @@
+import React, { Fragment } from 'react'
+import Typography from '@material-ui/core/Typography'
+import { makeStyles } from '@material-ui/core/styles'
+import Card from '@material-ui/core/Card'
+import CardActions from '@material-ui/core/CardActions'
+import CardContent from '@material-ui/core/CardContent'
+import classnames from 'classnames'
+import StatusButton from '../base/Button'
+
+const useStyles = makeStyles(({
+  palette: {
+    primary,
+    common: { darkGrey }
+  }
+}) => ({
+  title: {
+    fontSize: '38px',
+    gridColumn: '1 / 49',
+    textAlign: 'center'
+  },
+  subTitle: {
+    gridColumn: '1 / 49',
+    textAlign: 'center',
+    color: darkGrey,
+    fontSize: '20px'
+  },
+  creatorsCard: {
+    gridColumn: '11 / 24',
+    boxShadow: '0px 15px 29px rgba(0, 34, 51, 0.08)',
+    borderRadius: '8px',
+    background: '#FFFFFF',
+    padding: '1rem'
+  },
+  fundersCard: {
+    gridColumn: '26 / 39',
+    boxShadow: '0px 15px 29px rgba(0, 34, 51, 0.08)',
+    borderRadius: '8px',
+    background: '#FFFFFF',
+    padding: '1rem'
+  },
+  cardMainFont: {
+    fontSize: '24px'
+  },
+  cardSubTitle: {
+    color: darkGrey,
+    fontSize: '12px',
+    textTransform: 'uppercase'
+  },
+  cardBody: {
+    fontSize: '16px'
+  },
+  primary: {
+    color: primary[500]
+  }
+
+}))
+
+function CreatorsCard() {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.creatorsCard}>
+      <CardContent>
+        <Typography className={classes.cardMainFont}>
+          Platform for
+        </Typography>
+        <Typography className={classnames(classes.cardMainFont, classes.primary)} gutterBottom>
+          Creators
+        </Typography>
+        <Typography className={classes.cardSubTitle}>
+          DEVELOPERS, teams & individuals
+        </Typography>
+        <Typography className={classes.cardBody}>
+          Decentralized products, community organizing, & more! Assemble connects project creators with a growing community to get the funding they need for their web3 work.
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <StatusButton
+          buttonText="Assemble a project →"
+        />
+      </CardActions>
+    </Card>
+  );
+}
+
+function FundersCard() {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.fundersCard}>
+      <CardContent>
+        <Typography className={classes.cardMainFont}>
+          Platform for
+        </Typography>
+        <Typography className={classnames(classes.cardMainFont, classes.primary)} gutterBottom>
+          Funders
+        </Typography>
+        <Typography className={classes.cardSubTitle}>
+          Investors, Evangelists & Fans
+        </Typography>
+        <Typography className={classes.cardBody}>
+          Assemble helps you to support the projects you care most about. Find a project from the list of list of open proposals and fund it easily with the cryptocurrency of your choice.
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <StatusButton
+          buttonText="Explore projects →"
+        />
+      </CardActions>
+    </Card>
+  );
+}
+
+function ProjectsHeader() {
+  const classes = useStyles()
+
+  return (
+    <Fragment>
+      <Typography className={classes.title}>Open and Transparent Funding</Typography>
+      <Typography className={classes.subTitle}>Assemble helps you to bring your web3 projects to life</Typography>
+      <CreatorsCard />
+      <FundersCard />
+    </Fragment>
+  )
+}
+
+export default ProjectsHeader

src/components/projects/styles/ListProjects.js

@@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({
   main: {
     display: 'grid',
     gridTemplateColumns: 'repeat(48, [col] 1fr)',
-    gridTemplateRows: '4rem 4rem 3rem 0.5fr 1fr 0.3fr'
+    gridTemplateRows: '4rem 4rem auto 0.5fr 1fr 0.3fr'
   },
   title: {
     fontSize: '2rem',

src/theme.js

@@ -17,7 +17,8 @@ export default createMuiTheme({
       A500: '#1AA56E33'
     },
     common: {
-      grey: '#F5F7F8'
+      grey: '#F5F7F8',
+      darkGrey: '#939BA1'
     },
     text: {
       grey: '#939BA1'