From 33996177a9103e54ec0ddad8034850f02ac3d89f Mon Sep 17 00:00:00 2001
From: Mael Thomas <mael.thomas@data.gouv.fr>
Date: Thu, 9 Mar 2017 18:21:24 +0100
Subject: [PATCH] Reprise du design de l'acceuil : explorer | simuler

---
 source/containers/Home.css | 119 ++++++++++++++++++++++++++++++-------
 source/containers/Home.js  | 108 +++++++++++++++++++--------------
 2 files changed, 159 insertions(+), 68 deletions(-)

diff --git a/source/containers/Home.css b/source/containers/Home.css
index 359a503c9..02845487e 100644
--- a/source/containers/Home.css
+++ b/source/containers/Home.css
@@ -31,34 +31,70 @@
 }
 
 #description p {
-	font-size: 140%;
-	width: 50%;
+	font-size: 130%;
+	width: 40em;
 	margin: 0 auto;
-}
-
-#description #about {
-	font-size: 100%;
-	text-align: right;
-	font-size:
-}
-
-
-#search {
-	width: 400px;
-	margin: 4em auto;
-}
-
-#search input {
 	font-weight: 300;
+}
+
+#description .insist {
+	color: #333350;
+	font-weight: 400
+}
+
+#aboutLink {
+	font-style: italic;
+	color: inherit;
+	opacity: .45;
+	font-size: 80%;
+	float: right;
+}
+
+#roads {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-around;
+	margin-top: 4%;
+}
+#roads > section {
+	width: 45%;
+	padding: 1%;
+	min-width: 20em;
+}
+#roads > section:last-child {
+	border-left: 1px solid #eee;
+}
+#roads h1 {
+	margin: 0 auto;
+	display: block;
+  font-size: 200%;
+	font-weight: 600;
+	color: #333350;
 	text-align: center;
-	font-size: 120%;
-	width: 100%;
-	border: none;
-	border-bottom: 1px solid #333350
+	margin-bottom: 6%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+#roads h1 i {
+	margin-right: 1em;
+	font-size: 160%;
+}
+
+#exploration input {
+	border: 1px solid #333350;
+	border-radius: 3.8px;
+	padding: .8em 2em;
+	font-size: 110%;
+	box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.1);
+	margin: 4em auto;
+	display: block;
+	width: 40%;
 }
 
 #search-results ul {
-	width: 30%;
+	width: 65%;
 	margin: 0 auto;
 	margin-bottom: 5em;
 	list-style: none;
@@ -74,5 +110,42 @@
 	font-weight: 500;
 	text-decoration: none;
 	border-bottom: 1px solid #333350;
-	padding: 0 1em 0 .2em;
+	padding: 0 .3em 0 .2em;
+}
+
+#simulation ul {
+	list-style: none;
+	width: 65%;
+	margin: 4em auto;
+}
+#simulation li {
+	font-size: 120%;
+	margin-bottom: 8%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+#simulation .simulateur {
+	font-size: 110%;
+	border-bottom: 1px solid #aaa
+}
+
+#simulation button {
+	background: #4A89DC;
+	color: white;
+	padding: .6em 1.2em;
+	font-size: 100%;
+	margin: 0 1em;
+	width: 12em;
+	border: none;
+	box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.1)
+}
+#simulation button.disabled {
+	border: 1px solid #4A89DC;
+	background: white;
+	color: #4A89DC;
+	opacity: .6;
+	cursor: default;
+	box-shadow: none;
 }
diff --git a/source/containers/Home.js b/source/containers/Home.js
index 319390660..a28877402 100644
--- a/source/containers/Home.js
+++ b/source/containers/Home.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, {Component} from 'react'
 import './Home.css'
 import {searchRules} from '../engine/rules.js'
 import {Link} from 'react-router'
@@ -6,51 +6,69 @@ import '../components/Rule.css'
 
 export default class Home extends Component {
 	state = {
-		userSearch: ''
-	}
+		userSearch: '',
+	};
 	render() {
-
 		return (
-		<div id="home">
-			<section id="brand">
-				<img src={require('../images/logo.png')} />
-				<span id="name">
-					Système <br/>
-					Social
-				</span>
-				<span id="version">alpha</span>
-			</section>
-			<section id="description">
-				<p>
-				Les règles des taxes et cotisations sur le travail <em>lisibles</em> par un humain et <em>interprétables</em> par un programme.
-				</p>
-				<p id="about">
-					<Link to="/a-propos">En savoir plus</Link><br/>
-					<Link to="/cdd">Démo CDD</Link>
-				</p>
-			</section>
-			<section id="search">
-				<input
-					placeholder="chercher par ex. retraite"
-					onChange={e => this.setState({userSearch: e.target.value})}
-					/>
-			</section>
-			<section id="search-results">
-				<ul>
-				{this.state.userSearch != null &&
-					searchRules(this.state.userSearch)
-						.map(({type, name}) =>
-							<li key={name}>
-								<span className="rule-type">
-									{type}
-								</span>
-								<span className="rule-name">
-									<Link to={`/regle/${name}`}>{name}</Link>
-								</span>
-							</li>
-						)
-				}</ul>
-			</section>
-		</div>)
+      <div id="home">
+        <section id="brand">
+          <img src={require('../images/logo.png')} />
+          <span id="name">
+            Système <br />
+            Social
+          </span>
+          <span id="version">alpha</span>
+        </section>
+        <section id="description">
+          <p>
+            Les règles des taxes et cotisations sur le travail{' '}
+            <span className="insist">lisibles</span>
+            {' '}par un humain et{' '}
+            <span className="insist">interprétables</span>
+            {' '}par un programme.{' '}
+            <Link id="aboutLink" to="/a-propos">En savoir plus</Link>
+          </p>
+        </section>
+        <section id="roads">
+
+          <section id="exploration">
+						<h1><i className="fa fa-search" aria-hidden="true"></i>Explorez la base</h1>
+            <input
+              placeholder="Chercher par ex. retraite"
+              onChange={e => this.setState({userSearch: e.target.value})}
+            />
+
+            <section id="search-results">
+              <ul>
+                {this.state.userSearch != null &&
+                  searchRules(this.state.userSearch).map(({type, name}) => (
+                    <li key={name}>
+                      <span className="rule-type">
+                        {type}
+                      </span>
+                      <span className="rule-name">
+                        <Link to={`/regle/${name}`}>{name}</Link>
+                      </span>
+                    </li>
+                  ))}
+              </ul>
+            </section>
+          </section>
+          <section id="simulation">
+            <h1><i className="fa fa-calculator" aria-hidden="true"></i>Simulez vos droits et obligations</h1>
+            <ul>
+              <li key="cdd">
+                <span className="simulateur">Surcoût du CDD</span>
+                <Link to="/cdd"><button>Essayer</button></Link>
+              </li>
+              <li key="embauche">
+                <span className="simulateur">Prix global de l'embauche</span>
+                <Link><button className="disabled">Bientôt disponible</button></Link>
+              </li>
+            </ul>
+          </section>
+        </section>
+      </div>
+		)
 	}
 }