Evolution home page

nextjs/pages/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Link from 'next/link';
@@ -16,12 +16,13 @@ import Button from '@material-ui/core/Button';
 import Router from 'next/router'
 import { connect } from 'react-redux'
 import ShortVideoHooker from '../components/organisms/ShortVideoHooker'
-import HorizontalAdScroller from '../components/organisms/HorizontalAdScroller'
-import HorizontalCompanyScroller from '../components/organisms/HorizontalCompanyScroller'
+import HorizontalScroller from '../components/organisms/HorizontalScroller'
 import NewsLetterRegistration from '../components/organisms/NewsLetterRegistration'
 import { fetchPromotedAdsRequest } from "../actions/ads";
 import dynamic from 'next/dynamic'
 import WhatshotIcon from '@material-ui/icons/Whatshot';
+import TileCompany from '../components/organisms/TileCompany';
+import TileOffre from '../components/organisms/TileOffre';
 const PWAInstallSnack = dynamic(() => import('../Components/Organisms/PWAInstallSnack.js'), {
   ssr: false
 });
@@ -46,6 +47,10 @@ const styles = theme => ({
     maxheight: '360px',
 
   },
+  HorizontalScroller: {
+    marginTop: '1vh',
+    marginBottom: '1vh',
+  },
   paper: {
     margin: theme.spacing(1),
     width: '96%',
@@ -69,11 +74,17 @@ const styles = theme => ({
   title: {
 
     textAlign: 'center',
+    textTransform: 'uppercase',
     margin: theme.spacing(1),
 
   },
   white: {
     color: theme.palette.common.white
+  },
+
+  button: {
+    marginLeft: theme.spacing(5),
+    marginRight: theme.spacing(5),
   }
 });
 
@@ -97,18 +108,42 @@ class Index extends React.Component {
         <div className={classes.container}>
 
           <ShortVideoHooker />
+
           <Typography gutterBottom component="h1"
             className={classes.title}>
-            LES OFFRES D'EMPLOI EN VIDEO
+            Les offres d'emploi en vidéo
           </Typography>
-          <HorizontalAdScroller data={this.state.promotedAds} />
-          <Button variant="outlined" onClick={() => Router.push('/offres')}>Toutes les offres</Button>
+
+          <HorizontalScroller
+            data={this.state.promotedAds}
+            className={classes.HorizontalScroller}
+          >
+            <TileOffre />
+          </HorizontalScroller>
+
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={() => Router.push('/offres')}
+            className={classes.button}
+          >
+            Toutes les offres
+          </Button>
+
+          <Typography gutterBottom component="h1"
+            className={classes.title}>
+            Les entreprises en vidéo
+          </Typography>
+
+          <HorizontalScroller
+            data={this.state.promotedAds}
+            className={classes.HorizontalScroller}
+          >
+            <TileCompany />
+          </HorizontalScroller>
 
 
-
-          <HorizontalCompanyScroller data={this.state.promotedAds} />
-
-          <Button variant="outlined" onClick={() => Router.push('/companies')}>Toutes les entreprises</Button>
+          <Button variant="outlined" color="primary" onClick={() => Router.push('/companies')}>Toutes les entreprises</Button>
 
           <Typography gutterBottom component="h3">
             Installez l'application Talents Tube pour suivre vos candidatures
@@ -117,7 +152,12 @@ class Index extends React.Component {
             {({ initInstall }) =>
 
               <Button
-                aria-label='install' variant="contained" color="primary" onClick={initInstall}>
+                aria-label='install'
+                variant="contained"
+                color="primary"
+                onClick={initInstall}
+                className={classes.button}
+              >
                 <WhatshotIcon ></WhatshotIcon>
                 <Typography variant="h6" color="inherit">
                   Installer l'app