simplify html and css for landing pages and improve dark mode

app/assets/stylesheets/landing.scss

@@ -3,10 +3,6 @@
 @import "mixins";
 @import "placeholders";
 
-.landing-panel {
-  @include vertical-padding(60px);
-}
-
 $landing-breakpoint: 1040px;
 
 .hero-wrapper {
@@ -27,16 +23,6 @@ $landing-breakpoint: 1040px;
   }
 }
 
-.hero-tagline {
-  margin-bottom: 0px;
-}
-
-.hero-tagline-em {
-  color: $blue-france-500;
-  font-style: normal;
-  font-weight: bold;
-}
-
 .hero-illustration {
   max-width: 500px;
 
@@ -74,7 +60,6 @@ $landing-breakpoint: 1040px;
 }
 
 .feature-text {
-  color: #FFFFFF;
   font-size: 20px;
   text-align: center;
 }
@@ -139,17 +124,7 @@ $landing-breakpoint: 1040px;
   font-weight: bold;
 }
 
-.usagers-panel,
-.numbers-panel,
-.cta-panel-2 {
-  background-color: var(--background-alt-blue-france);
-}
-
-
 .landing {
-  .more-info {
-    background-color: #FFFFFF;
-  }
 
   .numbers {
     @extend %horizontal-list;
@@ -229,15 +204,6 @@ $users-breakpoint: 950px;
   height: 180px;
 }
 
-.cta-panel {
-  background-color: $blue-france-500;
-  color: #FFFFFF;
-
-  .fr-btn {
-    box-shadow: inset 0 0 0 1px var(--text-inverted-blue-france);
-  }
-}
-
 .role-panel-wrapper {
   width: 100%;
   display: flex;
@@ -274,25 +240,6 @@ $users-breakpoint: 950px;
   }
 }
 
-.cta-panel-title {
-  font-size: 24px;
-  font-weight: bold;
-  margin-top: 13px;
-  color: #FFFFFF;
-
-  &.grey {
-    color: $g700;
-  }
-}
-
-.cta-panel-explanation {
-  font-size: 22px;
-  margin-bottom: 10px;
-
-  &.grey {
-    color: $g700;
-  }
-}
 
 .role-administrations-image {
   text-align: right;

app/views/root/_testimonials.html.haml

@@ -1,4 +1,4 @@
-.landing-panel
+.fr-py-6w
   .container
     %h2.center.fr-mb-4w Ce que les utilisateurs pensent du service
 

app/views/root/_users.html.haml

@@ -1,4 +1,4 @@
-.landing-panel.users-panel
+.fr-py-6w
   .container
     %h2.center.fr-mb-4w Ils utilisent déjà #{APPLICATION_NAME}
 

app/views/root/administration.html.haml

@@ -2,18 +2,18 @@
   = render partial: "root/footer"
 
 .landing
-  .landing-panel.hero-panel
+  .fr-py-6w
     .container
       .hero-wrapper
         .hero-text
-          %h1.hero-tagline
+          %h1.fr-mb-0
-            %em.hero-tagline-em Dématérialisez et simplifiez
+            Dématérialisez et simplifiez
             vos démarches administratives
 
         .hero-illustration
           %img{ :src => image_url("landing/hero/dematerialiser.svg"), alt: "" }
 
-  .landing-panel.more-info
+  .fr-py-6w.fr-background-alt--blue-france
     .container
       .role-panel-wrapper.role-administrations-panel
         .role-panel-70
@@ -26,7 +26,7 @@
         .role-panel-30.role-more-info-image.fr-mt-2w
           %img.role-image{ :src => image_url("landing/roles/usagers.svg"), alt: "" }
 
-  .landing-panel.usagers-panel
+  .fr-py-6w
     .container
       .role-panel-wrapper.role-administrations-panel
         .role-panel-30.role-administrations-image
@@ -44,9 +44,7 @@
           %br
 
 
-
+  .fr-py-6w.fr-background-flat--blue-france.fr-text-inverted--blue-france
-
-  .landing-panel.features-panel
     .container
       %ul.features
         %li.feature
@@ -73,7 +71,7 @@
   = render partial: "root/testimonials" if LANDING_TESTIMONIALS_ENABLED
 
   - cache "numbers-panel", :expires_in => 3.hours do
-    .landing-panel.numbers-panel
+    .fr-py-6w.fr-background-alt--blue-france
       .container
         %h2.center.fr-mb-4w #{APPLICATION_NAME} en chiffres
         %ul.numbers
@@ -113,11 +111,11 @@
           - c.with_footer_button do
             = link_to("Inscription à notre prochain webinaire", INSCRIPTION_WEBINAIRE_URL, class: "fr-btn", **external_link_attributes)
 
-  .landing-panel.cta-panel
+  .fr-py-6w.fr-background-alt--blue-france
     .container
       .cta-panel-wrapper
         %div
-          %h1.cta-panel-title Une question, un problème ?
+          %h2 Une question, un problème ?
-          %p.cta-panel-explanation Consultez notre FAQ
+          %p.fr-h5 Consultez notre FAQ
         %div
           = link_to "Voir la FAQ", t("links.common.faq.url"), class: "fr-btn fr-btn--lg", **external_link_attributes

app/views/root/landing.html.haml

@@ -3,17 +3,17 @@
 - content_for :title, t(".promise")
 
 .landing
-  .landing-panel.hero-panel
+  .fr-py-6w
     .container
       .hero-wrapper
         .hero-text
-          %h1.hero-tagline
+          %h1.fr-mb-0
-            %em.hero-tagline-em= t(".promise")
+            = t(".promise")
 
         .hero-illustration
           %img{ :src => image_url("landing/hero/dematerialiser.svg"), alt: '', width: 499, height: 280, loading: 'lazy' }
 
-  .landing-panel.usagers-panel
+  .fr-background-alt--blue-france.fr-py-6w
     .container
       .role-panel-wrapper
         .role-panel-30.role-usagers-image
@@ -27,7 +27,7 @@
           = link_to t("views.users.sessions.new.connection"), new_user_session_path, class: "fr-btn fr-btn--secondary fr-btn--lg"
 
   - cache [I18n.locale, "numbers-panel"], expires_in: 3.hours do
-    .landing-panel
+    .fr-py-6w
       .container
         %h2.center.fr-mb-4w= t(".our_numbers", name: APPLICATION_NAME)
         %ul.numbers
@@ -44,28 +44,20 @@
               = "#{number_with_delimiter(50)} %"
             .number-label.number-label-third= t(".numbers.processing_time")
 
-  .landing-panel.cta-panel
+  .fr-background-alt--blue-france.fr-py-6w
     .container
       .cta-panel-wrapper
         %div
-          %h2.cta-panel-title= t(".question")
+          %h2= t(".question")
-          %p.cta-panel-explanation= t(".answer_in_faq")
+          %p.fr-h5= t(".answer_in_faq")
         %div
           = link_to t(".online_help"), t("links.common.faq.url"), class: "fr-btn fr-btn--lg", title: new_tab_suffix(t(".online_help")), **external_link_attributes
-        -#   We temporarily disable the link to the contact page on the homepage
-        -#   %p.cta-panel-explanation Notre équipe est disponible pour vous renseigner et vous aider
-        -# %div
-        -#   = contact_link "Contactez-nous",
-        -#     tags: 'landing',
-        -#     class: "cta-panel-button-white",
-        -#     target: "_blank",
-        -#     rel: "noopener noreferrer"
 
-  .landing-panel
+  .fr-py-6w
     .container
       .cta-panel-wrapper
         %div
-          %h2.fr-h4= t(".administration_dematerialize")
+          %h2= t(".administration_dematerialize")
-          %p.cta-panel-explanation.grey= t(".administration_fill_online")
+          %p.fr-h5= t(".administration_fill_online")
         %div
           = link_to t(".administration_discover"), administration_path, class: "fr-btn fr-btn--lg"