Changement de la page Help pour intéger les pages comment faire un cv video

nextjs/components/organisms/AccountEtape1.js

@@ -41,7 +41,7 @@ const styles = theme => ({
         },
     },
     textFieldSmall: {
-        width: '32%',
+        width: '48%',
         '&:disabled': {
             color: theme.palette.secondary.dark,
         },

nextjs/components/organisms/AccountEtape3.js

@@ -149,7 +149,7 @@ class Etape3 extends React.Component {
               </CardActions>
               <CardContent>
                 <Typography>
-                  <a href={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentCv + this.state.cvLink} target="_blank">Lien vers le cv téléchargé</a><br />
+                  <a href={publicRuntimeConfig.frontServerUrl + publicRuntimeConfig.postedContentCv + this.state.cvLink} target="_blank">Lien vers le cv téléchargé</a><br />
                 {/* <a href="https://www.permatheque.fr/PDF/mansobufukuoka-larevolutiondunseulbrindepaille.pdf" target="_blank">lien</a> */}
                 </Typography>
               </CardContent>

nextjs/components/organisms/AccountProfile.js

@@ -253,8 +253,8 @@ const AccountProfile = props => {
                                     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">{user.linkedin}</a> : 'Non renseigné'}<br/>
-                                    <PublicIcon className={classes.menuButton}/> : {(user.website && user.website !='' && user.website != 'null') ? <a href={user.website} target="_blank">{user.website}</a> : 'Non renseigné'}
+                                    <LinkedInIcon className={classes.menuButton}/> : {(user.linkedin && user.linkedin !='' && user.linkedin != 'null') ? <a href={user.linkedin} target="_blank">Lien sur mon linkendIn</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é'}
                                 </Typography>
                                 <Typography className={classes.dateText} color="textSecondary" variant="body1"></Typography>
                             </div>

nextjs/pages/Help.js

@@ -8,8 +8,8 @@ import { withStyles } from '@material-ui/core/styles';
 import Layout from "../components/templates/Layout"
 import Footer from '../components/organisms/Footer';
 import Link from 'next/link';
-import Head from 'next/head'
-import VideoVimeo from './../components/atoms/VideoVimeo'
+import Head from 'next/head';
+import VideoVimeo from './../components/atoms/VideoVimeo';
 
 const styles = theme => ({
   root: {
@@ -128,7 +128,35 @@ function Help(props) {
           gutterBottom>
           Suivez nos conseils pour postuler simplement aux offres d’emploi. La vidéo de motivation vous permet de dévoiler votre personnalité, vos compétences, votre parcours, vos valeurs, vos soft-skills, votre ambition,…. et bien plus encore.
         </Typography>
-      
+        <Typography gutterBottom component="h2"
+          className={classes.subTitle}>
+           Comment réussir votre CV vidéo
+        </Typography>
+        <Typography
+          className={classes.text}
+          gutterBottom>
+          Suivez ce <a href="https://blog.talentstube.com/faire-cv-video" target="_blank" >lien</a>
+        </Typography>
+
+        <Typography gutterBottom component="h2"
+          className={classes.subTitle}>
+           Accompagnement à la création d'un CV vidéo professionnel
+        </Typography>
+        <Typography
+          className={classes.text}
+          gutterBottom>
+          Suivez ce <a href="https://blog.talentstube.com/accompagnement-cv-video" target="_blank" >lien</a>
+        </Typography>
+
+        <Typography gutterBottom component="h2"
+          className={classes.subTitle}>
+          Pourquoi faire un CV vidéo ?
+        </Typography>
+        <Typography
+          className={classes.text}
+          gutterBottom>
+          Suivez ce <a href="https://blog.talentstube.com/faire-cv-video" target="_blank" >lien</a>
+        </Typography>
        
         
       </section>

nextjs/pages/faire-cv-video.js

@@ -0,0 +1,357 @@
+/* eslint-disable jsx-a11y/anchor-is-valid 
+
+*/
+
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
+import Layout from "../components/templates/Layout"
+import Footer from '../components/organisms/Footer';
+import Head from 'next/head'
+import VideoVimeo from './../components/atoms/VideoVimeo'
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Grid from '@material-ui/core/Grid';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: theme.spacing(2),
+    [theme.breakpoints.up('sm')]: {
+      margin: 'auto',
+      padding: '0 20vw',
+      paddingBottom: theme.spacing(5),
+    },
+  },
+  title: {
+    fontFamily: 'Dosis',
+    fontSize: '1.5em',
+    fontWeight: '600',
+    padding: theme.spacing(3, 0),
+    [theme.breakpoints.up('sm')]: {
+      paddingTop: theme.spacing(6),
+    },
+  },
+  subTitle: {
+    fontSize: '1.1em',
+    fontWeight: '500',
+    padding: theme.spacing(2, 0),
+  },
+  text: {
+    fontSize: '0.9em',
+    fontWeight: '300',
+  },
+  teamworkingImg: {
+    padding: theme.spacing(2, 0),
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      width: 'inherit',
+    },
+  },
+  captureImg: {
+    padding: theme.spacing(2),
+    width: '100%',
+    objectFit: 'contain',
+  },
+  button: {
+    textTransform: 'inherit',
+    margin: theme.spacing(4,8),
+    padding: theme.spacing(1.2, 2),
+    borderRadius: '3px',
+  },
+  primary: {
+    color: theme.palette.primary.main,
+  },
+  bold: {
+    fontWeight: '500',
+  },
+  video: {
+    display: 'flex',
+        flexDirection: 'column',
+        position: 'relative',
+        paddingBottom: '55%', /* 16:9  58%*/
+        '& iframe': {
+            position: 'absolute',
+            top: 0,
+            left: 'calc(50% - 50vw)',
+            width: '100vw',
+            height: '100%',
+        },
+        [theme.breakpoints.up('md')]: {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            paddingBottom: '55%', /* 16:9 */
+            '& iframe': {
+                position: 'absolute',
+                top: 0,
+                left: 'calc(50% - 27vw)',
+                width: '54vw',
+                height: '100%',
+            },
+        },
+  },
+  containerReactApp: {
+        width:'100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: '10vh',
+        paddingTop: theme.spacing(4),
+        backgroundColor: theme.palette.primary.main,
+        [theme.breakpoints.down('xs')]: {
+            height: '4vh',
+        },
+        [theme.breakpoints.up('md')]: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-around',
+            height: '4vh',
+            padding: theme.spacing(6, 1),
+            position: 'relative',
+        },
+    },
+  titleReactApp: {
+        fontFamily: 'Dosis',
+        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',
+        },
+    },
+    paper: {
+        padding: '6px 16px',
+      },
+    secondaryTail: {
+    backgroundColor: theme.palette.secondary.main,
+    },
+
+    media: {
+        width:350,
+        height: 140,
+    },
+
+});
+
+function Help(props) {
+  const { classes } = props;
+
+  return (
+    <Layout>
+    <Head>
+      <title key="title">Recrutement vidéo : fonctionnement – Talents Tube</title>
+    </Head>
+      <section className={classes.root}>
+        <Typography gutterBottom component="h1"
+          className={classes.title}>
+          Comment réussir votre CV vidéo <span className={classes.primary}>?</span>
+        </Typography>
+
+        <Typography
+          className={classes.text}
+          gutterBottom>
+          Le CV vidéo est <span className={classes.bold}>le meilleur moyen de mettre en image et d’illustrer votre expérience</span>, vos compétences et votre personnalité. S'il est de plus en plus prisé chez les recruteurs et les candidats, certains codes sont tout de même à respecter. Afin de réussir votre CV vidéo et mettre toutes les chances de votre côté, suivez les conseils de Talents Tube !
+        </Typography>
+        {/* <Typography gutterBottom component="h2"
+          className={classes.subTitle}>
+          Comment postuler à une offre d’emploi en vidéo
+        </Typography> */}
+        <VideoVimeo classesOverride={classes.videoVimeo} videoId="286344340" autoplay='0' />
+        <Typography
+          className={classes.text}
+          gutterBottom>
+         
+        </Typography>
+        <div  className={classes.containerReactApp}>
+        
+                        <Typography
+                            gutterBottom
+                            color="secondary"
+                            align="center"
+                            component="h3"
+                            className={classes.titleReactApp}
+                        >
+                            Écrivez un scénario
+                        </Typography>
+                        
+
+        </div>
+        <Grid container spacing={3}>
+        <Card className={classes.root}>
+            <CardActionArea>
+                <CardMedia
+                className={classes.media}
+                image=""
+                title="Contemplative Reptile"
+                />
+                <CardContent>
+                <Typography gutterBottom variant="h5" component="h2">
+                Écrivez un scénario
+                </Typography>
+                <Typography variant="body2" color="textSecondary" component="p">
+                Le scénario est le premier élément indispensable. Hiérarchisez toutes les informations que vous souhaitez aborder :
+                <ul>
+                <li> Présentation</li> 
+                <li>Formations </li>
+                <li>Expériences </li>
+                <li>Compétences </li>
+                <li>Personnalité </li>
+                <li>Loisirs / Passions </li>
+                </ul>
+                </Typography>
+                </CardContent>
+            </CardActionArea>
+            <CardActions>
+                <Button size="small" color="primary">
+                Share
+                </Button>
+                <Button size="small" color="primary">
+                Learn More
+                </Button>
+            </CardActions>
+        </Card>
+        </Grid>
+        <Grid container spacing={3}>
+            <Card className={classes.root}>
+                <CardActionArea>
+                    <CardMedia
+                    className={classes.media}
+                    image=""
+                    title="Contemplative Reptile"
+                    />
+                    <CardContent>
+                    <Typography gutterBottom variant="h5" component="h2">
+                    Passez à la réalisation
+                    </Typography>
+                    <Typography variant="body2" color="textSecondary" component="p">
+                    Le scénario est le premier élément indispensable. Hiérarchisez toutes les informations que vous souhaitez aborder :
+                    <ul>
+                    <li> Présentation</li> 
+                    <li>Formations </li>
+                    <li>Expériences </li>
+                    <li>Compétences </li>
+                    <li>Personnalité </li>
+                    <li>Loisirs / Passions </li>
+                    </ul>
+                    </Typography>
+                    </CardContent>
+                </CardActionArea>
+                <CardActions>
+                    <Button size="small" color="primary">
+                    Share
+                    </Button>
+                    <Button size="small" color="primary">
+                    Learn More
+                    </Button>
+                </CardActions>
+            </Card>
+
+            <Card className={classes.root}>
+                <CardActionArea>
+                    <CardMedia
+                    className={classes.media}
+                    image=""
+                    title="Contemplative Reptile"
+                    />
+                    <CardContent>
+                    <Typography gutterBottom variant="h5" component="h2">
+                    Passez à la réalisation
+                    </Typography>
+                    <Typography variant="body2" color="textSecondary" component="p">
+                    Le scénario est le premier élément indispensable. Hiérarchisez toutes les informations que vous souhaitez aborder :
+                    <ul>
+                    <li> Présentation</li> 
+                    <li>Formations </li>
+                    <li>Expériences </li>
+                    <li>Compétences </li>
+                    <li>Personnalité </li>
+                    <li>Loisirs / Passions </li>
+                    </ul>
+                    </Typography>
+                    </CardContent>
+                </CardActionArea>
+                <CardActions>
+                    <Button size="small" color="primary">
+                    Share
+                    </Button>
+                    <Button size="small" color="primary">
+                    Learn More
+                    </Button>
+                </CardActions>
+            </Card>
+
+            <Card className={classes.root}>
+                <CardActionArea>
+                    <CardMedia
+                    className={classes.media}
+                    image=""
+                    title="Contemplative Reptile"
+                    />
+                    <CardContent>
+                    <Typography gutterBottom variant="h5" component="h2">
+                    Passez à la réalisation
+                    </Typography>
+                    <Typography variant="body2" color="textSecondary" component="p">
+                    Le scénario est le premier élément indispensable. Hiérarchisez toutes les informations que vous souhaitez aborder :
+                    <ul>
+                    <li> Présentation</li> 
+                    <li>Formations </li>
+                    <li>Expériences </li>
+                    <li>Compétences </li>
+                    <li>Personnalité </li>
+                    <li>Loisirs / Passions </li>
+                    </ul>
+                    </Typography>
+                    </CardContent>
+                </CardActionArea>
+                <CardActions>
+                    <Button size="small" color="primary">
+                    Share
+                    </Button>
+                    <Button size="small" color="primary">
+                    Learn More
+                    </Button>
+                </CardActions>
+            </Card>
+        </Grid>
+        
+      </section>
+      <Footer />
+    </Layout>
+  );
+}
+
+Help.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Help);