[WIP] Add new featured section

app/assets/stylesheets/views/_homepage.scss

@@ -167,6 +167,15 @@
   }
 }
 
+.border-top-blue {
+  border-top: 4px solid $govuk-brand-colour;
+  padding-top: govuk-spacing(8);
+
+  @include govuk-media-query($from: "desktop") {
+      padding-top: govuk-spacing(6);
+  }
+}
+
 .border-top-blue-from-desktop {
   border: none;
 

app/views/homepage/_promotion_slots.html.erb

@@ -14,31 +14,63 @@
     </div>
   </div>
 
-  <% t("homepage.index.promotion_slots").each_with_index do | item, index | %>
-    <%= render "govuk_publishing_components/components/image_card", {
-      href: item[:href],
-      data_attributes: {
-        module: "ga4-link-tracker",
-        ga4_link: {
-          event_name: "navigation",
-          type: "homepage",
-          index_section: locals[:index_section],
-          index_link: index + 1,
-          index_section_count: locals[:index_section_count],
-          index_total: t("homepage.index.promotion_slots").length,
-          section: t("homepage.index.featured", locale: :en),
+  <div>
+    <% t("homepage.index.promotion_slots").each_with_index do | item, index | %>
+      <%= render "govuk_publishing_components/components/image_card", {
+        href: item[:href],
+        data_attributes: {
+          module: "ga4-link-tracker",
+          ga4_link: {
+            event_name: "navigation",
+            type: "homepage",
+            index_section: locals[:index_section],
+            index_link: index + 1,
+            index_section_count: locals[:index_section_count],
+            index_total: t("homepage.index.promotion_slots").length,
+            section: t("homepage.index.featured", locale: :en),
+          },
         },
-      },
-      image_src: image_path(item[:image_src]),
-      image_alt: "",
-      image_loading: "lazy",
-      heading_level: 3,
-      heading_text: item[:title],
-      two_thirds: true,
-      large_font_size_mobile: true,
-      description: item[:text],
-      font_size: "s",
-      srcset: item.fetch(:srcset, {}).stringify_keys.transform_keys { |k| image_path(k) }.presence,
-    } %>
-  <% end %>
+        image_src: image_path(item[:image_src]),
+        image_alt: "",
+        image_loading: "lazy",
+        heading_level: 3,
+        heading_text: item[:title],
+        two_thirds: true,
+        large_font_size_mobile: true,
+        description: item[:text],
+        font_size: "s",
+        srcset: item.fetch(:srcset, {}).stringify_keys.transform_keys { |k| image_path(k) }.presence,
+      } %>
+    <% end %>
+  </div>
+
+  <div class="border-top-blue">
+    <% t("homepage.index.promotion_slots_secondary").each_with_index do | item, index | %>
+      <%= render "govuk_publishing_components/components/image_card", {
+        href: item[:href],
+        data_attributes: {
+          module: "ga4-link-tracker",
+          ga4_link: {
+            event_name: "navigation",
+            type: "homepage",
+            index_section: locals[:index_section],
+            index_link: index + 1,
+            index_section_count: locals[:index_section_count],
+            index_total: t("homepage.index.promotion_slots_secondary").length,
+            section: t("homepage.index.featured_secondary", locale: :en),
+          },
+        },
+        image_src: image_path(item[:image_src]),
+        image_alt: "",
+        image_loading: "lazy",
+        heading_level: 3,
+        heading_text: item[:title],
+        two_thirds: true,
+        large_font_size_mobile: true,
+        description: item[:text],
+        font_size: "s",
+        srcset: item.fetch(:srcset, {}).stringify_keys.transform_keys { |k| image_path(k) }.presence,
+      } %>
+    <% end %>
+  </div>
 </section>

config/locales/en.yml

@@ -784,6 +784,7 @@ en:
       brexit: 'Brexit: check what you need to do'
       covid: 'Coronavirus (COVID-19): guidance'
       featured: Featured
+      featured_secondary: Featured secondary
       government_activity: Government activity
       government_activity_description: Find out what the government is doing
       intro_html: The best place to find government services and information
@@ -837,6 +838,11 @@ en:
         title: Cost of living support
         href: "/cost-of-living"
         image_src: homepage/cost-of-living-featured.png
+      promotion_slots_secondary:
+      - text: A government app built around your needs.
+        title: Get the GOV.UK app
+        href: "/"
+        image_src: homepage/govuk-icon-180.png
       running_limited_company: Running a limited company
       search_button: Search GOV.UK
       search_label: Search