Change the landing page, add the “Hero” part

app/assets/stylesheets/landing.scss

@@ -1,58 +1,64 @@
-#logo-tps {
-  width: 200px;
+@import "constants";
+@import "colors";
+@import "mixins";
+@import "placeholders";
+@import "typography";
+
+.landing {
+  @extend %new-type;
+  background-color: #FFFFFF;
 }
 
-#landing {
-  background-image: image-url("landing_background.png");
-  background-attachment: fixed;
-  background-size: 130% auto;
-  background-position: top center;
-  background-repeat: no-repeat;
-
-  h5 {
-    color: #808080;
-  }
-
-  .logos {
-    width: 150px;
-  }
-
-  #title {
-    padding-bottom: 2%;
-    padding-top: 1%;
-    color: #FFFFFF;
-    text-shadow: 0px 0px 10px rgb(0, 0, 0);
-
-    h2 {
-      font-size: 35px;
-    }
-
-    .btn {
-      text-shadow: none;
-    }
-  }
+.landing-panel {
+  @include vertical-padding(60px);
 }
 
-.background-tps {
-  background-color: #668AEA;
+.landing-panel-inner-content {
+  width: $page-width;
+  margin: 0 auto;
+}
+
+.hero-tagline {
+  width: 500px;
+  font-size: 30px;
+  margin-bottom: 0px;
+}
+
+.hero-tagline-em {
+  color: $blue;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: bold;
+}
+
+.hero-text {
+  width: 500px;
+}
+
+.hero-illustration {
+  width: 500px;
+}
+
+.hero-button {
+  @include horizontal-padding(30px);
+
+  display: inline-block;
+  height: 60px;
+  line-height: 60px;
+  border-radius: 60px;
+  background-color: $blue;
   color: #FFFFFF;
-}
+  font-size: 24px;
+  margin-top: 30px;
 
-#landing-body {
-  .split-hr-left {
-    margin-left: auto;
-    margin-right: auto;
-
-    margin-top: 40px;
-    margin-bottom: 20px;
-
-    border-color: #808080;
-    width: 40%;
+  &:hover {
+    color: #FFFFFF;
+    text-decoration: none;
+    background-color: $light-blue;
   }
 
-  #etapes,
-  #request-access {
-    margin-top: 20px;
-    margin-bottom: 20px;
+  &:focus {
+    color: #FFFFFF;
+    text-decoration: none;
   }
 }

app/views/root/landing.html.haml

@@ -1,87 +1,17 @@
-#landing.max-size
-  #title
-    .center
-      = image_tag 'logos/logo-tps.png', id: 'logo-tps'
-    %h1.center
-      TéléProcédure Simplifiée
+.landing
+  .landing-panel.hero-panel
+    .landing-panel-inner-content
+      .hero-text.pull-left
+        %p.hero-tagline
+          %em.hero-tagline-em Dématérialisez
+          %br
+          vos démarches administratives en quelques minutes
 
-    .row
-      .col-md-8.col-md-push-2.center
-        %h3
-          Dématérialisez n'importe quelle démarche administrative en quelques minutes,
-          avec un outil
-          %strong
-            gratuit, simple, collaboratif et sûr
+        = link_to "Demander une démo",
+          "mailto:#{t("dynamics.contact_email")}?subject=Demande de démo TPS",
+          :class => "hero-button"
 
-        %p.mt-1 Vous êtes intéressés ?
-        %p= link_to 'Programmer une démo', "mailto:#{t('dynamics.contact_email')}?subject=Demande de démo TPS", target: '_blank', class: 'btn btn-danger btn-lg'
+      .hero-illustration.pull-right
+        %img{ :src => image_url("landing/hero/dematerialiser.svg") }
 
-#landing-body.max-size
-  .row#etapes.center
-    #create_1.col-lg-3.col-md-3.col-sm-3.col-xs-3
-      %img{ src: image_url('etapes/create_1.png') }
-      %br
-      %h4 Administration
-      %h3.text-info Je construis ma démarche 100% en ligne
-    #complet_2.col-lg-3.col-md-3.col-sm-3.col-xs-3
-      %img{ src: image_url('etapes/complet_2.png') }
-      %br
-      %h4 Usager
-      %h3.text-success Je remplis un dossier de manière simplifiée
-    #message_3.col-lg-3.col-md-3.col-sm-3.col-xs-3
-      %img{ src: image_url('etapes/message_3.png') }
-      %br
-      %h4 Usager
-      %h3.text-warning Je dialogue avec mon administration en ligne
-    #shared_4.col-lg-3.col-md-3.col-sm-3.col-xs-3
-      %img{ src: image_url('etapes/shared_4.png') }
-      %br
-      %h4 Usager et Administrations
-      %h3.text-danger
-        J'invite des partenaires à co-construire le dossier
-
-  .split-hr-left
-
-  .row.demo_account.center
-    .col-md-4.col-lg-4
-      %h3.text-primary Acteurs publics
-      %h4 Créez des démarches en ligne simplifiées et sécurisées.
-      = link_to 'Démonstration', "#{@demo_environment_host}/administrateurs/sign_in/demo", { class: 'btn btn-lg btn-primary' }
-
-    .col-md-4.col-lg-4
-      %h3.text-warning Agents et services
-      %h4 Accompagnez et co-traitez les projets avec les usagers.
-      = link_to 'Démonstration', "#{@demo_environment_host}/gestionnaires/sign_in/demo", { class: 'btn btn-lg btn-warning' }
-
-    .col-md-4.col-lg-4
-      %h3.text-success Usagers
-      %h4 Profitez de démarches simplifiées et d’échanges continus avec les services traitants.
-      = link_to 'Démonstration', "#{@demo_environment_host}/users/sign_in/demo", { class: 'btn btn-lg btn-success' }
-
-  .split-hr-left
-
-  .center
-    .row
-      #utilisateurs.col-xs-12.col-sm-12.col-md-12.col-lg-12
-        %h4 Ils nous font confiance
-
-        Conseil Regional Ile de France, Politique de la ville du Pas de Calais (ensemble des administrations et collectivités territoriales concernées), DRIEA Ile de France
-        %br
-        Préfecture de la Martinique, DRIEE Ile de France, Ministère de l'Environnement, de l'Energie et de la Mer, MEEM, CCI Normandie, DGE, Assemblée permanente des chambres de métiers et de l'artisanat
-
-    %br
-    .row
-      #partenaires.col-xs-12.col-sm-12.col-md-12.col-lg-12
-        %h4 Ils travaillent avec nous
-
-        Insee, Infogreffe, Ministère de la Ville, de la Jeunesse et des Sports, IGN, DGFIP, CGET, France Connect, Open Streetmap, la BAN, api.gouv.fr, Euroquity - BPI, FNTP, Qualibat
-
-  .split-hr-left
-
-  #request-access.row.center
-    .col-xs-12.col-sm-12.col-md-12.col-lg-12
-    %h3 Envie de commencer à créer votre démarche ?
-
-    = link_to 'Demander un accès administrateur', 'https://tps.apientreprise.fr/users/dossiers/new?procedure_id=31', { class: 'btn btn-lg background-tps', target: '_blank' }
-
-  .split-hr-left
+      .clearfix

spec/controllers/root_controller_spec.rb

@@ -33,7 +33,7 @@ describe RootController, type: :controller do
         subject
       end
 
-      it { expect(response.body).to have_css('#landing') }
+      it { expect(response.body).to have_css('.landing') }
     end
   end
 
@@ -55,31 +55,7 @@ describe RootController, type: :controller do
       subject
     end
 
-    it { expect(response.body).to have_css('#landing') }
-
-  end
-
-  context 'environment is not development' do
-    render_views
-
-    before do
-      Rails.env.stub(:development? => false)
-      subject
-    end
-
-    it { expect(response.body).to have_link('Démonstration', href: "https://tps-dev.apientreprise.fr#{ users_sign_in_demo_path }") }
-
-  end
-
-  context 'environment is development' do
-    render_views
-
-    before do
-      Rails.env.stub(:development? => true)
-      subject
-    end
-
-    it { expect(response.body).to have_link('Démonstration', href: users_sign_in_demo_path) }
+    it { expect(response.body).to have_css('.landing') }
 
   end
 

spec/features/admin/connection_spec.rb

@@ -36,7 +36,7 @@ feature 'Administrator connection' do
           page.find_by_id('sign-out').find('a.fa-sign-out').click
         end
         scenario 'admin is redireted to home page' do
-          expect(page).to have_css('#landing')
+          expect(page).to have_css('.landing')
         end
       end
       context 'when clicking on profile' do