Merge pull request #1517 from betagouv/landing

Landing

app/assets/images/landing/features/creer.svg

@@ -1 +0,0 @@
-<svg width="96" height="80" viewBox="0 0 96 80" xmlns="http://www.w3.org/2000/svg"><title>BB9A4BB9-1A5D-4E79-92B9-D2AF8B16FCF3</title><g fill="none" fill-rule="evenodd"><path d="M0-8h96v96H0z"/><path d="M17 17h63" stroke="#F8F8F8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22.423 13.029a1.5 1.5 0 1 1-3.001-.001 1.5 1.5 0 0 1 3 0m5.001.001a1.5 1.5 0 1 1-3.001-.001 1.5 1.5 0 0 1 3 0m5.001.001a1.5 1.5 0 1 1-3.001-.001 1.5 1.5 0 0 1 3 0" fill="#FFF"/><path d="M69 36H29m40 8H29m23-16H29m51 23V12c0-1.657-1.843-3-3.5-3h-57c-1.657 0-2.5 1.343-2.5 3v39" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M95 62.023a3.918 3.918 0 0 1-3.912 3.923H4.908A3.914 3.914 0 0 1 1 62.023v-56.6A3.914 3.914 0 0 1 4.908 1.5h86.18A3.918 3.918 0 0 1 95 5.423v56.6zM66.998 78.5c-5.837-1.744-10.642-2.479-11.383-8.78v-3.774H38.08v3.386c-.582 6.664-5.468 7.388-11.423 9.168h40.341zM2 51h93" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

app/assets/images/landing/features/messagerie.svg

@@ -0,0 +1 @@
+<svg width="78" height="77" viewBox="0 0 78 77" xmlns="http://www.w3.org/2000/svg"><title>Bubble</title><g fill="none" fill-rule="evenodd"><path d="M1.71 74.123S7.274 57.91 6.97 57.397c-.03-.05-.054-.097-.082-.14A37.27 37.27 0 0 1 1.841 38.5C1.84 17.79 18.628 1 39.335 1c20.712 0 37.5 16.79 37.5 37.5S60.047 76 39.335 76a37.353 37.353 0 0 1-20.765-6.282.213.213 0 0 1 .032.025L1.71 74.123z" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M25.168 38.917a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0M42.882 38.917a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0M60.597 38.917a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0" fill="#FFF"/></g></svg>

app/assets/images/landing/roles/usagers.svg

@@ -0,0 +1 @@
+<svg width="94" height="96" viewBox="0 0 94 96" xmlns="http://www.w3.org/2000/svg"><title>usager</title><g fill="none" fill-rule="evenodd"><path d="M17.334 12.334h39" stroke="#0069CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M26.09 7.316a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001M32.09 7.316a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001M38.09 7.316a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001" fill="#0069CC"/><path d="M82.334 39.334h-55M82.334 48.334h-53M82.334 56.334H34.995M82.334 65.334H39.352M54.334 30.334h-27M58.334 74.334H39.021M37.334 94.334h52.773c1.506 0 2.227-2.268 2.227-3.773V31.334M61.334 2.334H20.561c-1.506 0-3.227.174-3.227 1.68v43.32" stroke="#0069CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><g><path d="M62.284 30.249s2.225-6.485 2.104-6.69l-.033-.056A14.908 14.908 0 0 1 62.336 16c0-8.284 6.715-15 14.998-15 8.285 0 15 6.716 15 15 0 8.284-6.715 15-15 15-3.072 0-5.926-.929-8.306-2.513.003.001.013.01.013.01l-6.757 1.752z" fill="#D9E9FD"/><path d="M62.284 30.249s2.225-6.485 2.104-6.69l-.033-.056A14.908 14.908 0 0 1 62.336 16c0-8.284 6.715-15 14.998-15 8.285 0 15 6.716 15 15 0 8.284-6.715 15-15 15-3.072 0-5.926-.929-8.306-2.513.003.001.013.01.013.01l-6.757 1.752z" stroke="#0069CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M71.667 16.167a1.501 1.501 0 1 1-3.002 0 1.501 1.501 0 0 1 3.002 0M78.753 16.167a1.501 1.501 0 1 1-3.002 0 1.501 1.501 0 0 1 3.002 0M85.839 16.167a1.501 1.501 0 1 1-3.002 0 1.501 1.501 0 0 1 3.002 0" fill="#0069CC"/></g><g><path d="M1 87.05c4.277 4.37 10.235 7.094 16.834 7.094s12.555-2.725 16.833-7.096c-1.229-4.143-4.164-8.141-10.997-8.141 0 0-2.18 2.123-5.836 2.123-3.659 0-5.836-2.123-5.836-2.123-6.834 0-9.768 3.998-10.998 8.143" fill="#D9E9FD"/><path d="M1 87.05c4.277 4.37 10.235 7.094 16.834 7.094s12.555-2.725 16.833-7.096c-1.229-4.143-4.164-8.141-10.997-8.141 0 0-2.18 2.123-5.836 2.123-3.659 0-5.836-2.123-5.836-2.123-6.834 0-9.768 3.998-10.998 8.143z" stroke="#0069CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.834 72.32c5.044 0 9.138-4.069 9.138-9.083 0-5.025-4.094-9.094-9.138-9.094s-9.138 4.07-9.138 9.094c0 5.014 4.096 9.082 9.138 9.082" fill="#D9E9FD"/><path d="M17.834 72.32c5.044 0 9.138-4.069 9.138-9.083 0-5.025-4.094-9.094-9.138-9.094s-9.138 4.07-9.138 9.094c0 5.014 4.096 9.082 9.138 9.082z" stroke="#0069CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></g></svg>

app/assets/stylesheets/new_design/landing.scss

@@ -32,13 +32,13 @@ $landing-breakpoint: 1040px;
 }
 
 .hero-tagline {
-  font-size: 30px;
+  font-size: 40px;
   margin-bottom: 0px;
 }
 
 .hero-tagline-em {
   color: $blue;
-  font-size: 36px;
+  font-size: 40px;
   font-style: normal;
   font-weight: bold;
 }
@@ -55,31 +55,6 @@ $landing-breakpoint: 1040px;
   }
 }
 
-.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;
-  cursor: pointer;
-
-  &:hover {
-    color: #FFFFFF;
-    text-decoration: none;
-    background-color: $light-blue;
-  }
-
-  &:focus {
-    color: #FFFFFF;
-    text-decoration: none;
-  }
-}
-
 .landing-panel-title {
   width: 100%;
   font-size: 30px;
@@ -110,7 +85,7 @@ $landing-breakpoint: 1040px;
 
 .feature {
   @extend %horizontal-list-item;
-  width: 320px;
+  width: 260px;
 
   @media (max-width: $landing-breakpoint) {
     margin: 15px 20px;
@@ -118,9 +93,9 @@ $landing-breakpoint: 1040px;
 }
 
 .feature-text {
-  text-align: center;
   color: #FFFFFF;
   font-size: 20px;
+  text-align: center;
 }
 
 .feature-text-em {
@@ -138,6 +113,7 @@ $landing-breakpoint: 1040px;
   @extend %horizontal-list;
   width: 100%;
   justify-content: space-between;
+  margin-bottom: 30px;
 
   @media (max-width: $landing-breakpoint) {
     justify-content: center;
@@ -147,6 +123,7 @@ $landing-breakpoint: 1040px;
 .quote {
   @extend %horizontal-list-item;
   max-width: 500px;
+  width: 100%;
   background-color: #FFFFFF;
   box-shadow: 0 4px 16px 0 rgba(153, 153, 153, 0.2);
   padding: 24px;
@@ -181,6 +158,7 @@ $landing-breakpoint: 1040px;
   font-weight: bold;
 }
 
+.admins-panel,
 .numbers-panel {
   background-color: $light-grey;
 }
@@ -219,8 +197,16 @@ $users-breakpoint: 950px;
   justify-content: space-between;
   width: 100%;
 
+  &:first-of-type {
+    margin-bottom: 45px;
+  }
+
   @media (max-width: $users-breakpoint) {
     justify-content: space-around;
+
+    &:first-of-type {
+      margin-bottom: 0;
+    }
   }
 }
 
@@ -241,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;
@@ -253,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;
@@ -264,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 {
+.cta-panel-button-white {
-  @include horizontal-padding(30px);
+  @include horizontal-padding(40px);
-  @include vertical-padding(10px);
+  @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;
@@ -289,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;
+  }
+}

app/views/root/landing.html.haml

@@ -6,47 +6,70 @@
       .hero-wrapper
         .hero-text
           %p.hero-tagline
-            %em.hero-tagline-em Dématérialisez
+            %em.hero-tagline-em Dématérialiser et simplifier
-            %br
+            les démarches administratives
-            vos procédures administratives en quelques minutes
-          = link_to "Demander une démo",
-            "mailto:#{t("dynamics.contact_email")}?subject=Demande de démo demarches-simplifiees.fr",
-            class: "hero-button",
-            target: "_blank",
-            onclick: "javascript: ga('send', 'pageview', '/demander-une-demo')"
 
         .hero-illustration
           %img{ :src => image_url("landing/hero/dematerialiser.svg") }
 
   .landing-panel.features-panel
     .container
-      %h2.landing-panel-title.features-panel-title Un outil dédié aux organismes publics
-
       %ul.features
         %li.feature
-          %img.feature-image{ :src => image_url("landing/features/creer.svg") }
+          %img.feature-image{ :src => image_url("landing/features/messagerie.svg") }
           %p.feature-text
-            %em.feature-text-em Créer
+            %em.feature-text-em Dialogue
             %br
-            des procédures en ligne
+            entre usagers et services plus simple
-            %br
+
-            en toute simplicité
-        %li.feature
-          %img.feature-image{ :src => image_url("landing/features/gerer.svg") }
-          %p.feature-text
-            %em.feature-text-em Gérer
-            %br
-            les demandes des usagers
-            %br
-            sur la plateforme
         %li.feature
           %img.feature-image{ :src => image_url("landing/features/collaborer.svg") }
           %p.feature-text
-            %em.feature-text-em Collaborer
+            %em.feature-text-em Collaboration
             %br
-            pour instruire les demandes
+            pour un traitement des dossiers plus fluide
+
+        %li.feature
+          %img.feature-image{ :src => image_url("landing/features/gerer.svg") }
+          %p.feature-text
+            %em.feature-text-em Intégration
             %br
-            à plusieurs
+            à 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
@@ -57,7 +80,7 @@
           %img.quote-quotation-mark{ :src => image_url("landing/testimonials/quotation-mark.svg") }
           .quote-content-wrapper
             %p.quote-content
-              demarches-simplifiees.fr est un outil de dématérialisation adapté au dépôt de dossiers de demande d’inscription au registre des transporteurs routiers en Ile-de-France. Les échanges avec les usagers sont facilités, ce qui permet de réduire les délais d’instructions et de gagner en efficacité.
+              Les échanges avec les usagers sont facilités, ce qui permet de réduire les délais d’instructions et de gagner en efficacité.
 
             %p.quote-author
               %span.quote-author-name Elodie Le Rhun
@@ -68,13 +91,38 @@
           %img.quote-quotation-mark{ :src => image_url("landing/testimonials/quotation-mark.svg") }
           .quote-content-wrapper
             %p.quote-content
-              demarches-simplifiees.fr c’est surtout l’assurance d’un dialogue en toute fluidité et en toute transparence entre les porteurs de projet et l’administration. Un service qui garantit une économie de temps et beaucoup moins de manipulations des dossiers.
+              Un service qui garantit une économie de temps et beaucoup moins de manipulations des dossiers.
 
             %p.quote-author
               %span.quote-author-name Nadja Briki
               %br
               Déléguée de la Préfète du Pas-de-Calais
 
+      %ul.quotes
+        %li.quote
+          %img.quote-quotation-mark{ :src => image_url("landing/testimonials/quotation-mark.svg") }
+          .quote-content-wrapper
+            %p.quote-content
+              Parfait, cela fonctionne très bien ! Merci encore pour votre réactivité.
+
+            %p.quote-author
+              %span.quote-author-name Max A.
+              %br
+              à notre service support
+
+        %li.quote
+          %img.quote-quotation-mark{ :src => image_url("landing/testimonials/quotation-mark.svg") }
+          .quote-content-wrapper
+            %p.quote-content
+              ★★★★★
+              %br
+              Eh les cocos, il y a la télé-procédure
+
+            %p.quote-author
+              %span.quote-author-name Hisham M.
+              %br
+              sur le site de la DRIEA
+
   - cache "numbers-panel", :expires_in => 3.hours do
     .landing-panel.numbers-panel
       .container
@@ -82,11 +130,11 @@
         %ul.numbers
           %li.number
             .number-value
-              = number_with_delimiter(Procedure.publiees_ou_archivees.count, :locale => :fr)
+              = number_with_delimiter(Procedure.includes(:administrateur).publiees_ou_archivees.map(&:administrateur).uniq.count, :locale => :fr)
             .number-label<
-              procédures
+              administrations
               %br<>
-              dématérialisées
+              partenaires
           %li.number
             .number-value
               = number_with_delimiter(Dossier.where.not(:state => :brouillon).count, :locale => :fr)
@@ -104,7 +152,7 @@
 
   .landing-panel.users-panel
     .container
-      %h2.landing-panel-title Ils nous font confiance
+      %h2.landing-panel-title Ils utilisent déjà demarches-simplifiees.fr
 
       %ul.users
         %li.user
@@ -123,15 +171,31 @@
           %a{ :href => "http://www.driea.ile-de-france.developpement-durable.gouv.fr/", :target => "_blank " }
             %img.user-image{ :src => image_url("landing/users/driea-idf.jpg") }
 
+      %ul.users
+        %li.user
+          %a{ :href => "https://www.debatpublic.fr/", :target => "_blank " }
+            %img.user-image{ :src => image_url("landing/users/cndp.jpg") }
+        %li.user
+          %a{ :href => "https://www.iledefrance.ars.sante.fr/", :target => "_blank " }
+            %img.user-image{ :src => image_url("landing/users/ars-idf.jpg") }
+        %li.user
+          %a{ :href => "http://www.franceagrimer.fr/", :target => "_blank " }
+            %img.user-image{ :src => image_url("landing/users/france-agrimer.jpg") }
+        %li.user
+          %a{ :href => "http://www.rhone.gouv.fr/", :target => "_blank " }
+            %img.user-image{ :src => image_url("landing/users/prefecture-rhone.jpg") }
+        %li.user
+          %a{ :href => "http://www.lillemetropole.fr/", :target => "_blank " }
+            %img.user-image{ :src => image_url("landing/users/mel.jpg") }
+
   .landing-panel.cta-panel
     .container
       .cta-panel-wrapper
         %div
-          %h1.cta-panel-title Commencez à dématérialiser vos procédures
+          %h1.cta-panel-title Une question, un problème ?
-          %p.cta-panel-explanation Nous vous accompagnons dans la prise en main de l’outil
+          %p.cta-panel-explanation Nous équipe est disponible pour vous renseigner et vous aider
         %div
-          = link_to "Demander une démo",
+          = link_to "Contactez-nous",
-            "mailto:#{t("dynamics.contact_email")}?subject=Demande de démo demarches-simplifiees.fr",
+            "mailto:#{t("dynamics.contact_email")}?subject=Question à propos de demarches-simplifiees.fr",
-            class: "cta-panel-button",
+            class: "cta-panel-button-white",
-            target: "_blank",
+            target: "_blank"
-            onclick: "javascript: ga('send', 'pageview', '/demander-une-demo')"