diff --git a/app/assets/images/landing/roles/administrations.svg b/app/assets/images/landing/roles/administrations.svg
new file mode 100644
index 000000000..56c94b594
--- /dev/null
+++ b/app/assets/images/landing/roles/administrations.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/assets/images/landing/roles/usagers.svg b/app/assets/images/landing/roles/usagers.svg
new file mode 100644
index 000000000..0ee29aa02
--- /dev/null
+++ b/app/assets/images/landing/roles/usagers.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/assets/stylesheets/new_design/landing.scss b/app/assets/stylesheets/new_design/landing.scss
index b66b9dc0f..beece374d 100644
--- a/app/assets/stylesheets/new_design/landing.scss
+++ b/app/assets/stylesheets/new_design/landing.scss
@@ -158,6 +158,7 @@ $landing-breakpoint: 1040px;
font-weight: bold;
}
+.admins-panel,
.numbers-panel {
background-color: $light-grey;
}
@@ -226,11 +227,27 @@ $users-breakpoint: 950px;
width: 170px;
}
+.role-image {
+ height: 180px;
+}
+
+.cta-role-title {
+ font-size: 30px;
+ font-weight: bold;
+ margin-top: 13px;
+}
+
+.cta-role-explanation {
+ font-size: 30px;
+ margin-bottom: 10px;
+}
+
.cta-panel {
background-color: $blue;
color: #FFFFFF;
}
+.role-panel-wrapper,
.cta-panel-wrapper {
width: 100%;
display: flex;
@@ -238,6 +255,35 @@ $users-breakpoint: 950px;
justify-content: space-between;
}
+.role-administrations-panel {
+ flex-direction: row-reverse;
+
+ @media (max-width: $users-breakpoint) {
+ flex-direction: row;
+ }
+}
+
+.role-panel-70,
+.role-panel-30 {
+ display: inline-block;
+}
+
+.role-panel-70 {
+ width: 70%;
+
+ @media (max-width: $users-breakpoint) {
+ width: 100%;
+ }
+}
+
+.role-panel-30 {
+ width: 30%;
+
+ @media (max-width: $users-breakpoint) {
+ width: 100%;
+ }
+}
+
.cta-panel-title {
font-size: 24px;
font-weight: bold;
@@ -249,19 +295,45 @@ $users-breakpoint: 950px;
margin-bottom: 10px;
}
+.role-panel-title {
+ font-size: 30px;
+ font-weight: bold;
+}
+
+.role-panel-explanation {
+ font-size: 24px;
+ margin-bottom: 10px;
+}
+
+.role-administrations-image {
+ text-align: right;
+
+ @media (max-width: $users-breakpoint) {
+ text-align: center;
+ margin-bottom: 45px;
+ }
+}
+
+.role-usagers-image {
+ @media (max-width: $users-breakpoint) {
+ text-align: center;
+ margin-bottom: 45px;
+ }
+}
+
$cta-panel-button-border-size: 2px;
-.cta-panel-button {
- @include horizontal-padding(30px);
- @include vertical-padding(10px);
+.cta-panel-button-white {
+ @include horizontal-padding(40px);
+ @include vertical-padding(15px);
display: block;
border-radius: 100px;
- border: $cta-panel-button-border-size solid #FFFFFF;
- color: #FFFFFF;
font-size: 24px;
text-align: center;
cursor: pointer;
margin-top: 20px;
+ border: $cta-panel-button-border-size solid #FFFFFF;
+ color: #FFFFFF;
&:hover {
color: #FFFFFF;
@@ -274,3 +346,55 @@ $cta-panel-button-border-size: 2px;
text-decoration: none;
}
}
+
+@mixin role-button {
+ @include horizontal-padding(30px);
+ height: 50px;
+ display: inline-block;
+ border-radius: 100px;
+ font-size: 20px;
+ text-align: center;
+ cursor: pointer;
+ margin-top: 20px;
+ line-height: 50px;
+}
+
+.role-panel-button-primary {
+ @include role-button;
+ background-color: $blue;
+ color: #FFFFFF;
+
+ &:hover {
+ color: #FFFFFF;
+ text-decoration: none;
+ background-color: $light-blue;
+ }
+
+ &:focus {
+ color: #FFFFFF;
+ text-decoration: none;
+ }
+}
+
+.role-panel-button-secondary {
+ @include role-button;
+ border: $cta-panel-button-border-size solid $blue;
+ line-height: 50px - 2 * $cta-panel-button-border-size;
+ color: $blue;
+ margin-left: 10px;
+
+ @media (max-width: $users-breakpoint) {
+ margin-left: 0px;
+ }
+
+ &:hover {
+ color: $light-blue;
+ border: $cta-panel-button-border-size solid $light-blue;
+ text-decoration: none;
+ }
+
+ &:focus {
+ color: $light-blue;
+ text-decoration: none;
+ }
+}
diff --git a/app/views/root/landing.html.haml b/app/views/root/landing.html.haml
index acade798d..574ba4538 100644
--- a/app/views/root/landing.html.haml
+++ b/app/views/root/landing.html.haml
@@ -36,6 +36,41 @@
%br
à l'ensemble des services l'État plateforme
+ .landing-panel
+ .container
+ .role-panel-wrapper.role-administrations-panel
+ .role-panel-30.role-administrations-image
+ %img.role-image{ :src => image_url("landing/roles/administrations.svg") }
+
+ .role-panel-70
+ %h1.role-panel-title Administrations
+ %p.role-panel-explanation Créez des formulaires en ligne en quelques minutes et instruisez les demandes des usagers sur une plateforme dédiée
+
+ = link_to "Demander un compte",
+ "mailto:#{t("dynamics.contact_email")}?subject=Demande de démo demarches-simplifiees.fr",
+ class: "role-panel-button-primary",
+ target: "_blank",
+ onclick: "javascript: ga('send', 'pageview', '/demander-une-demo')"
+
+ = link_to "Voir la documentation",
+ "https://tps.gitbooks.io/tps-documentation/content/",
+ target: "_blank",
+ class: "role-panel-button-secondary"
+
+ .landing-panel.admins-panel
+ .container
+ .role-panel-wrapper
+ .role-panel-30.role-usagers-image
+ %img.role-image{ :src => image_url("landing/roles/usagers.svg") }
+
+ .role-panel-70
+ %h1.role-panel-title Usagers
+ %p.role-panel-explanation Déposez des demandes en toute simplicité et retrouvez vos dossiers en ligne
+
+ = link_to "Se connecter",
+ new_user_session_path,
+ class: "role-panel-button-primary"
+
.landing-panel
.container
%h2.landing-panel-title Ce que les utilisateurs pensent du service
@@ -162,6 +197,6 @@
%div
= link_to "Demander une démo",
"mailto:#{t("dynamics.contact_email")}?subject=Demande de démo demarches-simplifiees.fr",
- class: "cta-panel-button",
+ class: "cta-panel-button-white",
target: "_blank",
onclick: "javascript: ga('send', 'pageview', '/demander-une-demo')"