Reprise du design de l'acceuil : explorer | simuler
Mael Thomas
parent
fc458a970c
commit
33996177a9
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue