Correctif suite a recette V2.8.2

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/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}/>
-            {/* <meta name="robots" content="noindex, nofollow"></meta> */}
+            
+            if (urlEnv=="development") {
+                <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/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/FooterAccueil.js

@@ -0,0 +1,246 @@
+import Link from 'next/link'
+import { withStyles } from '@material-ui/core/styles'
+import { Typography } from '@material-ui/core';
+import { Fragment } from 'react';
+import NewsLetterRegistration from './NewsLetterRegistration'
+import dynamic from 'next/dynamic'
+import Button from '@material-ui/core/Button'
+import getConfig from 'next/config'
+const { publicRuntimeConfig } = getConfig();
+
+const styles = theme => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: "#1E2327",
+        [theme.breakpoints.up('md')]: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            justifyContent: 'space-around',
+            backgroundColor: "#1E2327",
+            padding: theme.spacing(10, 18),
+        },
+        '& a': {
+            textDecoration: 'none',
+            color:"#fff"
+        },
+    },
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        padding: theme.spacing(0, 5),
+        paddingBottom: theme.spacing(3.5),
+        '&:first-child': {
+            paddingTop: theme.spacing(4),
+        },
+        [theme.breakpoints.up('md')]: {
+            padding: 0,
+            '&:first-child': {
+                paddingTop: 0,
+            },
+        },
+
+    },
+    containerRegion: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        backgroundColor: theme.palette.secondary.main,
+        padding: theme.spacing(3),
+        [theme.breakpoints.up('md')]: {
+            padding: theme.spacing(8, 0),
+        },
+
+    },
+    titleContainer: {
+        color: "#fff",
+        fontSize: '1.5em',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+        fontWeight: '600',
+        [theme.breakpoints.up('md')]: {
+            fontSize: '1.2em',
+            paddingBottom: theme.spacing(2),
+        },
+    },
+    textContainer: {
+        fontWeight: '300',
+        fontSize: '0.9em',
+        [theme.breakpoints.up('md')]: {
+            fontWeight: '300',
+            fontSize: '0.8em',
+        },
+    },
+    textContainerRegion: {
+        fontWeight: '300',
+        fontSize: '0.9em',
+        color: theme.palette.primary.dark,
+    },
+    footerLogo: {
+        width: '15vw',
+        [theme.breakpoints.up('md')]: {
+            width: '4vw',
+        },
+    },
+    footerLogoTT: {
+        width: '70%',
+        [theme.breakpoints.up('md')]: {
+            paddingBottom: theme.spacing(1),
+            width: '100%'
+        },
+    },
+    containerReactApp: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: 'auto',
+        paddingTop: theme.spacing(4),
+        backgroundColor: "#000",
+        [theme.breakpoints.down('xs')]: {
+            height: '100vh',
+        },
+        [theme.breakpoints.up('md')]: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-around',
+            height: '35vh',
+            padding: theme.spacing(6, 1),
+            position: 'relative',
+        },
+    },
+    titleReactApp: {
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+        fontSize: '1.5em',
+        fontWeight: '600',
+        paddingTop: theme.spacing(4),
+        paddingLeft: theme.spacing(4),
+        paddingRight: theme.spacing(4),
+        [theme.breakpoints.up('md')]: {
+            order: 1,
+            width: '20%',
+            textAlign: 'left',
+        },
+    },
+    buttonReactApp: {
+        textTransform: 'inherit',
+        margin: theme.spacing(0, 8),
+        padding: theme.spacing(1.2, 2),
+        [theme.breakpoints.up('md')]: {
+            order: 3,
+            margin: 'inherit',
+            marginRight: '5vw',
+        },
+    },
+    imageReactApp: {
+        width: '100%',
+        [theme.breakpoints.up('sm')]: {
+            width: 'auto',
+        },
+        [theme.breakpoints.up('md')]: {
+            width: '25%',
+            order: 2,
+            position: 'absolute',
+            bottom: 0,
+        },
+    },
+    containerNewsletter: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: theme.spacing(6, 4),
+    },
+    version:{
+        marginTop: '15px',
+        fontSize: '0.7em',
+        fontWeight: '300',
+    }
+
+});
+
+function Footer(props) {
+    const { classes } = props;
+    return (
+        <div>
+
+
+            <section className={classes.containerNewsletter}>
+                <NewsLetterRegistration />
+            </section>
+
+            <div className={classes.root}>
+                <section className={classes.container}>
+                    <img alt="talents-tube" src='/static/images/logos/TalentsTube_logo-blanc.svg' className={classes.footerLogoTT} />
+                    
+                </section>
+                <section className={classes.container}>
+                    <Typography color="secondary" component="p" className={classes.titleContainer}>
+                        Informations
+                    </Typography>
+
+                    <Link href="/Cgu"  >
+                        <a>
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                CGU
+                            </Typography>
+                        </a>
+                    </Link>
+
+                    <Link href="/MentionsLegales"  >
+                        <a>
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                Mentions légales
+                            </Typography>
+                        </a>
+                    </Link>
+                    <Link href="/Confidentialite"  >
+                        <a>
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                Politique de confidentialité et Protection <br />des données
+                            </Typography>
+                        </a>
+                    </Link>
+                    <Link href="" >
+                        <a href="https://blog.talentstube.com/contact" target="_blank">
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                Contact
+                            </Typography>
+                        </a>
+                    </Link>
+                </section>
+                <section className={classes.container}>
+                    <Typography color="secondary" component="p" className={classes.titleContainer}>
+                        Rencontrons-nous
+                </Typography>
+                    <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                        3, rue Louis de Broglie
+                </Typography>
+                    <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                        56 000 Vannes
+                </Typography>
+                    <Typography gutterBottom  component="p" className={classes.textContainer}>
+                    <a href="tel:+33230050631"  >02.30.05.06.31 </a> 
+                </Typography>
+                    {/* <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                        contact@talentstube.com
+                </Typography> */}
+                </section>
+
+            </div>
+            <section className={classes.containerRegion}>
+                <Typography gutterBottom component="p" className={classes.textContainerRegion} align="center" >
+                    Entreprise soutenue par
+                </Typography>
+                <a href="https://www.bretagne.bzh/" target="_blank" className={classes.darkMenuItem} rel="noopener">
+                    <img alt="Région Bretagne" src='/static/images/logos/Logo-region.svg' className={classes.footerLogo} />
+                </a>
+                <Typography   className={classes.version} align="center" >
+                {publicRuntimeConfig.version}
+                </Typography>
+            </section>
+        </div>
+    );
+}
+
+export default withStyles(styles)(Footer)

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>
@@ -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>}
@@ -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/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

@@ -46,16 +46,16 @@ module.exports = withPlugins(
         // frontServerUrl: 'http://localhost:3000',
         // cvThequeUrl: 'https://recruteur.talentstube.com',
         // PROD
-        symphonyUrl: 'https://recruteur.talentstube.com/',
-        blogUrl: 'https://blog.talentstube.com',
-        frontServerUrl: 'https://www.talentstube.com/',
-        cvThequeUrl: 'https://recruteur.talentstube.com',
-        // PRE PROD
-        // symphonyUrl: 'https://pp.talentstube.com/',
+        // symphonyUrl: 'https://recruteur.talentstube.com/',
         // blogUrl: 'https://blog.talentstube.com',
-        // frontServerUrl: 'https://pp.app.talentstube.com/',
+        // frontServerUrl: 'https://www.talentstube.com/',
         // cvThequeUrl: 'https://recruteur.talentstube.com',
-        version : 'V2.6.2',
+        // PRE PROD
+        symphonyUrl: 'https://pp.talentstube.com/',
+        blogUrl: 'https://blog.talentstube.com',
+        frontServerUrl: 'https://pp.app.talentstube.com/',
+        cvThequeUrl: 'https://recruteur.talentstube.com',
+        version : 'V2.8.3',
         adListDefaultUrl: '/statique/images/default/default_picture_company.jpg',
         cachedMediaUrl: '/media/cache/profile_thumb/uploads/img/',
         postedContentUrl: '/uploads/img/',

nextjs/out/sitemap_local.xml

@@ -1,6 +1,155 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
   <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=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=133&amp;url=/Offre/133-gestionnaire-de-copropriete-f-h&amp;videoId=500395879&amp;typeEntite=Offre&amp;nameCompany=Cabinet%20JOURDAN&amp;nameOffre=Gestionnaire%20de%20co%20propriete</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=132&amp;url=/Offre/132-comptable-f-h&amp;videoId=495504495&amp;typeEntite=Offre&amp;nameCompany=Cabinet%20JOURDAN&amp;nameOffre=Comptable%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=130&amp;url=/Offre/130-assistant-f-h&amp;videoId=495156742&amp;typeEntite=Offre&amp;nameCompany=Cabinet%20JOURDAN&amp;nameOffre=Assistant%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=131&amp;url=/Offre/131-poseur-f-h&amp;videoId=494089386&amp;typeEntite=Offre&amp;nameCompany=TPC%20Ouest&amp;nameOffre=Poseur%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=131&amp;url=/Offre/140-aide-a-domicile-f-h&amp;videoId=507891163&amp;typeEntite=Offre&amp;nameCompany=ADMR56&amp;nameOffre=Aide%20a%20domicile</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=135&amp;url=/Offre/129-commercial-b-to-b-f-h&amp;videoId=491331138&amp;typeEntite=Offre&amp;nameCompany=Fym%20Action&amp;nameOffre=Commercial%20B%20to%20b%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=122&amp;url=/Offre/122-chauffeurs-spl-f-h&amp;videoId=482599011&amp;typeEntite=Offre&amp;nameCompany=AER%20Recyclage&amp;nameOffre=Chauffeurs%20SPL%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=128&amp;url=/Offre/128-techniciens-poseurs-f-h&amp;videoId=485471109&amp;typeEntite=Offre&amp;nameCompany=Pro%20Fermetures&amp;nameOffre=Techniciens%20Poseurs%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=113&amp;url=/Offre/113-aide-a-domicile-f-h&amp;videoId=440702903&amp;typeEntite=Offre&amp;nameCompany=Onela&amp;nameOffre=Aide%20à%20domicile%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=120&amp;url=/Offre/120-technico-commercial-f-h&amp;videoId=462942715&amp;typeEntite=Offre&amp;nameCompany=Temporis&amp;nameOffre=Technico-Commercial%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=115&amp;url=/Offre/115-technicien-ramoneur-fumiste-f-h&amp;videoId=460206945&amp;typeEntite=Offre&amp;nameCompany=La%20Centrale%20des%20Ramoneurs&amp;nameOffre=Technicien%20Ramoneur%20/%20Fumiste%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=109&amp;url=/Offre/109-equipier-de-plateforme-polyvalent-f-h&amp;videoId=422692890&amp;typeEntite=Offre&amp;nameCompany=AER%20Recyclage&amp;nameOffre=Equipier%20de%20plateforme%20polyvalent%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=112&amp;url=/Offre/112-conseillers-technico-commerciaux-h-f&amp;videoId=438478115&amp;typeEntite=Offre&amp;nameCompany=Pro%20Fermetures&amp;nameOffre=Conseillers%20Technico-Commerciaux%20(H/F)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=111&amp;url=/Offre/111-couvreur-etancheur-f-h&amp;videoId=432410136&amp;typeEntite=Offre&amp;nameCompany=Blandin&amp;nameOffre=Couvreur/Étancheur%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=108&amp;url=/Offre/108-plombier-chauffagiste-f-h&amp;videoId=398509552&amp;typeEntite=Offre&amp;nameCompany=Blandin&amp;nameOffre=Plombier/Chauffagiste%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=107&amp;url=/Offre/107-operateur-soudeur-chaudronnier-f-h&amp;videoId=397982745&amp;typeEntite=Offre&amp;nameCompany=GEIQ%20Industrie%2044&amp;nameOffre=Opérateur%20Soudeur%20/%20Chaudronnier%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=101&amp;url=/Offre/101-conducteurs-routiers-f-h&amp;videoId=391023366&amp;typeEntite=Offre&amp;nameCompany=Lactalis%20Logistique%20et%20Transports&amp;nameOffre=Conducteurs%20routiers%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=103&amp;url=/Offre/103-agents-de-quai-f-h&amp;videoId=391023871&amp;typeEntite=Offre&amp;nameCompany=Lactalis%20Logistique%20et%20Transports&amp;nameOffre=Agents%20de%20quai%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=77&amp;url=/Offre/77-commercial-sedentaire-en-vente-directe-b-to-b-h-f&amp;videoId=343666512&amp;typeEntite=Offre&amp;nameCompany=Télémaque&amp;nameOffre=Commercial%20sédentaire%20en%20vente%20directe%20B%20to%20B%20(H/F)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=102&amp;url=/Offre/102-preparateurs-de-commandes-f-h&amp;videoId=391023988&amp;typeEntite=Offre&amp;nameCompany=Lactalis%20Logistique%20et%20Transports&amp;nameOffre=Préparateurs%20de%20commandes%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=46&amp;url=/Offre/46-conducteurs-routiers-h-f&amp;videoId=273464203&amp;typeEntite=Offre&amp;nameCompany=Groupe%20MOUSSET&amp;nameOffre=Conducteurs%20routiers%20(H/F)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=32518&amp;url=/Entreprise/32518-cabinet-jourdan&amp;videoId=491607083&amp;typeEntite=Entreprise&amp;nameCompany=Cabinet%20JOURDAN&amp;nameOffre=</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=32507&amp;url=/Entreprise/32507-tpc-ouest&amp;videoId=489836459&amp;typeEntite=Entreprise&amp;nameCompany=TPC%20Ouest&amp;nameOffre=</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=32355&amp;url=/Entreprise/32355-hyphae&amp;videoId=478847996&amp;typeEntite=Entreprise&amp;nameCompany=HYPHAE&amp;nameOffre=</loc>
+    <lastmod>2021-02-04</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=21247&amp;url=/Entreprise/21247-lactalis-logistique-et-transports&amp;videoId=391023777&amp;typeEntite=Entreprise&amp;nameCompany=Lactalis%20Logistique%20et%20Transports&amp;nameOffre=</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=19800&amp;url=/Entreprise/19800-silvadec&amp;videoId=386500340&amp;typeEntite=Entreprise&amp;nameCompany=Silvadec&amp;nameOffre=</loc>
+    <lastmod>2021-02-04</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=19205&amp;url=/Entreprise/19205-intermarche-logistique-alimentaire-international&amp;videoId=385268706&amp;typeEntite=Entreprise&amp;nameCompany=Intermarché%20Logistique%20Alimentaire%20International&amp;nameOffre=</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <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>
     <loc>https://www.talentstube.com/Offre/140-aide-a-domicile-f-h</loc>
     <lastmod>2021-02-10</lastmod>
     <priority>1.00</priority>
@@ -15,6 +164,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/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,9 @@ class Player extends Component {
     }
     render() {
         const { classes, id, url, typeEntite, videoId, nameCompany, nameOffre } = this.props
-        
+        const urlEnv = process.env.NODE_ENV;
+        let nofollow = true;
+        urlEnv == "development" ? nofollow = true : nofollow = false;
         
         console.log(id);
         console.log(typeEntite);
@@ -94,8 +96,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/_document.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import Document, { Head, Main, NextScript } from 'next/document';
 import { ServerStyleSheets } from '@material-ui/styles';
 import flush from 'styled-jsx/server';
@@ -31,8 +31,12 @@ class MyDocument extends Document {
           />
           {/* PWA primary color */}
           <meta name="theme-color" content={theme.palette.primary.main} />
-          <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600&display=swap" rel="stylesheet">
+          <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,14 +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
 // });
@@ -78,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%',
@@ -138,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 = {
@@ -158,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"
@@ -196,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}
@@ -209,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>
@@ -248,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>
@@ -280,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/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,98 @@
+.react-autosuggest__container {
+  position: relative;
+}
+
+.react-autosuggest__input {
+  width: 240px;
+  height: 30px;
+  padding: 10px 20px;
+  font-family: Helvetica, sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+  border: 1px solid #aaa;
+  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: Helvetica, sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  z-index: 2;
+}
+
+.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;
+}

nextjs/public/statique/css/fonts.css

@@ -0,0 +1,36 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

nextjs/public/statique/css/owl.carousel.css

@@ -0,0 +1,153 @@
+/* 
+ * 	Core Owl Carousel CSS File
+ *	v1.3.3
+ */
+
+/* clearfix */
+.owl-carousel .owl-wrapper:after {
+	content: ".";
+	display: block;
+	clear: both;
+	visibility: hidden;
+	line-height: 0;
+	height: 0;
+}
+/* display none until init */
+.owl-carousel{
+	display: none;
+	position: relative;
+	width: 100%;
+	-ms-touch-action: pan-y;
+}
+.owl-carousel .owl-wrapper{
+	display: none;
+	position: relative;
+	-webkit-transform: translate3d(0px, 0px, 0px);
+}
+.owl-carousel .owl-wrapper-outer{
+	overflow: hidden;
+	position: relative;
+	width: 100%;
+}
+.owl-carousel .owl-wrapper-outer.autoHeight{
+	-webkit-transition: height 500ms ease-in-out;
+	-moz-transition: height 500ms ease-in-out;
+	-ms-transition: height 500ms ease-in-out;
+	-o-transition: height 500ms ease-in-out;
+	transition: height 500ms ease-in-out;
+}
+	
+.owl-carousel .owl-item{
+	float: left;
+}
+.owl-controls .owl-page,
+.owl-controls .owl-buttons div{
+	cursor: pointer;
+}
+.owl-controls {
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/* mouse grab icon */
+.grabbing { 
+    cursor:url(../img/grabbing.png) 8 8, move;
+}
+
+/* fix */
+.owl-carousel  .owl-wrapper,
+.owl-carousel  .owl-item{
+	-webkit-backface-visibility: hidden;
+	-moz-backface-visibility:    hidden;
+	-ms-backface-visibility:     hidden;
+  -webkit-transform: translate3d(0,0,0);
+  -moz-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+}
+
+/*
+* 	Owl Carousel Owl Demo Theme 
+*	v1.3.3
+*/
+
+.owl-theme .owl-controls{
+	margin-top: 10px;
+	text-align: center;
+}
+
+/* Styling Next and Prev buttons */
+
+.owl-theme .owl-controls .owl-buttons div{
+	color: #FFF;
+	display: inline-block;
+	zoom: 1;
+	*display: inline;/*IE7 life-saver */
+	margin: 5px;
+	padding: 3px 10px;
+	font-size: 12px;
+	-webkit-border-radius: 30px;
+	-moz-border-radius: 30px;
+	border-radius: 30px;
+	background: #869791;
+	filter: Alpha(Opacity=50);/*IE7 fix*/
+	opacity: 0.5;
+}
+/* Clickable class fix problem with hover on touch devices */
+/* Use it for non-touch hover action */
+.owl-theme .owl-controls.clickable .owl-buttons div:hover{
+	filter: Alpha(Opacity=100);/*IE7 fix*/
+	opacity: 1;
+	text-decoration: none;
+}
+
+/* Styling Pagination*/
+
+.owl-theme .owl-controls .owl-page{
+	display: inline-block;
+	zoom: 1;
+	*display: inline;/*IE7 life-saver */
+}
+.owl-theme .owl-controls .owl-page span{
+	display: block;
+	width: 12px;
+	height: 12px;
+	margin: 5px 7px;
+	filter: Alpha(Opacity=50);/*IE7 fix*/
+	opacity: 0.5;
+	-webkit-border-radius: 20px;
+	-moz-border-radius: 20px;
+	border-radius: 20px;
+	background: #FF5A5F;
+}
+
+.owl-theme .owl-controls .owl-page.active span,
+.owl-theme .owl-controls.clickable .owl-page:hover span{
+	filter: Alpha(Opacity=100);/*IE7 fix*/
+	opacity: 1;
+}
+
+/* If PaginationNumbers is true */
+
+.owl-theme .owl-controls .owl-page span.owl-numbers{
+	height: auto;
+	width: auto;
+	color: #FFF;
+	padding: 2px 10px;
+	font-size: 12px;
+	-webkit-border-radius: 30px;
+	-moz-border-radius: 30px;
+	border-radius: 30px;
+}
+
+.screenshot-slider .item{
+  margin: 3px;
+}
+.screenshot-slider .item img{
+  display: block;
+  width: 100%;
+  height: auto;
+}

nextjs/public/statique/images/talents-tube-logo.svg

@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="207.525" height="43.208" viewBox="0 0 207.525 43.208">
+  <g id="Logo" transform="translate(-63.142 -208.083)">
+    <g id="Groupe_7907" data-name="Groupe 7907" transform="translate(63.142 217.603)" style="isolation: isolate">
+      <g id="Groupe_7904" data-name="Groupe 7904" transform="translate(0 1.508)" style="isolation: isolate">
+        <path id="Tracé_369" data-name="Tracé 369" d="M65.046,260.631v-7.353h-.529a1.375,1.375,0,0,1,0-2.751h.529v-2.38a1.6,1.6,0,0,1,3.2,0v2.38h2.513a1.376,1.376,0,1,1,0,2.751H68.247v6.85a1.524,1.524,0,0,0,1.719,1.746,7.557,7.557,0,0,0,.793-.079,1.349,1.349,0,0,1,1.349,1.323,1.377,1.377,0,0,1-.846,1.243,6.365,6.365,0,0,1-2.2.37C66.713,264.73,65.046,263.7,65.046,260.631Z" transform="translate(-63.142 -246.56)" fill="#fff"/>
+      </g>
+      <g id="Groupe_7905" data-name="Groupe 7905" transform="translate(11.73 5.29)" style="isolation: isolate">
+        <path id="Tracé_370" data-name="Tracé 370" d="M104.07,269.887v-.053c0-3.015,2.354-4.5,5.766-4.5a11.663,11.663,0,0,1,3.756.582v-.344c0-1.983-1.217-3.041-3.465-3.041a8.3,8.3,0,0,0-3.095.555,1.792,1.792,0,0,1-.5.08,1.332,1.332,0,0,1-1.349-1.322,1.4,1.4,0,0,1,.873-1.27,11.967,11.967,0,0,1,4.5-.82,6.258,6.258,0,0,1,4.629,1.56,5.8,5.8,0,0,1,1.507,4.311V272.5a1.524,1.524,0,0,1-1.561,1.534,1.446,1.446,0,0,1-1.56-1.349v-.529a5.676,5.676,0,0,1-4.549,2.036C106.4,274.2,104.07,272.69,104.07,269.887Zm9.575-1.005v-.952a8.875,8.875,0,0,0-3.174-.555c-2.063,0-3.28.873-3.28,2.327v.053c0,1.349,1.19,2.116,2.724,2.116C112.031,271.87,113.645,270.654,113.645,268.882Z" transform="translate(-104.07 -259.757)" fill="#fff"/>
+      </g>
+      <g id="Groupe_7906" data-name="Groupe 7906" transform="translate(28.512)" style="isolation: isolate">
+        <path id="Tracé_371" data-name="Tracé 371" d="M162.626,242.886a1.575,1.575,0,0,1,1.587-1.587,1.6,1.6,0,0,1,1.613,1.587v16.4a1.6,1.6,0,0,1-3.2,0Z" transform="translate(-162.626 -241.299)" fill="#fff"/>
+        <path id="Tracé_372" data-name="Tracé 372" d="M192.864,273.96a6.968,6.968,0,0,1-7.168-7.247v-.053c0-3.994,2.83-7.273,6.824-7.273a6.606,6.606,0,0,1,6.638,6.877,1.5,1.5,0,0,1-1.507,1.534H188.9a3.9,3.9,0,0,0,4.02,3.544,5.019,5.019,0,0,0,3.306-1.217,1.192,1.192,0,0,1,.82-.291,1.259,1.259,0,0,1,1.269,1.3,1.4,1.4,0,0,1-.423.979A7.171,7.171,0,0,1,192.864,273.96Zm3.174-8.279c-.212-2.063-1.428-3.676-3.544-3.676-1.957,0-3.333,1.507-3.624,3.676Z" transform="translate(-179.084 -254.203)" fill="#fff"/>
+        <path id="Tracé_373" data-name="Tracé 373" d="M244.11,261.133a1.581,1.581,0,0,1,1.587-1.613,1.6,1.6,0,0,1,1.614,1.613v.688a5.062,5.062,0,0,1,4.364-2.434c3.147,0,4.972,2.116,4.972,5.343v7.458a1.559,1.559,0,0,1-1.587,1.587,1.581,1.581,0,0,1-1.613-1.587v-6.48c0-2.169-1.084-3.412-2.989-3.412-1.851,0-3.147,1.3-3.147,3.465v6.427a1.6,1.6,0,0,1-3.2,0Z" transform="translate(-220.757 -254.203)" fill="#fff"/>
+        <path id="Tracé_374" data-name="Tracé 374" d="M298.892,260.631v-7.353h-.529a1.375,1.375,0,0,1,0-2.751h.529v-2.38a1.6,1.6,0,0,1,3.2,0v2.38h2.513a1.376,1.376,0,1,1,0,2.751h-2.513v6.85a1.524,1.524,0,0,0,1.719,1.746,7.566,7.566,0,0,0,.794-.079,1.349,1.349,0,0,1,1.349,1.323,1.377,1.377,0,0,1-.846,1.243,6.362,6.362,0,0,1-2.2.37C300.558,264.73,298.892,263.7,298.892,260.631Z" transform="translate(-258.48 -245.052)" fill="#fff"/>
+        <path id="Tracé_375" data-name="Tracé 375" d="M335.893,272.373a1.226,1.226,0,0,1-.608-1.111,1.281,1.281,0,0,1,1.3-1.3,1.4,1.4,0,0,1,.688.185,7.372,7.372,0,0,0,4.02,1.349c1.375,0,2.169-.582,2.169-1.508v-.053c0-1.084-1.481-1.454-3.121-1.957-2.063-.582-4.364-1.428-4.364-4.1v-.053c0-2.645,2.2-4.258,4.972-4.258a9.6,9.6,0,0,1,4.39,1.137,1.356,1.356,0,0,1,.767,1.217,1.287,1.287,0,0,1-1.322,1.3,1.256,1.256,0,0,1-.635-.159,7.615,7.615,0,0,0-3.28-.952c-1.243,0-1.957.582-1.957,1.375v.053c0,1.031,1.508,1.455,3.147,1.984,2.037.634,4.337,1.56,4.337,4.073v.053c0,2.936-2.274,4.39-5.184,4.39A9.544,9.544,0,0,1,335.893,272.373Z" transform="translate(-285.802 -254.335)" fill="#fff"/>
+        <path id="Tracé_376" data-name="Tracé 376" d="M410.736,260.631v-7.353h-.529a1.375,1.375,0,1,1,0-2.751h.529v-2.38a1.6,1.6,0,0,1,3.2,0v2.38h2.513a1.376,1.376,0,1,1,0,2.751h-2.513v6.85a1.524,1.524,0,0,0,1.719,1.746,7.578,7.578,0,0,0,.794-.079,1.349,1.349,0,0,1,1.349,1.323,1.377,1.377,0,0,1-.846,1.243,6.364,6.364,0,0,1-2.2.37C412.4,264.73,410.736,263.7,410.736,260.631Z" transform="translate(-338.27 -245.052)" fill="#fff"/>
+        <path id="Tracé_377" data-name="Tracé 377" d="M463.107,272.518a1.613,1.613,0,0,1-3.227,0V271.8a5.026,5.026,0,0,1-4.364,2.46c-3.147,0-4.972-2.116-4.972-5.369v-7.432a1.6,1.6,0,1,1,3.2,0v6.48c0,2.169,1.085,3.385,2.989,3.385,1.851,0,3.147-1.27,3.147-3.438v-6.427a1.6,1.6,0,0,1,1.613-1.613,1.62,1.62,0,0,1,1.613,1.613Z" transform="translate(-368.028 -254.533)" fill="#fff"/>
+        <path id="Tracé_378" data-name="Tracé 378" d="M508.312,242.886A1.559,1.559,0,0,1,509.9,241.3a1.581,1.581,0,0,1,1.613,1.587V249.1a5.59,5.59,0,0,1,4.761-2.619c3.28,0,6.48,2.592,6.48,7.247v.053c0,4.628-3.174,7.247-6.48,7.247a5.7,5.7,0,0,1-4.761-2.46v.714a1.6,1.6,0,0,1-3.2,0Zm11.188,10.9v-.053c0-2.7-1.825-4.47-3.994-4.47a4.211,4.211,0,0,0-4.073,4.47v.053a4.211,4.211,0,0,0,4.073,4.47C517.7,258.253,519.5,256.534,519.5,253.783Z" transform="translate(-409.24 -241.299)" fill="#fff"/>
+        <path id="Tracé_379" data-name="Tracé 379" d="M574.724,273.96a6.968,6.968,0,0,1-7.167-7.247v-.053c0-3.994,2.83-7.273,6.824-7.273a6.606,6.606,0,0,1,6.638,6.877,1.5,1.5,0,0,1-1.508,1.534h-8.754a3.9,3.9,0,0,0,4.02,3.544,5.02,5.02,0,0,0,3.306-1.217,1.191,1.191,0,0,1,.819-.291,1.259,1.259,0,0,1,1.27,1.3,1.4,1.4,0,0,1-.423.979A7.171,7.171,0,0,1,574.724,273.96Zm3.174-8.279c-.212-2.063-1.428-3.676-3.544-3.676-1.957,0-3.333,1.507-3.623,3.676Z" transform="translate(-451.506 -254.203)" fill="#fff"/>
+      </g>
+    </g>
+    <g id="Groupe_7908" data-name="Groupe 7908" transform="translate(234.216 208.083)">
+      <circle id="Ellipse_2" data-name="Ellipse 2" cx="5.337" cy="5.337" r="5.337" transform="translate(15.103 23.449)" fill="#fff"/>
+      <circle id="Ellipse_3" data-name="Ellipse 3" cx="5.337" cy="5.337" r="5.337" transform="translate(15.103 9.198)" fill="#fff"/>
+      <circle id="Ellipse_4" data-name="Ellipse 4" cx="6.416" cy="6.416" r="6.416" transform="translate(0 15.217)" fill="#fff"/>
+      <circle id="Ellipse_5" data-name="Ellipse 5" cx="6.416" cy="6.416" r="6.416" fill="#fff"/>
+      <circle id="Ellipse_6" data-name="Ellipse 6" cx="6.416" cy="6.416" r="6.416" transform="translate(0 30.376)" fill="#fff"/>
+      <circle id="Ellipse_7" data-name="Ellipse 7" cx="4.429" cy="4.429" r="4.429" transform="translate(27.594 17.204)" fill="#fff"/>
+    </g>
+  </g>
+</svg>