pb parametrage livraison

nextjs/components/atoms/ChatCard.js

@@ -69,7 +69,17 @@ export default function ChatCard(props) {
     
     return (
         <Fragment>
-            <ChatCardMessage side={bubbleSide} firstname={props.message.sender.firstname} lastname={props.message.sender.lastname} picture={userPicture} video={(props.message.video) ? true : false} message={(props.message.video) ? (<VideoVimeo classesOverride={ classes.videoVimeo } videoId={Ar.last(_.split(props.message.video.cdn_url, '/'))} />) : props.message.content} messageSenderClass={messageSenderClass} bubbleClass={bubbleClass}/>
+            <ChatCardMessage side={bubbleSide} firstname={props.message.sender.firstname} lastname={props.message.sender.lastname} picture={userPicture} 
+            video={
+                (props.message.video) 
+                ? true :
+                 false} 
+            message={
+                (props.message.video) 
+                ? (<VideoVimeo classesOverride={ classes.videoVimeo } videoId={Ar.last(_.split(props.message.video.cdn_url, '/'))} />) 
+                : props.message.content}
+            messageTexte = {props.message.content} 
+            messageSenderClass={messageSenderClass} bubbleClass={bubbleClass}/>
 
             <Typography
                 className={classes.messageDate}

nextjs/components/atoms/ChatCardMessage.js

@@ -61,7 +61,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function ChatCardMessage(props) {
-    const { side, firstname, lastname, picture, message, video, messageSenderClass, bubbleClass } = props;
+    const { side, firstname, lastname, picture, message, messageTexte, video, messageSenderClass, bubbleClass } = props;
     const classes = useStyles();
 
     const userBubble = (video) ? classes.userBubble +' '+ classes.userBubbleVideo : classes.userBubble
@@ -69,7 +69,7 @@ export default function ChatCardMessage(props) {
             <section className={(side==='left')? classes.userMessageLeft : classes.userMessageRight }>
                 
                 {picture ?
-                    <img alt="talents-tube" src={`http://localhost/uploads/img/${picture}`} className={(side==='left')? classes.first+' '+classes.avatar : classes.second +' '+classes.avatar} />
+                    <img alt="talents-tube" src={`http://recruteur.talentstube.com/uploads/img/${picture}`} className={(side==='left')? classes.first+' '+classes.avatar : classes.second +' '+classes.avatar} />
                     :
                     <img alt="talents-tube" src='/static/images/default/account-avatar-default.svg' className={(side==='left')? classes.first +' '+ classes.avatar : classes.second+' '+classes.avatar } />
                 }
@@ -84,6 +84,7 @@ export default function ChatCardMessage(props) {
                             className={classes.messageContent}
                         >
                             {message}
+                            {messageTexte}
                         </Typography>
                     </div>
                 </div>

nextjs/components/atoms/IconText.js

@@ -11,6 +11,7 @@ import Typography from '@material-ui/core/Typography';
 import WatchLater from '@material-ui/icons/WatchLater';
 import Home from '@material-ui/icons/Home';
 import People from '@material-ui/icons/People';
+import Place from '@material-ui/icons/Place';
 
 const variantIcon = {
   assignment: AssignmentIcon,
@@ -21,6 +22,7 @@ const variantIcon = {
   watch_later: WatchLater,
   home: Home,
   people: People,
+  place: Place,
 };
 
 const styles = theme => ({

nextjs/components/atoms/IconTextInline.js

@@ -10,6 +10,7 @@ import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
 import People from '@material-ui/icons/People';
 import Typography from '@material-ui/core/Typography';
 import Business from '@material-ui/icons/Business';
+import Place from '@material-ui/icons/Place';
 
 const variantIcon = {
   assignment: AssignmentIcon,
@@ -20,6 +21,7 @@ const variantIcon = {
   business_center: BusinessCenterIcon,
   business: Business,
   people: People,
+  place: Place,
 };
 
 const styles = theme => ({

nextjs/components/atoms/OgHead.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Head from 'next/head'
+const urlEnv = process.env.NODE_ENV;
 
 const OgHead = props => {
     return (
@@ -27,7 +28,11 @@ const OgHead = props => {
             <meta name="twitter:title" content={props.seo_title}/>
             <meta name="twitter:description" content={props.seo_description}/>
             <meta name="twitter:image" content={props.image}/>
+            
+            {/* A ENLEVER EN PROD */}
             <meta name="robots" content="noindex, nofollow"></meta>
+            
+            
             {/* <meta httpEquiv='cache-control' content='no-store,no-cache'></meta>
             <meta httpEquiv='expires' content='0'></meta>
             <meta httpEquiv='pragma' content='no-cache'></meta> */}

nextjs/components/organisms/AccountEtape2.js

@@ -20,6 +20,7 @@ import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';
 import Hidden from '@material-ui/core/Hidden';
+import Movie from '@material-ui/icons/Movie';
 
 const styles = theme => ({
     container: {
@@ -58,8 +59,8 @@ const styles = theme => ({
         height: "100%"
     },
     conseilButton: {
-        color: "#ffffff",
-        backgroundColor:  "#25D89A",
+        color: "#1e2327",
+        backgroundColor:  "#fff",
         padding: theme.spacing(3, 2),
         margin: theme.spacing(1),
         width: "100%",
@@ -67,11 +68,12 @@ const styles = theme => ({
         boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1' +
                 'px rgba(0, 0, 0, 0.14)',
         '&:hover': {
-            color: "#ffffff",
-            backgroundColor:  "#25D89A",
+            color: "#1e2327",
+            backgroundColor:  "#fff",
         }
     },
     captureButton: {
+        width:"100%",
         color: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.main,
         padding: theme.spacing(5, 2),
@@ -82,8 +84,8 @@ const styles = theme => ({
         },
       },
     importButton: {
-        color: theme.palette.primary.main,
-        backgroundColor:  theme.palette.secondary.main,
+        color: "#1e2327",
+        backgroundColor:  "#fff",
         padding: theme.spacing(3, 2),
         margin: theme.spacing(1),
         width: "100%",
@@ -91,8 +93,8 @@ const styles = theme => ({
         boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1' +
                 'px rgba(0, 0, 0, 0.14)',
         '&:hover': {
-            color: theme.palette.primary.main,
-            backgroundColor:  theme.palette.secondary.main,
+            color: "#1e2327",
+            backgroundColor:  "#fff",
         }
     },
     InputKeyboardArrowDownIconBlank: {
@@ -102,12 +104,21 @@ const styles = theme => ({
     },
     InputKeyboardArrowDownIcon: {
         fontSize: '2.5em',
-        color: "#1689FB",
+        color: "#1e2327",
         textAlign: "right"
     },
     buttons :{
         display: "inline-table",
-    }
+    },
+    grille :{
+        paddingTop:theme.spacing(4),
+        width: "100%",
+        marginBottom:"30px",
+        
+        borderRadius: "5px",
+        border: "1px solid #1E2327",
+        color:theme.palette.primary.dark
+    },
 });
 const Recorder = dynamic(() => import ('../organisms/Recorder'), {ssr: false})
 class Etape2 extends React.Component {
@@ -117,7 +128,8 @@ class Etape2 extends React.Component {
         data: {},
         openSnack: false,
         errors: {},
-        success : {}
+        success : {},
+        openStudio : false
     };
     
 
@@ -146,9 +158,9 @@ class Etape2 extends React.Component {
             video: nextProps.video
         })
         //window.location.reload(false);
-        if (nextProps.media.status === 'success') {
+        if (nextProps.media.statusPres === 'success') {
             const success = {};
-            success.message ="Vidéo mise à jour";
+            success.message ="Profil mise à jour.";
             this.setState({ success });
             this.setActiveStep(1);
         }
@@ -158,7 +170,7 @@ class Etape2 extends React.Component {
         this.setState({activeStep: step})
     }
 
-    inputFilesystemChange = (e) => {
+    inputFilesystemChangePres = (e) => {
         this.uploadMediaPres(e)
     }
 
@@ -168,7 +180,7 @@ class Etape2 extends React.Component {
 
     uploadMediaPres = (e) => {
         var file = e.target.files[0]
-
+        console.log ("envoi de video pres")
         const data = new FormData()
         data.append('upload', file)
         //this.setState({ videoPres: videoPres })
@@ -196,6 +208,16 @@ class Etape2 extends React.Component {
     handleClose = (event, reason) => {
         this.setState({openSnack: false});
     }
+
+    realise =() =>{
+        console.log("realise");
+        this.setState({ openStudio: true});
+    }
+
+    retour =() =>{
+        console.log("retour");
+        this.setState({ openStudio: false});
+    }
    
     render() {
         const {classes, company} = this.props;
@@ -206,126 +228,168 @@ class Etape2 extends React.Component {
         } else {
             video = "";
         }
+        if (typeof global.navigator === 'undefined') global.navigator = {};
+        if (typeof global.maps === 'undefined') global.maps = {};
         return (
-            <section className={classes.container}>
-                <Fragment>
-                    {this.AfficherSuccess()}
-                    { loading ? <LoaderVideo textePrincipal="Votre vidéo est en cours d’envoi..." texteSecondaire="Veuillez rester sur la page pendant le chargement qui peut durer plusieurs minutes."/>  : <div></div> }
+
+            
+            <Grid
+            container
+            direction="row"
+            justify="space-between"
+            alignItems="flex-start"
+            className={classes.grille}
+            justify="center"
+            alignItems="center">
+                <Grid item lg={12} md={12} xl={12} xs={12} >
+                    <div id="video">
                     
-                    <div className={classes.root}>
-                    <Hidden xsUp>
-                            &nbsp;                   
-                        </Hidden>
-                    <Container maxWidth="md">
+                    <Typography 
+                    align="center"
+                    gutterBottom
+                    variant="headline"
+                    variant="h6"
+                    component="h2" 
+                    className={classes.h6}>
+                    <Movie className={classes.menuIcon}></Movie> Vidéo de présentation
+                    </Typography>
+                    <Typography 
+                    align="center">Donnez envie au recruteur de vous rencontrer grâce à la vidéo !</Typography>
+
+                    </div>
+                    <Fragment>
+                        {this.AfficherSuccess()}
+                        { loading ? <LoaderVideo textePrincipal="Votre vidéo est en cours d’envoi..." texteSecondaire="Veuillez rester sur la page pendant le chargement qui peut durer plusieurs minutes."/>  : <div></div> }
                         
-                        <Grid container
-                            justify="center"
-                            alignItems="center" 
-                            spacing={2}
-                            className={classes.buttons}>
-                            <Grid item xs={12} sm={12} md={12} lg={6} lg={6}>
-                                
-
-
-                            { /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)  ?
-                                (
-                                    <Fragment >
-                                    <input
-                                        type="file" accept="video/*" capture="camcorder"
-                                        className={classes.input}
-                                        style={{ display: 'none' }}
-                                        id="record-button-file"
-                                        multiple
-                                        onChange={this.inputCamRecorderChange}
-                                    />
-                                    <label htmlFor="record-button-file">
-                                        <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }}>
-                                        <img alt="talents-tube" src='/static/images/capture.svg' className={classes.iconButton} />
-                                        <Typography align="left" className={classes.textButton}>
-                                            Je <span className={classes.underlined}>réalise</span> ma vidéo de présentation
-                                        </Typography>
-                                        <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
-                                        </Button>
-                                    </label>
-                                    </Fragment>
-                                ):
-                                (
-
-                                
-                                <div className={classes.recorderContainer}>
-                                    <Recorder uploader={this.props.uploadMediaPres} titreBouton="Remplacer ma vidéo"/>
+                        <div className={classes.root}>
+                        <Hidden xsUp>
+                                &nbsp;                   
+                        </Hidden>
+                        <Container maxWidth="md">
+                            
+                            <Grid container
+                                justify="center"
+                                alignItems="center" 
+                                spacing={2}
+                                className={classes.buttons}>
+                                <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
                                     
-                                </div>
-                                )
-                            }
-                            </Grid>
-                            <Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
-                                <div> 
-                                    <label htmlFor="import-conseil">
-                                        <Button
-                                            component="span"
-                                            className={classes.conseilButton}
-                                            classes={{
-                                            root: classes.rootButton}}
-                                            onClick={() => Router.push(`/Conseils`)}>
-                                            <img
-                                                alt="talents-tube"
-                                                src='/statique/images/conseils-talentstube.svg'
-                                                className={classes.iconButton}/>
-                                            <Typography align="left" className={classes.textButton}>
-                                                <span className={classes.underlined}>Comment</span> créer ma vidéo 
-                                            </Typography>
-                                            <KeyboardArrowDownIcon className={classes.InputKeyboardArrowDownIconBlank}/>
-                                        </Button>
-                                    </label>
-                                </div>
-                                <div>
+
+
+                                { /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)  ?
+                                    (
+                                        <Fragment >
                                         <input
-                                            type="file"
-                                            accept="video/*"
-                                            className={classes.input + ' cypButtonImportVid'}
-                                            style={{display: 'none'}}
-                                            id="import-button-file"
-                                            onChange={this.inputFilesystemChange}/>
-                                        <label htmlFor="import-button-file">
+                                            type="file" accept="video/*" capture="camcorder"
+                                            className={classes.input}
+                                            style={{ display: 'none' }}
+                                            id="record-button-file"
+                                            multiple
+                                            onChange={this.inputCamRecorderChange}
+                                        />
+                                        <label htmlFor="record-button-file">
+                                            <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }}>
+                                            <img alt="talents-tube" src='/static/images/capture.svg' className={classes.iconButton} />
+                                            <Typography align="left" className={classes.textButton}>
+                                                Je <span className={classes.underlined}>réalise</span> ma vidéo de présentation
+                                            </Typography>
+                                            <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                                            </Button>
+                                        </label>
+                                        </Fragment>
+                                    ):
+                                    (
+
+                                    <Fragment>
+                                        {this.state.openStudio == false ?
+                                            <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }} onClick={this.realise}>
+                                            <img alt="talents-tube" src='/statique/images/capture.svg' className={classes.iconButton} />
+                                            <Typography align="left" className={classes.textButton}>
+                                              Je <span className={classes.underlined}>réalise</span> ma vidéo de présentation
+                                          </Typography>
+                                          <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                                          </Button>
+                                        :
+                                            <div className={classes.recorderContainer}>
+                                                <Button onClick={this.retour}>Retour au menu</Button>
+                                                <Recorder uploader={this.props.uploadMediaPres} titreBouton="Remplacer ma vidéo"/>
+                                                
+                                            </div>
+                                        }
+                                    </Fragment>
+                                    )
+                                }
+                                </Grid>
+                                <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+                                    
+                                    <div>
+                                            <input
+                                                type="file"
+                                                accept="video/*"
+                                                className={classes.input + ' cypButtonImportVid'}
+                                                style={{display: 'none'}}
+                                                id="import-button-file-pres"
+                                                onChange={this.inputFilesystemChangePres}/>
+                                            <label htmlFor="import-button-file-pres">
+                                                <Button
+                                                    component="span"
+                                                    className={classes.importButton}
+                                                    classes={{
+                                                    root: classes.rootButton}}>
+                                                    <img
+                                                        alt="talents-tube"
+                                                        src='/statique/images/Import.svg'
+                                                        className={classes.iconButton}/>
+                                                    <Typography align="left" className={classes.textButton}>
+                                                        J'<span className={classes.underlined}>importe</span> ma vidéo de présentation
+
+                                                    </Typography>
+                                                    <KeyboardArrowDownIcon className={classes.InputKeyboardArrowDownIcon}/>
+                                                </Button>
+                                            </label>
+                                    </div>
+                                    <div> 
+                                        <label htmlFor="import-conseil">
                                             <Button
                                                 component="span"
                                                 className={classes.importButton}
                                                 classes={{
-                                                root: classes.rootButton}}>
+                                                root: classes.rootButton}}
+                                                onClick={() => Router.push(`/Conseils`)}>
                                                 <img
                                                     alt="talents-tube"
-                                                    src='/statique/images/Import.svg'
+                                                    src='/statique/images/comment-faire-une-video-reponse.svg'
                                                     className={classes.iconButton}/>
                                                 <Typography align="left" className={classes.textButton}>
-                                                    J'<span className={classes.underlined}>importe</span> ma vidéo de présentation
-
+                                                    <span className={classes.underlined}>Comment</span> créer ma vidéo de présentation
                                                 </Typography>
                                                 <KeyboardArrowDownIcon className={classes.InputKeyboardArrowDownIcon}/>
                                             </Button>
                                         </label>
                                     </div>
+                                
+                                </Grid> 
+                                <Hidden xsUp>
+                                    &nbsp;                   
+                                </Hidden>
                             
-                            </Grid> 
-                            <Hidden xsUp>
-                                &nbsp;                   
-                            </Hidden>
-                        
-                            <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
-                                <div className={classes.videoPresentation}>
-                                    {video}   
-                                </div>                
+                                <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+                                    <div className={classes.videoPresentation}>
+                                        {video}   
+                                    </div>                
+                                </Grid>
+                                
                             </Grid>
+                        </Container>      
+                        </div>
+                        {/* <div className={classes.textContainer}>
                             
-                        </Grid>
-                    </Container>      
-                    </div>
-                    {/* <div className={classes.textContainer}>
-                        
-                    </div> */}
-                            
-                </Fragment>
-            </section>
+                        </div> */}
+                                
+                    </Fragment>
+                </Grid>
+            </Grid>
+            
 
         );
     }

nextjs/components/organisms/AccountEtape3.js

@@ -17,8 +17,9 @@ import getConfig from 'next/config'
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
-
-
+import Description from '@material-ui/icons/Description';
+import Grid from '@material-ui/core/Grid';
+import Container from '@material-ui/core/Container';
 const styles = theme => ({
   root: {
     display: 'flex',
@@ -40,21 +41,61 @@ const styles = theme => ({
   },
   InputKeyboardArrowDownIcon: {
     fontSize: '2.5em',
-    color: theme.palette.primary.main,
+    color: theme.palette.primary.dark,
   },
   importButton: {
-    color: theme.palette.primary.main,
-    backgroundColor:  theme.palette.secondary.main,
+    color: "#1e2327",
+    backgroundColor:  "#fff",
     padding: theme.spacing(3, 2),
     margin: theme.spacing(1),
-    width: "370px",
+    width: "100%",
+    textAlign: "right",
     boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1' +
             'px rgba(0, 0, 0, 0.14)',
     '&:hover': {
-        color: theme.palette.primary.main,
-        backgroundColor:  theme.palette.secondary.main,
+        color: "#1e2327",
+        backgroundColor:  "#fff",
     }
   },
+  grille :{
+        paddingTop:theme.spacing(4),
+        paddingRight:"30px",
+        width: "100%",
+        marginBottom:"30px",
+        
+        borderRadius: "5px",
+        border: "1px solid #1E2327",
+        color:theme.palette.primary.dark
+  },
+  grille2 :{
+    margin:'10px',     
+    width: "100%",
+    marginBottom:"30px",
+
+},
+  button: {
+    width:"200px",
+    textTransform: 'inherit',
+    margin: theme.spacing(0, 8),
+    padding: theme.spacing(1.2, 2),
+    [theme.breakpoints.up('sm')]: {
+      margin: 'auto',
+    },
+  },
+  boutonMobile:{
+    width:"200px",
+    textAlign :"center",
+    color: theme.palette.secondary.main,
+    backgroundColor: theme.palette.primary.important,
+    margin : "0px !important"
+  },
+  lien:{
+    textDecoration:'none',
+    color:'#fff'
+  },
+  centered:{
+    textAlign:"center"
+  }
 });
 
 
@@ -90,12 +131,12 @@ class Etape3 extends React.Component {
         openSnack: !!!_.isEmpty(nextProps.errors),
         errors: !!!nextProps.errors ? { errors: { message: "" } } : nextProps.errors,
     })
-    this.state.cvLink = nextProps.cvLink;
-    if (nextProps.loading) {
+
+    if (nextProps.mediaCv.statusCv === 'success') {
       const success = {};
-      success.message ="CV mis à jour";
+      success.message ="Profil mis à jour";
       console.log("CV mis à jour!!!")
-      if(this.state.cvLink) console.log(this.state.cvLink)
+      if(nextProps.mediaCv) console.log(nextProps.mediaCv.message)
       this.setState({ success });
       
     }
@@ -103,7 +144,7 @@ class Etape3 extends React.Component {
     
   }
 
-  inputFilesystemChange = (e) => {
+  inputFilesystemChangeCv = (e) => {
     this.uploadMediaCv(e)
   }
   
@@ -112,7 +153,7 @@ class Etape3 extends React.Component {
 
     const data = new FormData()
     data.append('upload', file)
-
+    console.log ("envoi de cv")
     this.props.uploadMediaCv(data)
   }
 
@@ -122,6 +163,7 @@ class Etape3 extends React.Component {
         return "";
     } else if (this.state.success.length != 0 && this.state.success.message != "") {
         return (
+          
           <Snackbar open={open} autoHideDuration={1000} onClose={() => this.setState({open: false})}>
             <Alert onClose={() => this.setState({open: false})} severity="success">
               {ReactHtmlParser(this.state.success.message)}
@@ -132,7 +174,7 @@ class Etape3 extends React.Component {
     return "";
   }
 
-  AfficherLienCv() {
+  AfficherLienCv(classes) {
     console.log("afficher lien");
      if (this.state.cvLink !="") {
       
@@ -144,39 +186,26 @@ class Etape3 extends React.Component {
             
             <Hidden>&nbsp;</Hidden>
             <Hidden>&nbsp;</Hidden>
-            <Card  variant="" style={{
-              width:370+"px", 
-              boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1' +
-                      'px rgba(0, 0, 0, 0.14)',
-              marginLeft : '10px',
-              marginTop:'10px'
-              
-              }}>
+            
             <Hidden>&nbsp;</Hidden>
-              <CardActions>
-                <Button size="small">MON CV</Button>
-              </CardActions>
-              <CardContent>
+                <div className={classes.centered} >
                 <Typography >
                   <a href={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentCv + this.state.cvLink} 
-                  target="_blank"
-                  style={{ 
-                    color:'#1689FB',
-                    '&:hover': {
-                      color: '#1689FB',
-                    },
-                    fontWeight: '700',
-                    fontSize: '1em',
-                    }}
+                  target="_blank" className={classes.lien}
+
                   >
-                    Visualiser mon CV
+                  <Button
+                            variant="contained"
+                            className={classes.button + ' ' + classes.boutonMobile}
+                          >Visualiser mon CV
+                      </Button>
+                  
                     </a>
                     <br />
-                {/* <a href="https://www.permatheque.fr/PDF/mansobufukuoka-larevolutiondunseulbrindepaille.pdf" target="_blank">lien</a> */}
+                
                 </Typography>
-              </CardContent>
-              
-            </Card>
+                </div>
+ 
           </Fragment>
             
         );
@@ -189,36 +218,79 @@ class Etape3 extends React.Component {
     const { classes, company } = this.props;
     const { loading } = this.state;
     return (
-      <Fragment>
-      { loading ? 
-        <LoaderVideo textePrincipal="Votre candidature vidéo est en cours d’envoi..." texteSecondaire="Veuillez rester sur la page pendant le chargement qui peut durer plusieurs minutes."/> :
-        <Fragment>
-          {this.AfficherSuccess()}
+      <Grid
+            container
+            direction="row"
+            alignItems="flex-start"
+            className={classes.grille}
+            justify="center"
+            alignItems="center">
+              
+        
+          <Grid item lg={12} md={12} xl={12} xs={12} className={classes.grilleGauche}>
+            <div id="cv">
+        
+          <Typography 
+          align="center"
+          gutterBottom
+          variant="headline"
+          variant="h6"
+          component="h2" 
+          className={classes.h6}>
+          <Description className={classes.menuIcon}></Description> Curriculum vitae
+          </Typography>
+          <Typography 
+          align="center">Importez votre CV pour permettre aux recruteurs d’en savoir plus sur vous.
+          .</Typography>
+
+          </div>
+            <Fragment>
+          { loading ? 
           
-          <input
-            type="file" 
-            accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document, .pdf, .odt"
-            className={classes.input+' cypButtonImportVid'}
-            style={{ display: 'none' }}
-            id="import-button-file"
-            onChange={this.inputFilesystemChange}
-          />
-          <label htmlFor="import-button-file">
-            <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }}>
-              <img alt="talents-tube" src='/statique/images/Import-cv-candidat.svg' className={classes.iconButton} />
-              <Typography  className={classes.textButton}>
-                J'<span className={classes.underlined}>importe</span> mon CV 
-              </Typography>
-              <KeyboardArrowDownIcon className={ classes. InputKeyboardArrowDownIcon }/>
-            </Button>
-            
-          </label>
-          <Hidden>&nbsp;</Hidden>
-          {this.AfficherLienCv()}
-          
-        </Fragment>
-    }
-    </Fragment>
+            <LoaderVideo textePrincipal="Votre candidature vidéo est en cours d’envoi..." texteSecondaire="Veuillez rester sur la page pendant le chargement qui peut durer plusieurs minutes."/> :
+            <Grid
+            container
+            spacing={4}
+            direction="row"
+            alignItems="flex-start"
+            className={classes.grille2}
+            justify="center"
+            alignItems="center">
+              <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+              <Fragment>
+              {this.AfficherSuccess()}
+                
+                <input
+                  type="file" 
+                  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document, .pdf, .odt"
+                  className={classes.input+' cypButtonImportVid'}
+                  style={{ display: 'none' }}
+                  id="import-button-file-cv"
+                  onChange={this.inputFilesystemChangeCv}
+                />
+                <label htmlFor="import-button-file-cv">
+                  <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }}>
+                    <img alt="talents-tube" src='/statique/images/Import-cv-candidat.svg' className={classes.iconButton} />
+                    <Typography  className={classes.textButton}>
+                      J'<span className={classes.underlined}>importe</span> mon CV 
+                    </Typography>
+                    <KeyboardArrowDownIcon className={ classes. InputKeyboardArrowDownIcon }/>
+                  </Button>
+                  
+                </label>
+                <Hidden>&nbsp;</Hidden>
+                {this.AfficherLienCv(classes)}
+                <Hidden>&nbsp;</Hidden>
+                <Hidden>&nbsp;</Hidden>
+                <Hidden>&nbsp;</Hidden>
+              </Fragment>
+              </Grid>
+              </Grid>
+          }
+          </Fragment>
+        </Grid>
+        
+    </Grid>
     ); 
   }
 
@@ -249,6 +321,7 @@ function mapStateToProps(state) {
     cvLink : state.mediaCv.message,
     loading: !!state.media.loading,
     cv : true,
+    mediaCv: state.mediaCv,
     //errors:  errorMessageSelector(state),
     user: state.user,
     company: state.company

nextjs/components/organisms/AccountProfile.js

@@ -26,8 +26,10 @@ import BottomNavigation from '@material-ui/core/BottomNavigation';
 import RefreshIcon from '@material-ui/icons/Refresh';
 // import FavoriteIcon from '@material-ui/icons/Favorite'; import LocationOnIcon
 // from '@material-ui/icons/LocationOn';
-
+import Link from 'next/link'
 import Box from '@material-ui/core/Box';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
 
 import {
     Card,
@@ -63,7 +65,10 @@ const styles = theme => ({
         width: '100%',
         position: 'fixed',
         bottom: 0
-    }
+    },
+    menu: {
+        backgroundColor: "#DAE8F2"
+    },
 });
 
 const useStyles = makeStyles(theme => ({
@@ -116,6 +121,9 @@ const useStyles = makeStyles(theme => ({
     },
     resetContainer: {
         padding: theme.spacing(3)
+    },
+    conteneur:{
+        backgroundColor: "#f3f3f4",
     }
 }));
 
@@ -242,11 +250,9 @@ const AccountProfile = props => {
         return skipped.has(step);
     };
 
-    const handleChange = (event) => {
-        setState({
-            ...state,
-            [event.target.name]: event.target.checked
-        });
+    const handleChange = (event, newValue) => {
+
+       
     };
 
     function isStepComplete(step) {
@@ -260,210 +266,44 @@ const AccountProfile = props => {
     }
 
     return (
+        
         <Grid
             container
-            spacing={4}
-            direction="row"
-            justify="space-between"
-            alignItems="flex-start">
-            <Grid item lg={3} md={6} xl={4} xs={12}>
-                <Card {...rest} className={clsx(classes.root, className)}>
-                    <CardContent>
-                        <div id="fb-root"></div>
-                        <script
-                            async
-                            defer
-                            crossorigin="anonymous"
-                            src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v8.0&appId=2332071840142634&autoLogAppEvents=1"
-                            nonce="O28M4TTm"></script>
-                        <div className={classes.details}>
-                            <div>
-                                <Typography gutterBottom variant="h5">
-                                    {user.lastname}
-                                    &nbsp; {user.firstname}
-                                    <a href="#" onClick={refresh}><RefreshIcon className={classes.menuButton}/></a>
-                                </Typography>
-                                <Typography
-                                    className={classes.locationText}
-                                    color="textSecondary"
-                                    variant="body1">
-                                    <MailIcon className={classes.menuButton}/>
-                                    : {user.email}<br/>
-                                    <PhoneIcon className={classes.menuButton}/>
-                                    : {user.phone}<br/>
-                                    <LinkedInIcon className={classes.menuButton}/>
-                                    : {(user.linkedin && user.linkedin != '' && user.linkedin != 'null')
-                                        ? <a href={user.linkedin} target="_blank">Lien sur mon linkedIn</a>
-                                        : 'Non renseigné'}<br/>
-                                    <PublicIcon className={classes.menuButton}/>
-                                    : {(user.website && user.website != '' && user.website != 'null')
-                                        ? <a href={user.website} target="_blank">Lien sur mon site</a>
-                                        : 'Non renseigné'}<br/>
-                                    
-                                    
-                                    
-                                </Typography>
+            
+            >
+            <Grid item lg={12} md={12} xl={12} xs={12} >
+                <div >
+                    <Paper  elevation={0} >
+
+                            <Tabs
+                            value={1}
+                            onChange={handleChange}
+                            indicatorColor="primary"
+                            textColor="theme.palette.primary.dark"
+                            centered
+                            >
+                                <Link href="/Candidatures"><Tab label="Mes candidatures" /></Link>
+                                <Tab label="Mon profil" />
                                 
-                            </div>
-                            {/* <Avatar
-                                className={classes.avatar}
-                                src={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentUrl + logoUrl}/> */}
-                        </div>
-                        <div>
-                        <Box m={3}/>
-                        <Divider/>
-                        <Box m={3}/>
-                        <Typography
-                                    className={classes.locationText}
-                                    color="textSecondary"
-                                    variant="body1">
-                                    
-                                    <DuoIcon className={classes.menuButton}/>
-                                    : {(user.alias && user.alias != '' && user.alias != 'null')
-                                        ? <a
-                                                href={publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias}
-                                                target="_blank">Voir mon profil TalentsTube
-                                            </a>
-                                        : 'Non renseigné'}<br/>
-                                    <div
-                                        class="fb-share-button"
-                                        data-href={publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias}
-                                        data-layout="button_count"
-                                        data-size="small">
-
-                                        <Facebook className={classes.menuButton}/>
-                                        :
-                                        <a
-                                            target="_blank"
-                                            href={"https://www.facebook.com/sharer/sharer.php?u=" + publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias + "%2F&amp;src=sdkpreparse"}
-                                            class="fb-xfbml-parse-ignore"> Partager mon profil
-                                        </a>
-                                    </div>
-                                </Typography>
-                        </div>
-                        {/* <div className={classes.progress}>
-                            <Typography variant="body1">Etat du Profil: 70%</Typography>
-                            <LinearProgress value={70} variant="determinate"/>
-                        </div> */}
-
-                    </CardContent>
-                    <Box m={2}/>
-                    <Divider/>
-                    <Box m={2}/>
-                    <div className={classes.information}>
-                        <Typography className={classes.texteBlanc} align="left"></Typography>
-                    </div>
-                    {/* <CardActions>
-                        <Button className={classes.uploadButton} color="primary" variant="text">
-                            Remplacer une photo de profil
-                        </Button>
-                        <Button variant="text">Supprimer photo de profil</Button>
-                    </CardActions> */}
-                    <Box m={1}/>
-                    <Divider/>
-                     {/* <CardContent>
-                        <Typography variant="body1"></Typography>
-                        <FormControlLabel
-                            value="end"
-                            control={< Switch checked = {
-                            state.checkedA
-                        }
-                        onChange = {
-                            handleChange
-                        }
-                        name = "checkedA" color = "primary" />}
-                            label="Je souhaite afficher mon profil sur la CV Vidéothèque Talents Tube"
-                            labelPlacement="start"/>
-
-                    </CardContent> */}
-
-                    
-
-                    <CardActions>
-
-                        <Stepper nonLinear activeStep={activeStep} orientation="vertical">
-                            {steps.map((label, index) => {
-                                const stepProps = {};
-                                const buttonProps = {};
-                                if (isStepOptional(index)) {
-                                    buttonProps.optional = <Typography variant="caption">Optional</Typography>;
-                                }
-                                if (isStepSkipped(index)) {
-                                    stepProps.completed = false;
-                                }
-                                return (
-                                    <Step key={label} className={classes.actionsContainer} {...stepProps}>
-                                        <StepButton
-                                            onClick={handleStep(index)}
-                                            completed={isStepComplete(index)}
-                                            {...buttonProps}>
-                                            {label}
-                                        </StepButton>
-
-                                    </Step>
-                                );
-                            })}
-                        </Stepper>
-                    </CardActions>
-                    <Divider/>
-
-                    <div>
-
-                        <div>
-
-                            <div>
-
-                                {/* {isStepOptional(activeStep) && !completed.has(activeStep) && (
-                    <Button
-                      variant="contained"
-                      color="primary"
-                      onClick={handleSkip}
-                      className={classes.button}
-                    >
-                      Skip
-                    </Button>
-                  )} */}
-
-                                {/* {activeStep !== steps.length &&
-                    (completed.has(activeStep) ? (
-                      <Typography variant="caption" className={classes.completed}>
-                        Step {activeStep + 1} already completed
-                      </Typography>
-                    ) : (
-                      <Button variant="contained" color="primary" onClick={handleComplete}>
-                        {completedSteps() === totalSteps() - 1 ? 'Finish' : 'Complete Step'}
-                      </Button>
-                    ))} */}
-                            </div>
-                        </div>
-
-                    </div>
-                    <Box m={2}/>
-                <CardContent>
-                    <BottomNavigation className={classes.stickToBottom}>
-                        <Button
-                            disabled={activeStep === 0}
-                            onClick={handleBack}
-                            className={classes.button}>
-                            Etape précédente
-                        </Button>
-                        <Button
-                            variant="contained"
-                            color="primary"
-                            onClick={handleNext}
-                            className={classes.button}>
-                            Etape suivante
-                        </Button>
-                        {/* <BottomNavigationAction label="Recents" icon={< RestoreIcon />}/>
-                      <BottomNavigationAction label="Favorites" icon={< FavoriteIcon />}/>
-                      <BottomNavigationAction label="Nearby" icon={< LocationOnIcon />}/> */}
-                    </BottomNavigation>
-                </CardContent>
-                </Card>
+                            </Tabs>
+                    </Paper>
+                   
+                </div>
+            
+            </Grid>
+            <Grid item lg={3} md={3} xl={4} xs={12}>
+                
                 
             </Grid>
-            <Grid item lg={9} md={6} xl={8} xs={12}>
-                {getStepContent(activeStep)}
+            <Grid item lg={6} md={6} xl={4} xs={12} >
+                
+                <AccountEtape1 ></AccountEtape1>
+                <AccountEtape2 ></AccountEtape2>
+                <AccountEtape3 ></AccountEtape3>
+            </Grid>
+            <Grid item lg={3} md={3} xl={4} xs={12}>
+                
+                
             </Grid>
 
         </Grid>

nextjs/components/organisms/Answer.js

@@ -383,33 +383,21 @@ class Answer extends Component {
 
     remplirLocation = (typeDonnee, donnee) =>{
         console.log("DEBUT remplirLocation");
+        console.log(typeDonnee);
+        console.log(donnee);
         if(typeDonnee=='"street_number"') {
-            console.log(typeDonnee);
-            console.log(donnee);
             this.setState({ street_number: donnee.replace('"', '') }) 
         }else if(typeDonnee=='"route"') {
-            console.log(typeDonnee);
-             console.log(donnee);
             this.setState({ route: donnee.replace('"', '') }) 
         }else if(typeDonnee=='"locality"') {
-            console.log(typeDonnee);
-            console.log(donnee);
             this.setState({ locality: donnee.replace('"', '') }) 
         }else if(typeDonnee=='"administrative_area_level_2"') {
-            console.log(typeDonnee);
-            console.log(donnee);
             this.setState({ administrative_area_level_2: donnee.replace('"', '') }) 
         }else if(typeDonnee=='"administrative_area_level_1"') {
-            console.log(typeDonnee);
-            console.log(donnee);
             this.setState({ administrative_area_level_1: donnee.replace('"', '') }) 
         }else if(typeDonnee=='"country"') {
-            console.log(typeDonnee);
-            console.log(donnee);
             this.setState({ country: donnee.replace('"', '') }) 
         }else if(typeDonnee=='"postal_code"') {
-            console.log(typeDonnee);
-            console.log(donnee);
             this.setState({ postal_code: donnee.replace('"', '') }) 
         }
         console.log("FIN remplirLocation");  
@@ -419,7 +407,11 @@ class Answer extends Component {
     onSuggestionSelected = (suggestion) => {
         
         console.log('Selected suggestion:', suggestion)
-        const address = suggestion.description;
+        let address = suggestion.description;
+        var words = address.split(',');
+        if(words.length<3){
+            address = "mairie de "+address;
+        }
         this.setState({ geoloc: address})
         this.setState({
             value: address
@@ -427,7 +419,8 @@ class Answer extends Component {
 
         geocodeByAddress(address)
             .then(address => {
-                
+                console.log("ADRESSE");
+                console.log(address);
                 if(address[0].address_components[0]){
                     this.remplirLocation(JSON.stringify(address[0].address_components[0].types[0]), JSON.stringify(address[0].address_components[0].long_name))
                 }
@@ -450,11 +443,13 @@ class Answer extends Component {
                     this.remplirLocation(JSON.stringify(address[0].address_components[6].types[0]), JSON.stringify(address[0].address_components[6].long_name))
                 }
                 if(address[0].geometry){
+
+                    console.log(address[0].geometry.location_type);
                     let gps =JSON.stringify(address[0].geometry.location);
                     const obj = JSON.parse(gps);  
-                     this.setState({ formatted_address: JSON.stringify(address[0].formatted_address) })     
-                     this.setState({ lat: obj.lat.toString()})     
-                     this.setState({ lng: obj.lng.toString()})     
+                    this.setState({ formatted_address: JSON.stringify(address[0].formatted_address) })     
+                    this.setState({ lat: obj.lat.toString()})     
+                    this.setState({ lng: obj.lng.toString()})     
                 }
                 
                 
@@ -650,20 +645,7 @@ class Answer extends Component {
                     </Dialog>
 
                     
-                    <TextField
-                        name="lastname"
-                        required
-                        id="outlined-required"
-                        label="Nom"
-                        className={classes.textField}
-                        classes={{ root: classes.rootTextfield }}
-                        variant="outlined"
-                        value={this.state.lastname}
-                        onChange={this.handleChange}
-                        error={!!_.isEmpty(this.state.lastname)}
-                        helperText={!!_.isEmpty(this.state.lastname) && "Veuillez saisir votre nom"}
-                        required
-                    />
+                    
                      
                     <TextField
                         name="firstname"
@@ -679,6 +661,21 @@ class Answer extends Component {
                         helperText={!!_.isEmpty(this.state.firstname) && "Veuillez saisir votre prénom"}
                     />
 
+                    <TextField
+                        name="lastname"
+                        required
+                        id="outlined-required"
+                        label="Nom"
+                        className={classes.textField}
+                        classes={{ root: classes.rootTextfield }}
+                        variant="outlined"
+                        value={this.state.lastname}
+                        onChange={this.handleChange}
+                        error={!!_.isEmpty(this.state.lastname)}
+                        helperText={!!_.isEmpty(this.state.lastname) && "Veuillez saisir votre nom"}
+                        required
+                    />
+
                     <div 
                     className={classes.conteneurGoogle}
                     classes={{ root: classes.rootTextfield }} 

nextjs/components/organisms/AnswerRow.js

@@ -8,7 +8,7 @@ import Chip from '@material-ui/core/Chip';
 import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import Typography from '@material-ui/core/Typography';
-import IconText from './../atoms/IconText';
+import IconText from './../atoms/IconTextInline';
 import KeyboardArrowleftIcon from '@material-ui/icons/PlayArrowRounded';
 import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 import Link from 'next/link';
@@ -83,11 +83,11 @@ const styles = theme => ({
   },
   iconTextIcon: {
     color: theme.palette.offerlistitem.icon,
-    fontSize: '0.8em',
+    fontSize: '1em',
   },
   iconTextText: {
     color: theme.palette.offerlistitem.text,
-    fontSize: '0.6em',
+    fontSize: '1em',
     paddingLeft: theme.spacing(1),
   },
   bottomCard: {
@@ -96,8 +96,9 @@ const styles = theme => ({
     width: '90%',
   },
   chip: {
-    color: theme.palette.secondary.main,
-    backgroundColor: theme.palette.primary.important,
+    marginTop :"10px",
+    backgroundColor:"#E7F3FF",
+    color:theme.palette.primary.dark,
   },
   icon: {
     color: theme.palette.secondary.dark,
@@ -112,50 +113,30 @@ const { publicRuntimeConfig } = getConfig()
 //must go in API
 const status = new Map([
 
-  ["DRAFT"
-    , "Brouillon"]
+  ["A_TRAITER"
+    , "Envoyée"]
   ,
-  ["TO_PUBLISH"
-    , "En cours de validation"]
+  ["CONTACTE"
+    , "En cours de traitement"]
   ,
-  ["VALIDATED"
-    , "Validée"]
+  ["ENTRETIEN"
+    , "En cours de traitement"]
   ,
-  ["PUBLISHED"
-    , "Publiée"]
+  ["REFUSE"
+    , "Refusée"]
   ,
-  ["CLOSED"
-    , "Cloturée"]
+  ["EMBAUCHE"
+    , "Embauchée"]
   ,
   ["EXPIRED"
     , "Expirée"]
   ,
-  ["SENDED"
+  [""
     , "Envoyée"]
   ,
-  ["DECLINED"
-    , "Refusée"]
+  ["Null"
+    , "Envoyée"]
   ,
-  ["NEW"
-    , "Nouveau"]
-  ,
-  ["VIEWED"
-    , "Visionnée"]
-  ,
-  ["NEGATIVE"
-    , "Négatif"]
-  ,
-  ["POSITIVE"
-    , "Positif"]
-  ,
-  ["INFOS"
-    , "Demande d’informations"]
-  ,
-  ["CONTACTED"
-    , "Demande d’informations"]
-  ,
-  ["CONTACTED.RDV"
-    , "Convocation entretien"]
 
 ])
 class AnswerRowComponent extends React.Component {
@@ -169,12 +150,14 @@ class AnswerRowComponent extends React.Component {
       companyR = rowData.ad.company;
     else
       companyR = company;
-
+    console.log(rowData);
+    const ville = (rowData.ad && rowData.ad.location && rowData.ad.location.gmap_address && rowData.ad.location.gmap_address.address_components[0] )
+      ? rowData.ad.location.gmap_address.address_components[0].long_name
+      : "ND"
     const imgUrl = (rowData.ad && rowData.ad.video && rowData.ad.video.thumbnails[0] && rowData.ad.video.thumbnails[0].sizes[4])
       ? rowData.ad.video.thumbnails[0].sizes[4].link
       : publicRuntimeConfig.adListDefaultUrl
     const logoUrl = publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + companyR.logo
-
     return (
       <Link href={`/Candidature/${rowData.id}`} >
         <Card className={classes.card} >
@@ -204,8 +187,18 @@ class AnswerRowComponent extends React.Component {
                   className={classes.companyTitle}>
                   {rowData.ad.company.brand_name&&rowData.ad.company.brand_name}
                 </Typography>
+                <Typography
+                  variant="headline"
+                  variant="h6"
+                  component="h4"
+                  className={classes.companyTitle}>
+                  <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="place" text={ville} />  
+                  <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="assignment" text={rowData.ad.extra&&rowData.ad.extra.contract_type?rowData.ad.extra.contract_type:"ND"} />  
+                  <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="watch_later" text={(new Date(rowData.c_time)).toLocaleDateString("fr-FR")} />  
+                  
+                </Typography>
                 <div className={ classes.bottomCard }>
-                  <Chip size="small" label={status.get(rowData.status)} className={classes.chip} />
+                  <Chip size="small" label={status.get(rowData.status_reponse)? status.get(rowData.status_reponse) : "Envoyée" } className={classes.chip} />
                   <ArrowForwardIcon className={classes.icon} />
                 </div>
               </div>
@@ -236,8 +229,15 @@ class AnswerRowComponent extends React.Component {
                   className={classes.companyTitle}>
                   {rowData.company.brand_name&&rowData.company.brand_name}
                 </Typography>
+                <Typography
+                  variant="headline"
+                  variant="h6"
+                  component="h4"
+                  className={classes.companyTitle}>
+                  <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="watch_later" text={(new Date(rowData.c_time)).toLocaleDateString("fr-FR")} />  
+                </Typography>
                 <div className={ classes.bottomCard }>
-                  <Chip size="small" label={status.get(rowData.status)} className={classes.chip} />
+                <Chip size="small" label={status.get(rowData.status_reponse)? status.get(rowData.status_reponse) : "Envoyée" } className={classes.chip} />
                   <ArrowForwardIcon className={classes.icon} />
                 </div>
               </div>

nextjs/components/organisms/Header.js

@@ -485,12 +485,12 @@ class Header extends React.Component {
                   <Divider light={true} />
 
                   <div className={classes.linkGroup}>
-                    <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
+                    {/* <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
                       <WorkOutlineIcon className={classes.icon} />
                       <ListItemText primary='Connexion recruteurs'>
                       </ListItemText>
                     </ListItem>
-                    </a>
+                    </a> */}
                   </div>
                 </List>
               </div>
@@ -529,7 +529,7 @@ class Header extends React.Component {
                       <a className={classes.lightMenuItem}>
                         <ListItem classes={{ root: classes.rootListItemIcon }}>
                         <AccountCircleIcon className={classes.icon} />
-                        <ListItemText primary='Mon compte'>
+                        <ListItemText primary='Mon profil'>
                         </ListItemText>
                         </ListItem>
                       </a>
@@ -538,7 +538,7 @@ class Header extends React.Component {
                     <Link href="/Parametres"  >
                       <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
                         <SettingsIcon className={classes.icon} />
-                        <ListItemText primary='Paramètres de notification'>
+                        <ListItemText primary='Paramètres'>
                         </ListItemText>
                       </ListItem></a>
                     </Link>
@@ -666,14 +666,14 @@ class Header extends React.Component {
                   </div>
                 </List>
               </section>
-              <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
+              {/* <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
 
                 <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.desktopMenuItem}>
                   <ListItemText primary='Espace recruteurs'>
                   </ListItemText>
                   <ArrowForward className={classes.icon} />
                 </a>
-              </section>
+              </section> */}
             </Toolbar>
           </AppBar>)
           :

nextjs/components/organisms/HeaderPersonnalise.js

@@ -397,12 +397,12 @@ class HeaderPersonnalise extends React.Component {
                   <Divider light={true} />
 
                   <div className={classes.linkGroup}>
-                    <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
+                    {/* <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
                       <WorkOutlineIcon className={classes.icon} />
                       <ListItemText primary='Connexion recruteurs'>
                       </ListItemText>
                     </ListItem>
-                    </a>
+                    </a> */}
                   </div>
                 </List>
               </div>}
@@ -438,7 +438,7 @@ class HeaderPersonnalise extends React.Component {
                       <a className={classes.lightMenuItem}>
                         <ListItem classes={{ root: classes.rootListItemIcon }}>
                         <AccountCircleIcon className={classes.icon} />
-                        <ListItemText primary='Mon compte'>
+                        <ListItemText primary='Mon profil'>
                         </ListItemText>
                         </ListItem>
                       </a>
@@ -447,7 +447,7 @@ class HeaderPersonnalise extends React.Component {
                     <Link href="/Parametres"  >
                       <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
                         <SettingsIcon className={classes.icon} />
-                        <ListItemText primary='Paramètres de notification'>
+                        <ListItemText primary='Paramètres'>
                         </ListItemText>
                       </ListItem></a>
                     </Link>
@@ -575,14 +575,14 @@ class HeaderPersonnalise extends React.Component {
                   </div>
                 </List>
               </section>
-              <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
+              {/* <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
 
                 <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.desktopMenuItem}>
                   <ListItemText primary='Espace recruteurs'>
                   </ListItemText>
                   <ArrowForward className={classes.icon} />
                 </a>
-              </section>
+              </section> */}
             </Toolbar>
           </AppBar>)
           :

nextjs/components/organisms/OffreDetail.js

@@ -750,7 +750,7 @@ function OffreDetail(props) {
 
                 {/* <a href={entrepriseLink}> */}
                 {/* const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`); */}
-               
+                <link rel="preload" as="image" href={isWidthUp('xs', props.width) ? imgUrlDesktop : imgUrl}/>
                 <Link href={`/Player?id=${offre.company.id}&url=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.company.presentation_video.cdn_url, '/'))}&typeEntite=Entreprise&nameCompany=${offre.company.brand_name}&nameOffre=`} >   
                     <div className={classes.discoverContainerImage}>
                         <img src={isWidthUp('sm', props.width) ? imgUrlDesktop : imgUrl} alt={offre.company.brand_name && offre.company.brand_name} />
@@ -831,7 +831,7 @@ function OffreDetail(props) {
                                      
                                         {/* <VideoVimeo  {...isCandidature == 'true' ? 'classes={{ video: classes.videoOffre }}' : ''} videoId={Ar.last(_.split(offre.video.cdn_url, '/'))} autoplay='1' /> */}
                                         <div className={classes.contentContainer}>
-                                            
+                                            <link rel="preload" as="image" href={isWidthUp('xs', props.width) ? imgUrlDesktopOffre : imgUrlOffre}/>
                                             <Link href={`/Player?id=${offre.id}&url=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.video.cdn_url, '/'))}&typeEntite=Offre&nameCompany=${offre.company && offre.company.brand_name}&nameOffre=${offre.title}`} >   
                                                     <div className={classes.discoverContainerImage}>
                                                         <img  src={isWidthUp('sm', props.width) ? imgUrlDesktopOffre : imgUrlOffre} alt={offre.company.brand_name && offre.company.brand_name} />
@@ -845,7 +845,7 @@ function OffreDetail(props) {
                                                         </div>
                                                         <KeyboardArrowleftIcon className={classes.iconPlay} />
                                                         <Typography variant="h3" component="h3" className={classes.playerTexte}>
-                                                            Lire la vidéo
+                                                            Lire la vidéo.
                                                         </Typography>
                                                     </div>
                                             </Link>         
@@ -879,7 +879,7 @@ function OffreDetail(props) {
 
                                                 {/* <a href={entrepriseLink}> */}
                                                 {/* const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`); */}
-                                            
+                                                <link rel="preload" as="image" href={isWidthUp('xs', props.width) ? imgUrlDesktop : imgUrl}/>
                                                 <Link href={`/Player?id=${offre.company.id}&url=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.company.presentation_video.cdn_url, '/'))}&typeEntite=Entreprise&nameCompany=${offre.company.brand_name}&nameOffre=`} >   
                                                     <div className={classes.discoverContainerImage}>
                                                         <img src={isWidthUp('sm', props.width) ? imgUrlDesktop : imgUrl} alt={offre.company.brand_name && offre.company.brand_name} />
@@ -900,6 +900,7 @@ function OffreDetail(props) {
                                     {offre.territories && territoryVideoId && (
                                         <div className={classes.container + ' ' + classes.discoverContainerTerritory}>
                                             <section>
+                                            <link rel="preload" as="image" href={isWidthUp('xs', props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire}/>
                                                 <Link href={`/Player?id=${offre.territories[0].territory.id}&url=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${territoryVideoId}&typeEntite=Territoire&nameCompany=${offre.territories[0].territory.brand_name}&nameOffre=`} >   
                                                     <div className={classes.discoverContainerImage}>
                                                         <img src={isWidthUp('sm', props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire} alt={(!!!offre.territories) ? offre.territories[0].territory.brand_name : ''} />
@@ -984,8 +985,8 @@ function OffreDetail(props) {
             </Hidden>                        
             {/* PARTIE MOBILE */}   
             <Hidden mdUp>
-                <section className={classes.contentContainerMobile}>
-                                            
+                <section className={classes.contentContainerMobile}>                      
+                    <link rel="preload" as="image" href={isWidthUp('xs', props.width) ? imgUrlDesktopOffre : imgUrlOffre}/>
                     <Link href={`/Player?id=${offre.id}&url=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.video && offre.video.cdn_url, '/'))}&typeEntite=Offre&nameCompany=${offre.company && offre.company.brand_name}&nameOffre=${offre.title}`} >   
                             <div className={classes.discoverContainerImage}>
                                 <img  src={isWidthUp('xs', props.width) ? imgUrlDesktopOffre : imgUrlOffre} alt={offre.company && offre.company.brand_name && offre.company.brand_name} />
@@ -1046,10 +1047,10 @@ function OffreDetail(props) {
                         <div className={classes.container + ' ' + classes.discoverContainerCompany}>
                             <section>
                                 
-
+                           
                                 {/* <a href={entrepriseLink}> */}
                                 {/* const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`); */}
-                            
+                                <link rel="preload" as="image" href={isWidthUp('xs', props.width) ? imgUrlDesktop : imgUrl}/>
                                 <Link href={`/Player?id=${offre.company.id}&url=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.company.presentation_video.cdn_url, '/'))}&typeEntite=Entreprise&nameCompany=${offre.company.brand_name}&nameOffre=`} >   
                                     <div className={classes.discoverContainerImage}>
                                         <img src={isWidthUp('xs', props.width) ? imgUrlDesktop : imgUrl} alt={offre.company.brand_name && offre.company.brand_name} />
@@ -1070,6 +1071,7 @@ function OffreDetail(props) {
                     {offre.territories && territoryVideoId && (
                         <div className={classes.container + ' ' + classes.discoverContainerTerritory}>
                             <section>
+                            <link rel="preload" as="image" href={isWidthUp('xs', props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire}/>
                                 <Link href={`/Player?id=${offre.territories[0].territory.id}&url=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${territoryVideoId}&typeEntite=Territoire&nameCompany=${offre.territories[0].territory.brand_name}&nameOffre=${offre.title}`} >   
                                     <div className={classes.discoverContainerImage}>
                                         <img src={isWidthUp('sm', props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire} alt={(!!!offre.territories) ? offre.territories[0].territory.brand_name : ''} />

nextjs/components/organisms/Register.js

@@ -32,6 +32,26 @@ const styles = theme => ({
         display: 'flex',
         flexDirection: 'column',
     },
+    connexionRecruteur:{
+        textAlign : "center",
+        marginTop:"40px",
+        backgroundColor:"#1E2327",
+        padding:"30px 0",
+        width:"100%",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '300',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+
+    },
+    enSavoirPlus:{
+        textAlign : "center",
+        textDecoration :"none",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '600',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    },
     formText: {
         padding: theme.spacing(0, 2),
         paddingTop: theme.spacing(3),
@@ -101,6 +121,18 @@ const styles = theme => ({
         marginTop: theme.spacing(6),
         marginBottom: theme.spacing(2),
     },
+    titre: {
+        fontWeight: 600,
+        fontSize: "1.875em",
+        marginBottom:"20px",
+        fontFamily: "Roboto",
+    },
+    cgu: {
+        fontFamily: "Roboto",
+        fontSize: "1em",
+        fontWeight: "300",
+
+    },
 });
 
 class Register extends React.Component {
@@ -108,6 +140,7 @@ class Register extends React.Component {
         data: {
             firstname: '',
             lastname: '',
+            phone: '',
             email: '',
             password: '',
             checkNewsletter: false,
@@ -118,7 +151,9 @@ class Register extends React.Component {
             email:null,
             password:null,
             firstname:null,
+            phone:null,
             lastname:null,
+            phone:null,
             checkCGU:null
         },
         loading: false,
@@ -196,19 +231,12 @@ class Register extends React.Component {
 
                 <form className={classes.form}>
 
-                    <TextField
-                        className={classes.champ}
-                        value={data.lastname}
-                        onChange={this.onChange}
-                        id="nom"
-                        name="lastname"
-                        label="Nom"
-                        margin="normal"
-                        variant="outlined"
-                        required
-                        error={!!errors.lastname}
-                        helperText={!!errors.lastname && "Veuillez saisir votre nom."}
-                    />
+                    <Typography
+                        className={classes.titre}    
+                        align="left"
+                    >
+                        Inscription   
+                    </Typography>
                     <TextField
                         value={data.firstname}
                         onChange={this.onChange}
@@ -222,6 +250,33 @@ class Register extends React.Component {
                         helperText={!!errors.firstname && "Veuillez saisir votre prénom."}
                     />
 
+                    <TextField
+                        className={classes.champ}
+                        value={data.lastname}
+                        onChange={this.onChange}
+                        id="nom"
+                        name="lastname"
+                        label="Nom"
+                        margin="normal"
+                        variant="outlined"
+                        required
+                        error={!!errors.lastname}
+                        helperText={!!errors.lastname && "Veuillez saisir votre nom."}
+                    />
+
+                    <TextField
+                        className={classes.champ}
+                        value={data.phone}
+                        onChange={this.onChange}
+                        id="telephone"
+                        name="phone"
+                        label="Téléphone"
+                        margin="normal"
+                        variant="outlined"
+                    />
+
+                    
+
                     <TextField
                         value={data.email}
                         onChange={this.onChange}
@@ -233,7 +288,6 @@ class Register extends React.Component {
                         variant="outlined"
                         required
                         error={!!errors.email || !!erreurs}
-                        autoComplete="username email"
                         helperText={!!errors.email  ? "Saisissez une adresse e-mail valide." : !!erreurs && erreurs}
                     />
 
@@ -293,7 +347,7 @@ class Register extends React.Component {
                         label="Je déclare avoir pris connaissance et accepte les termes et les CGU *"
                         required
                     />
-                    <Link href={`/Cgu`} >Lien vers les CGU</Link>
+                    <Link href={`/Cgu`} className={classes.cgu}>Lire les CGU</Link>
                     <Button type="submit" variant="contained" className={classes.button + ' ' + classes.buttonImportant + ' cypButtonRegister'} onClick={this.onRegister}>
                         S'inscrire
                     </Button>
@@ -321,6 +375,9 @@ class Register extends React.Component {
                         </Link>
                     </Typography>
                 </div>
+                <div className={classes.connexionRecruteur}>
+                    Vous êtes recruteur ? <a className={classes.enSavoirPlus} href='https://recruteur.talentstube.com'><span >En savoir plus</span></a>
+                </div>
                 <Snack name= 'snackWarning'
                     variant= 'warning'
                     message={errors.message}
@@ -335,6 +392,7 @@ function mapStateToProps(state) {
     return {
         loading: !!state.user.loading,
         errors: !!state.user.errors ?state.user.errors: {
+            phone:null,
             email:null,
             password:null,
             firstname:null,

nextjs/next.config.js

@@ -55,7 +55,7 @@ module.exports = withPlugins(
         blogUrl: 'https://blog.talentstube.com',
         frontServerUrl: 'https://pp.app.talentstube.com/',
         cvThequeUrl: 'https://recruteur.talentstube.com',
-        version : 'V2.7.2',
+        version : 'V2.10.2',
         adListDefaultUrl: '/statique/images/default/default_picture_company.jpg',
         cachedMediaUrl: '/media/cache/profile_thumb/uploads/img/',
         postedContentUrl: '/uploads/img/',

nextjs/out/sitemap_local.xml

@@ -1,5 +1,50 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/33190-les-francas-doubs/</loc>
+    <lastmod>2021-04-26</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/148-educateur-de-jeunes-enfants-f-h</loc>
+    <lastmod>2021-04-26</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/146-animateur-ado-f-h</loc>
+    <lastmod>2021-04-17</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/144-soudeur-f-h</loc>
+    <lastmod>2021-04-19</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/143-dessinateur-3-d-f-h</loc>
+    <lastmod>2021-04-19</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/142-charge-daffaires-f-h</loc>
+    <lastmod>2021-03-24</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=146&amp;url=/Offre/146-animateur-ado-f-h&amp;videoId=535772088&amp;typeEntite=Offre&amp;nameCompany=Les%20Francas%20du%20Doubs&amp;nameOffre=Animateur%20Ado%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>	
+  <url>
+    <loc>https://www.talentstube.com/Player?id=135&amp;url=/Offre/135-commercial-b-to-c-f-h&amp;videoId=502499843&amp;typeEntite=Offre&amp;nameCompany=Fym%20Action&amp;nameOffre=Commercial%20B%20to%20C%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>	
+  <url>
+    <loc>https://www.talentstube.com/Player?id=135&amp;url=/Offre/135-commercial-b-to-c-f-h&amp;videoId=502499843&amp;typeEntite=Offre&amp;nameCompany=Fym%20Action&amp;nameOffre=Commercial%20B%20to%20C%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>	
   <url>
     <loc>https://www.talentstube.com/Player?id=135&amp;url=/Offre/135-commercial-b-to-c-f-h&amp;videoId=502499843&amp;typeEntite=Offre&amp;nameCompany=Fym%20Action&amp;nameOffre=Commercial%20B%20to%20C%20(F/H)</loc>
     <lastmod>2021-02-10</lastmod>
@@ -144,7 +189,13 @@
     <loc>https://www.talentstube.com/Player?id=12480&amp;url=/Entreprise/12480-fym-action&amp;videoId=345898361&amp;typeEntite=Entreprise&amp;nameCompany=Fym%20Action&amp;nameOffre=</loc>
     <lastmod>2021-02-10</lastmod>
     <priority>1.00</priority>
-  </url><url>
+  </url>
+   <url>
+    <loc>https://www.talentstube.com/Offre/143-dessinateur-3d-f-h</loc>
+    <lastmod>2021-03-31</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
     <loc>https://www.talentstube.com/Offre/140-aide-a-domicile-f-h</loc>
     <lastmod>2021-02-10</lastmod>
     <priority>1.00</priority>
@@ -159,6 +210,11 @@
     <lastmod>2021-01-18</lastmod>
     <priority>1.00</priority>
   </url>
+  <url>
+    <loc>https://www.talentstube.com</loc>
+    <lastmod>2021-03-09</lastmod>
+    <priority>1.00</priority>
+  </url>
   <url>
     <loc>https://www.talentstube.com/Offres</loc>
     <lastmod>2021-01-18</lastmod>

nextjs/package.json

@@ -62,6 +62,7 @@
     "react-redux-loading-bar": "^5.0.0",
     "react-router-dom": "^5.2.0",
     "react-select": "^3.1.1",
+    "react-slick": "^0.28.1",
     "react-sticky-box": "^0.9.3",
     "react-swipeable-views": "^0.13.3",
     "reactstrap": "^6.4.0",

nextjs/pages/Candidatures.js

@@ -1,5 +1,5 @@
 
-import React from 'react';
+import React, { useState } from 'react'
 import { connect } from "react-redux";
 import PropTypes from 'prop-types';
 import _ from "lodash"
@@ -12,8 +12,34 @@ import { fetchJobsAnsweredRequest } from '../actions/answer'
 import { AnswersSelector } from '../reducers/answers'
 import Head from 'next/head'
 import Link from 'next/link';
+import AppBar from '@material-ui/core/AppBar';
+import Paper from '@material-ui/core/Paper';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Box from '@material-ui/core/Box';
+import GridBouton from '@material-ui/core/Grid';
+import IconButton from '@material-ui/core/IconButton';
+import AccountIcon from '@material-ui/icons/AccountCircle';
+import MovieIcon from '@material-ui/icons/Movie';
+import DescriptionIcon from '@material-ui/icons/Description';
 
 const styles = theme => ({
+    menu: {
+        flexGrow: 1,
+    },
+    menu2: {
+        flexGrow: 1,
+        textAlign: 'center',
+        justifyContent: 'center',
+        padding: theme.spacing(2),
+        
+    },
+    indicatorColor:{
+        backgroundColor: theme.palette.primary.main,
+    },
+    textColor:{
+        color: theme.palette.primary.dark,
+    },
     root: {
         position: 'relative',
         textAlign: 'center',
@@ -41,13 +67,83 @@ const styles = theme => ({
       marginBottom: theme.spacing(3),
       padding: theme.spacing(0, 8),
     },
+    boutonAction:{
+        border: "none",
+        height: "6em",
+        padding: "1em",
+        backgroundColor: theme.palette.primary.main,
+        textAlign: "left",
+        borderRadius: "20px",
+        cursor: "pointer",
+        boxShadow: "0px 2px 5px rgb(30 35 39 / 5%)",
+        transition: "background-color 0.3s",
+        transition: "box-shadow 0.5s",
+        color: "#fff !important"
+    },
+    conteneurbouton:{
+        width:"100%",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "space-around"
+    },
+    conteneurbouton1:{
+        width:"30%",
+        display:"inline-block",
+        paddingRight:"2em",
+    },
+    conteneurbouton2:{
+        width:"30%",
+        display:"inline-block",
+        paddingRight:"2em",
+    },
+    conteneurbouton3:{
+        width:"30%",
+        display:"inline-block",
+        paddingRight:"2em",
+    },
+    paper: {
+        width: "100%",
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+        
+      },
 
 });
-
 class Candidatures extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+
+    }
+
+    state = {
+        value: "",
+        setValue:"",
+    }
+
+    componentDidMount() {
+        this.setState({
+            value: 0,
+        })
+        
+    }
 
     render() {
         const { classes } = this.props;
+        const tabData = 0;
+        const handleChange = (event, newValue) => {
+            this.setState({
+                    value: newValue,
+            })
+            if(newValue==0){
+                document.location.href="/Candidatures";
+            }else if(newValue==1){
+                document.location.href="/profileStep";
+            }else if(newValue==2){
+                document.location.href="/Parametres";
+            }
+            
+            //
+            console.log(newValue);
+        };
 
         return (
             <LayoutGrid backLink="/">
@@ -55,14 +151,158 @@ class Candidatures extends React.Component {
                 <title key="title">Candidatures</title>
                 <meta name="robots" content="noindex, nofollow"></meta>
             </Head>
+            {/* <div className={classes.root}>
+                <AppBar position="static" color="default">
+                    <Tabs
+                    value={this.state.value}
+                    onChange={handleChange}
+                    indicatorColor="primary"
+                    textColor="primary"
+                    variant="scrollable"
+                    scrollButtons="auto"
+                    aria-label="scrollable auto tabs example"
+                    >
+                    <Tab label="Item One" {...a11yProps(0)} />
+                    <Tab label="Item Two" {...a11yProps(1)} />
+                    <Tab label="Item Three" {...a11yProps(2)} />
+                    <Tab label="Item Four" {...a11yProps(3)} />
+                    <Tab label="Item Five" {...a11yProps(4)} />
+                    <Tab label="Item Six" {...a11yProps(5)} />
+                    <Tab label="Item Seven" {...a11yProps(6)} />
+                    </Tabs>
+                </AppBar>
+                <TabPanel value={this.state.value} index={0}>
+                    Item One
+                </TabPanel>
+                <TabPanel value={this.state.value} index={1}>
+                    Item Two
+                </TabPanel>
+                <TabPanel value={this.state.value} index={2}>
+                    Item Three
+                </TabPanel>
+                <TabPanel value={this.state.value} index={3}>
+                    Item Four
+                </TabPanel>
+                <TabPanel value={this.state.value} index={4}>
+                    Item Five
+                </TabPanel>
+                <TabPanel value={this.state.value} index={5}>
+                    Item Six
+                </TabPanel>
+                <TabPanel value={this.state.value} index={6}>
+                    Item Seven
+                </TabPanel>
+                </div> */}
+                <div>
+                    <Paper className={classes.menu}>
 
-                {/* TODO */}
+                            <Tabs
+                            value={this.state.value}
+                            onChange={handleChange}
+                            indicatorColor="primary"
+                            textColor="primary"
+                            centered
+                            >
+                                <Tab label="Mes candidatures" />
+                                <Tab label="Mon profil" />
+                                
+                            </Tabs>
+                    </Paper>
+                   
+                </div>
+                
+                {/* Boutons d'actions */}
+
+                {/* <div className={classes.conteneurbouton}>
+                    <div className={classes.conteneurbouton1}>
+                        <div className={classes.boutonAction}>test</div>
+                    </div>
+                    <div className={classes.conteneurbouton2}>
+                        <div className={classes.boutonAction}>test2</div>
+                    </div>
+                    <div className={classes.conteneurbouton3}>
+                        <div className={classes.boutonAction}>test3</div>
+                    </div>
+                </div> */}
+                <GridBouton container className={classes.menu2} spacing={4}>
+                    <GridBouton item xs={12} sm={1} lg={1} >
+                    </GridBouton >
+                    <GridBouton item xs={12} sm={10} lg={10} >
+                        <GridBouton container justify="center" spacing={4}>
+                            <GridBouton key={0} item  xs={12} sm={4} >
+                                <Link href={"/profileStep#information"} >
+                                    <Paper className={classes.paper}  elevation={0}>
+                                        <div className={classes.boutonAction}>
+                                            <div>
+                                                <IconButton
+                                                    key="info"
+                                                    color="inherit"
+                                                    className={classes.close}
+                                                    
+                                                >
+                                                <AccountIcon />
+                                            </IconButton>
+                                            </div>
+                                            Compléter mes informations
+                                        </div>
+                                    </Paper>
+                                </Link>
+                            </GridBouton>
+                            <GridBouton key={1} item  xs={12} sm={4}>
+                                <Link href={"/profileStep#video"} >
+                                    <Paper className={classes.paper}  elevation={0}>
+                                        <div className={classes.boutonAction}>
+                                            <div>
+                                                <IconButton
+                                                    key="video"
+                                                    color="inherit"
+                                                    className={classes.close}
+                                                >
+                                                    <MovieIcon />
+                                                </IconButton>
+                                            </div>
+                                            Ajouter ma vidéo de présentation
+                                        </div>
+                                    </Paper>
+                                </Link>
+                            </GridBouton>
+                            <GridBouton key={2} item  xs={12} sm={4}>
+                                    <Link href={"/profileStep#cv"} >
+                                    <Paper className={classes.paper}  elevation={0}>
+                                        
+                                        <div className={classes.boutonAction}>
+                                            <div>
+                                                <IconButton
+                                                    key="cv"
+                                                    color="inherit"
+                                                    className={classes.close}
+                                                >
+                                                    <DescriptionIcon />
+                                                </IconButton>
+                                            </div>
+                                            Ajouter mon CV
+                                        </div>
+                                    </Paper>
+                                </Link>
+                            </GridBouton>
+                        </GridBouton>
+                    </GridBouton>
+                    <GridBouton item xs={12} sm={1} lg={1} >
+                    </GridBouton >
+                </GridBouton>
+                
+                
                 <Typography component="h1" align="center" className={classes.title} gutterBottom>
                     Mes candidatures
                 </Typography>
 
                 <div className={classes.container}>
+                
 
+
+
+
+                    
                     <Grid CustomRowComponent={AnswerRow}
                         dataFetcher={this.props.fetchJobsAnsweredRequest}
                         data={this.props.answers}

nextjs/pages/Inscription.js

@@ -136,7 +136,7 @@ const styles = theme => ({
     },
     buttonImportant: {
         marginTop: theme.spacing(6),
-    },
+    }
 });
 
 const recaptchaRef = React.createRef();
@@ -232,15 +232,9 @@ class LoginPage extends React.Component {
                         <Loader />
                     )}
                     {!loading && (
-                        <Fragment>
-                            
-                           
-
-                                
-                                    <Register linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} erreurs={errors.message} />
-                                
-                            
-                        </Fragment>
+                        <Fragment> 
+                             <Register linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} erreurs={errors.message} />
+                        </Fragment> 
                     )}
                 </div>
                 {/* <Snack name={success ? 'snackSuccess' : 'snackWarning'}

nextjs/pages/Login.js

@@ -83,7 +83,7 @@ const styles = theme => ({
     formLink: {
         paddingLeft: theme.spacing(1),
         fontWeight: '500',
-        cursor: 'pointer',
+        color: theme.palette.primary.dark,
     },
     forgetPasswordText: {
         marginTop: theme.spacing(2),
@@ -138,6 +138,32 @@ const styles = theme => ({
     buttonImportant: {
         marginTop: theme.spacing(6),
     },
+    titre: {
+        fontWeight: 600,
+        fontSize: "1.875em",
+        marginBottom:"20px",
+        fontFamily: "Roboto",
+    },
+    connexionRecruteur:{
+        textAlign : "center",
+        marginTop:"40px",
+        backgroundColor:"#1E2327",
+        padding:"30px 0",
+        width:"100%",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '300',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+
+    },
+    enSavoirPlus:{
+        textAlign : "center",
+        textDecoration :"none",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '600',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    },
 });
 
 const recaptchaRef = React.createRef();
@@ -273,6 +299,12 @@ class LoginPage extends React.Component {
                                 <TabContainer dir={'x'}>
                                     <div className={classes.tabContainer}>
                                         <form className={classes.form} onSubmit={this.onSubmit}>
+                                            <Typography
+                                                className={classes.titre}    
+                                                align="left"
+                                            >
+                                                   Connexion   
+                                            </Typography>
                                             <TextField
                                                 value={data.email}
                                                 id="email"
@@ -345,16 +377,22 @@ class LoginPage extends React.Component {
                                         {/* <SocialButtonsAuth linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} /> */}
 
                                         <div className={classes.form}>
-                                            <Typography
-                                                paragraph={true}
-                                                align="center"
-                                                className={classes.formText}
-                                            >Je ne possède pas de compte Talents Tube ?
-                                        
-                                                    <Link href="/Inscription">S'inscrire</Link>
-                                        
-                                            </Typography>
+                                        <Typography
+                                            paragraph={true}
+                                            align="center"
+                                            className={classes.formText}
+                                        >Je ne possède pas de compte Talents Tube ? 
+                                            <Link href={"/Inscription"} >
+                                                <span className={classes.formLink}>
+                                                    S'inscrire
+                                                </span>
+                                            </Link>
+                                        </Typography>
+                    
 
+                                        </div>
+                                        <div className={classes.connexionRecruteur}>
+                                            Vous êtes recruteur ? <a className={classes.enSavoirPlus} href='https://recruteur.talentstube.com'><span >Connexion</span></a>
                                         </div>
                                         <div className={classes.form}>
                                             <Typography

nextjs/pages/Player.js

@@ -70,7 +70,11 @@ class Player extends Component {
     }
     render() {
         const { classes, id, url, typeEntite, videoId, nameCompany, nameOffre } = this.props
-        
+        const urlEnv = process.env.NODE_ENV;
+        //pour la MEP
+        {/* A ENLEVER EN PROD */}
+        let nofollow = false;
+        urlEnv == "development" ? nofollow = true : nofollow = true;
         
         console.log(id);
         console.log(typeEntite);
@@ -94,8 +98,8 @@ class Player extends Component {
                 <NextSeo
                 title={titleVideo}
                 description={descriptionVideo}
-                noindex={true}
-                nofollow={true}
+                noindex={nofollow}
+                nofollow={nofollow}
                 openGraph={{
                     title: titleVideo,
                     description: descriptionVideo,

nextjs/pages/Reponse.js

@@ -328,8 +328,9 @@ class Reponse extends React.Component {
   render() {
     const { loading, activeStep } = this.state;
     const { classes, menu, offre, company } = this.props;
-    const logoUrl = (offre.company ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + offre.company.logo : '');
     const logoCompanyUrl = ((company && company.logo) ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + company.logo : '');
+    const logoUrl = (offre.company ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + offre.company.logo : logoCompanyUrl);
+    
 
     let rootStepper = activeStep === 0 ? (
       classes.rootStepperDefault
@@ -352,6 +353,7 @@ class Reponse extends React.Component {
            <div className={classes.titreContainer}>
               <div className={classes.logoContainer}>
                 <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoUrl}  alt="companylogo"/>
+                
               </div>
               <div className={classes.infoContainer}>
                 <Typography gutterBottom variant="h5" component="h1" className={classes.title}>
@@ -366,7 +368,7 @@ class Reponse extends React.Component {
           )
           }
           { !!company.brand_name && (<Fragment><div className={classes.logoContainer}>
-            {/* <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoCompanyUrl} alt="companylogo"/> */}
+            <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoCompanyUrl} alt="companylogo"/>
           </div>
           <div className={classes.infoContainer}>
             <Typography gutterBottom variant="h5" component="h1" className={classes.title}>

nextjs/pages/ResetPassword.js

@@ -116,7 +116,7 @@ class ResetPassword extends Component {
                         align="center"
                         variant="h5"
                     >
-                        Réinitialisation du mot de passe
+                        Modifier mot de passe
                     </Typography>
 
                     {loading && (

nextjs/pages/_document.js

@@ -32,7 +32,11 @@ class MyDocument extends Document {
           {/* PWA primary color */}
           <meta name="theme-color" content={theme.palette.primary.main} />
           <link rel="preload" href="/statique/css/fonts.css" rel="stylesheet">
+
           </link>
+          <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
+          <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
+          <link rel="stylesheet" type="text/css" href="/statique/css/autocomplete.css" />
           <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYV8IJGtIoWLfXJQQvIuDQ88n2aEuRgpg&libraries=places"></script>
           <script async type="text/javascript" src="/static/js/pwaInstaller.js" ></script>
           {/* Global Site Tag (gtag.js) - Google Analytics */}

nextjs/pages/index.js

@@ -12,15 +12,16 @@ import { connect } from 'react-redux'
 import { fetchEmphasisJobsRequest } from "../actions/ads";
 //const fetchEmphasisCompaniesRequest = lazy(() => import('../actions/companies'));
 import { fetchEmphasisCompaniesRequest } from "../actions/companies";
-import Loader from './../components/templates/loader'
+import Loader from '../components/templates/loader'
 import { isEmpty } from "lodash"
-import NoResult from './../components/atoms/NoResult';
+import NoResult from '../components/atoms/NoResult';
 // import Head from 'next/head'
 import dynamic from 'next/dynamic'
 import OgHead from '../components/atoms/OgHead';
 import getConfig from 'next/config'
 import { BreadcrumbJsonLd } from 'next-seo';
-
+import Slider from "react-slick";
+import Hidden from '@material-ui/core/Hidden';
 // const VideoSlider = dynamic(() => import('../components/organisms/ShortVideoHooker'), {
 //   ssr: false
 // });
@@ -79,6 +80,9 @@ const styles = theme => ({
   scrollerSectionCompany: {
     backgroundColor: theme.palette.background.grey,
   },
+  scrollerSectionSlider:{
+    backgroundColor: theme.palette.secondary.main,
+  },
   card: {
     margin: theme.spacing(1),
     width: '96%',
@@ -139,7 +143,233 @@ const styles = theme => ({
       margin: 'auto',
     },
   },
+  choix: {
+    color:"#fff",
+    position: "absolute",
+    top: "0",
+    bottom: "0",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "flex-start"
+  },
+  choixMobile: {
+    color:"#fff",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+
+  },
+  containerVideoGauche :{
+    position: "relative",
+    height:"100%",
+    width:"50%",
+    backgroundImage: 'url("/statique/images/accueil/trouver-un-job.jpg")',
+   
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    backgroundBlendMode: 'darken',
+    backgroundColor: 'rgba(30,35,39,0.4)',
+  },
+  containerVideoDroite :{
+    position: "relative",
+    backgroundColor:"red",
+    height:"100%",
+    width:"50%",
+    backgroundImage: 'url("/statique/images/accueil/recruter-des-talents.jpg") ',
+    
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    backgroundBlendMode: 'darken',
+    backgroundColor: 'rgba(30,35,39,0.5)',
+  },
+  containerVideoMobile :{
+    height:"100%",
+    width:"100%",
+    backgroundImage: 'url("/statique/images/accueil/trouver-un-job.jpg")',
+    padding :"0 30px",
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    backgroundBlendMode: 'darken',
+    backgroundColor: 'rgba(30,35,39,0.5)',
+  },
+  containerTitre :{
+
+  },
+  wrap :{
+    [theme.breakpoints.up('md')]: {
+      height: "85%",
+      width: "100%",
+      position: "relative",
+    },
+    height: "100%",
+    width: "100%",
+    position: "relative",
+  },
+  headerTitre :{
+    backgroundColor:"transparent",
+    height: "100px",
+    width: "100%",
+    position: "absolute",
+    top: "30px",
+    textAlign:"center",
+    color:"#fff",
+    zIndex : "1000"
+  },
+  headerTitreMobile :{
+    width: "100%",
+    textAlign:"center",
+    color:"#fff",
+    marginBottom:"30px"
+  },
+  blocRecruteur:{
+    backgroundColor:"#fff",
+    bottom:"40px", 
+    left:"60px",
+    position: "absolute",
+    padding:"50px",
+    fontWeight: "600",
+    minWidth:"40%",
+    borderRadius:"5px",
+  },
+  blocCandidat:{
+    backgroundColor:"#fff",
+    bottom:"40px", 
+    right:"60px",
+    position: "absolute",
+    padding:"50px",
+    fontWeight: "600",
+    minWidth:"40%",
+    borderRadius:"5px",
+  },
+  blocRecruteurMobile:{
+    backgroundColor:"#fff",
+    padding:"20px",
+    fontWeight: "600",
+    minWidth:"90%",
+    borderRadius:"5px",
+    margin :"15px 0"
+  },
+  blocCandidatMobile:{
+    backgroundColor:"#fff",
+    padding:"20px",
+    fontWeight: "600",
+    minWidth:"90%",
+    borderRadius:"5px",
+    margin :"60px 0 15px 0"
+  },
+  titreAccueil:{
+    fontSize:"2.5em",
+    textAlign:"center",
+    color:"#fff",
+    paddingTop:"0px",
+    fontWeight: "600",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+  },
+  titreAccueil2:{
+    fontSize:"1.5em",
+    textAlign:"center",
+    color:"#fff",
+    paddingTop:"40px",
+    fontWeight: "400",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+  },
+  titreAccueilMobile:{
+    fontSize:"2.5em",
+    textAlign:"center",
+    color:"#fff",
+    paddingTop:"0px",
+    fontWeight: "600",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+  },
+  titreAccueil2Mobile:{
+    fontSize:"1.5em",
+    textAlign:"center",
+    color:"#fff",
+    paddingTop:"40px",
+    fontWeight: "400",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+  },
+  jeSuis:{
+    fontSize:"1em",
+    textTransform: "uppercase",
+    color:"#1E2327",
+    textAlign: "left",
+    fontWeight: "300",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    marginBottom:"1em"
+  },
+  jeSuisMobile:{
+    fontSize:"1em",
+    textTransform: "uppercase",
+    color:"#1E2327",
+    textAlign: "center",
+    fontWeight: "300",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    marginBottom:"1em"
+  },
+  action:{
+    fontSize:"1.5em",
+    color:"#1E2327",
+    textAlign: "left",
+    fontWeight: "600",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    marginBottom:"1.5em"
+  },
+  boutonCandidat:{
+    width:"100%",
+  },
+  boutonRecruteur:{
+    width:"100%",
+    color: theme.palette.secondary.main,
+    backgroundColor: theme.palette.primary.important,
+  },
+  boutonCandidatMobile:{
+    width:"100%",
+    margin : "0px !important"
+  },
+  boutonRecruteurMobile:{
+    width:"100%",
+    color: theme.palette.secondary.main,
+    backgroundColor: theme.palette.primary.important,
+    margin : "0px !important"
+  },
+  temoignage:{
+    textAlign:"center"
+  },
+  lien:{
+    textDecoration:'none',
+    color:'#fff'
+  },
+  alignVertical:{
+    verticalAlign:"middle !important",
+    maxHeight :"80px",
+    minHeight :"60px",
+    
+  },
+  alignVerticalMobile:{
+    verticalAlign:"middle !important",
+    maxHeight :"70px",
+    minHeight :"70px",
+    
+  },
+  sliderDiv:{
+    padding:"30px"
+  },
+  sliderDivMobile:{
+    display: "inline !important",
+    padding:"10px",
+    
+  },
+  sliderContainerMobile:{
+    textAlign:"center"
+  }
 });
+///
 
 class Index extends React.Component {
   state = {
@@ -159,7 +389,22 @@ class Index extends React.Component {
   }
   render() {
     const { classes } = this.props;
-    
+    const settings = {
+      dots: false,
+      infinite: true,
+      slidesToShow: 5,
+      slidesToScroll: 1,
+      autoplay: true,
+      autoplaySpeed: 2000
+    };
+    const settingsMobile = {
+      dots: false,
+      infinite: true,
+      slidesToShow: 2,
+      slidesToScroll: 2,
+      autoplay: true,
+      autoplaySpeed: 2000
+    };
     const socialShareUrl = typeof window !== 'undefined' ? window.location
             : publicRuntimeConfig.frontServerUrl ;
     const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
@@ -197,10 +442,90 @@ class Index extends React.Component {
         },
       ]}
     />
+        <div className={classes.wrap}>
+            
+            <Hidden smDown>
+              <header className={classes.headerTitre}>
+                  <h1 className={classes.titreAccueil}>La rencontre d’offres d’emploi et de candidatures en vidéo</h1>
+                  <span className={classes.titreAccueil2}>
+                  Parce que vous méritez mieux que du texte !
+                  </span>
+              </header>
+              <section className={classes.choix}>
+              
+                <div className={classes.containerVideoGauche}>
+                    
+                    <div className={classes.blocCandidat}>
+                        <div className={classes.jeSuis}>JE SUIS CANDIDAT</div>
+                        <div className={classes.action}>Je trouve un job</div>
+                        <Button
+                          variant="contained"
+                          color="primary"
+                          onClick={() => Router.push('/Offres')}
+                          className={classes.button + ' ' + classes.boutonCandidat}
+                        >Découvrir les offres
+                        </Button>
+
+
+                    </div>
+                </div>
+                <div className={classes.containerVideoDroite}>
+                  
+                  <div className={classes.blocRecruteur}>
+                    <div className={classes.jeSuis}>JE SUIS recruteur</div>
+                    <div className={classes.action}>Je recrute des talents</div>
+                    <a href='https://recruteur.talentstube.com' className={classes.lien}>
+                      <Button
+                          variant="contained"
+                          className={classes.button + ' ' + classes.boutonRecruteur}
+                        >Déposer une offre
+                    </Button>
+                    </a>
+                  </div>
+                </div>
+              </section>
+            </Hidden>
+            {/* PARTIE MOBILE */}   
+            <Hidden mdUp>
+              
+              <section className={classes.choixMobile}>
+                  
+                  <div className={classes.containerVideoMobile}>
+                    <div className={classes.headerTitreMobile}>
+                      <h1 className={classes.titreAccueilMobile}>La rencontre d’offres d’emploi et de candidatures en vidéo</h1>
+                        <span className={classes.titreAccueil2Mobile}>
+                        Parce que vous méritez mieux que du texte !
+                        </span>
+                    </div>
+                    <div className={classes.blocCandidatMobile}>
+                        <div className={classes.jeSuisMobile}>JE SUIS CANDIDAT</div>
+                        <Button
+                          variant="contained"
+                          color="primary"
+                          onClick={() => Router.push('/Offres')}
+                          className={classes.button + ' ' + classes.boutonCandidatMobile}
+                        >Je trouve un job
+                        </Button>
+                    </div>
+                    <div className={classes.blocRecruteurMobile}>
+                      <div className={classes.jeSuisMobile}>JE SUIS recruteur</div>
+                      
+                      <a href='https://recruteur.talentstube.com' className={classes.lien}>
+                        <Button
+                            variant="contained"
+                            className={classes.button + ' ' + classes.boutonRecruteurMobile}
+                          >Je recrute des talents
+                      </Button>
+                      </a>
+                    </div>
+                  </div>
+              </section>  
+            </Hidden>
+          </div>
         <div className={classes.container}>
 
           {/* <VideoSlider /> */}
-
+          
           <section className={classes.scrollerSection + ' ' + classes.scrollerSectionOffer}>
             <div
               className={classes.HorizontalScrollerOffre}
@@ -210,7 +535,7 @@ class Index extends React.Component {
                   className={classes.beforeTitle}>
                   à la une
               </Typography>
-                <Typography gutterBottom component="h1"
+                <Typography gutterBottom component="h2"
                   className={classes.title}>
                   Les offres d'emploi en <span className={classes.primary}>vidéo</span>
                 </Typography>
@@ -249,7 +574,7 @@ class Index extends React.Component {
                   className={classes.beforeTitle}>
                   à la une
               </Typography>
-                <Typography gutterBottom component="h1"
+                <Typography gutterBottom component="h2"
                   className={classes.title}>
                   Les entreprises en <span className={classes.primary}>vidéo</span>
                 </Typography>
@@ -281,6 +606,185 @@ class Index extends React.Component {
           </Button>
           </section>
 
+          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionCompany}>
+            <div
+              className={classes.HorizontalScrollerOffre}
+            >
+              <div className={classes.titleContainer}>
+                <Typography gutterBottom
+                  className={classes.beforeTitle}>
+                  Témoignage
+              </Typography>
+                <Typography gutterBottom component="h2"
+                  className={classes.title}>
+                  Le recrutement en <span className={classes.primary}>vidéo</span>
+                </Typography>
+              </div>
+              <div className={classes.temoignage}>
+                {/* PARTIE DEsktop */}   
+                <Hidden smDown>
+                  <iframe width="70%" height="450" src="https://www.youtube.com/embed/sKh0u7Mbdps" 
+                  frameborder="0" 
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                  allowfullscreen></iframe>
+                </Hidden>
+                {/* PARTIE MOBILE */}   
+                <Hidden mdUp>
+                <iframe width="90%" height="450" src="https://www.youtube.com/embed/sKh0u7Mbdps" 
+                  frameborder="0" 
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                  allowfullscreen></iframe>
+                </Hidden>
+
+              </div>    
+              
+            </div>
+
+            
+          </section>
+          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionSlider}>
+          {/* PARTIE DEsktop */}   
+          <Hidden smDown>
+            <Slider ref={slider => (this.slider = slider)} {...settings}>
+            <a href="/Entreprise/21247-lactalis-logistique-et-transports">        
+              <div className={classes.sliderDiv}>
+                <img className={classes.alignVertical} alt="Offres d'emploi Lactalis" src="/statique/images/logos/recrutement-video-lactalis.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/28481-onela"> 
+              <div className={classes.sliderDiv}>
+                <img className={classes.alignVertical} alt="Offres d'emploi Onela" src="/statique/images/logos/recrutement-video-onela-service-a-domicile.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/19205-intermarche-logistique-alimentaire-international"> 
+              <div className={classes.sliderDiv}>
+              <img  className={classes.alignVertical} alt="Offres d'emploi Intermarché" src="/statique/images/logos/recrutement-video-intermarche.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/4059-eiffage-construction-grand-ouest"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Eiffage" src="/statique/images/logos/recrutement-video-eiffage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/8639-mma-questembert"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi MMA" src="/statique/images/logos/recrutement-video-mma-assurances.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32987-admr-56"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi ADMR" src="/statique/images/logos/recrutement-video-ADMR.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/13464-jpa"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi JPA" src="/statique/images/logos/recrutement-video-jpa.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/2527-groupe-mousset"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Groupe Mousset" src="/statique/images/logos/recrutement-video-groupe-mousset.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/1467-groupe-rocher-operations"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Groupe Rocher" src="/statique/images/logos/recrutement-video-groupe-rocher.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/26064-aer-recyclage"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi AER Recyclage" src="/statique/images/logos/recrutement-video-aer-recyclage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/46-actual"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Actual" src="/statique/images/logos/recrutement-video-actual.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/31934-la-centrale-des-ramoneurs"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi La centrale des ramoneurs" src="/statique/images/logos/recrutement-video-la-centrale-des-ramoneurs.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32507-tpc-ouest">
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi TPC Ouest" src="/statique/images/logos/recrutement-video-tpc-ouest-btp.jpg"></img>
+              </div>
+            </a>
+            
+          </Slider>
+        </Hidden>
+        {/* PARTIE Mobile */}   
+        <Hidden mdUp>
+          <div  className={classes.sliderContainerMobile}>
+          <a href="/Entreprise/21247-lactalis-logistique-et-transports" >        
+              <div className={classes.sliderDivMobile}>
+                <img className={classes.alignVerticalMobile} alt="Offres d'emploi Lactalis" src="/statique/images/logos/recrutement-video-lactalis.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/28481-onela" > 
+              <div className={classes.sliderDivMobile}>
+                <img className={classes.alignVerticalMobile} alt="Offres d'emploi Onela" src="/statique/images/logos/recrutement-video-onela-service-a-domicile.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/19205-intermarche-logistique-alimentaire-international" > 
+              <div className={classes.sliderDivMobile}>
+              <img  className={classes.alignVerticalMobile} alt="Offres d'emploi Intermarché" src="/statique/images/logos/recrutement-video-intermarche.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/4059-eiffage-construction-grand-ouest" > 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Eiffage" src="/statique/images/logos/recrutement-video-eiffage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/8639-mma-questembert" > 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi MMA" src="/statique/images/logos/recrutement-video-mma-assurances.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32987-admr-56" > 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi ADMR" src="/statique/images/logos/recrutement-video-ADMR.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/13464-jpa"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi JPA" src="/statique/images/logos/recrutement-video-jpa.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/2527-groupe-mousset"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Groupe Mousset" src="/statique/images/logos/recrutement-video-groupe-mousset.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/1467-groupe-rocher-operations"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Groupe Rocher" src="/statique/images/logos/recrutement-video-groupe-rocher.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/26064-aer-recyclage"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi AER" src="/statique/images/logos/recrutement-video-aer-recyclage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/46-actual"> 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Actual" src="/statique/images/logos/recrutement-video-actual.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/31934-la-centrale-des-ramoneurs"> 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi La centrale des ramoneurs" src="/statique/images/logos/recrutement-video-la-centrale-des-ramoneurs.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32507-tpc-ouest">
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="TPC Ouest" src="/statique/images/logos/recrutement-video-tpc-ouest-btp.jpg"></img>
+              </div>
+            </a>   
+          </div>
+        </Hidden>
+        </section>        
           <Footer />
         </div>
       </Layout>

nextjs/pages/index1.js

@@ -1,750 +0,0 @@
-import React from 'react';
-import AppBar from '@material-ui/core/AppBar';
-import Button from '@material-ui/core/Button';
-import CameraIcon from '@material-ui/icons/PhotoCamera';
-import Card from '@material-ui/core/Card';
-import CardActions from '@material-ui/core/CardActions';
-import CardContent from '@material-ui/core/CardContent';
-import CardMedia from '@material-ui/core/CardMedia';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import Grid from '@material-ui/core/Grid';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import {makeStyles} from '@material-ui/core/styles';
-import Container from '@material-ui/core/Container';
-import Link from '@material-ui/core/Link';
-import VideoVimeo from '../components/atoms/VideoVimeo'
-import 'video-react/dist/video-react.css';
-import {Player} from 'video-react';
-import Hidden from '@material-ui/core/Hidden';
-import dynamic from 'next/dynamic'
-import OgHead from '../components/atoms/OgHead';
-import getConfig from 'next/config'
-
-const Footer = dynamic(() => import ('../components/organisms/FooterAccueil'), {ssr: false});
-
-function Copyright() {
-    return (
-        <Typography variant="body2" color="textSecondary" align="center">
-            {'Copyright © '}
-            <Link color="inherit" href="https://material-ui.com/">
-                Your Website
-            </Link>{' '} {new Date().getFullYear()}
-            {'.'}
-        </Typography>
-    );
-}
-
-const useStyles = makeStyles((theme) => ({
-    icon: {
-        marginRight: theme.spacing(2)
-    },
-    actionBtn: {
-        marginBottom: "0.75em",
-        display: "block"
-    },
-    bttn: {
-        color: "#fff",
-        background: "#FF6A6C",
-        border: "2px solid #FF6A6C",
-        padding: "15px"
-    },
-    heroSection: {
-        //  background:
-        // "url('https://blog.talentstube.com/wp-content/uploads/2021/02/realisation-off
-        // r e-emploi-video-smartphone-modele.jpg') center center no-repeat scroll",
-        // backgroundSize: "cover",
-        padding: "5em 0 9em",
-        position: "relative",
-        color: "#fff",
-        [
-            theme
-                .breakpoints
-                .down('md')
-        ]: {
-            background: "url('/statique/images/accueil/offre-emploi.jpg') center center no-repeat scroll",
-            backgroundSize: "cover",
-            height: "100%",
-            padding: "0"
-        }
-    },
-
-    mieuxQueTexteSection: {
-        paddingTop: "28em",
-        [
-            theme
-                .breakpoints
-                .down('md')
-        ]: {
-            paddingTop: "0"
-        }
-    },
-    mieuxQueTexteTexte: {
-        color: "#fff",
-        font: "normal normal bold 1.625em/1.769em Roboto",
-        letterSpacing: "2",
-    },
-    bloc1Section: {
-        paddingLeft: "5em",
-        paddingRight: "5em"
-    },
-
-    heroSectionMobile: {
-        background: "url('/statique/images/accueil/offre-emploi.jpg') center top  no-repeat scroll",
-        padding: "5em 0 9em",
-        position: "relative",
-        color: "#fff"
-    },
-    container: {
-        paddingRight: "15px",
-        paddingLeft: "15px",
-        marginRight: "auto",
-        marginLeft: "auto"
-    },
-    containerMobile: {},
-    colMd12: {
-        position: "relative",
-        minHeight: "1px",
-        paddingLeft: "4em",
-        paddingRight: "4em",
-
-        [
-            theme
-                .breakpoints
-                .down('md')
-        ]: {
-            paddingLeft: "2em",
-            paddingRight: "2em",
-        }
-    },
-    welcomeMessageLogo: {
-        marginBottom:"80px",
-        textAlign: "left"
-    },
-    welcomeMessage: {
-
-        textAlign: "left"
-    },
-    welcomeMessageH1: {
-        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
-        fontSize: "50px",
-        fontWeight: "700",
-        lineHeight: "1.2em !important",
-        color: "#fff",
-        maxWidth: "600px"
-    },
-    welcomeMessageP: {
-        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
-        fontSize: "20px",
-        marginBottom: "0",
-        color: "#fff",
-        fontWeight: "400",
-        maxWidth: "600px",
-        marginBottom:"80px",
-    },
-    videoBackground: {
-        position: "absolute",
-        right: "0",
-        bottom: "0",
-        top: "0",
-        minWidth: "100%",
-        minHeight: "50%",
-        height: "50%",
-        width: "auto",
-        height: "auto",
-        zIndex: "-100",
-        // background: `url("/statique/images/recrutement-video.jpg")` ,
-
-    },
-    overlay: {
-        position: "absolute",
-        width: "100%",
-        minHeight: "100%",
-        background: "rgba(0, 0, 0, 0.36)",
-        top: "0"
-    },
-    overlayMobile: {
-
-        width: "100%",
-        minHeight: "100%",
-
-        top: "0"
-    },
-    heroContent: {
-        backgroundColor: "#1689FB",
-        // backgroundImage:"/statique/images/recrutement-video.jpg",
-        // background:"https://source.unsplash.com/random", backgroundImage:
-        // `url("/statique/images/recrutement-video.jpg")` ,
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: "center",
-        padding: theme.spacing(8, 0, 6)
-    },
-    bloc1: {
-        backgroundColor: "#1E2327",
-        // backgroundImage:"/statique/images/recrutement-video.jpg",
-        // background:"https://source.unsplash.com/random", backgroundImage:
-        // `url("/statique/images/recrutement-video.jpg")` ,
-        color: "#FFFFFF",
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: "center",
-        padding: theme.spacing(8, 0, 6),
-        marginTop: "60px"
-    },
-    bloc2: {
-        backgroundColor: "transparent",
-        // backgroundImage:"/statique/images/recrutement-video.jpg",
-        // background:"https://source.unsplash.com/random", backgroundImage:
-        // `url("/statique/images/recrutement-video.jpg")` ,
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: "center",
-
-        marginTop: "0px"
-    },
-    bloc3: {
-        backgroundColor: "transparent",
-        // backgroundImage:"/statique/images/recrutement-video.jpg",
-        // background:"https://source.unsplash.com/random", backgroundImage:
-        // `url("/statique/images/recrutement-video.jpg")` ,
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: "center",
-        marginTop: "60px"
-    },
-    bloc4: {
-        backgroundColor: "#FCFCFC",
-        // backgroundImage:"/statique/images/recrutement-video.jpg",
-        // background:"https://source.unsplash.com/random", backgroundImage:
-        // `url("/statique/images/recrutement-video.jpg")` ,
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: "center",
-        marginTop: "60px"
-    },
-    footerDiv: {
-        backgroundColor: "#1E2327",
-        // backgroundImage:"/statique/images/recrutement-video.jpg",
-        // background:"https://source.unsplash.com/random", backgroundImage:
-        // `url("/statique/images/recrutement-video.jpg")` ,
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: "center",
-        padding: theme.spacing(8, 0, 6)
-    },
-    bloc2Titre1: {
-        textAlign: "left",
-        font: "normal normal bold 2.625em/1.667em Roboto",
-        letterSpacing: "2",
-        color: "#1E2327",
-        opacity: "1",
-        lineHeight: "1em"
-    },
-    bloc2Titre2: {
-        textAlign: "left",
-        font: "normal normal bold 1.625em/1.769em Roboto",
-        letterSpacing: "2",
-        color: "#1E2327",
-        opacity: "1",
-        lineHeight: "2em"
-    },
-    bloc2Titre3: {
-        textAlign: "left",
-        font: "normal normal normal 1.25em/1.9em Roboto",
-        letterSpacing: "2",
-        color: "#1E2327",
-        opacity: "1",
-        lineHeight: "3em"
-    },
-    bloc2Paragraphe: {
-        textAlign: "left",
-        font: "normal normal normal 1em/2em Roboto",
-        letterSpacing: "2",
-        color: "#1E2327",
-        opacity: "1",
-        lineHeight: "2em",
-        marginBottom: '62px'
-    },
-    heroButtons: {
-        marginTop: theme.spacing(4)
-    },
-    recruteurButton: {
-
-        width: "182px",
-        height: "49px",
-        background: "#25D89A 0% 0% no-repeat padding-box",
-        border: "2px solid #25D89A",
-        borderRadius: "5px",
-        opacity: "1",
-        color: "#fff",
-        fontWeight: "700",
-        textTransform: "inherit"
-    },
-    talentButton: {
-
-        width: "182px",
-        height: "49px",
-        border: "2px solid #FFFFFF",
-        color: "#FFFFFF",
-        borderRadius: "5px",
-        opacity: "1",
-        textTransform: "inherit",
-        background: "transparent",
-        fontWeight: "700",
-        '&:hover': {
-            background: "#ffffff 0% 0% no-repeat padding-box",
-            color: "#25D89A"
-        }
-    },
-    cardGrid: {
-
-        paddingBottom: theme.spacing(8)
-    },
-    cardGauche: {
-
-        display: 'flex',
-        flexDirection: 'column',
-        background: "#E7F3FF 0% 0% no-repeat padding-box",
-        boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
-        padding: "50px",
-        minHeight:"650px",
-        '&:hover': {
-            boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
-        },
-
-        [
-            theme
-                .breakpoints
-                .down('md')
-        ]: {
-            padding: "50px 0px",
-        }
-    },
-    cardDroite: {
-        display: 'flex',
-        flexDirection: 'column',
-        background: "#F8FBFF 0% 0% no-repeat padding-box",
-        boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
-        padding: "50px ",
-        minHeight:"650px",
-        '&:hover': {
-            boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
-        },
-
-        [
-            theme
-                .breakpoints
-                .down('md')
-        ]: {
-            padding: "50px 0px",
-        }
-    },
-    cardDroiteGris: {
-        display: 'flex',
-        flexDirection: 'column',
-        background: "#FCFCFC 0% 0% no-repeat padding-box",
-        boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
-        padding: "50px",
-        '&:hover': {
-            boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
-        }
-    },
-    bloc1Droite: {
-        backgroundColor: "transparent",
-        boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
-        '&:hover': {
-            boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
-        }
-    },
-    bloc3Droite: {
-        backgroundColor: "transparent",
-        boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
-        '&:hover': {
-            boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
-        }
-    },
-    blocGris: {
-        backgroundColor: "transparent",
-        boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
-        verticalAlign:"middle",
-        '&:hover': {
-            boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
-        }
-    },
-    bloc1DroiteH1: {
-        textAlign: "left",
-        font: "normal normal bold 2.625em/1.667em Roboto",
-        letterSpacing: "2",
-        color: "#ffffff",
-        opacity: "1",
-        lineHeight: "1.5em"
-    },
-    bloc1DroiteParagraphe: {
-        textAlign: "left",
-        font: "normal normal normal 1em/2em Roboto",
-        letterSpacing: "2",
-        color: "#ffffff",
-        opacity: "1",
-        lineHeight: "2em",
-        marginBottom: '62px'
-    },
-    bloc1Gauche: {
-        backgroundColor: "transparent",
-        verticalAlign:"middle"
-    },
-    cardMedia: {
-        paddingTop: '500px', // 16:9
-    },
-    cardContent: {
-        flexGrow: 1
-    },
-    footer: {
-        backgroundColor: theme.palette.background.paper,
-        padding: theme.spacing(6)
-    }
-}));
-const {publicRuntimeConfig} = getConfig();
-const cards = [1, 2];
-
-export default function Index() {
-    const classes = useStyles();
-    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
-    const imgUrl = DefaultUrl
-    return (
-        <React.Fragment>
-            <OgHead
-                seo_title="Espace candidat - Plateforme de recrutement en vidéo | Talents Tube"
-                seo_description="Talents Tube est la première plateforme réservée aux offres d'emploi vidéo, vidéo marque employeur et aux CV vidéos. Découvrez une nouvelle méthode de recrutement."
-                seo_url="www.talentstube.com"
-                image={imgUrl}
-                seo_key="Recrutement, video"></OgHead>
-
-            <main>
-                {/* Hero unit */}
-
-                <header >
-
-                    <Hidden smDown>
-                        <div className={classes.heroSection}></div>
-                        <video autoPlay loop muted className={classes.videoBackground}>
-                            <source
-                                src={"/statique/video/modele-offre-emploi-originale.mp4"}
-                                type='video/mp4'/>
-
-                        </video>
-
-                        
-
-                            <div className={classes.colMd12}>
-                                <div className={classes.welcomeMessageLogo}>
-                                    <img src="/statique/images/talents-tube-logo.svg"/>
-                                </div>
-                                <div className={classes.welcomeMessage}>
-                                    <h1 className={classes.welcomeMessageH1}>Adoptez le recrutement vidéo</h1>
-                                    <p className={classes.welcomeMessageP}>Talents Tube favorise la mise en relation
-                                        de candidats et d’entreprises et tout ça en vidéo !</p>
-                                </div>
-                                <div className={classes.heroButtons}></div>
-                                <div className={classes.actionBtn}>
-                                    <Grid container spacing={2} justify="left">
-                                        <Grid item>
-                                            <Button variant="contained" className={classes.recruteurButton}>
-                                                Je suis recruteur
-                                            </Button>
-                                        </Grid>
-                                        <Grid item>
-                                            <Button variant="contained" className={classes.talentButton}>
-                                                Je suis talent
-                                            </Button>
-                                        </Grid>
-                                    </Grid>
-                                    {/* <button
-                                            className={classes.recruteurButton}
-                                            data-toggle="modal"
-                                            data-target="#exampleModal">JE SUIS RECRUTEUR</button>
-                                        <button
-                                            className={classes.talentButton}
-                                            data-toggle="modal"
-                                            data-target=".bd-example-modal-lg">JE SUIS TALENT</button> */}
-                                </div>
-                            </div>
-                        
-
-                    </Hidden>
-                    <Hidden mdUp>
-                        <div className={classes.heroSectionMobile}>
-                            <div className={classes.overlayMobile}>
-                                <div className={classes.containerMobile}>
-
-                                    <div className={classes.colMd12}>
-                                        <div className={classes.welcomeMessageLogo}>
-                                            <img src="/statique/images/talents-tube-logo.svg"/>
-                                        </div>
-                                        <div className={classes.welcomeMessage}>
-                                            <h1 className={classes.welcomeMessageH1}>Adoptez le recrutement vidéo</h1>
-                                            <p className={classes.welcomeMessageP}>Talents Tube favorise la mise en relation
-                                                de candidats et d’entreprises et tout ça en vidéo !</p>
-                                        </div>
-                                        <div className={classes.heroButtons}></div>
-                                        <div className={classes.actionBtn}>
-                                            <Grid container spacing={2} justify="left">
-                                                <Grid item>
-                                                    <Button variant="contained" className={classes.recruteurButton}>
-                                                        Je suis recruteur
-                                                    </Button>
-                                                </Grid>
-                                                <Grid item>
-                                                    <Button variant="contained" className={classes.talentButton}>
-                                                        Je suis talent
-                                                    </Button>
-                                                </Grid>
-                                            </Grid>
-                                            {/* <button
-                                            className={classes.recruteurButton}
-                                            data-toggle="modal"
-                                            data-target="#exampleModal">JE SUIS RECRUTEUR</button>
-                                        <button
-                                            className={classes.talentButton}
-                                            data-toggle="modal"
-                                            data-target=".bd-example-modal-lg">JE SUIS TALENT</button> */}
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </Hidden>
-                    <section className={classes.mieuxQueTexteSection}>
-                        <div className={classes.heroContent}>
-
-                            <Container maxWidth="lg">
-                                <Typography variant="h4" align="center" className={classes.mieuxQueTexteTexte}>
-                                    « Parce que vous méritez mieux que du texte ! »
-                                </Typography>
-
-                            </Container>
-                        </div>
-                    </section>
-                </header>
-
-                <section >
-                    <div >
-                        <Container className={classes.cardGrid} maxWidth="xl">
-                            {/* End hero unit */}
-                            <Grid container spacing={0}>
-
-                                <Grid item key={1} xs={24} sm={12} md={6}>
-                                    <Card className={classes.cardGauche}>
-
-                                        <CardContent >
-                                            <Typography gutterBottom component="h2" className={classes.bloc2Titre1}>
-                                                Je suis recruteur
-                                            </Typography>
-                                            <Typography gutterBottom component="h3" className={classes.bloc2Titre2}>
-                                                Talent introuvable ? Métier en tension ?
-                                            </Typography>
-                                            <Typography className={classes.bloc2Titre3} component="h4">
-                                                Rencontrez vos futurs collaborateurs autrement, en vidéo
-                                            </Typography>
-                                            <Typography className={classes.bloc2Paragraphe}>
-                                                <b>Publiez une offre d’emploi vidéo :</b><br/>
-                                                <ul>
-                                                    <li>Pas besoin d’une super vidéo, montrez simplement votre entreprise en donnant
-                                                        la parole à vos salariés</li>
-                                                </ul>
-                                                <b>Recevez des candidatures vidéo :</b><br/>
-                                                <ul>
-                                                    <li>Au-delà des compétences, découvrez les vraies personnes derrière le CV
-                                                    </li>
-                                                </ul>
-                                                <ul>
-                                                    <li>
-                                                        Gagnez du temps dans votre présélection, rencontrez uniquement les candidats
-                                                        réellement impliqués</li>
-                                                </ul>
-                                                <b>Ne vous limitez plus à des mots, osez un recrutement plus qualitatif !</b><br/>
-                                            </Typography>
-                                            <Button variant="contained" className={classes.recruteurButton}>
-                                                En savoir plus
-                                            </Button>
-                                        </CardContent>
-
-                                    </Card>
-                                </Grid>
-                                <Grid item key={2} xs={24} sm={12} md={6}>
-                                    <Card className={classes.cardDroite}>
-
-                                        <CardContent className={classes.cardContent}>
-                                            <Typography gutterBottom component="h2" className={classes.bloc2Titre1}>
-                                                Je suis candidat
-                                            </Typography>
-                                            <Typography gutterBottom component="h3" className={classes.bloc2Titre2}>
-                                                Marre des envois de CV sans réponse ?
-                                            </Typography>
-                                            <Typography className={classes.bloc2Titre3} component="h4">
-                                                Rencontrez votre futur employeur autrement, en vidéo :
-                                            </Typography>
-                                            <Typography className={classes.bloc2Paragraphe}>
-                                                <b>Consultez des offres d’emploi video :</b><br/>
-                                                <ul>
-                                                    <li>L’offre est en vidéo pour mieux comprendre l’entreprise, le métier,
-                                                        l’équipe… Votre candidature est aussi en vidéo. Vous êtes à égalité !</li>
-                                                </ul>
-                                                <b>Déposez votre candidature en vidéo :</b><br/>
-                                                <ul>
-                                                    <li>Tout le monde a du talent et votre personnalité est aujourd’hui votre
-                                                        meilleur atout
-                                                    </li>
-                                                </ul>
-                                                <ul>
-                                                    <li>Pas besoin d’une « belle » vidéo, soyez vrai et authentique</li>
-                                                </ul>
-                                                <b>Dévoilez gratuitement qui vous êtes, au-delà des mots !</b>
-                                            </Typography>
-                                            <Button variant="contained" className={classes.recruteurButton}>
-                                                Je me lance
-                                            </Button>
-                                        </CardContent>
-
-                                    </Card>
-                                </Grid>
-                            </Grid>
-                        </Container>
-                    </div>
-                    <div className={classes.bloc1}>
-                        <Container className={classes.cardGrid} maxWidth="lg">
-                            {/* End hero unit */}
-                            <Grid container spacing={10}>
-
-                                <Grid item key={2} xs={24} sm={12} md={6}>
-                                    <Card className={classes.bloc1Droite}>
-
-                                        <CardContent className={classes.bloc1Droite}>
-                                            <Typography
-                                                gutterBottom
-                                                component="h2"
-                                                color="#fff"
-                                                className={classes.bloc1DroiteH1}>
-                                                Notre mission : Remettre l’humain au cœur des recrutements
-                                            </Typography>
-                                            <Typography className={classes.bloc1DroiteParagraphe}>
-                                                Chez Talents Tube, nous pensons que la technologie ne doit pas remplacer
-                                                l’humain mais être à son service. C’est pour cette raison que nous proposons un
-                                                outil de recrutement vidéo alliant digital et humain, afin de redonner la parole
-                                                aux candidats et aux entreprises. Talents Tube est aujourd’hui la SEULE
-                                                plateforme de recrutement qui permet aux entreprises de publier des offres
-                                                d’emploi en vidéo et de recevoir des candidatures en vidéo.
-                                            </Typography>
-                                        </CardContent>
-
-                                    </Card>
-                                </Grid>
-                                <Hidden smDown>
-                                    <Grid item key={1} xs={24} sm={12} md={6}>
-                                        <Card className={classes.bloc1Gauche}>
-
-                                            <CardMedia
-                                                className={classes.cardMedia}
-                                                image="/statique/images/accueil/candidature-en-video.png"></CardMedia>
-
-                                        </Card>
-                                    </Grid>
-                                </Hidden>
-                            </Grid>
-                        </Container>
-                    </div>
-
-                    <div className={classes.bloc3}>
-                        <Container className={classes.cardGrid} maxWidth="lg">
-                            {/* End hero unit */}
-                            <Grid container spacing={10}>
-                                <Hidden smDown>
-                                    <Grid item key={1} xs={24} sm={12} md={6}>
-                                        <Card className={classes.bloc1Gauche}>
-                                            <CardMedia
-                                                className={classes.cardMedia}
-                                                image="/statique/images/accueil/equipe_talents_tube.jpg"></CardMedia>
-
-                                        </Card>
-                                    </Grid>
-                                </Hidden>
-                                <Grid item key={2} xs={24} sm={12} md={6}>
-                                    <Card className={classes.bloc3Droite}>
-
-                                        <CardContent className={classes.bloc1Droite}>
-                                            <Typography
-                                                gutterBottom
-                                                component="h2"
-                                                color="#fff"
-                                                className={classes.bloc2Titre1}>
-                                                Pourquoi nous ?
-                                            </Typography>
-                                            <Typography className={classes.bloc2Titre2}>
-                                                Parce que nous sommes les SEULS à savoir le faire !
-                                            </Typography>
-                                            <Typography className={classes.bloc2Paragraphe}>
-                                                Notre équipe est composée d’experts métier qui sauront vous accompagner dans
-                                                toutes vos demandes que vous soyez candidat ou recruteur. En recherche
-                                                d’évolution constante, nous avons à cœur de créer une relation de proximité afin
-                                                d’adapter NOTRE solution à VOS besoins et ainsi créer une expérience utilisateur
-                                                inoubliable. <br/><br/>
-                                                Composée d’experts de la fonction RH & Recrutement, nous sommes
-                                                passionnés par ce que nous faisons. Notre SEUL objectif : favoriser la rencontre
-                                                d’entreprises formidables et de candidats uniques pour une performance commune.
-                                            </Typography>
-                                        </CardContent>
-
-                                    </Card>
-                                </Grid>
-                            </Grid>
-                        </Container>
-                    </div>
-
-                    <div className={classes.bloc4}>
-                        <Container className={classes.cardGrid} maxWidth="lg">
-                            {/* End hero unit */}
-                            <Grid container spacing={10}>
-
-                                <Grid item key={2} xs={24} sm={12} md={6}>
-                                    <Card className={classes.blocGris}>
-
-                                        <CardContent  >
-                                            <Typography
-                                                gutterBottom
-    
-                                                component="h2"
-                                                color="#fff"
-                                                className={classes.bloc2Titre1}>
-                                                Ils recrutent déjà avec Talents Tube!
-                                            </Typography>
-                                            <Card className={classes.cardDroiteGris}>
-                                                <img src="/statique/images/accueil/recrutement-video-entreprises.png"/>
-
-                                            </Card>
-                                            
-                                        </CardContent>
-
-                                    </Card>
-                                </Grid>
-                                <Grid item key={1} xs={24} sm={12} md={6}>
-                                    <Card className={classes.blocGris}>
-
-                                        <iframe
-                                            width="560"
-                                            height="315"
-                                            src="https://www.youtube.com/embed/sKh0u7Mbdps"
-                                            frameborder="0"
-                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                                            allowfullscreen></iframe>
-
-                                    </Card>
-                                </Grid>
-                            </Grid>
-                        </Container>
-                    </div>
-                    {/* <div className={classes.footerDiv}>
-
-                        <Container maxWidth="sm"></Container>
-                    </div> */}
-                    <Footer/>
-                </section>
-
-            </main>
-
-        </React.Fragment>
-    );
-}

nextjs/pages/test4.js

@@ -136,6 +136,9 @@ const styles = theme => ({
       margin: 'auto',
     },
   },
+  container: {
+    
+  },
 });
 
 class Index extends React.Component {
@@ -176,12 +179,19 @@ class Index extends React.Component {
   getSuggestionValue = suggestion => suggestion.libelle;
   // Render Each Option
   renderSuggestion = suggestion => (
-      <span className="sugg-option">
-          
-          <span className="name">
-              {suggestion.libelle} ({suggestion.code})
-          </span>
-      </span>
+    <span className={'suggestion-content ' + suggestion.twitter}>
+    <span className="name">
+      {
+        parts.map((part, index) => {
+          const className = part.highlight ? 'highlight' : null;
+
+          return (
+            <span className={className} key={index}>{part.text}</span>
+          );
+        })
+      }
+    </span>
+  </span>
   );
 
   // OnChange event handler
@@ -229,10 +239,23 @@ class Index extends React.Component {
   getSuggestionMetierValue = suggestion => suggestion.libelle;
   // Render Each Option
   renderSuggestionMetier = suggestion => (
-      <span className="sugg-option">
+//     <div style="position: absolute; right: 0px; z-index: 1; will-change: transform; top: 0px; left: 0px; transform: translate3d(14px, 53px, 0px);" data-placement="bottom-start">
+//     <div class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded" style="opacity: 1; transform: none; transform-origin: 0px 0px 0px; transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;">
+//       <ul class="MuiList-root MuiList-padding" role="menu" tabindex="-1">
+//       <div class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected" tabindex="0" role="menuitem" aria-disabled="false" id="downshift-0-item-0">
+//         <div>
+//           <strong style="font-weight: 500;">{suggestion.libelle} </strong>
+//           <span style="font-weight: 300;">, {suggestion.code}</span>
+//         </div>
+//         <span class="MuiTouchRipple-root"></span>
+//       </div>
+//       </ul>
+//     </div>
+// </div>
+<span className="suggestion-content">
           
           <span className="name">
-              {suggestion.libelle} ({suggestion.code})
+              {suggestion.libelle} 
           </span>
       </span>
   );
@@ -282,10 +305,11 @@ class Index extends React.Component {
   getSuggestionMetierCompetenceValue = suggestion => suggestion.libelle;
   // Render Each Option
   renderSuggestionMetierCompetence = suggestion => (
+    
       <span className="sugg-option">
           
           <span className="name">
-              {suggestion.libelle} ({suggestion.code})
+              {suggestion.libelle}
           </span>
       </span>
   );

nextjs/public/statique/css/autocomplete.css

@@ -0,0 +1,101 @@
+.react-autosuggest__container {
+  position: relative;
+  width: 85%;
+}
+
+.react-autosuggest__input {
+  width: 100%;
+  
+  height: 30px;
+  padding: 10px 0;
+  font-family: Roboto;
+  font-weight: 400;
+  font-size: 16px;
+  border: 1px solid;
+  border-color: rgba(0, 0, 0, 0.23);
+  border-radius: 4px;
+}
+
+.react-autosuggest__input:focus {
+  outline: none;
+}
+
+.react-autosuggest__container--open .react-autosuggest__input {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.react-autosuggest__suggestions-container {
+  display: none;
+}
+
+.react-autosuggest__container--open .react-autosuggest__suggestions-container {
+  display: block;
+  position: absolute;
+  top: 51px;
+  width: 280px;
+  border: 1px solid #aaa;
+  background-color: #fff;
+  font-family: Roboto;
+  font-weight: 300;
+  font-size: 16px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  z-index: 10;
+}
+
+.react-autosuggest__suggestions-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.react-autosuggest__suggestion {
+  cursor: pointer;
+  padding: 10px 20px;
+}
+
+.react-autosuggest__suggestion:not(:first-child) {
+  border-top: 1px solid #ddd;
+}
+
+.react-autosuggest__suggestion--focused {
+  background-color: #0C7EAF;
+  color: #fff;
+}
+
+.suggestion-content {
+  display: flex;
+  align-items: center;
+  background-repeat: no-repeat;
+}
+
+.dancounsell {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/dancounsell/48.jpg);
+}
+
+.ladylexy {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/48.jpg);
+}
+
+.mtnmissy {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/mtnmissy/48.jpg);
+}
+
+.steveodom {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/steveodom/48.jpg);
+}
+
+.name {
+  margin-left: 8px;
+  line-height: 15px;
+}
+
+.highlight {
+  color: #ee0000;
+  font-weight: bold;
+}
+
+.react-autosuggest__suggestion--focused .highlight {
+  color: #120000;
+}