Ajout des pages de l'accueil

source/components/Contact.js

@@ -6,5 +6,5 @@ export default () =>
       Pour nous écrire : <span style={{fontWeight: 'bold'}}>contact@embauche.beta.gouv.fr</span>
     </p>
     {/* TODO: credits for the image to add: https://thenounproject.com/search/?q=post+card&i=715677 */}
-    <img style={{margin: '3%'}} width="200px" src={require('../images/contact.png')} />
+    <img style={{margin: '3%'}} width="200px" src={require('Images/contact.png')} />
   </div>

source/components/Home.css

@@ -1,21 +0,0 @@
-#home {
-}
-
-#home #header h1 {
-	margin-top: 3em;
-	text-align: center;
-	font-size: 300%
-}
-
-#home #marianne {
-	position: absolute;
-	left: 2em;
-	top: 2em;
-	width: 8em;
-}
-
-#home > #content {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}

source/components/Home.js

@@ -1,35 +0,0 @@
-import React, { Component } from 'react'
-import './Home.css'
-import ReactPiwik from 'Components/Tracker' //TODO réintégrer Piwik
-import TargetSelection from './TargetSelection'
-import { slide as Menu } from 'react-burger-menu'
-import './Menu.css'
-
-export default class Home extends Component {
-
-	render() {
-
-		return (
-			<div id="home">
-				<div id="header">
-					<img
-						id="marianne"
-						src={require('../images/marianne.svg')}
-						alt="Un service de l'État français"
-					/>
-					<Menu right>
-						<a className="menu-item" href="/">À propos</a>
-						<a className="menu-item" href="/about">Intégrer le module</a>
-						<a className="menu-item" href="/contact">Contribuer</a>
-					</Menu>
-					<h1>Simulateurs d'embauche</h1>
-				</div>
-
-				<div id="content">
-					<TargetSelection />
-				</div>
-			</div>
-		)
-	}
-
-}

source/components/Route404.js

@@ -16,7 +16,7 @@ export default () => (
 			<img
 				style={{ margin: '3%' }}
 				width="100%"
-				src={require('../images/map-directions.png')}
+				src={require('Images/map-directions.png')}
 			/>
 			<em>Revenir en lieu sûr</em>
 		</Link>

source/components/TargetSelection.css

@@ -23,7 +23,6 @@
 
 #targetSelection div {
 	margin-left: 1em;
-	line-height: 0.6em;
 }
 
 #targetSelection .optionTitle {
@@ -31,6 +30,7 @@
 }
 #targetSelection label p {
 	color: #555;
+	margin: 0;
 }
 #targetSelection input:checked + label .optionTitle {
 	font-weight: 600;

source/components/pages/About.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react'
+import './Pages.css'
+import Header from './Header'
+export default class About extends Component {
+	render() {
+		return (
+			<section className="page" id="about">
+				<Header />
+				<h1>À propos</h1>
+				<p>
+					<a href="https://beta.gouv.fr" target="_blank">
+						L'incubateur des services numériques de l'État a lancé
+					</a>{' '}
+					en 2014 le développement d’une <em>ressource ouverte</em> de calcul
+					des prélèvements sociaux sur les revenus d'activité en France.
+				</p>
+				<p>
+					Ce premier service, un{' '}
+					<em>module simulation des sommes en jeu lors d'une embauche</em>, peut
+					être <em>intégré facilement et gratuitement</em> par toute
+					organisation sur son site Web.
+				</p>
+				<p>
+					Ce travail est contributif : venez définir avec nous la feuille de
+					route du service (implémentation des conventions collectives, ajout
+					des statuts autres que le travail salarié, ...).
+				</p>
+				<MailChimp />
+				<a
+					className="button"
+					href="mailto:contact@embauche.beta.gouv.fr?subject=Rejoindre l'OpenLab&body=Bonjour, je suis intéressé par votre produit et votre démarche et souhaite participer au prochain OpenLab. Bonne journée !"
+				>
+					Ou contactez-nous directement
+				</a>
+				{/* <p>Notre prochaine rencontre OpenLab aura lieu <strong>le mercredi 18 janvier 2017 à 10h</strong>, au 86 allée de Bercy, 75012, salle 381-R</p> */}
+			</section>
+		)
+	}
+}
+
+let MailChimp = () => (
+	<div id="mc_embed_signup">
+		<form
+			action="https://gouv.us13.list-manage.com/subscribe/post?u=732a4d1b0d2e8a1a1fd3d01db&amp;id=53bed2b6ac"
+			method="post"
+			id="mc-embedded-subscribe-form"
+			name="mc-embedded-subscribe-form"
+			className="validate"
+			target="_blank"
+			noValidate
+		>
+			<div id="mc_embed_signup_scroll">
+				<label htmlFor="mce-EMAIL">
+					Inscrivez-vous à notre liste de diffusion
+				</label>
+				<div
+					style={{ position: 'absolute', left: '-5000px', ariaHidden: 'true' }}
+				>
+					<input
+						type="text"
+						name="b_732a4d1b0d2e8a1a1fd3d01db_53bed2b6ac"
+						tabIndex="-1"
+						value=""
+					/>
+				</div>
+				<div className="clear">
+					<input
+						type="submit"
+						value="M'inscrire"
+						name="subscribe"
+						id="mc-embedded-subscribe"
+						className="button"
+					/>
+				</div>
+			</div>
+		</form>
+	</div>
+)

source/components/pages/Contribution.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import './Pages.css'
+import Header from './Header'
+
+// TODO reprendre les icônes de embauche.gouv.fr version novembre 2017
+// pour expliquer la contribution au projet
+
+// parler du fait qu'on ne contribue pas simplement à une calculette
+
+export default class Contribution extends Component {
+	render() {
+		return (
+			<section className="page" id="contribution">
+				<Header />
+				<h1>Contribuer</h1>
+				<p>
+					Tout le développement se fait de façon transparente et contributive
+					sur{' '}
+					<a href="https://github.com/sgmap/syso" target="_blank">
+						GitHub
+					</a>
+				</p>
+			</section>
+		)
+	}
+}

source/components/pages/Header.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+import { slide as Menu } from 'react-burger-menu'
+import 'Components/pages/Menu.css'
+import { Link } from 'react-router-dom'
+
+export default class Header extends Component {
+	render() {
+		return (
+			<div id="header">
+				<Link className="menu-item" to="/">
+					<img
+						id="marianne"
+						src={require('Images/marianne.svg')}
+						alt="Un service de l'État français"
+					/>
+				</Link>
+				<Menu right>
+					<Link className="menu-item" to="/">
+						Accueil
+					</Link>
+					<Link className="menu-item" to="/à-propos">
+						À propos
+					</Link>
+					<Link className="menu-item" to="/intégrer">
+						Intégrer le module
+					</Link>
+					<Link className="menu-item" to="/contribuer">
+						Contribuer
+					</Link>
+					<Link className="menu-item" to="/regles">
+						Toutes nos règles
+					</Link>
+				</Menu>
+			</div>
+		)
+	}
+}

source/components/pages/Home.css

@@ -0,0 +1,7 @@
+
+
+#home > #content {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}

source/components/pages/Home.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import './Pages.css'
+import './Home.css'
+import ReactPiwik from 'Components/Tracker' //TODO réintégrer Piwik
+import TargetSelection from '../TargetSelection'
+import Header from './Header'
+
+
+export default class Home extends Component {
+
+	render() {
+
+		return (
+			<div id="home" className="page">
+				<Header/>
+				<h1>Simulateurs d'embauche</h1>
+				<p>LE SLOGAN ICI</p>
+
+				<div id="content">
+					<TargetSelection />
+				</div>
+			</div>
+		)
+	}
+
+}

source/components/pages/Integration.css

@@ -0,0 +1,117 @@
+
+
+
+
+
+
+
+
+#integration p {
+  margin-top: 3em;
+  vertical-align: top;
+  position: relative;
+}
+#integration code {
+  position: relative;
+  display: inline-block;
+  font-size: 80%;
+  max-width: 40em;
+  padding: 1em;
+  background: #f8f8f8;
+  margin: auto;
+  margin-bottom: 1em;
+
+  box-shadow: 0 1px 1px rgba(0,0,0,0.05), -1px 1px 1px rgba(0,0,0,0.02);
+}
+
+#integration code em {
+  font-weight: 300;
+  color: black;
+}
+
+#integration code:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-width: 0 16px 16px 0;
+  border-style: solid;
+  border-color: #e8e8e8 white;
+}
+
+#scriptColor {
+  color: #4A89DC
+}
+
+
+section#integrations a {
+  text-decoration: none;
+}
+
+
+
+#integrationList {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+#integrations article {
+  vertical-align: top;
+  width: 15em;
+  padding: 0 2%;
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-size: contain;
+  text-align: center;
+  margin-bottom: 2em;
+}
+
+#integrations article img {
+  width: 8em;
+  height: 8em;
+  border-radius: 8em;
+  border: 3px solid #3C4963;
+}
+
+#integrations .question-mark {
+  display: inline-block;
+  font-size: 6.5em;
+  border: 1px solid white;
+  border-radius: 10em;
+  width: 1.2em;
+  height: 1.2em;
+  line-height: 1.2em
+}
+
+#integrations {
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+#contribution .block-wrap {
+  margin-top: 3em;
+  width: 100%;
+}
+
+
+#contribution article {
+  padding: 0 5% 2em;
+  margin-bottom: 0;
+  font-size: 90%;
+}
+
+#contribution article h2 {
+  font-weight: 600;
+  color: #3C4963;
+}
+
+#contribution article p {
+  display: inline;
+}
+
+#contribution article img {
+  width: 8em;
+  border-radius: 0;
+}

source/components/pages/Integration.js

@@ -0,0 +1,100 @@
+import React, { Component } from 'react'
+import './Integration.css'
+import './Pages.css'
+import Header from './Header'
+
+export default class MyComponent extends Component {
+	render() {
+		return (
+			<section className="page" id="integration">
+				<Header />
+				<div>
+					<h1>Intégrez le module Web</h1>
+					<p>Intégrez le module en ajoutant une ligne à votre page Web :</p>
+					<code>
+						<span>{'<'}</span>
+						<em>
+							script<br />
+							id
+						</em>="script-simulateur-embauche" <em>
+							data-couleur
+						</em>="<span id="scriptColor">#4A89DC</span>" <em>src</em>="https://embauche.beta.gouv.fr/modules/v2/dist/simulateur.js">
+						<span>{'<'}</span>
+						<span>/</span>
+						<em>script</em>
+						<span>></span>
+					</code>
+					<p>
+						Vous pouvez <b>choisir la couleur principale du module</b> pour le
+						fondre dans le thème visuel de votre page : changez simplement la
+						valeur de <i>data-couleur</i> ci-dessus. Pour la choisir, utilisez
+						notre{' '}
+						<a href="/modules/v2/couleur.html" target="_blank">
+							outil interactif
+						</a>.
+					</p>
+				</div>
+				<div className="blocks" id="integrations">
+					<h1>Quelques intégrations</h1>
+
+					<div id="integrationList">
+						<article>
+							<a href="http://les-aides.fr/embauche">
+								<img
+									src={require('Images/accueil/cci.png')}
+									alt="Les-aides.fr"
+								/>
+								<h2>CCI de France</h2>
+							</a>
+						</article>
+
+						<article>
+							<a href="https://recruteurs.apec.fr/Recrutement/Pratique-RH/Tous-les-dossiers-Recrutement/Diagnostiquer/Vous-envisagez-de-recruter-calculez-le-cout-de-cette-embauche">
+								<img src={require('Images/accueil/apec.png')} alt="" />
+								<h2>APEC</h2>
+							</a>
+						</article>
+
+						{/* <article>
+							<a href="http://www.aides-creations.fr/simulateur-charges/">
+								<img src="img/aides-creations.png" alt="Aides-Créations.com"/>
+								<h2>Créateur de business plan<br/>
+									Aides-Créations.com</h2>
+							</a>
+						</article> */}
+
+						<article>
+							<a href="http://travail-emploi.gouv.fr/emploi/accompagnement-des-tpe-pme/tpe-pme/article/le-simulateur-du-cout-d-embauche">
+								<img
+									src={require('Images/accueil/min-tra.jpg')}
+									alt="Ministère du travail"
+								/>
+								<h2>Ministère du travail</h2>
+							</a>
+						</article>
+
+						<article>
+							<a href="https://entreprise.pole-emploi.fr/cout-salarie/">
+								<img
+									src={require('Images/accueil/pole-emploi.png')}
+									alt="Pôle Emploi"
+								/>
+								<h2>Pôle Emploi</h2>
+							</a>
+						</article>
+
+						<article>
+							<a href="mailto:contact@embauche.beta.gouv.fr?subject=Proposition de réutilisation">
+								<span className="question-mark">?</span>
+								<h2>
+									Une idée&nbsp;?<br />
+									Contactez-nous&nbsp;!
+								</h2>
+							</a>
+						</article>
+					</div>
+				</div>
+			</section>
+		)
+	}
+}

source/components/pages/Pages.css

@@ -0,0 +1,24 @@
+
+.page {
+  max-width: 45em;
+  margin: 3em;
+}
+
+
+.page p {
+}
+
+.page h1 {
+  margin: 4em 0 1em;
+  color: #3C4963;
+  font-size: 280%;
+}
+
+.page em {
+  font-weight: 600;
+  font-style: normal;
+}
+
+.page a {
+  color: #3C4963
+}

source/components/pages/RulesList.js

@@ -2,12 +2,15 @@ import React, { Component } from "react"
 import { rules, encodeRuleName, nameLeaf } from "Engine/rules.js"
 import { Link } from "react-router-dom"
 import './RulesList.css'
-import {capitalise0} from '../utils'
+import './Pages.css'
+import {capitalise0} from '../../utils'
+import Header from './Header'
 
 export default class RulesList extends Component {
 	render() {
 		return (
-			<div id="RulesList">
+			<div id="RulesList" className="page">
+				<Header />
 				<h1>Notre base de règles</h1>
 				<ul>
 					{rules.map(rule => (

source/containers/Layout.css

@@ -11,6 +11,22 @@ body {
 #js, #js>div {
 	height: 100%
 }
+
+
+#header h1 {
+	margin-top: 3em;
+	text-align: center;
+	font-size: 300%
+}
+
+#header #marianne {
+	position: absolute;
+	left: 2em;
+	top: 2em;
+	width: 8em;
+}
+
+
 #content {
 	margin-top: 1.5em;
 }

source/containers/Layout.js

@@ -1,45 +1,50 @@
-import React, { Component } from "react"
-import "./Layout.css"
-import "./reset.css"
-import "./ribbon.css"
+import React, { Component } from 'react'
+import './Layout.css'
+import './reset.css'
+import './ribbon.css'
 
-import { Link, Route, Router, Switch, Redirect } from "react-router-dom"
+import { Link, Route, Router, Switch, Redirect } from 'react-router-dom'
 
-import Home from "Components/Home"
-import RulePage from "Components/RulePage"
-import Route404 from "Components/Route404"
-import Contact from "Components/Contact"
-import Simulateur from "Components/Simulateur"
-import RulesList from "Components/RulesList"
-
-import ReactPiwik from "Components/Tracker"
-import createHistory from "history/createBrowserHistory"
+import Home from 'Components/pages/Home'
+import RulePage from 'Components/RulePage'
+import Route404 from 'Components/Route404'
+import Contact from 'Components/Contact'
+import Simulateur from 'Components/Simulateur'
+import RulesList from 'Components/pages/RulesList'
+import Contribution from 'Components/pages/Contribution'
+import Integration from 'Components/pages/Integration'
+import About from 'Components/pages/About'
+import ReactPiwik from 'Components/Tracker'
+import createHistory from 'history/createBrowserHistory'
 
 const piwik = new ReactPiwik({
-  url: "stats.data.gouv.fr",
-  siteId: 39,
-  trackErrors: true
+	url: 'stats.data.gouv.fr',
+	siteId: 39,
+	trackErrors: true
 })
 
 export default class Layout extends Component {
-  history = createHistory()
-  render() {
-    // track the initial pageview
-    ReactPiwik.push(["trackPageView"])
+	history = createHistory()
+	render() {
+		// track the initial pageview
+		ReactPiwik.push(['trackPageView'])
 
-    return (
-      <Router history={piwik.connectToHistory(this.history)}>
-        <Switch>
-          <Route exact path="/" component={Home} />
-          <Route path="/contact" component={Contact} />
-          <Route path="/regle/:name" component={RulePage} />
-          <Route path="/regles" component={RulesList} />
-          <Route path="/simu/:targets" component={Simulateur} />
-          <Redirect from="/simu/" to="/" />
-          <Redirect from="/simu/:name/intro" to="/simu/:name" />
-          <Route component={Route404} />
-        </Switch>
-      </Router>
-    )
-  }
+		return (
+			<Router history={piwik.connectToHistory(this.history)}>
+				<Switch>
+					<Route exact path="/" component={Home} />
+					<Route path="/contact" component={Contact} />
+					<Route path="/regle/:name" component={RulePage} />
+					<Route path="/regles" component={RulesList} />
+					<Route path="/simu/:targets" component={Simulateur} />
+					<Route path="/à-propos" component={About} />
+					<Route path="/intégrer" component={Integration} />
+					<Route path="/contribuer" component={Contribution} />
+					<Redirect from="/simu/" to="/" />
+					<Redirect from="/simu/:name/intro" to="/simu/:name" />
+					<Route component={Route404} />
+				</Switch>
+			</Router>
+		)
+	}
 }

source/webpack.config.js

@@ -25,7 +25,8 @@ module.exports = {
 		alias: {
 			Engine: path.resolve('source/engine/'),
 			Règles: path.resolve('règles/'),
-			Components: path.resolve('source/components/')
+			Components: path.resolve('source/components/'),
+			Images: path.resolve('source/images/')
 		}
 	},
 	module: {