Adds styles and i18n for homepage

app/assets/stylesheets/layout.scss

@@ -2227,8 +2227,8 @@ table {
 
 .section-recommended {
   background: #fafafa;
-  border-bottom: 1px solid $border;
   border-top: 1px solid $border;
+  margin-bottom: rem-calc(-48);
   padding: $line-height 0;
 
   h2 {
@@ -2598,6 +2598,70 @@ table {
       color: #fff;
     }
   }
+
+  .background-header {
+    clip-path: ellipse(60% 80% at 50% 0%);
+    height: $line-height * 2;
+    background: $highlight;
+    margin-top: rem-calc(-48);
+  }
+
+  h3 {
+
+    &.title {
+      display: inline-block;
+      border-top: 4px solid $brand;
+      min-width: rem-calc(240);
+      padding-top: $line-height / 2;
+    }
+  }
+}
+
+.feeds-list {
+
+  .proposal {
+    clear: both;
+  }
+
+  .debate {
+    margin: $line-height 0;
+  }
+}
+
+.feed-image {
+  background: #fafafa;
+  display: inline-block;
+  height: rem-calc(120);
+  margin: $line-height / 2 0;
+  overflow: hidden;
+  width: rem-calc(120);
+
+  img {
+    margin-left: rem-calc(-15);
+    max-width: none;
+    width: rem-calc(120);
+  }
+}
+
+.feed-description {
+  padding-top: $line-height;
+
+  p {
+    font-size: $small-font-size;
+  }
+}
+
+.feed-content {
+  border-bottom: 1px solid $border;
+  display: inline-block;
+
+  a {
+
+    &.see-all {
+      font-size: $small-font-size;
+      margin: $line-height 0 $line-height / 2;
+    }
+  }
 }
 
 .figure-card {
@@ -2617,11 +2681,16 @@ table {
     }
   }
 
+  img {
+    height: 100%;
+    width: 100%;
+  }
+
   figcaption {
     bottom: 0;
     color: #fff;
-    font-size: rem-calc(36);
-    line-height: rem-calc(36);
+    font-size: rem-calc(24);
+    line-height: rem-calc(24);
     text-transform: uppercase;
     padding: $line-height / 4 $line-height / 2;
     position: absolute;
@@ -2629,16 +2698,18 @@ table {
 
     h3,
     .title {
-      font-size: rem-calc(36);
-      line-height: rem-calc(36);
+      font-size: rem-calc(24);
+      line-height: rem-calc(24);
     }
 
     span {
       background: #fff;
       border-radius: rem-calc(4);
       color: #000;
-      display: inline;
-      font-size: $base-font-size;
+      display: inline-block;
+      font-size: $small-font-size;
+      font-weight: bold;
+      margin-bottom: $line-height / 4;
       padding: rem-calc(4) rem-calc(8);
     }
   }

app/helpers/feeds_helper.rb

@@ -0,0 +1,15 @@
+module FeedsHelper
+
+  def feed_debates?(feed)
+    feed.kind == "debates"
+  end
+
+  def feed_proposals?(feed)
+    feed.kind == "proposals"
+  end
+
+  def feed_processes?(feed)
+    feed.kind == "processes"
+  end
+
+end

app/views/welcome/_card.html.erb

@@ -1,4 +1,4 @@
-<div id="<%= dom_id(card) %>" class="card small-12 large-4 column margin-bottom end">
+<div id="<%= dom_id(card) %>" class="card small-12 medium-6 column margin-bottom end">
   <%= link_to card.link_url do %>
     <figure class="figure-card">
       <% if card.image.present? %>

app/views/welcome/_cards.html.erb

@@ -1,3 +1,5 @@
+<h3 class="title"><%= t("welcome.cards.title") %></h3>
+
 <div class="row">
   <% @cards.all.each do |card| %>
     <%= render "card", card: card %>

app/views/welcome/_feeds.html.erb

@@ -1,14 +1,46 @@
-<div class="row">
-  <div class="small-12 column">
-    <% @feeds.each do |feed| %>
+<div class="row margin-bottom feeds-list">
+  <% @feeds.each do |feed| %>
 
-      <strong>Most active <%= feed.kind %></strong>
+    <% if feed_proposals?(feed) %>
+      <div class="small-12 medium-8 column margin-top">
+        <div class="feed-content">
+          <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
 
-      <% feed.items.each do |item| %>
-        <div class="<%= item.class.to_s.parameterize('_') %>">
-          <%= item.title %>
+          <% feed.items.each do |item| %>
+            <div class="<%= item.class.to_s.parameterize('_') %>">
+              <div class="feed-image small-12 medium-2 column">
+                <% if feature?(:allow_images) && item.image.present? %>
+                  <%= image_tag item.image_url(:thumb),
+                                alt: item.image.title.unicode_normalize %>
+                <% end %>
+              </div>
+              <div class="feed-description small-12 medium-10 column">
+                <strong><%= link_to item.title, url_for(item) %></strong><br>
+                <p><%= item.summary %></p>
+              </div>
+            </div>
+          <% end %>
+
+          <%= link_to t("welcome.feed.see_all_proposals"), proposals_path, class: "float-right see-all" %>
         </div>
-      <% end %>
+      </div>
     <% end %>
-  </div>
+
+    <% if feed_debates?(feed) %>
+      <div class="small-12 medium-4 column margin-top">
+        <div class="feed-content">
+          <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
+
+          <% feed.items.each do |item| %>
+            <div class="<%= item.class.to_s.parameterize('_') %>">
+              <strong><%= link_to item.title, url_for(item) %></strong>
+            </div>
+          <% end %>
+
+          <%= link_to t("welcome.feed.see_all_debates"), debates_path, class: "float-right see-all" %>
+        </div>
+      </div>
+    <% end %>
+
+  <% end %>
 </div>

app/views/welcome/_header.html.erb

@@ -18,4 +18,5 @@
       <% end %>
     </div>
   </div>
+  <div class="background-header"></div>
 <% end %>

app/views/welcome/_processes.html.erb

@@ -0,0 +1,29 @@
+<div class="feeds-list">
+  <% @feeds.each do |feed| %>
+
+    <% if feed_processes?(feed) %>
+      <div class="card small-12 column margin-bottom">
+        <div class="feed-content">
+          <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
+
+          <% feed.items.each do |item| %>
+            <%= link_to url_for(item) do %>
+              <figure class="figure-card <%= item.class.to_s.parameterize('_') %>">
+                <%= image_tag("welcome_process.png", alt: "") %>
+                <figcaption>
+                  <span><%= t("welcome.feed.process_label") %></span><br>
+                  <h3><%= item.title %></h3>
+                </figcaption>
+              </figure>
+              <p class="description small"><%= item.summary %></p>
+              <p class="small"><%= t("welcome.feed.see_process") %></p>
+            <% end %>
+          <% end %>
+
+          <%= link_to t("welcome.feed.see_all_processes"), legislation_processes_path, class: "float-right see-all" %>
+        </div>
+      </div>
+    <% end %>
+
+  <% end %>
+</div>

app/views/welcome/index.html.erb

@@ -14,7 +14,16 @@
 <main>
   <%= render "feeds" %>
 
-  <%= render "cards" %>
+
+  <div class="row">
+    <div class="small-12 medium-8 column">
+      <%= render "cards" %>
+    </div>
+
+    <div class="small-12 medium-4 column">
+      <%= render "processes" %>
+    </div>
+  </div>
 
   <% if feature?("user.recommendations") && (@recommended_debates.present? || @recommended_proposals.present?) %>
     <%= render "recommended",

config/locales/en/activerecord.yml

@@ -246,7 +246,7 @@ en:
         from: From
         body: Email content
       widget/card:
-        label: Label
+        label: Label (optional)
         title: Title
         description: Description
         link_text: Link text

config/locales/en/general.yml

@@ -784,6 +784,18 @@ en:
         one: "You can only support investment projects in %{count} district"
         other: "You can only support investment projects in %{count} districts"
   welcome:
+    feed:
+      most_active:
+        debates: "Most active debates"
+        proposals: "Most active proposals"
+        processes: "Open processes"
+      see_all_debates: See all debates
+      see_all_proposals: See all proposals
+      see_all_processes: See all processes
+      process_label: Process
+      see_process: See process
+    cards:
+      title: Featured
     recommended:
       title: Recommendations that may interest you
       help: "These recommendations are generated by the tags of the debates and proposals you are following."

config/locales/es/activerecord.yml

@@ -242,7 +242,7 @@ es:
         from: Enviado por
         body: Contenido del email
       widget/card:
-        label: Etiqueta
+        label: Etiqueta (opcional)
         title: Título
         description: Descripción
         link_text: Texto del enlace

config/locales/es/general.yml

@@ -783,6 +783,18 @@ es:
         one: "Sólo puedes apoyar proyectos de gasto de %{count} distrito"
         other: "Sólo puedes apoyar proyectos de gasto de %{count} distritos"
   welcome:
+    feed:
+      most_active:
+        debates: "Debates más activos"
+        proposals: "Propuestas más activas"
+        processes: "Procesos abiertos"
+      see_all_debates: Ver todos los debates
+      see_all_proposals: Ver todas las propuestas
+      see_all_processes: Ver todos los procesos
+      process_label: Proceso
+      see_process: Ver proceso
+    cards:
+      title: Destacados
     recommended:
       title: Recomendaciones que te pueden interesar
       help: "Estas recomendaciones se generan por las etiquetas de los debates y propuestas que estás siguiendo."