🎨 améliore la page d'accueil

source/components/inFranceApp/Landing.css

@@ -3,8 +3,7 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	min-height: 80vh;
-	color: white;
+	padding: 2rem;
 }
 .landing__header h1 {
 	color: inherit;
@@ -12,7 +11,16 @@
 
 .landing__header header {
 	text-align: center;
-	max-width: 800px;
+	background: linear-gradient(
+		227deg,
+		rgba(39, 69, 195, 0.87) 10%,
+		rgba(41, 117, 209, 1) 60%,
+		rgba(200, 40, 120, 0.52) 100%
+	);
+	color: white;
+
+	border: 1px solid rgba(255, 255, 255, 0.9);
+	padding: 1rem;
 }
 .landing__header ul {
 	list-style: none;
@@ -23,23 +31,41 @@
 	height: 1.2em !important ;
 	vertical-align: middle !important;
 }
-.landing__header a {
+.landing__header .cta {
 	margin: 6rem auto;
 }
 
-.landing__reassurance {
-	height: 20vh;
-	padding: 3rem;
+.landing__banner {
+	height: 100px;
+	width: 100%;
+	opacity: 0.9;
 	display: flex;
-	align-items: center;
-	flex-wrap: nowrap;
+	justify-content: space-between;
+	background: white;
+	border-top-left-radius: 0.7rem;
+	border-top-right-radius: 0.7rem;
+	padding: 1rem;
 }
-.landing__reassurance > * {
+/* Pris sur urssaf.fr */
+@media (min-width: 1200px) {
+	.landing__banner,
+	.landing__header header {
+		width: 1170px;
+	}
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+	.landing__banner,
+	.landing__header header {
+		width: 970px;
+	}
+}
+@media (min-width: 768px) and (max-width: 991px) {
+	.landing__banner,
+	.landing__header header {
+		width: 750px;
+	}
+}
+
+.landing__banner img {
 	height: 100%;
-	text-align: center;
-	flex: 1;
-}
-.landing__reassurance img {
-	max-height: 100%;
-	max-width: 100%;
 }

source/components/inFranceApp/Landing.js

@@ -13,11 +13,15 @@ import urssafSvg from './urssaf.svg'
 const Landing = ({ colours: { colour } }) => (
 	<>
 		<section className="landing__header" style={{ backgroundColor: colour }}>
+			<div className="landing__banner">
+				<img alt="logo urssaf" src={urssafSvg} />
+				<img alt="logo marianne" src={marianneSvg} />
+			</div>
 			<header>
 				<Animate.fromBottom delay={500} config={config.slow}>
 					<h1>Launch your business in France</h1>
 					<ul>
-						<li>Incorporation guide {emoji('🏗️🏢')}</li>
+						<li>Incorporation guide {emoji('🏗️')}</li>
 						<li>Costs and social benefits {emoji('💰')}</li>
 						<li>Hiring your first employee {emoji('🤝')}</li>
 					</ul>
@@ -30,14 +34,6 @@ const Landing = ({ colours: { colour } }) => (
 				</Animate.fromBottom>
 			</header>
 		</section>
-		<section className="landing__reassurance">
-			<div>
-				<img alt="logo urssaf" src={urssafSvg} />
-			</div>
-			<div>
-				<img alt="logo marianne" src={marianneSvg} />
-			</div>
-		</section>
 		<section className="landing__explanations" />
 		<section className="landing__nav" />
 	</>