Merge pull request #3684 from Vizzuality/feature/new-homepage-cards

Feature/update hompage cards

Author: edbrett

app/assets/images/home/card-0.png

@@ -102,6 +102,7 @@ $item-padding-screen-m: rem(40px);
   height: rem(360px);
   padding: rem(17px) rem(16px);
   background-color: $grey-light;
+  overflow: hidden;
 
   &:before {
     content: "";
@@ -133,17 +134,18 @@ $item-padding-screen-m: rem(40px);
 
   .c-home-summary-item__background {
     position: absolute;
-    bottom: 0;
+    bottom: -150px;
     width: auto;
-    max-height: rem(235px);
+    max-width: 160%;
+    max-height: rem(335px);
     z-index: 1;
 
     &.-left {
-      left: 0;
+      left: -150px;
     }
 
     &.-right {
-      right: 0;
+      right: -150px;
     }
   }
 
@@ -166,7 +168,7 @@ $item-padding-screen-m: rem(40px);
     }
 
     .c-home-summary-item__background {
-      max-height: rem(300px);
+      max-height: rem(400px);
     }
   }
 

app/assets/images/home/card-0@2x.jpg

@@ -25,21 +25,21 @@ def index
         "paragraph" => "Analyze forest change and investigate trends anywhere in the world with just a few clicks.",
         "button" => "EXPLORE THE DASHBOARDS",
         "url" => "/dashboards/global",
-        "background_orientation" => "right"
+        "background_orientation" => "left"
       },
       {
         "title" => "Forest insights",
         "paragraph" => "Read the latest stories and findings about forests from our team of researchers on the GFW blog.",
         "button" => "START LEARNING",
         "url" => "http://blog.globalforestwatch.org/",
-        "background_orientation" => "right"
+        "background_orientation" => "left"
       },
       {
         "title" => "A suite of tools",
         "paragraph" => "Find out about the connections between deforestation and climate change, fires and haze, water security, and commodity supply chains with our specialized web applications.",
         "button" => "BROWSE OUR APPS",
         "url" => "http://developers.globalforestwatch.org",
-        "background_orientation" => "right"
+        "background_orientation" => "left"
       }
     ]
     @uses = [

app/assets/images/home/card-1.png

@@ -12,7 +12,7 @@
                   <div class="c-home-summary-item__button">
                     <%= render 'shared/buttons/regular', text: card['button'], color: 'green', url: card['url'], buttonClass: 'js-home-summary-item-linker' %>
                   </div>
-                  <img class="c-home-summary-item__background -<%= card['background_orientation'] %>" src="/assets/home/card-<%= index %>@2x.jpg" width="482" />
+                  <img class="c-home-summary-item__background -<%= card['background_orientation'] %>" src="/assets/home/card-<%= index %>.png" width="482" />
                 </div>
               </li>
             <% end %>