Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 llaniau
|
933333b786 | ||
|
llaniau
|
daf65d5a47 | ||
|
llaniau
|
9f1f092259 | ||
|
llaniau
|
d47a393eb6 | ||
|
llaniau
|
5421091175 | ||
|
llaniau
|
81bd79ecac | ||
|
llaniau
|
996c2c5728 | ||
|
llaniau
|
605b43a866 | ||
|
llaniau
|
3e5d9f2555 | ||
|
llaniau
|
e8bb1374d9 | ||
|
llaniau
|
8be4c6d08c | ||
|
llaniau
|
b519451a0c | ||
|
llaniau
|
04d03aa736 | ||
|
llaniau
|
c71fe2b452 | ||
|
llaniau
|
ee45ef810b |
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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> */}
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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>)
|
||||
:
|
||||
|
||||
@@ -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>)
|
||||
:
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -55,7 +55,7 @@ module.exports = withPlugins(
|
||||
blogUrl: 'https://blog.talentstube.com',
|
||||
frontServerUrl: 'https://pp.app.talentstube.com/',
|
||||
cvThequeUrl: 'https://recruteur.talentstube.com',
|
||||
version : 'V2.7.2',
|
||||
version : 'V2.8.2',
|
||||
adListDefaultUrl: '/statique/images/default/default_picture_company.jpg',
|
||||
cachedMediaUrl: '/media/cache/profile_thumb/uploads/img/',
|
||||
postedContentUrl: '/uploads/img/',
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
<?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&url=/Offre/135-commercial-b-to-c-f-h&videoId=502499843&typeEntite=Offre&nameCompany=Fym%20Action&nameOffre=Commercial%20B%20to%20C%20(F/H)</loc>
|
||||
<lastmod>2021-02-10</lastmod>
|
||||
@@ -159,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>
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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'}
|
||||
|
||||
+48
-10
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -32,7 +32,11 @@ class MyDocument extends Document {
|
||||
{/* PWA primary color */}
|
||||
<meta name="theme-color" content={theme.palette.primary.main} />
|
||||
<link rel="preload" href="/statique/css/fonts.css" rel="stylesheet">
|
||||
|
||||
</link>
|
||||
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/statique/css/autocomplete.css" />
|
||||
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYV8IJGtIoWLfXJQQvIuDQ88n2aEuRgpg&libraries=places"></script>
|
||||
<script async type="text/javascript" src="/static/js/pwaInstaller.js" ></script>
|
||||
{/* Global Site Tag (gtag.js) - Google Analytics */}
|
||||
|
||||
+509
-5
@@ -12,15 +12,16 @@ import { connect } from 'react-redux'
|
||||
import { fetchEmphasisJobsRequest } from "../actions/ads";
|
||||
//const fetchEmphasisCompaniesRequest = lazy(() => import('../actions/companies'));
|
||||
import { fetchEmphasisCompaniesRequest } from "../actions/companies";
|
||||
import Loader from './../components/templates/loader'
|
||||
import Loader from '../components/templates/loader'
|
||||
import { isEmpty } from "lodash"
|
||||
import NoResult from './../components/atoms/NoResult';
|
||||
import NoResult from '../components/atoms/NoResult';
|
||||
// import Head from 'next/head'
|
||||
import dynamic from 'next/dynamic'
|
||||
import OgHead from '../components/atoms/OgHead';
|
||||
import getConfig from 'next/config'
|
||||
import { BreadcrumbJsonLd } from 'next-seo';
|
||||
|
||||
import Slider from "react-slick";
|
||||
import Hidden from '@material-ui/core/Hidden';
|
||||
// const VideoSlider = dynamic(() => import('../components/organisms/ShortVideoHooker'), {
|
||||
// ssr: false
|
||||
// });
|
||||
@@ -79,6 +80,9 @@ const styles = theme => ({
|
||||
scrollerSectionCompany: {
|
||||
backgroundColor: theme.palette.background.grey,
|
||||
},
|
||||
scrollerSectionSlider:{
|
||||
backgroundColor: theme.palette.secondary.main,
|
||||
},
|
||||
card: {
|
||||
margin: theme.spacing(1),
|
||||
width: '96%',
|
||||
@@ -139,7 +143,233 @@ const styles = theme => ({
|
||||
margin: 'auto',
|
||||
},
|
||||
},
|
||||
choix: {
|
||||
color:"#fff",
|
||||
position: "absolute",
|
||||
top: "0",
|
||||
bottom: "0",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
alignItems: "flex-start"
|
||||
},
|
||||
choixMobile: {
|
||||
color:"#fff",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
|
||||
},
|
||||
containerVideoGauche :{
|
||||
position: "relative",
|
||||
height:"100%",
|
||||
width:"50%",
|
||||
backgroundImage: 'url("/statique/images/accueil/trouver-un-job.jpg")',
|
||||
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundBlendMode: 'darken',
|
||||
backgroundColor: 'rgba(30,35,39,0.4)',
|
||||
},
|
||||
containerVideoDroite :{
|
||||
position: "relative",
|
||||
backgroundColor:"red",
|
||||
height:"100%",
|
||||
width:"50%",
|
||||
backgroundImage: 'url("/statique/images/accueil/recruter-des-talents.jpg") ',
|
||||
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundBlendMode: 'darken',
|
||||
backgroundColor: 'rgba(30,35,39,0.5)',
|
||||
},
|
||||
containerVideoMobile :{
|
||||
height:"100%",
|
||||
width:"100%",
|
||||
backgroundImage: 'url("/statique/images/accueil/trouver-un-job.jpg")',
|
||||
padding :"0 30px",
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundBlendMode: 'darken',
|
||||
backgroundColor: 'rgba(30,35,39,0.5)',
|
||||
},
|
||||
containerTitre :{
|
||||
|
||||
},
|
||||
wrap :{
|
||||
[theme.breakpoints.up('md')]: {
|
||||
height: "85%",
|
||||
width: "100%",
|
||||
position: "relative",
|
||||
},
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
position: "relative",
|
||||
},
|
||||
headerTitre :{
|
||||
backgroundColor:"transparent",
|
||||
height: "100px",
|
||||
width: "100%",
|
||||
position: "absolute",
|
||||
top: "30px",
|
||||
textAlign:"center",
|
||||
color:"#fff",
|
||||
zIndex : "1000"
|
||||
},
|
||||
headerTitreMobile :{
|
||||
width: "100%",
|
||||
textAlign:"center",
|
||||
color:"#fff",
|
||||
marginBottom:"30px"
|
||||
},
|
||||
blocRecruteur:{
|
||||
backgroundColor:"#fff",
|
||||
bottom:"40px",
|
||||
left:"60px",
|
||||
position: "absolute",
|
||||
padding:"50px",
|
||||
fontWeight: "600",
|
||||
minWidth:"40%",
|
||||
borderRadius:"5px",
|
||||
},
|
||||
blocCandidat:{
|
||||
backgroundColor:"#fff",
|
||||
bottom:"40px",
|
||||
right:"60px",
|
||||
position: "absolute",
|
||||
padding:"50px",
|
||||
fontWeight: "600",
|
||||
minWidth:"40%",
|
||||
borderRadius:"5px",
|
||||
},
|
||||
blocRecruteurMobile:{
|
||||
backgroundColor:"#fff",
|
||||
padding:"20px",
|
||||
fontWeight: "600",
|
||||
minWidth:"90%",
|
||||
borderRadius:"5px",
|
||||
margin :"15px 0"
|
||||
},
|
||||
blocCandidatMobile:{
|
||||
backgroundColor:"#fff",
|
||||
padding:"20px",
|
||||
fontWeight: "600",
|
||||
minWidth:"90%",
|
||||
borderRadius:"5px",
|
||||
margin :"60px 0 15px 0"
|
||||
},
|
||||
titreAccueil:{
|
||||
fontSize:"2.5em",
|
||||
textAlign:"center",
|
||||
color:"#fff",
|
||||
paddingTop:"0px",
|
||||
fontWeight: "600",
|
||||
fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
|
||||
},
|
||||
titreAccueil2:{
|
||||
fontSize:"1.5em",
|
||||
textAlign:"center",
|
||||
color:"#fff",
|
||||
paddingTop:"40px",
|
||||
fontWeight: "400",
|
||||
fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
|
||||
},
|
||||
titreAccueilMobile:{
|
||||
fontSize:"2.5em",
|
||||
textAlign:"center",
|
||||
color:"#fff",
|
||||
paddingTop:"0px",
|
||||
fontWeight: "600",
|
||||
fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
|
||||
},
|
||||
titreAccueil2Mobile:{
|
||||
fontSize:"1.5em",
|
||||
textAlign:"center",
|
||||
color:"#fff",
|
||||
paddingTop:"40px",
|
||||
fontWeight: "400",
|
||||
fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
|
||||
},
|
||||
jeSuis:{
|
||||
fontSize:"1em",
|
||||
textTransform: "uppercase",
|
||||
color:"#1E2327",
|
||||
textAlign: "left",
|
||||
fontWeight: "300",
|
||||
fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
|
||||
marginBottom:"1em"
|
||||
},
|
||||
jeSuisMobile:{
|
||||
fontSize:"1em",
|
||||
textTransform: "uppercase",
|
||||
color:"#1E2327",
|
||||
textAlign: "center",
|
||||
fontWeight: "300",
|
||||
fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
|
||||
marginBottom:"1em"
|
||||
},
|
||||
action:{
|
||||
fontSize:"1.5em",
|
||||
color:"#1E2327",
|
||||
textAlign: "left",
|
||||
fontWeight: "600",
|
||||
fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
|
||||
marginBottom:"1.5em"
|
||||
},
|
||||
boutonCandidat:{
|
||||
width:"100%",
|
||||
},
|
||||
boutonRecruteur:{
|
||||
width:"100%",
|
||||
color: theme.palette.secondary.main,
|
||||
backgroundColor: theme.palette.primary.important,
|
||||
},
|
||||
boutonCandidatMobile:{
|
||||
width:"100%",
|
||||
margin : "0px !important"
|
||||
},
|
||||
boutonRecruteurMobile:{
|
||||
width:"100%",
|
||||
color: theme.palette.secondary.main,
|
||||
backgroundColor: theme.palette.primary.important,
|
||||
margin : "0px !important"
|
||||
},
|
||||
temoignage:{
|
||||
textAlign:"center"
|
||||
},
|
||||
lien:{
|
||||
textDecoration:'none',
|
||||
color:'#fff'
|
||||
},
|
||||
alignVertical:{
|
||||
verticalAlign:"middle !important",
|
||||
maxHeight :"80px",
|
||||
minHeight :"60px",
|
||||
|
||||
},
|
||||
alignVerticalMobile:{
|
||||
verticalAlign:"middle !important",
|
||||
maxHeight :"70px",
|
||||
minHeight :"70px",
|
||||
|
||||
},
|
||||
sliderDiv:{
|
||||
padding:"30px"
|
||||
},
|
||||
sliderDivMobile:{
|
||||
display: "inline !important",
|
||||
padding:"10px",
|
||||
|
||||
},
|
||||
sliderContainerMobile:{
|
||||
textAlign:"center"
|
||||
}
|
||||
});
|
||||
///
|
||||
|
||||
class Index extends React.Component {
|
||||
state = {
|
||||
@@ -159,7 +389,22 @@ class Index extends React.Component {
|
||||
}
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
|
||||
const settings = {
|
||||
dots: false,
|
||||
infinite: true,
|
||||
slidesToShow: 5,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 2000
|
||||
};
|
||||
const settingsMobile = {
|
||||
dots: false,
|
||||
infinite: true,
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 2000
|
||||
};
|
||||
const socialShareUrl = typeof window !== 'undefined' ? window.location
|
||||
: publicRuntimeConfig.frontServerUrl ;
|
||||
const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
|
||||
@@ -197,10 +442,90 @@ class Index extends React.Component {
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div className={classes.wrap}>
|
||||
|
||||
<Hidden smDown>
|
||||
<header className={classes.headerTitre}>
|
||||
<h1 className={classes.titreAccueil}>La rencontre d’offres d’emploi et de candidatures en vidéo</h1>
|
||||
<span className={classes.titreAccueil2}>
|
||||
Parce que vous méritez mieux que du texte !
|
||||
</span>
|
||||
</header>
|
||||
<section className={classes.choix}>
|
||||
|
||||
<div className={classes.containerVideoGauche}>
|
||||
|
||||
<div className={classes.blocCandidat}>
|
||||
<div className={classes.jeSuis}>JE SUIS CANDIDAT</div>
|
||||
<div className={classes.action}>Je trouve un job</div>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => Router.push('/Offres')}
|
||||
className={classes.button + ' ' + classes.boutonCandidat}
|
||||
>Découvrir les offres
|
||||
</Button>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes.containerVideoDroite}>
|
||||
|
||||
<div className={classes.blocRecruteur}>
|
||||
<div className={classes.jeSuis}>JE SUIS recruteur</div>
|
||||
<div className={classes.action}>Je recrute des talents</div>
|
||||
<a href='https://recruteur.talentstube.com' className={classes.lien}>
|
||||
<Button
|
||||
variant="contained"
|
||||
className={classes.button + ' ' + classes.boutonRecruteur}
|
||||
>Déposer une offre
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Hidden>
|
||||
{/* PARTIE MOBILE */}
|
||||
<Hidden mdUp>
|
||||
|
||||
<section className={classes.choixMobile}>
|
||||
|
||||
<div className={classes.containerVideoMobile}>
|
||||
<div className={classes.headerTitreMobile}>
|
||||
<h1 className={classes.titreAccueilMobile}>La rencontre d’offres d’emploi et de candidatures en vidéo</h1>
|
||||
<span className={classes.titreAccueil2Mobile}>
|
||||
Parce que vous méritez mieux que du texte !
|
||||
</span>
|
||||
</div>
|
||||
<div className={classes.blocCandidatMobile}>
|
||||
<div className={classes.jeSuisMobile}>JE SUIS CANDIDAT</div>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => Router.push('/Offres')}
|
||||
className={classes.button + ' ' + classes.boutonCandidatMobile}
|
||||
>Je trouve un job
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classes.blocRecruteurMobile}>
|
||||
<div className={classes.jeSuisMobile}>JE SUIS recruteur</div>
|
||||
|
||||
<a href='https://recruteur.talentstube.com' className={classes.lien}>
|
||||
<Button
|
||||
variant="contained"
|
||||
className={classes.button + ' ' + classes.boutonRecruteurMobile}
|
||||
>Je recrute des talents
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Hidden>
|
||||
</div>
|
||||
<div className={classes.container}>
|
||||
|
||||
{/* <VideoSlider /> */}
|
||||
|
||||
|
||||
<section className={classes.scrollerSection + ' ' + classes.scrollerSectionOffer}>
|
||||
<div
|
||||
className={classes.HorizontalScrollerOffre}
|
||||
@@ -281,6 +606,185 @@ class Index extends React.Component {
|
||||
</Button>
|
||||
</section>
|
||||
|
||||
<section className={classes.scrollerSection + ' ' + classes.scrollerSectionCompany}>
|
||||
<div
|
||||
className={classes.HorizontalScrollerOffre}
|
||||
>
|
||||
<div className={classes.titleContainer}>
|
||||
<Typography gutterBottom
|
||||
className={classes.beforeTitle}>
|
||||
Témoignage
|
||||
</Typography>
|
||||
<Typography gutterBottom component="h1"
|
||||
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} src="/statique/images/logos/recrutement-video-lactalis.jpg"></img>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/Entreprise/28481-onela">
|
||||
<div className={classes.sliderDiv}>
|
||||
<img className={classes.alignVertical} 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} 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} 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} 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} src="/statique/images/logos/recrutement-video-ADMR.jpg"></img>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/Entreprise/13464-jpa">
|
||||
<div className={classes.sliderDiv}>
|
||||
<img className={classes.alignVertical} 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} 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} 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} 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} 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} 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} 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} src="/statique/images/logos/recrutement-video-lactalis.jpg"></img>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/Entreprise/28481-onela">
|
||||
<div className={classes.sliderDivMobile}>
|
||||
<img className={classes.alignVerticalMobile} 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} 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} 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} 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} src="/statique/images/logos/recrutement-video-ADMR.jpg"></img>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/Entreprise/13464-jpa">
|
||||
<div className={classes.sliderDivMobile}>
|
||||
<img className={classes.alignVerticalMobile} 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} 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} 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} 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} 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} 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} src="/statique/images/logos/recrutement-video-tpc-ouest-btp.jpg"></img>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</Hidden>
|
||||
</section>
|
||||
<Footer />
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
@@ -1,750 +0,0 @@
|
||||
import React from 'react';
|
||||
import AppBar from '@material-ui/core/AppBar';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import CameraIcon from '@material-ui/icons/PhotoCamera';
|
||||
import Card from '@material-ui/core/Card';
|
||||
import CardActions from '@material-ui/core/CardActions';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
import CardMedia from '@material-ui/core/CardMedia';
|
||||
import CssBaseline from '@material-ui/core/CssBaseline';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Toolbar from '@material-ui/core/Toolbar';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import {makeStyles} from '@material-ui/core/styles';
|
||||
import Container from '@material-ui/core/Container';
|
||||
import Link from '@material-ui/core/Link';
|
||||
import VideoVimeo from '../components/atoms/VideoVimeo'
|
||||
import 'video-react/dist/video-react.css';
|
||||
import {Player} from 'video-react';
|
||||
import Hidden from '@material-ui/core/Hidden';
|
||||
import dynamic from 'next/dynamic'
|
||||
import OgHead from '../components/atoms/OgHead';
|
||||
import getConfig from 'next/config'
|
||||
|
||||
const Footer = dynamic(() => import ('../components/organisms/FooterAccueil'), {ssr: false});
|
||||
|
||||
function Copyright() {
|
||||
return (
|
||||
<Typography variant="body2" color="textSecondary" align="center">
|
||||
{'Copyright © '}
|
||||
<Link color="inherit" href="https://material-ui.com/">
|
||||
Your Website
|
||||
</Link>{' '} {new Date().getFullYear()}
|
||||
{'.'}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
icon: {
|
||||
marginRight: theme.spacing(2)
|
||||
},
|
||||
actionBtn: {
|
||||
marginBottom: "0.75em",
|
||||
display: "block"
|
||||
},
|
||||
bttn: {
|
||||
color: "#fff",
|
||||
background: "#FF6A6C",
|
||||
border: "2px solid #FF6A6C",
|
||||
padding: "15px"
|
||||
},
|
||||
heroSection: {
|
||||
// background:
|
||||
// "url('https://blog.talentstube.com/wp-content/uploads/2021/02/realisation-off
|
||||
// r e-emploi-video-smartphone-modele.jpg') center center no-repeat scroll",
|
||||
// backgroundSize: "cover",
|
||||
padding: "5em 0 9em",
|
||||
position: "relative",
|
||||
color: "#fff",
|
||||
[
|
||||
theme
|
||||
.breakpoints
|
||||
.down('md')
|
||||
]: {
|
||||
background: "url('/statique/images/accueil/offre-emploi.jpg') center center no-repeat scroll",
|
||||
backgroundSize: "cover",
|
||||
height: "100%",
|
||||
padding: "0"
|
||||
}
|
||||
},
|
||||
|
||||
mieuxQueTexteSection: {
|
||||
paddingTop: "28em",
|
||||
[
|
||||
theme
|
||||
.breakpoints
|
||||
.down('md')
|
||||
]: {
|
||||
paddingTop: "0"
|
||||
}
|
||||
},
|
||||
mieuxQueTexteTexte: {
|
||||
color: "#fff",
|
||||
font: "normal normal bold 1.625em/1.769em Roboto",
|
||||
letterSpacing: "2",
|
||||
},
|
||||
bloc1Section: {
|
||||
paddingLeft: "5em",
|
||||
paddingRight: "5em"
|
||||
},
|
||||
|
||||
heroSectionMobile: {
|
||||
background: "url('/statique/images/accueil/offre-emploi.jpg') center top no-repeat scroll",
|
||||
padding: "5em 0 9em",
|
||||
position: "relative",
|
||||
color: "#fff"
|
||||
},
|
||||
container: {
|
||||
paddingRight: "15px",
|
||||
paddingLeft: "15px",
|
||||
marginRight: "auto",
|
||||
marginLeft: "auto"
|
||||
},
|
||||
containerMobile: {},
|
||||
colMd12: {
|
||||
position: "relative",
|
||||
minHeight: "1px",
|
||||
paddingLeft: "4em",
|
||||
paddingRight: "4em",
|
||||
|
||||
[
|
||||
theme
|
||||
.breakpoints
|
||||
.down('md')
|
||||
]: {
|
||||
paddingLeft: "2em",
|
||||
paddingRight: "2em",
|
||||
}
|
||||
},
|
||||
welcomeMessageLogo: {
|
||||
marginBottom:"80px",
|
||||
textAlign: "left"
|
||||
},
|
||||
welcomeMessage: {
|
||||
|
||||
textAlign: "left"
|
||||
},
|
||||
welcomeMessageH1: {
|
||||
fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
|
||||
fontSize: "50px",
|
||||
fontWeight: "700",
|
||||
lineHeight: "1.2em !important",
|
||||
color: "#fff",
|
||||
maxWidth: "600px"
|
||||
},
|
||||
welcomeMessageP: {
|
||||
fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
|
||||
fontSize: "20px",
|
||||
marginBottom: "0",
|
||||
color: "#fff",
|
||||
fontWeight: "400",
|
||||
maxWidth: "600px",
|
||||
marginBottom:"80px",
|
||||
},
|
||||
videoBackground: {
|
||||
position: "absolute",
|
||||
right: "0",
|
||||
bottom: "0",
|
||||
top: "0",
|
||||
minWidth: "100%",
|
||||
minHeight: "50%",
|
||||
height: "50%",
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
zIndex: "-100",
|
||||
// background: `url("/statique/images/recrutement-video.jpg")` ,
|
||||
|
||||
},
|
||||
overlay: {
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
minHeight: "100%",
|
||||
background: "rgba(0, 0, 0, 0.36)",
|
||||
top: "0"
|
||||
},
|
||||
overlayMobile: {
|
||||
|
||||
width: "100%",
|
||||
minHeight: "100%",
|
||||
|
||||
top: "0"
|
||||
},
|
||||
heroContent: {
|
||||
backgroundColor: "#1689FB",
|
||||
// backgroundImage:"/statique/images/recrutement-video.jpg",
|
||||
// background:"https://source.unsplash.com/random", backgroundImage:
|
||||
// `url("/statique/images/recrutement-video.jpg")` ,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: "center",
|
||||
padding: theme.spacing(8, 0, 6)
|
||||
},
|
||||
bloc1: {
|
||||
backgroundColor: "#1E2327",
|
||||
// backgroundImage:"/statique/images/recrutement-video.jpg",
|
||||
// background:"https://source.unsplash.com/random", backgroundImage:
|
||||
// `url("/statique/images/recrutement-video.jpg")` ,
|
||||
color: "#FFFFFF",
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: "center",
|
||||
padding: theme.spacing(8, 0, 6),
|
||||
marginTop: "60px"
|
||||
},
|
||||
bloc2: {
|
||||
backgroundColor: "transparent",
|
||||
// backgroundImage:"/statique/images/recrutement-video.jpg",
|
||||
// background:"https://source.unsplash.com/random", backgroundImage:
|
||||
// `url("/statique/images/recrutement-video.jpg")` ,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: "center",
|
||||
|
||||
marginTop: "0px"
|
||||
},
|
||||
bloc3: {
|
||||
backgroundColor: "transparent",
|
||||
// backgroundImage:"/statique/images/recrutement-video.jpg",
|
||||
// background:"https://source.unsplash.com/random", backgroundImage:
|
||||
// `url("/statique/images/recrutement-video.jpg")` ,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: "center",
|
||||
marginTop: "60px"
|
||||
},
|
||||
bloc4: {
|
||||
backgroundColor: "#FCFCFC",
|
||||
// backgroundImage:"/statique/images/recrutement-video.jpg",
|
||||
// background:"https://source.unsplash.com/random", backgroundImage:
|
||||
// `url("/statique/images/recrutement-video.jpg")` ,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: "center",
|
||||
marginTop: "60px"
|
||||
},
|
||||
footerDiv: {
|
||||
backgroundColor: "#1E2327",
|
||||
// backgroundImage:"/statique/images/recrutement-video.jpg",
|
||||
// background:"https://source.unsplash.com/random", backgroundImage:
|
||||
// `url("/statique/images/recrutement-video.jpg")` ,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: "center",
|
||||
padding: theme.spacing(8, 0, 6)
|
||||
},
|
||||
bloc2Titre1: {
|
||||
textAlign: "left",
|
||||
font: "normal normal bold 2.625em/1.667em Roboto",
|
||||
letterSpacing: "2",
|
||||
color: "#1E2327",
|
||||
opacity: "1",
|
||||
lineHeight: "1em"
|
||||
},
|
||||
bloc2Titre2: {
|
||||
textAlign: "left",
|
||||
font: "normal normal bold 1.625em/1.769em Roboto",
|
||||
letterSpacing: "2",
|
||||
color: "#1E2327",
|
||||
opacity: "1",
|
||||
lineHeight: "2em"
|
||||
},
|
||||
bloc2Titre3: {
|
||||
textAlign: "left",
|
||||
font: "normal normal normal 1.25em/1.9em Roboto",
|
||||
letterSpacing: "2",
|
||||
color: "#1E2327",
|
||||
opacity: "1",
|
||||
lineHeight: "3em"
|
||||
},
|
||||
bloc2Paragraphe: {
|
||||
textAlign: "left",
|
||||
font: "normal normal normal 1em/2em Roboto",
|
||||
letterSpacing: "2",
|
||||
color: "#1E2327",
|
||||
opacity: "1",
|
||||
lineHeight: "2em",
|
||||
marginBottom: '62px'
|
||||
},
|
||||
heroButtons: {
|
||||
marginTop: theme.spacing(4)
|
||||
},
|
||||
recruteurButton: {
|
||||
|
||||
width: "182px",
|
||||
height: "49px",
|
||||
background: "#25D89A 0% 0% no-repeat padding-box",
|
||||
border: "2px solid #25D89A",
|
||||
borderRadius: "5px",
|
||||
opacity: "1",
|
||||
color: "#fff",
|
||||
fontWeight: "700",
|
||||
textTransform: "inherit"
|
||||
},
|
||||
talentButton: {
|
||||
|
||||
width: "182px",
|
||||
height: "49px",
|
||||
border: "2px solid #FFFFFF",
|
||||
color: "#FFFFFF",
|
||||
borderRadius: "5px",
|
||||
opacity: "1",
|
||||
textTransform: "inherit",
|
||||
background: "transparent",
|
||||
fontWeight: "700",
|
||||
'&:hover': {
|
||||
background: "#ffffff 0% 0% no-repeat padding-box",
|
||||
color: "#25D89A"
|
||||
}
|
||||
},
|
||||
cardGrid: {
|
||||
|
||||
paddingBottom: theme.spacing(8)
|
||||
},
|
||||
cardGauche: {
|
||||
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
background: "#E7F3FF 0% 0% no-repeat padding-box",
|
||||
boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
|
||||
padding: "50px",
|
||||
minHeight:"650px",
|
||||
'&:hover': {
|
||||
boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
|
||||
},
|
||||
|
||||
[
|
||||
theme
|
||||
.breakpoints
|
||||
.down('md')
|
||||
]: {
|
||||
padding: "50px 0px",
|
||||
}
|
||||
},
|
||||
cardDroite: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
background: "#F8FBFF 0% 0% no-repeat padding-box",
|
||||
boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
|
||||
padding: "50px ",
|
||||
minHeight:"650px",
|
||||
'&:hover': {
|
||||
boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
|
||||
},
|
||||
|
||||
[
|
||||
theme
|
||||
.breakpoints
|
||||
.down('md')
|
||||
]: {
|
||||
padding: "50px 0px",
|
||||
}
|
||||
},
|
||||
cardDroiteGris: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
background: "#FCFCFC 0% 0% no-repeat padding-box",
|
||||
boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
|
||||
padding: "50px",
|
||||
'&:hover': {
|
||||
boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
|
||||
}
|
||||
},
|
||||
bloc1Droite: {
|
||||
backgroundColor: "transparent",
|
||||
boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
|
||||
'&:hover': {
|
||||
boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
|
||||
}
|
||||
},
|
||||
bloc3Droite: {
|
||||
backgroundColor: "transparent",
|
||||
boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
|
||||
'&:hover': {
|
||||
boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
|
||||
}
|
||||
},
|
||||
blocGris: {
|
||||
backgroundColor: "transparent",
|
||||
boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
|
||||
verticalAlign:"middle",
|
||||
'&:hover': {
|
||||
boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
|
||||
}
|
||||
},
|
||||
bloc1DroiteH1: {
|
||||
textAlign: "left",
|
||||
font: "normal normal bold 2.625em/1.667em Roboto",
|
||||
letterSpacing: "2",
|
||||
color: "#ffffff",
|
||||
opacity: "1",
|
||||
lineHeight: "1.5em"
|
||||
},
|
||||
bloc1DroiteParagraphe: {
|
||||
textAlign: "left",
|
||||
font: "normal normal normal 1em/2em Roboto",
|
||||
letterSpacing: "2",
|
||||
color: "#ffffff",
|
||||
opacity: "1",
|
||||
lineHeight: "2em",
|
||||
marginBottom: '62px'
|
||||
},
|
||||
bloc1Gauche: {
|
||||
backgroundColor: "transparent",
|
||||
verticalAlign:"middle"
|
||||
},
|
||||
cardMedia: {
|
||||
paddingTop: '500px', // 16:9
|
||||
},
|
||||
cardContent: {
|
||||
flexGrow: 1
|
||||
},
|
||||
footer: {
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
padding: theme.spacing(6)
|
||||
}
|
||||
}));
|
||||
const {publicRuntimeConfig} = getConfig();
|
||||
const cards = [1, 2];
|
||||
|
||||
export default function Index() {
|
||||
const classes = useStyles();
|
||||
const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
|
||||
const imgUrl = DefaultUrl
|
||||
return (
|
||||
<React.Fragment>
|
||||
<OgHead
|
||||
seo_title="Espace candidat - Plateforme de recrutement en vidéo | Talents Tube"
|
||||
seo_description="Talents Tube est la première plateforme réservée aux offres d'emploi vidéo, vidéo marque employeur et aux CV vidéos. Découvrez une nouvelle méthode de recrutement."
|
||||
seo_url="www.talentstube.com"
|
||||
image={imgUrl}
|
||||
seo_key="Recrutement, video"></OgHead>
|
||||
|
||||
<main>
|
||||
{/* Hero unit */}
|
||||
|
||||
<header >
|
||||
|
||||
<Hidden smDown>
|
||||
<div className={classes.heroSection}></div>
|
||||
<video autoPlay loop muted className={classes.videoBackground}>
|
||||
<source
|
||||
src={"/statique/video/modele-offre-emploi-originale.mp4"}
|
||||
type='video/mp4'/>
|
||||
|
||||
</video>
|
||||
|
||||
|
||||
|
||||
<div className={classes.colMd12}>
|
||||
<div className={classes.welcomeMessageLogo}>
|
||||
<img src="/statique/images/talents-tube-logo.svg"/>
|
||||
</div>
|
||||
<div className={classes.welcomeMessage}>
|
||||
<h1 className={classes.welcomeMessageH1}>Adoptez le recrutement vidéo</h1>
|
||||
<p className={classes.welcomeMessageP}>Talents Tube favorise la mise en relation
|
||||
de candidats et d’entreprises et tout ça en vidéo !</p>
|
||||
</div>
|
||||
<div className={classes.heroButtons}></div>
|
||||
<div className={classes.actionBtn}>
|
||||
<Grid container spacing={2} justify="left">
|
||||
<Grid item>
|
||||
<Button variant="contained" className={classes.recruteurButton}>
|
||||
Je suis recruteur
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Button variant="contained" className={classes.talentButton}>
|
||||
Je suis talent
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* <button
|
||||
className={classes.recruteurButton}
|
||||
data-toggle="modal"
|
||||
data-target="#exampleModal">JE SUIS RECRUTEUR</button>
|
||||
<button
|
||||
className={classes.talentButton}
|
||||
data-toggle="modal"
|
||||
data-target=".bd-example-modal-lg">JE SUIS TALENT</button> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</Hidden>
|
||||
<Hidden mdUp>
|
||||
<div className={classes.heroSectionMobile}>
|
||||
<div className={classes.overlayMobile}>
|
||||
<div className={classes.containerMobile}>
|
||||
|
||||
<div className={classes.colMd12}>
|
||||
<div className={classes.welcomeMessageLogo}>
|
||||
<img src="/statique/images/talents-tube-logo.svg"/>
|
||||
</div>
|
||||
<div className={classes.welcomeMessage}>
|
||||
<h1 className={classes.welcomeMessageH1}>Adoptez le recrutement vidéo</h1>
|
||||
<p className={classes.welcomeMessageP}>Talents Tube favorise la mise en relation
|
||||
de candidats et d’entreprises et tout ça en vidéo !</p>
|
||||
</div>
|
||||
<div className={classes.heroButtons}></div>
|
||||
<div className={classes.actionBtn}>
|
||||
<Grid container spacing={2} justify="left">
|
||||
<Grid item>
|
||||
<Button variant="contained" className={classes.recruteurButton}>
|
||||
Je suis recruteur
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Button variant="contained" className={classes.talentButton}>
|
||||
Je suis talent
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* <button
|
||||
className={classes.recruteurButton}
|
||||
data-toggle="modal"
|
||||
data-target="#exampleModal">JE SUIS RECRUTEUR</button>
|
||||
<button
|
||||
className={classes.talentButton}
|
||||
data-toggle="modal"
|
||||
data-target=".bd-example-modal-lg">JE SUIS TALENT</button> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Hidden>
|
||||
<section className={classes.mieuxQueTexteSection}>
|
||||
<div className={classes.heroContent}>
|
||||
|
||||
<Container maxWidth="lg">
|
||||
<Typography variant="h4" align="center" className={classes.mieuxQueTexteTexte}>
|
||||
« Parce que vous méritez mieux que du texte ! »
|
||||
</Typography>
|
||||
|
||||
</Container>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<section >
|
||||
<div >
|
||||
<Container className={classes.cardGrid} maxWidth="xl">
|
||||
{/* End hero unit */}
|
||||
<Grid container spacing={0}>
|
||||
|
||||
<Grid item key={1} xs={24} sm={12} md={6}>
|
||||
<Card className={classes.cardGauche}>
|
||||
|
||||
<CardContent >
|
||||
<Typography gutterBottom component="h2" className={classes.bloc2Titre1}>
|
||||
Je suis recruteur
|
||||
</Typography>
|
||||
<Typography gutterBottom component="h3" className={classes.bloc2Titre2}>
|
||||
Talent introuvable ? Métier en tension ?
|
||||
</Typography>
|
||||
<Typography className={classes.bloc2Titre3} component="h4">
|
||||
Rencontrez vos futurs collaborateurs autrement, en vidéo
|
||||
</Typography>
|
||||
<Typography className={classes.bloc2Paragraphe}>
|
||||
<b>Publiez une offre d’emploi vidéo :</b><br/>
|
||||
<ul>
|
||||
<li>Pas besoin d’une super vidéo, montrez simplement votre entreprise en donnant
|
||||
la parole à vos salariés</li>
|
||||
</ul>
|
||||
<b>Recevez des candidatures vidéo :</b><br/>
|
||||
<ul>
|
||||
<li>Au-delà des compétences, découvrez les vraies personnes derrière le CV
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
Gagnez du temps dans votre présélection, rencontrez uniquement les candidats
|
||||
réellement impliqués</li>
|
||||
</ul>
|
||||
<b>Ne vous limitez plus à des mots, osez un recrutement plus qualitatif !</b><br/>
|
||||
</Typography>
|
||||
<Button variant="contained" className={classes.recruteurButton}>
|
||||
En savoir plus
|
||||
</Button>
|
||||
</CardContent>
|
||||
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item key={2} xs={24} sm={12} md={6}>
|
||||
<Card className={classes.cardDroite}>
|
||||
|
||||
<CardContent className={classes.cardContent}>
|
||||
<Typography gutterBottom component="h2" className={classes.bloc2Titre1}>
|
||||
Je suis candidat
|
||||
</Typography>
|
||||
<Typography gutterBottom component="h3" className={classes.bloc2Titre2}>
|
||||
Marre des envois de CV sans réponse ?
|
||||
</Typography>
|
||||
<Typography className={classes.bloc2Titre3} component="h4">
|
||||
Rencontrez votre futur employeur autrement, en vidéo :
|
||||
</Typography>
|
||||
<Typography className={classes.bloc2Paragraphe}>
|
||||
<b>Consultez des offres d’emploi video :</b><br/>
|
||||
<ul>
|
||||
<li>L’offre est en vidéo pour mieux comprendre l’entreprise, le métier,
|
||||
l’équipe… Votre candidature est aussi en vidéo. Vous êtes à égalité !</li>
|
||||
</ul>
|
||||
<b>Déposez votre candidature en vidéo :</b><br/>
|
||||
<ul>
|
||||
<li>Tout le monde a du talent et votre personnalité est aujourd’hui votre
|
||||
meilleur atout
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Pas besoin d’une « belle » vidéo, soyez vrai et authentique</li>
|
||||
</ul>
|
||||
<b>Dévoilez gratuitement qui vous êtes, au-delà des mots !</b>
|
||||
</Typography>
|
||||
<Button variant="contained" className={classes.recruteurButton}>
|
||||
Je me lance
|
||||
</Button>
|
||||
</CardContent>
|
||||
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</div>
|
||||
<div className={classes.bloc1}>
|
||||
<Container className={classes.cardGrid} maxWidth="lg">
|
||||
{/* End hero unit */}
|
||||
<Grid container spacing={10}>
|
||||
|
||||
<Grid item key={2} xs={24} sm={12} md={6}>
|
||||
<Card className={classes.bloc1Droite}>
|
||||
|
||||
<CardContent className={classes.bloc1Droite}>
|
||||
<Typography
|
||||
gutterBottom
|
||||
component="h2"
|
||||
color="#fff"
|
||||
className={classes.bloc1DroiteH1}>
|
||||
Notre mission : Remettre l’humain au cœur des recrutements
|
||||
</Typography>
|
||||
<Typography className={classes.bloc1DroiteParagraphe}>
|
||||
Chez Talents Tube, nous pensons que la technologie ne doit pas remplacer
|
||||
l’humain mais être à son service. C’est pour cette raison que nous proposons un
|
||||
outil de recrutement vidéo alliant digital et humain, afin de redonner la parole
|
||||
aux candidats et aux entreprises. Talents Tube est aujourd’hui la SEULE
|
||||
plateforme de recrutement qui permet aux entreprises de publier des offres
|
||||
d’emploi en vidéo et de recevoir des candidatures en vidéo.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
|
||||
</Card>
|
||||
</Grid>
|
||||
<Hidden smDown>
|
||||
<Grid item key={1} xs={24} sm={12} md={6}>
|
||||
<Card className={classes.bloc1Gauche}>
|
||||
|
||||
<CardMedia
|
||||
className={classes.cardMedia}
|
||||
image="/statique/images/accueil/candidature-en-video.png"></CardMedia>
|
||||
|
||||
</Card>
|
||||
</Grid>
|
||||
</Hidden>
|
||||
</Grid>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
<div className={classes.bloc3}>
|
||||
<Container className={classes.cardGrid} maxWidth="lg">
|
||||
{/* End hero unit */}
|
||||
<Grid container spacing={10}>
|
||||
<Hidden smDown>
|
||||
<Grid item key={1} xs={24} sm={12} md={6}>
|
||||
<Card className={classes.bloc1Gauche}>
|
||||
<CardMedia
|
||||
className={classes.cardMedia}
|
||||
image="/statique/images/accueil/equipe_talents_tube.jpg"></CardMedia>
|
||||
|
||||
</Card>
|
||||
</Grid>
|
||||
</Hidden>
|
||||
<Grid item key={2} xs={24} sm={12} md={6}>
|
||||
<Card className={classes.bloc3Droite}>
|
||||
|
||||
<CardContent className={classes.bloc1Droite}>
|
||||
<Typography
|
||||
gutterBottom
|
||||
component="h2"
|
||||
color="#fff"
|
||||
className={classes.bloc2Titre1}>
|
||||
Pourquoi nous ?
|
||||
</Typography>
|
||||
<Typography className={classes.bloc2Titre2}>
|
||||
Parce que nous sommes les SEULS à savoir le faire !
|
||||
</Typography>
|
||||
<Typography className={classes.bloc2Paragraphe}>
|
||||
Notre équipe est composée d’experts métier qui sauront vous accompagner dans
|
||||
toutes vos demandes que vous soyez candidat ou recruteur. En recherche
|
||||
d’évolution constante, nous avons à cœur de créer une relation de proximité afin
|
||||
d’adapter NOTRE solution à VOS besoins et ainsi créer une expérience utilisateur
|
||||
inoubliable. <br/><br/>
|
||||
Composée d’experts de la fonction RH & Recrutement, nous sommes
|
||||
passionnés par ce que nous faisons. Notre SEUL objectif : favoriser la rencontre
|
||||
d’entreprises formidables et de candidats uniques pour une performance commune.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
<div className={classes.bloc4}>
|
||||
<Container className={classes.cardGrid} maxWidth="lg">
|
||||
{/* End hero unit */}
|
||||
<Grid container spacing={10}>
|
||||
|
||||
<Grid item key={2} xs={24} sm={12} md={6}>
|
||||
<Card className={classes.blocGris}>
|
||||
|
||||
<CardContent >
|
||||
<Typography
|
||||
gutterBottom
|
||||
|
||||
component="h2"
|
||||
color="#fff"
|
||||
className={classes.bloc2Titre1}>
|
||||
Ils recrutent déjà avec Talents Tube!
|
||||
</Typography>
|
||||
<Card className={classes.cardDroiteGris}>
|
||||
<img src="/statique/images/accueil/recrutement-video-entreprises.png"/>
|
||||
|
||||
</Card>
|
||||
|
||||
</CardContent>
|
||||
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item key={1} xs={24} sm={12} md={6}>
|
||||
<Card className={classes.blocGris}>
|
||||
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/sKh0u7Mbdps"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen></iframe>
|
||||
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</div>
|
||||
{/* <div className={classes.footerDiv}>
|
||||
|
||||
<Container maxWidth="sm"></Container>
|
||||
</div> */}
|
||||
<Footer/>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
+33
-9
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
Reference in New Issue
Block a user