Updated front page

src/api/src/graphql/resolvers/types/project.js

@@ -14,10 +14,7 @@ const vocabularyFields = [
 ]
 
 export default {
-  mitigations: async ({ mitigations = [] }) => {
-    console.log('mitigations', mitigations)
-    return mitigations
-  },
+  mitigations: async ({ mitigations = [] }) => mitigations,
   adaptations: async ({ adaptations = [] }) => adaptations,
   ...Object.fromEntries(
     vocabularyFields.map(field => {

src/client/src/components/ol-react/index.jsx

@@ -8,7 +8,7 @@ export { default as GeometryLayer } from './_geometry-layer'
 
 export const context = createContext()
 
-export default ({ children }) => {
+export default ({ children = [] }) => {
   const mapDomRef = useRef(null)
 
   const map = useMemo(() => {

src/client/src/components/page-wrapper/index.jsx

@@ -1,10 +1,10 @@
 import Box from '@material-ui/core/Box'
 import Container from '@material-ui/core/Container'
 
-export default ({ children }) => {
+export default ({ children, paddingBottom = 8, py = 2 }) => {
   return (
     <Container>
-      <Box py={2} paddingBottom={8}>
+      <Box py={py} paddingBottom={paddingBottom}>
         {children}
       </Box>
     </Container>

src/client/src/layout/routes/index.jsx

@@ -18,7 +18,7 @@ export default withRouter(() => {
         path={'/'}
         exact
         render={() => (
-          <Transition tKey="home">
+          <Transition nowrap tKey="home">
             <HomePage />
           </Transition>
         )}

src/client/src/pages/home/_wrapper.jsx

@@ -0,0 +1,12 @@
+import Box from '@material-ui/core/Box'
+import Container from '@material-ui/core/Container'
+
+export default ({ children, style }) => {
+  return (
+    <div style={style}>
+      <Container>
+        <Box py={12}>{children}</Box>
+      </Container>
+    </div>
+  )
+}

src/client/src/pages/home/about/index.jsx

@@ -0,0 +1,36 @@
+import Grid from '@material-ui/core/Grid'
+import Typography from '@material-ui/core/Typography'
+import useTheme from '@material-ui/core/styles/useTheme'
+import { fade } from '@material-ui/core/styles/colorManipulator'
+import OlReact from '../../../components/ol-react'
+
+export default () => {
+  const theme = useTheme()
+
+  return (
+    <Grid container spacing={4}>
+      <Grid item sm={6}>
+        <Typography
+          style={{ marginBottom: theme.spacing(3), color: fade(theme.palette.common.white, 0.9) }}
+          variant="h4"
+        >
+          Welcome to the National Climate Change Response Database
+        </Typography>
+        <Typography style={{ color: fade(theme.palette.common.white, 0.9) }} variant="body1">
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+          been the industrys standard dummy text ever since the 1500s, when an unknown printer took
+          a galley of type and scrambled it to make a type specimen book. It has survived not only
+          five centuries, but also the leap into electronic typesetting, remaining essentially
+          unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+          Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+          PageMaker including versions of Lorem Ipsum.
+        </Typography>
+      </Grid>
+      <Grid item sm={6} style={{ flexGrow: 1 }}>
+        <div style={{ minHeight: 300, height: '100%', boxShadow: theme.shadows[9] }}>
+          <OlReact />
+        </div>
+      </Grid>
+    </Grid>
+  )
+}

src/client/src/pages/home/explore-projects/index.jsx

@@ -0,0 +1,76 @@
+import Grid from '@material-ui/core/Grid'
+import Typography from '@material-ui/core/Typography'
+import useTheme from '@material-ui/core/styles/useTheme'
+import { fade } from '@material-ui/core/styles/colorManipulator'
+import { Link } from 'react-router-dom'
+import useStyles from './style'
+import ButtonBase from '@material-ui/core/ButtonBase'
+
+const image = {
+  url: '/agence-olloweb-d9ILr-dbEdg-unsplash.jpg',
+  title: 'Search project database',
+  width: '100%',
+}
+
+export default () => {
+  const classes = useStyles()
+  const theme = useTheme()
+
+  return (
+    <Grid container spacing={4}>
+      <Grid item sm={6}>
+        <div style={{ height: '100%', position: 'relative', boxShadow: theme.shadows[9] }}>
+          <div className={classes.root}>
+            <ButtonBase
+              component={Link}
+              to="/projects"
+              focusRipple
+              key={image.title}
+              className={classes.image}
+              focusVisibleClassName={classes.focusVisible}
+              style={{
+                width: image.width,
+              }}
+            >
+              <span
+                className={classes.imageSrc}
+                style={{
+                  backgroundImage: `url(${image.url})`,
+                }}
+              />
+              <span className={classes.imageBackdrop} />
+              <span className={classes.imageButton}>
+                <Typography
+                  component="span"
+                  variant="subtitle1"
+                  color="inherit"
+                  className={classes.imageTitle}
+                >
+                  {image.title}
+                  <span className={classes.imageMarked} />
+                </Typography>
+              </span>
+            </ButtonBase>
+          </div>
+        </div>
+      </Grid>
+      <Grid item sm={6} style={{ flexGrow: 1 }}>
+        <Typography
+          style={{ marginBottom: theme.spacing(3), color: fade(theme.palette.common.black, 0.9) }}
+          variant="h4"
+        >
+          Explore climate mitigation and adaptation projects
+        </Typography>
+        <Typography style={{ color: fade(theme.palette.common.black, 0.9) }} variant="body1">
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+          been the industrys standard dummy text ever since the 1500s, when an unknown printer took
+          a galley of type and scrambled it to make a type specimen book. It has survived not only
+          five centuries, but also the leap into electronic typesetting, remaining essentially
+          unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+          Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+          PageMaker including versions of Lorem Ipsum.
+        </Typography>
+      </Grid>
+    </Grid>
+  )
+}

src/client/src/pages/home/explore-projects/style.js

@@ -0,0 +1,71 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+export default makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    minWidth: 300,
+    minHeight: 300,
+    width: '100%',
+    height: '100%',
+  },
+  image: {
+    position: 'relative',
+    '&:hover, &$focusVisible': {
+      zIndex: 1,
+      '& $imageBackdrop': {
+        opacity: 0.15,
+      },
+      '& $imageMarked': {
+        opacity: 0,
+      },
+      '& $imageTitle': {
+        border: '4px solid currentColor',
+      },
+    },
+  },
+  focusVisible: {},
+  imageButton: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: theme.palette.common.white,
+  },
+  imageSrc: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center 40%',
+  },
+  imageBackdrop: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: theme.palette.common.black,
+    opacity: 0.4,
+    transition: theme.transitions.create('opacity'),
+  },
+  imageTitle: {
+    position: 'relative',
+    padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) + 6}px`,
+  },
+  imageMarked: {
+    height: 3,
+    width: 18,
+    backgroundColor: theme.palette.common.white,
+    position: 'absolute',
+    bottom: -2,
+    left: 'calc(50% - 9px)',
+    transition: theme.transitions.create('opacity'),
+  },
+}))

src/client/src/pages/home/index.jsx

@@ -1,5 +1,34 @@
-import SubmitProject from './submit-project'
+import Submit from './submit-project-2'
+import Wrapper from './_wrapper'
+import useTheme from '@material-ui/core/styles/useTheme'
+import { fade } from '@material-ui/core/styles/colorManipulator'
+import About from './about'
+import Explore from './explore-projects'
 
 export default () => {
-  return <SubmitProject />
+  const theme = useTheme()
+
+  const bg1 = fade(theme.palette.common.black, 0.25)
+  const bg2 = fade(theme.palette.common.white, 0.7)
+  const bg3 = fade(theme.palette.common.black, 0.4)
+
+  return (
+    <>
+      <div style={{ backgroundColor: bg1 }}>
+        <Wrapper>
+          <About />
+        </Wrapper>
+      </div>
+      <div style={{ backgroundColor: bg2 }}>
+        <Wrapper>
+          <Explore />
+        </Wrapper>
+      </div>
+      <div style={{ backgroundColor: bg3 }}>
+        <Wrapper>
+          <Submit />
+        </Wrapper>
+      </div>
+    </>
+  )
 }

src/client/src/pages/home/submit-project-2/index.jsx

@@ -0,0 +1,76 @@
+import Grid from '@material-ui/core/Grid'
+import Typography from '@material-ui/core/Typography'
+import useTheme from '@material-ui/core/styles/useTheme'
+import { fade } from '@material-ui/core/styles/colorManipulator'
+import { Link } from 'react-router-dom'
+import useStyles from './style'
+import ButtonBase from '@material-ui/core/ButtonBase'
+
+const image = {
+  url: '/aaron-burden-CKlHKtCJZKk-unsplash.jpg',
+  title: 'Submit a new project',
+  width: '100%',
+}
+
+export default () => {
+  const classes = useStyles()
+  const theme = useTheme()
+
+  return (
+    <Grid container spacing={4}>
+      <Grid item sm={6}>
+        <Typography
+          style={{ marginBottom: theme.spacing(3), color: fade(theme.palette.common.white, 0.9) }}
+          variant="h4"
+        >
+          Submit a project to the National Climate Change Response Database
+        </Typography>
+        <Typography style={{ color: fade(theme.palette.common.white, 0.9) }} variant="body1">
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+          been the industrys standard dummy text ever since the 1500s, when an unknown printer took
+          a galley of type and scrambled it to make a type specimen book. It has survived not only
+          five centuries, but also the leap into electronic typesetting, remaining essentially
+          unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+          Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+          PageMaker including versions of Lorem Ipsum.
+        </Typography>
+      </Grid>
+      <Grid item sm={6} style={{ flexGrow: 1 }}>
+        <div style={{ height: '100%', position: 'relative', boxShadow: theme.shadows[9] }}>
+          <div className={classes.root}>
+            <ButtonBase
+              component={Link}
+              to="/projects/submission"
+              focusRipple
+              key={image.title}
+              className={classes.image}
+              focusVisibleClassName={classes.focusVisible}
+              style={{
+                width: image.width,
+              }}
+            >
+              <span
+                className={classes.imageSrc}
+                style={{
+                  backgroundImage: `url(${image.url})`,
+                }}
+              />
+              <span className={classes.imageBackdrop} />
+              <span className={classes.imageButton}>
+                <Typography
+                  component="span"
+                  variant="subtitle1"
+                  color="inherit"
+                  className={classes.imageTitle}
+                >
+                  {image.title}
+                  <span className={classes.imageMarked} />
+                </Typography>
+              </span>
+            </ButtonBase>
+          </div>
+        </div>
+      </Grid>
+    </Grid>
+  )
+}