Ajout d'une page d'introduction au simulateur CDD
Mael Thomas
parent
33996177a9
commit
8ab8429547
|
|
@ -1,6 +1,5 @@
|
|||
import React, {Component} from 'react'
|
||||
import './CDD.css'
|
||||
import IntroCDD from './IntroCDD'
|
||||
import Results from './Results'
|
||||
import {reduxForm, formValueSelector} from 'redux-form'
|
||||
import {connect} from 'react-redux'
|
||||
|
|
@ -35,7 +34,6 @@ export default class CDD extends Component {
|
|||
|
||||
return (
|
||||
<div id="sim">
|
||||
<IntroCDD />
|
||||
<div id="conversation">
|
||||
<section id="questions-answers">
|
||||
{conversation}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
#CDDIntro {
|
||||
background: radial-gradient(ellipse at center, #4A89DC -160%,#333350 100%);
|
||||
color: white;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#CDDIntro h1 {
|
||||
text-align: center;
|
||||
font-size: 350%;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
#CDDIntro .subtitle {
|
||||
text-align: center;
|
||||
font-size: 110%;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#CDDIntro #introduction {
|
||||
margin-top: 4%;
|
||||
}
|
||||
|
||||
#CDDIntro p {
|
||||
font-size: 120%;
|
||||
color: white;
|
||||
opacity: .9;
|
||||
width: 35%;
|
||||
margin: 2em auto;
|
||||
}
|
||||
|
||||
#CDDIntro #introduction .insist {
|
||||
font-weight: 600;
|
||||
/*font-style: italic;*/
|
||||
}
|
||||
|
||||
|
||||
#CDDIntro #action {
|
||||
color: white;
|
||||
margin-top: 5%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
#CDDIntro #action button {
|
||||
color: inherit;
|
||||
background: #4A89DC;
|
||||
padding: .6em 1.2em;
|
||||
font-size: 140%;
|
||||
margin: 0 1em;
|
||||
width: 12em;
|
||||
border: none;
|
||||
box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
#CDDIntro #action button:hover {
|
||||
box-shadow: none;
|
||||
opacity: .95;
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import React from 'react'
|
||||
import colours from './themeColours'
|
||||
import PageTypeIcon from './PageTypeIcon'
|
||||
import './CDDIntro.css'
|
||||
import {Link} from 'react-router'
|
||||
|
||||
export default () => (
|
||||
<div id="CDDIntro">
|
||||
<PageTypeIcon type="simulation" />
|
||||
<h1>Simulateur CDD</h1>
|
||||
<div className="subtitle">
|
||||
Découvrir le surcoût pour l'employeur du CDD par rapport au CDI
|
||||
</div>
|
||||
<section id="introduction">
|
||||
<p>
|
||||
En France, le contrat à durée déterminée{' '}
|
||||
<span className="insist">est un contrat d'exception au CDI</span>
|
||||
, apportant à l'employeur plus de souplesse dans un cadre précis prévu par la loi. Une contrepartie financière peut en échange lui être imposée.
|
||||
</p>
|
||||
<p>
|
||||
Ce simulateur vous aidera calculer les 4 éléments de ce surcoût :
|
||||
<ul>
|
||||
<li>l'indemnité de fin de contrat</li>
|
||||
<li>le CIF</li>
|
||||
<li>la majoration chômage</li>
|
||||
<li>l'indemnité compensatrice de congés payés</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
Sur ce simulateur 17.0, <span className="insist">vous avez le droit de ne pas savoir</span> : certains termes utilisés dans la simulation ne sont pas évidents, cliquez simplement sur le symbôle • qui les suit pour ouvrir une aide contextuelle. Et n'hésitez pas à nous écrire
|
||||
<i style={{cursor: 'pointer'}} className="fa fa-envelope-o" />
|
||||
</p>
|
||||
{/*
|
||||
<p>
|
||||
*: écrivez à contact@contact.contact (on fera mieux après). La loi française est complexe, souvent à raison. Nous ne la changerons pas, mais pouvons la rendre plus transparente.
|
||||
</p>
|
||||
*/
|
||||
}
|
||||
<Link id="action" to="/cdd"><button>C'est parti !</button></Link>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import React from 'react'
|
||||
import colours from './themeColours'
|
||||
import PageTypeIcon from './PageTypeIcon'
|
||||
|
||||
export default () =>
|
||||
<div>
|
||||
<PageTypeIcon type="simulation"/>
|
||||
<h1>Simulateur CDD</h1>
|
||||
<section id="introduction">
|
||||
<p>
|
||||
Le CDD en France est un contrat d'exception au CDI, apportant à l'employeur plus de souplesse dans un cadre précis prévu par la loi. Souvent, des contreparties financières lui sont demandées. Ce simulateur vous aidera à les calculer.
|
||||
</p>
|
||||
<p>
|
||||
Ici, vous avez le droit de ne pas savoir : certains termes utilisés dans la simulation ne sont pas évidents, cliquez simplement sur le symbôle • pour ouvrir une aide contextuelle. Et n'hésitez pas à nous écrire <i style={{cursor: 'pointer'}} className="fa fa-envelope-o"></i>
|
||||
</p>
|
||||
{/*
|
||||
<p>
|
||||
*: écrivez à contact@contact.contact (on fera mieux après). La loi française est complexe, souvent à raison. Nous ne la changerons pas, mais pouvons la rendre plus transparente.
|
||||
</p>
|
||||
*/}
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -59,7 +59,7 @@ export default class Home extends Component {
|
|||
<ul>
|
||||
<li key="cdd">
|
||||
<span className="simulateur">Surcoût du CDD</span>
|
||||
<Link to="/cdd"><button>Essayer</button></Link>
|
||||
<Link to="/cdd-intro"><button>Essayer</button></Link>
|
||||
</li>
|
||||
<li key="embauche">
|
||||
<span className="simulateur">Prix global de l'embauche</span>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import Home from './containers/Home'
|
|||
import Rule from './components/Rule'
|
||||
import About from './components/About'
|
||||
import CDD from './components/CDD'
|
||||
import CDDIntro from './components/CDDIntro'
|
||||
|
||||
|
||||
let RouteNotFound = () =>
|
||||
|
|
@ -23,8 +24,9 @@ let RouteNotFound = () =>
|
|||
export default (
|
||||
<Route path="/" component={Layout}>
|
||||
<Route path="regle/:name" component={Rule} />
|
||||
<Route path="cdd-intro" component={CDDIntro} />
|
||||
<Route path="cdd" component={CDD} />
|
||||
<Route path="a-propos" component={About} />
|
||||
<Route path="a-propos" component={About} />
|
||||
<IndexRoute component={Home} />
|
||||
<Route path="*" component={RouteNotFound} />
|
||||
</Route>
|
||||
|
|
|
|||
Loading…
Reference in New Issue