Add the “CTA” part of the landing page

app/assets/stylesheets/landing.scss

@@ -193,3 +193,46 @@ $images-count: 5;
 .user-image {
   width: $image-width;
 }
+
+.cta-panel {
+  background-color: $blue;
+  color: #FFFFFF;
+}
+
+.cta-panel-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-top: 0;
+}
+
+.cta-panel-explanation {
+  font-size: 24px;
+  margin-bottom: 0;
+}
+
+$cta-panel-button-height: 60px;
+$cta-panel-button-border-size: 2px;
+
+.cta-panel-button {
+  @include horizontal-padding(30px);
+
+  display: inline-block;
+  height: $cta-panel-button-height;
+  line-height: $cta-panel-button-height - (2 * $cta-panel-button-border-size);
+  border-radius: $cta-panel-button-height;
+  border: $cta-panel-button-border-size solid #FFFFFF;
+  color: #FFFFFF;
+  font-size: 24px;
+  margin-top: 5px;
+
+  &:hover {
+    color: #FFFFFF;
+    text-decoration: none;
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+
+  &:focus {
+    color: #FFFFFF;
+    text-decoration: none;
+  }
+}

app/views/root/landing.html.haml

@@ -122,3 +122,13 @@
         %li.user
           %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") }
+
+  .landing-panel.cta-panel
+    .landing-panel-inner-content
+      = link_to "Demander une démo",
+        "mailto:#{t('dynamics.contact_email')}?subject=Demande de démo TPS",
+        :class => "cta-panel-button pull-right"
+      %h1.cta-panel-title.pull-left Commencez à dématerialiser vos démarches
+      %p.cta-panel-explanation.pull-left Nous vous accompagnons dans la prise en main de l’outil
+      .clearfix
+