Add hero block variant

app/assets/stylesheets/views/_landing_page/hero.scss

@@ -1,20 +1,26 @@
 @import "govuk_publishing_components/individual_component_support";
 
+$mobile-height: 427px;
+$tablet-height: 512px;
+$desktop-height: 610px;
+
 .app-b-hero {
   margin-bottom: govuk-spacing(6);
+  position: relative;
 }
 
 .app-b-hero__imagewrapper {
   display: flex;
   justify-content: center;
   overflow: hidden;
-  height: 610px;
+  height: $desktop-height;
 
   @include govuk-media-query($until: desktop) {
-    height: 512px;
+    height: $tablet-height;
   }
+
   @include govuk-media-query($until: tablet) {
-    height: 427px;
+    height: $mobile-height;
   }
 }
 
@@ -34,3 +40,47 @@
     margin-top: -(govuk-spacing(6));
   }
 }
+
+.app-b-hero--mid-page {
+  overflow: hidden;
+  min-height: $desktop-height;
+
+  @include govuk-media-query($until: desktop) {
+    display: flex;
+    flex-direction: column-reverse;
+    min-height: $tablet-height;
+  }
+
+  @include govuk-media-query($until: tablet) {
+    min-height: $mobile-height;
+  }
+
+  .app-b-hero__image {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%);
+  }
+
+  .app-b-hero__textbox-wrapper {
+    margin-top: 0;
+
+    @include govuk-media-query($from: desktop) {
+      align-items: center;
+      display: flex;
+      height: $desktop-height;
+      margin-top: -$desktop-height;
+    }
+  }
+
+  .app-b-hero__textbox {
+    margin: govuk-spacing(6) 0;
+
+    @include govuk-media-query($until: desktop) {
+      margin-bottom: -(govuk-spacing(8));
+    }
+
+    @include govuk-media-query($until: tablet) {
+      margin-bottom: -(govuk-spacing(6));
+    }
+  }
+}

app/views/landing_page/blocks/_hero.html.erb

@@ -1,25 +1,31 @@
+
 <%
   add_view_stylesheet("landing_page/hero")
+
+  hero_classes = %w[app-b-hero]
+  hero_classes << "app-b-hero--mid-page" if block.data["theme"] == "middle_left"
+
+  grid_class = "govuk-grid-column-two-thirds-from-desktop"
+  grid_class = "govuk-grid-column-one-third-from-desktop"  if block.data["theme"] == "middle_left"
 %>
 
-<div class="app-b-hero">
+<%= content_tag("div", class: hero_classes) do %>
   <%= picture_tag(class: "app-b-hero__imagewrapper") do %>
     <%= tag.source srcset: "#{image_path(block.image.sources.desktop)}, #{image_path(block.image.sources.desktop_2x)} 2x", media: "(min-width: 769px)" %>
     <%= tag.source srcset: "#{image_path(block.image.sources.tablet)}, #{image_path(block.image.sources.tablet_2x)} 2x", media: "(min-width: 641px) and (max-width: 768px)" %>
     <%= tag.source srcset: "#{image_path(block.image.sources.mobile)}, #{image_path(block.image.sources.mobile_2x)} 2x", media: "(max-width: 640px)" %>
     <%= image_tag(block.image.sources.desktop, alt: block.image.alt, class: "app-b-hero__image") %>
   <% end %>
 
-  <div class="govuk-width-container">
+  <div class="govuk-width-container app-b-hero__textbox-wrapper">
     <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds">
-        <div class="app-b-hero__textbox">
+      <%= content_tag("div", class: grid_class) do %>
+        <%= content_tag("div", class: "app-b-hero__textbox") do %>
           <% block.hero_content.each do |subblock| %>
             <%= render_block(subblock) %>
           <% end %>
-        </div>
-      </div>
+        <% end %>
+      <% end %>
     </div>
   </div>
-
-</div>
+<% end %>