diff --git a/app/assets/stylesheets/new_design/landing.scss b/app/assets/stylesheets/new_design/landing.scss index bf02238f0..7cfaa8839 100644 --- a/app/assets/stylesheets/new_design/landing.scss +++ b/app/assets/stylesheets/new_design/landing.scss @@ -159,10 +159,15 @@ $landing-breakpoint: 1040px; } .usagers-panel, -.numbers-panel { +.numbers-panel, +.cta-panel-2 { background-color: $light-grey; } +.more-info { + background-color: #FFFFFF; +} + .numbers { @extend %horizontal-list; justify-content: space-around; @@ -316,6 +321,15 @@ $users-breakpoint: 950px; } } +.role-more-info-image { + text-align: left; + + @media (max-width: $users-breakpoint) { + text-align: center; + margin-bottom: 45px; + } +} + .role-usagers-image { @media (max-width: $users-breakpoint) { text-align: center; @@ -437,3 +451,12 @@ $cta-panel-button-border-size: 2px; text-decoration: underline; } } + +.half { + width: 45%; + float: left; +} + +.first-half { + margin-right: 10%; +} diff --git a/app/views/root/administration.html.haml b/app/views/root/administration.html.haml index 238015f70..238b123fc 100644 --- a/app/views/root/administration.html.haml +++ b/app/views/root/administration.html.haml @@ -26,7 +26,7 @@ %img.role-image{ :src => image_url("landing/roles/administrations.svg"), alt: "" } .role-panel-70 - %h1.role-panel-title Vous êtes une administration et vous souhaitez dématérialiser une démarche papier et réduire vos temps d'instruction ? + %h1.role-panel-title Vous êtes une administration et êtes prête pour dématérialiser ? %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 administrateur", @@ -34,12 +34,26 @@ class: "role-panel-button-primary", rel: "noopener noreferrer" - = link_to "Voir la documentation", + .landing-panel.more-info + .container + .role-panel-wrapper.role-administrations-panel + .role-panel-70 + %h1.role-panel-title Vous voulez en savoir plus ? + %p.role-panel-explanation Découvrez notre outil + + = link_to "Contactez-nous", + contact_admin_path, + rel: "noopener noreferrer", + class: "role-panel-button-primary" + + = link_to "Consultez notre documentation", DOC_URL, - target: "_blank", rel: "noopener noreferrer", class: "role-panel-button-secondary" + .role-panel-30.role-more-info-image + %img.role-image{ :src => image_url("landing/roles/usagers.svg"), alt: "" } + .landing-panel.features-panel .container %ul.features @@ -181,6 +195,24 @@ = link_to "http://www.lillemetropole.fr/", target: :blank, rel: "noopener noreferrer" do %img.user-image{ :src => image_url("landing/users/mel.jpg"), alt: "Métropole Européenne de Lille" } + .landing-panel.cta-panel-2 + .container + .half.first-half + %h1.cta-panel-title Vous êtes prêt pour dématérialiser ? + %p.cta-panel-explanation Réduisez vos temps d'instruction de 50 % + = link_to "Demander un compte", + new_demande_path, + class: "cta-panel-button-blue" + + .half + %h1.cta-panel-title Vous voulez en savoir plus ? + %p.cta-panel-explanation Nous vous faisons découvrir l'outil + = link_to "Contactez-nous", + contact_admin_path, + class: "cta-panel-button-blue" + + .clearfix + .landing-panel.cta-panel .container .cta-panel-wrapper @@ -188,19 +220,5 @@ %h1.cta-panel-title Une question, un problème ? %p.cta-panel-explanation Notre équipe est disponible pour vous renseigner et vous aider %div - = contact_link "Contactez-nous", - tags: 'administration', - class: "cta-panel-button-white", - target: "_blank", - rel: "noopener noreferrer" - - .landing-panel - .container - .cta-panel-wrapper - %div - %h1.cta-panel-title Vous êtes prêt pour dématérialiser ? - %p.cta-panel-explanation Réduisez vos temps d'instruction de 50 % - %div - = link_to "Demander un compte administrateur", - new_demande_path, - class: "cta-panel-button-blue" + %a.cta-panel-button-white{ rel: 'noopener noreferrer', href:'/contact-admin' } + Contactez-nous