diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md
index 08ba936dd..623d3e753 100644
--- a/CONTRIBUTION.md
+++ b/CONTRIBUTION.md
@@ -10,21 +10,22 @@ A mettre sans retenue dans les messages de commit :
https://github.com/atom/atom/blob/master/CONTRIBUTING.md#git-commit-messages
-* 🎨 `:art:` when working on the app's visual style
-* 🐎 `:racehorse:` when improving performance
-* 📝 `:memo:` when writing docs
-* 🐛 `:bug:` when fixing a bug
-* 🔥 `:fire:` when removing code or files
-* 💚 `:green_heart:` when fixing the CI build
-* ✅ `:white_check_mark:` when adding tests
-* ⬆️ `:arrow_up:` when upgrading dependencies
-* :sparkles: `:sparkles:` when formatting, renaming, reorganizing files
+- 🎨 `:art:` when working on the app's visual style
+- 🐎 `:racehorse:` when improving performance
+- 📝 `:memo:` when writing docs
+- 🐛 `:bug:` when fixing a bug
+- 🔥 `:fire:` when removing code or files
+- 💚 `:green_heart:` when fixing the CI build
+- ✅ `:white_check_mark:` when adding tests
+- ⬆️ `:arrow_up:` when upgrading dependencies
+- :sparkles: `:sparkles:` when formatting, renaming, reorganizing files
Et ceux spécifiques au projet :
-* :gear: `:gear:` pour une contribution au moteur qui traite les YAML
-* :hammer: `:hammer:` pour une contribution à la base de règles
-* :calendar: `:calendar:` pour un changement de règle du à une évolution temporelle (en attendant mieux)
-* :chart_with_upwards_trend: `:chart_with_upwards_trend:` pour une amélioration du tracking
-* :alien: `:alien:` pour ajouter des traductions
-* :wheelchair: `:wheelchair:` pour corriger les problèmes liés à l'accessibilité
+- :gear: `:gear:` pour une contribution au moteur qui traite les YAML
+- :hammer: `:hammer:` pour une contribution à la base de règles
+- :calendar: `:calendar:` pour un changement de règle du à une évolution temporelle (en attendant mieux)
+- :chart_with_upwards_trend: `:chart_with_upwards_trend:` pour une amélioration du tracking
+- :alien: `:alien:` pour ajouter des traductions
+- :wheelchair: `:wheelchair:` pour corriger les problèmes liés à l'accessibilité
+- :fountain_pen: `:fountain_pen:` pour séparer les commits liés à la modification du contenu
diff --git a/index.html b/index.html
index 5d7102b54..56db291dd 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
-
+
<%= htmlWebpackPlugin.options.title %>
diff --git a/source/components/ui/Button/button.css b/source/components/ui/Button/button.css
index c3ab95f2d..826d0af8d 100644
--- a/source/components/ui/Button/button.css
+++ b/source/components/ui/Button/button.css
@@ -123,10 +123,9 @@
.ui__.skip-button {
opacity: 0.6;
- border-color: black;
border: none;
padding: 0.6rem 0;
- color: black;
+ color: inherit;
}
.ui__.skip-button:not(:disabled):hover {
diff --git a/source/components/ui/Typography.css b/source/components/ui/Typography.css
index 05bfdd50f..1e1494b5b 100644
--- a/source/components/ui/Typography.css
+++ b/source/components/ui/Typography.css
@@ -19,6 +19,7 @@ html {
body {
font-weight: 400;
+ color: #040e19;
font-family: 'Roboto', sans-serif;
}
@@ -55,7 +56,7 @@ h4,
h5,
h6 {
font-family: 'IBM Plex Sans', sans-serif;
- font-weight: normal;
+ font-weight: 300;
line-height: initial;
}
@@ -68,6 +69,15 @@ ul {
line-height: 1.7rem;
margin: 1rem 0;
}
+p.ui__.lead {
+ font-size: 1.7rem;
+ line-height: 2.5rem;
+ font-weight: 300;
+}
+ul {
+ list-style: '› ';
+ padding-left: 1.4rem;
+}
li {
margin: 0.5rem 0;
}
diff --git a/source/sites/mycompanyinfrance.fr/Landing.css b/source/sites/mycompanyinfrance.fr/Landing.css
index 7c8a64ed3..d690fe6a1 100644
--- a/source/sites/mycompanyinfrance.fr/Landing.css
+++ b/source/sites/mycompanyinfrance.fr/Landing.css
@@ -10,7 +10,9 @@
}
.landing__header header {
+ min-height: 30rem;
text-align: center;
+ position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
@@ -25,8 +27,9 @@
);
background-size: 200%;
color: white;
- animation: move-background 15s linear infinite;
+ animation: move-background 30s linear infinite;
padding: 1rem;
+ padding-bottom: 5rem;
}
@keyframes move-background {
from {
@@ -37,65 +40,68 @@
}
}
-.landing__header .cta {
- margin: 6rem auto;
-}
-
.landing__banner {
- height: 5rem;
+ height: 4.4rem;
width: 100%;
display: flex;
justify-content: space-between;
background: white;
- padding: 1rem;
+ padding: 0.6rem;
}
.landing__banner img {
height: 100%;
width: auto;
}
-
-.landing-card__img {
- padding: 1rem;
- width: 6rem;
- height: 6rem;
-}
-.landing-card__img img {
- width: 100% !important;
- height: auto !important;
-}
-
-.landing-card {
- margin: 1rem;
- padding: 1rem;
- max-width: 20rem;
+.landing__header__svg {
+ position: absolute;
+ bottom: -1px;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 3rem;
}
.landing-explanation {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
+ padding: 0 1rem;
+}
+.landing-explanation > div {
+ padding: 1rem 3rem;
+}
+@media (max-width: 500px) {
+ .landing-explanation-content {
+ flex-direction: column;
+ }
+ .landing-explanation > div {
+ padding: 1rem 1rem;
+ }
}
.landing-explanation h2 {
+ font-weight: 300;
text-align: center;
- margin-bottom: 0.3em;
+}
+.landing-explanation ul {
+ margin: 0;
+ padding-left: 1rem;
}
.landing-explanation p {
+ margin-top: 0;
text-align: center;
}
.landing-explanation-content {
display: flex;
align-items: center;
+ padding: 0 1rem;
justify-content: flex-start;
}
-.landing-explanation li {
- margin-bottom: 0.4em;
-}
.landing-explanation img {
width: 72px !important;
height: 72px !important;
- margin: 0 1em 0 2em !important;
+ margin: 0 1rem !important;
}
diff --git a/source/sites/mycompanyinfrance.fr/Landing.js b/source/sites/mycompanyinfrance.fr/Landing.js
index 986eb30f4..023d1c3d5 100644
--- a/source/sites/mycompanyinfrance.fr/Landing.js
+++ b/source/sites/mycompanyinfrance.fr/Landing.js
@@ -16,13 +16,26 @@ const Landing = ({ colours: { colour } }) => (
<img alt="logo urssaf" src={urssafSvg} />
</div>
<header>
- <h1>Start your business in France.</h1>
+ <h1>
+ Start your business in France <br />
+ {emoji('🇫🇷')}
+ </h1>
+ <p className="ui__ lead" style={{ maxWidth: '30rem' }}>
+ The ultimate how-to guide, covering everything from incorporation to
+ hiring.
+ </p>
<Link
- className="ui__ inverted-button cta"
+ className="ui__ inverted-button"
to="/company"
alt="the first step to create a company">
- Take the step by step guide
+ Get started
</Link>
+ <svg
+ className="landing__header__svg"
+ preserveAspectRatio="none"
+ viewBox="0 0 500 150">
+ <path fill="white" d="M 0 150 Q 150 0 500 0 L 500 150 Z" />
+ </svg>
</header>
</section>
<section className="landing-explanation">
@@ -37,7 +50,9 @@ const Landing = ({ colours: { colour } }) => (
</ul>
</div>
<p>
- <Link to="/company">Create your company</Link>
+ <Link className="ui__ skip-button" to="/company">
+ Create your company ›
+ </Link>
</p>
</div>
<div>
@@ -46,12 +61,14 @@ const Landing = ({ colours: { colour } }) => (
{emoji('💶')}
<ul>
<li>Discover the French social security system</li>
- <li>Simulate your hiring costs </li>
+ <li>Simulate your hiring costs</li>
<li>Understand the French payslip</li>
</ul>
</div>
<p>
- <Link to="/social-security">Simulate hiring costs and benefits</Link>
+ <Link className="ui__ skip-button" to="/social-security">
+ Simulate hiring costs and benefits ›
+ </Link>
</p>
</div>
<div>
@@ -65,7 +82,9 @@ const Landing = ({ colours: { colour } }) => (
</ul>
</div>
<p>
- <Link to="/hiring-process">Discover the hiring process</Link>
+ <Link className="ui__ skip-button" to="/hiring-process">
+ Discover the hiring process ›
+ </Link>
</p>
</div>
</section>
diff --git a/source/sites/mycompanyinfrance.fr/pages/Company/CreationChecklist.js b/source/sites/mycompanyinfrance.fr/pages/Company/CreationChecklist.js
index 458ece36e..83e375d3c 100644
--- a/source/sites/mycompanyinfrance.fr/pages/Company/CreationChecklist.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Company/CreationChecklist.js
@@ -45,20 +45,24 @@ const CreateCompany = ({ match, statusChooserCompleted, onChecklistInitializatio
onItemCheck={onItemCheck}
defaultChecked={companyCreationChecklist}
>
- {!microenterprise && (
+ {!microenterprise &&
<CheckItem
name="corporateName"
title="Find a corporate name"
explanations={
- <p>
- <strong>The corporate name</strong> (raison sociale) is the
+ <><p>
+ <strong>The corporate name</strong> (dénomination sociale) is the
legal name of your company, written on all of your
administrative papers. It can be different from the trade name
- (used for commercial purpose).
+ (used for commercial purpose).
</p>
+ <p>
+ It is advisable to check that the name is available, i.e. that it does not infringe a name already protected by a trademark, a company name, a trade name, an Internet domain name, etc.
+ You can check on the <a href="http://bases-marques.inpi.fr/">INPI database</a>.
+ </p>
+ </>
}
- />
- )}
+ />}
<CheckItem
name="corporatePurpose"
title="Write the corporate purpose of the company"