Fix card elements, add hero image (#31)

* Remove gradient from card elements

* Set min-height to auto for card elements

* Add hero image to landing page

Co-authored-by: catileptic <[email protected]>

app/assets/stylesheets/custom/code4_styling.scss

@@ -19,12 +19,33 @@ footer .logo a {
 
 .card-text-over {
   position: relative;
+  min-height: auto;
   figcaption {
     position: absolute;
     bottom: 0;
     left: 0;
     h3 {
-      text-shadow: 1px 1px $black;
+      color: black;
     }
   }
 }
+
+.home-header {
+  @extend .budget-header;
+  min-height: auto;
+  padding: 1.5rem 0;
+  padding-top: 3rem;
+  margin-bottom: 1.5rem;
+  margin-top: -1.5rem;
+
+  &.with-background-image {
+    background-size: auto;
+  }
+
+  h1 {
+    font-size: 2.75rem;
+    padding: 0;
+    margin: 0;
+    margin-bottom: 0.5rem;
+  }
+}

app/views/custom/welcome/_header.html.erb

@@ -0,0 +1,22 @@
+<% if header.present? %>
+  <div class="home-header with-background-image"
+    <% if header.image.present? %>
+      style="background-image: url(<%= asset_url header.image_url(:large) %>);"
+    <% end %>
+  >
+    <div class="row">
+      <div class="small-12 medium-6 column medium-9 small-centered text-center">
+        <span><%= header.label %></span>
+        <h1><%= header.title %></h1>
+
+        <p class="lead"><%= header.description %></p>
+
+        <% if header.link_text.present? && header.link_url.present? %>
+          <div class="small-12 medium-6 large-4 small-centered">
+            <%= link_to header.link_text, header.link_url, class: "button expanded large" %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

app/views/custom/welcome/index.html.erb

@@ -0,0 +1,40 @@
+<% content_for :body_class, "home-page" %>
+
+<% content_for :canonical do %>
+  <%= render "shared/canonical", href: root_url %>
+<% end %>
+
+<%= render Shared::BannerComponent.new("homepage") %>
+
+<% provide :social_media_meta_tags do %>
+  <%= render "shared/social_media_meta_tags",
+              social_url: root_url %>
+<% end %>
+
+<%= render "welcome/header", header: @header %>
+
+<main>
+  <%= render "feeds" %>
+
+  <div class="row">
+    <% if @cards.any? %>
+      <div class="small-12 column <%= "large-8" if feed_processes_enabled? %>">
+        <h2 class="title"><%= t("welcome.cards.title") %></h2>
+
+        <%= render "shared/cards", cards: @cards %>
+      </div>
+    <% end %>
+
+    <% if feed_processes_enabled? %>
+      <div class="small-12 large-4 column">
+        <%= render "processes" %>
+      </div>
+    <% end %>
+  </div>
+
+  <% if feature?("user.recommendations") && (@recommended_debates.present? || @recommended_proposals.present?) %>
+    <%= render "recommended",
+                recommended_debates: @recommended_debates,
+                recommended_proposals: @recommended_proposals %>
+  <% end %>
+</main>