From ff075b53daaff79336a018f56316aa63975405b3 Mon Sep 17 00:00:00 2001
From: Patrick Cartlidge <patrickcartlidge@gmail.com>
Date: Thu, 14 Sep 2023 12:16:09 +0100
Subject: [PATCH] use the new backend toggle

---
 app/assets/config/manifest.js                 |   1 +
 app/assets/stylesheets/views/_homepage.scss   |  45 +--
 .../stylesheets/views/_homepage_new.scss      | 290 ++++++++++++++++++
 .../homepage/_government_activity.html.erb    | 191 ++++++------
 app/views/homepage/_homepage_new.html.erb     |  10 +
 app/views/homepage/_promotion-slots.html.erb  |  11 +-
 app/views/homepage/index.html.erb             |  31 +-
 app/views/homepage/new/_body.html.erb         |  10 +
 .../new/_government_activity.html.erb         | 111 +++++++
 .../homepage/new/_links_and_search.html.erb   |  82 +++++
 .../homepage/new/_promotion-slots.html.erb    |  49 +++
 11 files changed, 699 insertions(+), 132 deletions(-)
 create mode 100644 app/assets/stylesheets/views/_homepage_new.scss
 create mode 100644 app/views/homepage/_homepage_new.html.erb
 create mode 100644 app/views/homepage/new/_body.html.erb
 create mode 100644 app/views/homepage/new/_government_activity.html.erb
 create mode 100644 app/views/homepage/new/_links_and_search.html.erb
 create mode 100644 app/views/homepage/new/_promotion-slots.html.erb

diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
index ea7b8493a5..f72fc29d3a 100644
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -12,6 +12,7 @@
 //= link views/_cookie-settings.css
 //= link views/_csv_preview.css
 //= link views/_homepage.css
+//= link views/_homepage_new.css
 //= link views/_travel-advice.css
 //= link views/_report-child-abuse.css
 
diff --git a/app/assets/stylesheets/views/_homepage.scss b/app/assets/stylesheets/views/_homepage.scss
index ea679a8ea7..a0a00ee3dc 100644
--- a/app/assets/stylesheets/views/_homepage.scss
+++ b/app/assets/stylesheets/views/_homepage.scss
@@ -145,9 +145,28 @@
 }
 
 .homepage-services-and-info__list {
+  @include columns($items: 16, $columns: 1, $selector: "li");
   list-style: none;
   margin: 0 govuk-spacing(-3);
   padding: 0;
+
+  @include govuk-media-query($from: "tablet") {
+    @include columns($items: 16, $columns: 2, $selector: "li");
+  }
+
+  @include govuk-media-query($from: "desktop") {
+    @include columns($items: 16, $columns: 3, $selector: "li");
+  }
+
+  .homepage-section__government-activity & {
+    @include columns($items: 6, $columns: 1, $selector: "li");
+    margin-bottom: govuk-spacing(4);
+
+    @include govuk-media-query($from: "tablet") {
+      @include columns($items: 6, $columns: 2, $selector: "li");
+      margin-bottom: 0;
+    }
+  }
 }
 
 .chevron-card {
@@ -162,7 +181,7 @@
 }
 
 .chevron-card__description {
-  margin: 0 govuk-spacing(6) 0 0;
+  margin: 0 govuk-spacing(-6) 0 0;
 }
 
 .chevron-card__link {
@@ -187,7 +206,7 @@
     height: $dimension;
     position: absolute;
     right: govuk-spacing(1);
-    top: 50%;
+    top: govuk-spacing(3);
     @include prefixed-transform($rotate: 45deg);
     width: $dimension;
   }
@@ -209,10 +228,6 @@
   padding: govuk-spacing(4) 0 govuk-spacing(6);
 }
 
-.homepage-section--promotion-slots {
-  padding-top: govuk-spacing(6);
-}
-
 .homepage-section--links-and-search {
   background: govuk-colour("light-grey");
   padding: govuk-spacing(6) 0 govuk-spacing(8);
@@ -220,10 +235,6 @@
 
 .homepage-section--services-and-info {
   padding: govuk-spacing(6) 0 0;
-
-  @include govuk-media-query($from: "desktop") {
-    padding-right: 32px;
-  }
 }
 
 .homepage-section__heading {
@@ -234,10 +245,6 @@
   padding: govuk-spacing(3) 0 0;
 }
 
-.homepage-section__container {
-  padding-right: 32px;
-}
-
 .homepage-section__heading-wrapper {
   margin-bottom: govuk-spacing(1);
 
@@ -270,21 +277,19 @@
     padding-bottom: 0;
   }
 
-  & > div li {
+  & > li {
     margin-bottom: govuk-spacing(4);
 
     @include govuk-media-query($from: "desktop") {
-      margin-bottom: govuk-spacing(6);
-      padding-right: govuk-spacing(4);
+      margin-bottom: govuk-spacing(3);
     }
   }
 
-  & > div:last-child li:last-child {
+  & > li:last-child {
     margin-bottom: 0;
   }
 }
 
-.homepage-most-viewed-list__item-link {
-  padding-right: govuk-spacing(8);
+.homepage-most-viewed-list__item {
   @include govuk-font($size: 19, $weight: "bold");
 }
diff --git a/app/assets/stylesheets/views/_homepage_new.scss b/app/assets/stylesheets/views/_homepage_new.scss
new file mode 100644
index 0000000000..ea679a8ea7
--- /dev/null
+++ b/app/assets/stylesheets/views/_homepage_new.scss
@@ -0,0 +1,290 @@
+@import "govuk_publishing_components/individual_component_support";
+@import "govuk_publishing_components/components/mixins/prefixed-transform";
+@import "govuk_publishing_components/components/mixins/grid-helper";
+
+.homepage-inverse-header {
+  background-color: $govuk-brand-colour;
+  padding-bottom: govuk-spacing(7);
+  padding-top: govuk-spacing(8);
+  @include govuk-typography-common;
+
+  @include govuk-media-query($from: desktop) {
+    padding-bottom: govuk-spacing(8);
+    padding-top: govuk-spacing(9);
+  }
+}
+
+.homepage-inverse-header__title {
+  @include govuk-typography-weight-bold;
+  color: govuk-colour("white");
+  font-size: 32px;
+  font-size: govuk-px-to-rem(32);
+  line-height: 1.2;
+  margin: 0;
+  padding-bottom: govuk-spacing(6);
+
+  @include govuk-media-query($from: desktop) {
+    font-size: 48px;
+    font-size: govuk-px-to-rem(48);
+  }
+}
+
+.homepage-inverse-header__intro {
+  color: govuk-colour("white");
+  font-size: 19px;
+  font-size: govuk-px-to-rem(19);
+  margin: 0;
+  padding-bottom: govuk-spacing(2);
+
+  @include govuk-media-query($from: desktop) {
+    font-size: 24px;
+    font-size: govuk-px-to-rem(24);
+  }
+}
+
+.homepage-inverse-header__intro--bold {
+  @include govuk-typography-weight-bold;
+}
+
+.homepage__ready-container {
+  margin: govuk-spacing(6) 0 govuk-spacing(7) 0;
+
+  @include govuk-media-query($from: desktop) {
+    margin-bottom: govuk-spacing(3);
+  }
+}
+
+.homepage__ready-heading {
+  margin-bottom: govuk-spacing(4);
+}
+
+.homepage__ready-call-to-action {
+  @include govuk-font(19, $weight: bold);
+  margin-bottom: 0;
+}
+
+.home-services {
+  padding-top: govuk-spacing(5);
+}
+
+.home-services__heading {
+  @include govuk-font(19, $weight: bold);
+  margin: 0 0 govuk-spacing(1) 0;
+}
+
+.home-services__para {
+  @include govuk-font(16);
+  margin: 0 0 govuk-spacing(3) 0;
+  min-height: 40px;
+}
+
+.home-info {
+  @include govuk-font(24);
+  margin: govuk-spacing(2) 0 govuk-spacing(4);
+}
+
+.home-more__title {
+  @include govuk-font(36, $weight: bold);
+  margin: 0 0 govuk-spacing(4) 0;
+}
+
+.home-more__subtitle {
+  @include govuk-font(24, $weight: bold);
+  margin: 0 0 govuk-spacing(2) 0;
+}
+
+.home-more__list {
+  font-weight: bold;
+}
+
+.homepage-most-active-list {
+  list-style: none;
+  margin: 0 0 govuk-spacing(6) 0;
+  padding: 0;
+
+  @include govuk-media-query($from: desktop) {
+    width: 66.66%;
+    columns: 2;
+    column-gap: 15px;
+  }
+}
+
+.homepage-most-active-list__item {
+  margin: 0 0 govuk-spacing(4) 0;
+  @include govuk-font($size: 19);
+  @include govuk-media-query($from: desktop) {
+    break-inside: avoid-column;
+    margin-bottom: 0;
+    padding-top: .1875rem;
+    padding-bottom: calc(#{govuk-spacing(2)} - .1875rem);
+
+    // After much experimentation, I've used break-inside: avoid-column
+    // and some tweaks to padding-top and padding-bottom on the list
+    // items. This prevents triggering a possible bug in Safari where
+    // focused anchors in a multi-column layout cause links to jump
+    // between columns.
+
+    // Magic numbers in CSS aren't recommended, but the .1875rem value
+    // used in the padding is to compensate for the value used in our
+    // global hover states for links, eg:
+
+    // text-decoration-thickness: max(3px, .1875rem, .12em);
+
+    // This value could be tweaked, and may not be "correct" but when
+    // added to the top padding, it prevents Safari from rendering a
+    // sliver of the focus state in the opposite column.
+
+    // The bottom margin was removed and the spacing instead added as
+    // padding-bottom -- this gives some space within the element for
+    // the focus/hover states to render without being cropped off,
+    // another possible Safari bug.
+
+    // This likely isn't a long-term robust solution and may require
+    // a full refactor in the future.
+  }
+}
+
+.homepage-services-and-info__list {
+  list-style: none;
+  margin: 0 govuk-spacing(-3);
+  padding: 0;
+}
+
+.chevron-card {
+  border-top: 1px solid $govuk-border-colour;
+  margin: 0 govuk-spacing(3);
+  padding: govuk-spacing(1) 0 govuk-spacing(4) 0;
+}
+
+.chevron-card__wrapper {
+  padding: govuk-spacing(2) govuk-spacing(6) govuk-spacing(2) 0;
+  position: relative;
+}
+
+.chevron-card__description {
+  margin: 0 govuk-spacing(6) 0 0;
+}
+
+.chevron-card__link {
+  &::after {
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  &::before {
+    $dimension: 7px;
+    $width: 3px;
+
+    border-right: $width solid $govuk-brand-colour;
+    border-top: $width solid $govuk-brand-colour;
+    content: "";
+    display: block;
+    height: $dimension;
+    position: absolute;
+    right: govuk-spacing(1);
+    top: 50%;
+    @include prefixed-transform($rotate: 45deg);
+    width: $dimension;
+  }
+
+  &:hover {
+    &::before {
+      border-color: $govuk-link-hover-colour;
+    }
+  }
+
+  &:focus {
+    &::before {
+      border-color: $govuk-focus-text-colour;
+    }
+  }
+}
+
+.homepage-section {
+  padding: govuk-spacing(4) 0 govuk-spacing(6);
+}
+
+.homepage-section--promotion-slots {
+  padding-top: govuk-spacing(6);
+}
+
+.homepage-section--links-and-search {
+  background: govuk-colour("light-grey");
+  padding: govuk-spacing(6) 0 govuk-spacing(8);
+}
+
+.homepage-section--services-and-info {
+  padding: govuk-spacing(6) 0 0;
+
+  @include govuk-media-query($from: "desktop") {
+    padding-right: 32px;
+  }
+}
+
+.homepage-section__heading {
+  border-top-style: solid;
+  border-top-width: 2px;
+  border-top-color: $govuk-text-colour;
+  margin: 0 0 govuk-spacing(6);
+  padding: govuk-spacing(3) 0 0;
+}
+
+.homepage-section__container {
+  padding-right: 32px;
+}
+
+.homepage-section__heading-wrapper {
+  margin-bottom: govuk-spacing(1);
+
+  @include govuk-media-query($from: desktop) {
+    margin-bottom: 0;
+  }
+}
+
+.homepage-section__heading--border-none {
+  border: none;
+  padding: 0;
+}
+
+.homepage-search {
+  @include govuk-media-query($until: "tablet") {
+    max-width: 420px;
+  }
+}
+
+.homepage-popular {
+  padding-top: govuk-spacing(7);
+}
+
+.homepage-most-viewed-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  @include govuk-media-query($from: "tablet") {
+    padding-bottom: 0;
+  }
+
+  & > div li {
+    margin-bottom: govuk-spacing(4);
+
+    @include govuk-media-query($from: "desktop") {
+      margin-bottom: govuk-spacing(6);
+      padding-right: govuk-spacing(4);
+    }
+  }
+
+  & > div:last-child li:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.homepage-most-viewed-list__item-link {
+  padding-right: govuk-spacing(8);
+  @include govuk-font($size: 19, $weight: "bold");
+}
diff --git a/app/views/homepage/_government_activity.html.erb b/app/views/homepage/_government_activity.html.erb
index 0c6fd7da64..126209b225 100644
--- a/app/views/homepage/_government_activity.html.erb
+++ b/app/views/homepage/_government_activity.html.erb
@@ -1,111 +1,110 @@
 <section class="homepage-section homepage-section__government-activity">
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full govuk-grid-column-two-thirds-from-desktop" data-module="gem-track-click ga4-link-tracker">
-      <div class="homepage-section__container">
-        <div class="homepage-section__heading">
-          <div class="homepage-section__heading-wrapper">
-            <%= render "govuk_publishing_components/components/heading", {
-              font_size: "m",
-              text: t("homepage.index.government_activity"),
-              data_attributes: {
-                ga4_scroll_marker: true,
-              },
-            } %>
-          </div>
-
-          <%= render "govuk_publishing_components/components/lead_paragraph", {
-            text: t("homepage.index.government_activity_description"),
-            margin_bottom: 0
-          } %>
-        </div>
-
-        <ul class="homepage-services-and-info__list">
-          <% t("homepage.government_activity").each_with_index do | item, index | %>
-            <%= render partial: "homepage/chevron_card", locals: {
-              description: item[:description],
-              link: item[:link],
-              title: item[:title],
-              track_action: "governmentactivityLink",
-              index_values: {
-                index_section: 3,
-                index_link: index + 1,
-                index_section_count: 6,
-              },
-              index_total: t("homepage.government_activity").length,
-              section: t("homepage.index.government_activity", locale: :en)
-            } %>
-          <% end %>
-        </ul>
-      </div>
-    </div>
-      <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
-        <div class="homepage-section__heading">
+      <div class="homepage-section__heading">
+        <div class="homepage-section__heading-wrapper">
           <%= render "govuk_publishing_components/components/heading", {
             font_size: "m",
-            text: t("homepage.index.departments_and_organisations"),
+            text: t("homepage.index.government_activity"),
             data_attributes: {
               ga4_scroll_marker: true,
             },
           } %>
         </div>
 
-        <%#
-          The "big number" component links below are hardcoded separately (i.e. not in a loop in this instance) and therefore their 'index' properties are also hardcoded. If a new "big number" component is added or removed, this will need to be reflected in the 'index_link' and 'index_total' properties to ensure that they remain accurate for tracking/analytics purposes.
-        %>     
-        <div class="homepage-section__depts" data-module="gem-track-click ga4-link-tracker">
-          <%= render "govuk_publishing_components/components/big_number", {
-            number: t("homepage.index.ministerial_departments_count"),
-            label: t("homepage.index.ministerial_departments"),
-            href: "/government/organisations#ministerial_departments",
-            margin_bottom: 6,
-            data_attributes: {
-              "track-category": "homepageClicked",
-              "track-action": "departmentsLink",
-              "track-label": "/government/organisations#ministerial_departments",
-              "track-dimension": "#{t("homepage.index.ministerial_departments_count")} #{t("homepage.index.ministerial_departments")}",
-              "track-dimension-index": 29,
-              "track-value": 1,
-              "ga4_link": {
-                "event_name": "navigation",
-                "type": "homepage",
-                "index": {
-                  "index_section": 4,
-                  "index_link": 1,
-                  "index_section_count": 6,
-                },
-                "index_total": 2,
-                "section": t("homepage.index.departments_and_organisations", locale: :en),
-                "text": "#{t("homepage.index.ministerial_departments_count")} #{t("homepage.index.ministerial_departments", locale: :en)}"
-              }
-            },
-          } %>
-          <%= render "govuk_publishing_components/components/big_number", {
-            number: t("homepage.index.other_agencies_count"),
-            label: t("homepage.index.other_agencies"),
-            href: "/government/organisations#agencies_and_other_public_bodies",
-            margin_bottom: 6,
-            data_attributes: {
-              "track-category": "homepageClicked",
-              "track-action": "departmentsLink",
-              "track-label": "/government/organisations#agencies_and_other_public_bodies",
-              "track-dimension": "#{t("homepage.index.other_agencies_count")} #{t("homepage.index.other_agencies")}",
-              "track-dimension-index": 29,
-              "track-value": 1,
-              "ga4_link": {
-                "event_name": "navigation",
-                "type": "homepage",
-                "index": {
-                  "index_section": 4,
-                  "index_link": 2,
-                  "index_section_count": 6,
-                },
-                "index_total": 2,
-                "section": t("homepage.index.departments_and_organisations", locale: :en),
-                "text": "#{t("homepage.index.other_agencies_count")} #{t("homepage.index.other_agencies", locale: :en)}"
-              }
+        <%= render "govuk_publishing_components/components/lead_paragraph", {
+          text: t("homepage.index.government_activity_description"),
+          margin_bottom: 0
+        } %>
+      </div>
+
+      <ul class="homepage-services-and-info__list">
+        <% t("homepage.government_activity").each_with_index do | item, index | %>
+          <%= render partial: "homepage/chevron_card", locals: {
+            description: item[:description],
+            link: item[:link],
+            title: item[:title],
+            track_action: "governmentactivityLink",
+            index_values: {
+              index_section: 3,
+              index_link: index + 1,
+              index_section_count: 6,
             },
+            index_total: t("homepage.government_activity").length,
+            section: t("homepage.index.government_activity", locale: :en)
           } %>
-        </div>        
-      </div>    
+        <% end %>
+      </ul>
+    </div>
+
+    <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
+      <div class="homepage-section__heading">
+        <%= render "govuk_publishing_components/components/heading", {
+          font_size: "m",
+          text: t("homepage.index.departments_and_organisations"),
+          data_attributes: {
+            ga4_scroll_marker: true,
+          },
+        } %>
+      </div>
+
+      <%#
+        The "big number" component links below are hardcoded separately (i.e. not in a loop in this instance) and therefore their 'index' properties are also hardcoded. If a new "big number" component is added or removed, this will need to be reflected in the 'index_link' and 'index_total' properties to ensure that they remain accurate for tracking/analytics purposes.
+      %>     
+      <div class="homepage-section__depts" data-module="gem-track-click ga4-link-tracker">
+        <%= render "govuk_publishing_components/components/big_number", {
+          number: t("homepage.index.ministerial_departments_count"),
+          label: t("homepage.index.ministerial_departments"),
+          href: "/government/organisations#ministerial_departments",
+          margin_bottom: 6,
+          data_attributes: {
+            "track-category": "homepageClicked",
+            "track-action": "departmentsLink",
+            "track-label": "/government/organisations#ministerial_departments",
+            "track-dimension": "#{t("homepage.index.ministerial_departments_count")} #{t("homepage.index.ministerial_departments")}",
+            "track-dimension-index": 29,
+            "track-value": 1,
+            "ga4_link": {
+              "event_name": "navigation",
+              "type": "homepage",
+              "index": {
+                "index_section": 4,
+                "index_link": 1,
+                "index_section_count": 6,
+              },
+              "index_total": 2,
+              "section": t("homepage.index.departments_and_organisations", locale: :en),
+              "text": "#{t("homepage.index.ministerial_departments_count")} #{t("homepage.index.ministerial_departments", locale: :en)}"
+            }
+          },
+        } %>
+        <%= render "govuk_publishing_components/components/big_number", {
+          number: t("homepage.index.other_agencies_count"),
+          label: t("homepage.index.other_agencies"),
+          href: "/government/organisations#agencies_and_other_public_bodies",
+          margin_bottom: 6,
+          data_attributes: {
+            "track-category": "homepageClicked",
+            "track-action": "departmentsLink",
+            "track-label": "/government/organisations#agencies_and_other_public_bodies",
+            "track-dimension": "#{t("homepage.index.other_agencies_count")} #{t("homepage.index.other_agencies")}",
+            "track-dimension-index": 29,
+            "track-value": 1,
+            "ga4_link": {
+              "event_name": "navigation",
+              "type": "homepage",
+              "index": {
+                "index_section": 4,
+                "index_link": 2,
+                "index_section_count": 6,
+              },
+              "index_total": 2,
+              "section": t("homepage.index.departments_and_organisations", locale: :en),
+              "text": "#{t("homepage.index.other_agencies_count")} #{t("homepage.index.other_agencies", locale: :en)}"
+            }
+          },
+        } %>
+      </div>
+    </div>
   </div>
 </section>
diff --git a/app/views/homepage/_homepage_new.html.erb b/app/views/homepage/_homepage_new.html.erb
new file mode 100644
index 0000000000..dcec9562b2
--- /dev/null
+++ b/app/views/homepage/_homepage_new.html.erb
@@ -0,0 +1,10 @@
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-full govuk-grid-column-two-thirds-from-desktop">
+    <%= render "homepage/services_and_information" %>
+  </div>
+  <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
+    <%= render "homepage/promotion-slots" %>
+  </div>
+</div>
+<%= render "homepage/government_activity" %>
+<%= render "homepage/more_on_govuk" %>
\ No newline at end of file
diff --git a/app/views/homepage/_promotion-slots.html.erb b/app/views/homepage/_promotion-slots.html.erb
index 6b61c50e8d..bb6bd20b27 100644
--- a/app/views/homepage/_promotion-slots.html.erb
+++ b/app/views/homepage/_promotion-slots.html.erb
@@ -3,17 +3,20 @@
   See: https://docs.publishing.service.gov.uk/repos/frontend/update-homepage-promotion-slots.html
 %>
 
-<section class="homepage-section homepage-section--promotion-slots">
+<section class="homepage-section">
+  <div class="homepage-section__heading">
     <%= render "govuk_publishing_components/components/heading", {
       text: t("homepage.index.featured"),
       font_size: "m",
-      margin_bottom: 6,
       data_attributes: {
         ga4_scroll_marker: true,
       },
     } %>
+  </div>
 
+  <div class="govuk-grid-row">
     <% t("homepage.index.promotion_slots").each_with_index do | item, index | %>
+      <div class="govuk-grid-column-one-third">
         <%= render "govuk_publishing_components/components/image_card", {
           href: item[:href],
           href_data_attributes: {
@@ -41,9 +44,11 @@
           heading_level: 3,
           heading_text: item[:title],
           description: item[:text],
-          font_size: "s",
+          font_size: "m",
           sizes: "(max-width: 640px) 100vw, (max-width: 1020px) 33vw, 300px",
           srcset: item.fetch(:srcset, {}).stringify_keys.transform_keys { |k| image_path(k) }.presence
         } %>
+      </div>
     <% end %>
+  </div>
 </section>
diff --git a/app/views/homepage/index.html.erb b/app/views/homepage/index.html.erb
index 0fe5a31bd7..ed43fffdfe 100644
--- a/app/views/homepage/index.html.erb
+++ b/app/views/homepage/index.html.erb
@@ -1,6 +1,13 @@
-<%
-  add_view_stylesheet("homepage")
-%>
+<% if @new_design %>
+  <%
+    add_view_stylesheet("homepage_new")
+  %>
+<% else %>
+  <%
+    add_view_stylesheet("homepage")
+  %>
+<% end %>
+
 <% content_for :extra_headers do %>
   <link rel="canonical" href="<%=  Frontend.govuk_website_root + root_path %>">
   <meta name="description" content="<%= t("homepage.index.meta_description") %>">
@@ -17,15 +24,13 @@
   <%= render "homepage/links_and_search" %>
 
   <div class="govuk-width-container">
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-full govuk-grid-column-two-thirds-from-desktop">
-        <%= render "homepage/services_and_information" %>
-      </div>
-      <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
-        <%= render "homepage/promotion-slots" %>
-      </div>
-    </div>
-    <%= render "homepage/government_activity" %>
-    <%= render "homepage/more_on_govuk" %>
+    <% if @new_design %>
+      <%= render "homepage/new/body" %>
+    <% else %>
+      <%= render "homepage/services_and_information" %>
+      <%= render "homepage/promotion-slots" %>
+      <%= render "homepage/government_activity" %>
+      <%= render "homepage/more_on_govuk" %>
+    <% end %>
   </div>
 </main>
diff --git a/app/views/homepage/new/_body.html.erb b/app/views/homepage/new/_body.html.erb
new file mode 100644
index 0000000000..7e70025a80
--- /dev/null
+++ b/app/views/homepage/new/_body.html.erb
@@ -0,0 +1,10 @@
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-full govuk-grid-column-two-thirds-from-desktop">
+    <%= render "homepage/services_and_information" %>
+  </div>
+  <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
+    <%= render "homepage/new/promotion-slots" %>
+  </div>
+</div>
+<%= render "homepage/new/government_activity" %>
+<%= render "homepage/more_on_govuk" %>
\ No newline at end of file
diff --git a/app/views/homepage/new/_government_activity.html.erb b/app/views/homepage/new/_government_activity.html.erb
new file mode 100644
index 0000000000..0c6fd7da64
--- /dev/null
+++ b/app/views/homepage/new/_government_activity.html.erb
@@ -0,0 +1,111 @@
+<section class="homepage-section homepage-section__government-activity">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-full govuk-grid-column-two-thirds-from-desktop" data-module="gem-track-click ga4-link-tracker">
+      <div class="homepage-section__container">
+        <div class="homepage-section__heading">
+          <div class="homepage-section__heading-wrapper">
+            <%= render "govuk_publishing_components/components/heading", {
+              font_size: "m",
+              text: t("homepage.index.government_activity"),
+              data_attributes: {
+                ga4_scroll_marker: true,
+              },
+            } %>
+          </div>
+
+          <%= render "govuk_publishing_components/components/lead_paragraph", {
+            text: t("homepage.index.government_activity_description"),
+            margin_bottom: 0
+          } %>
+        </div>
+
+        <ul class="homepage-services-and-info__list">
+          <% t("homepage.government_activity").each_with_index do | item, index | %>
+            <%= render partial: "homepage/chevron_card", locals: {
+              description: item[:description],
+              link: item[:link],
+              title: item[:title],
+              track_action: "governmentactivityLink",
+              index_values: {
+                index_section: 3,
+                index_link: index + 1,
+                index_section_count: 6,
+              },
+              index_total: t("homepage.government_activity").length,
+              section: t("homepage.index.government_activity", locale: :en)
+            } %>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+      <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
+        <div class="homepage-section__heading">
+          <%= render "govuk_publishing_components/components/heading", {
+            font_size: "m",
+            text: t("homepage.index.departments_and_organisations"),
+            data_attributes: {
+              ga4_scroll_marker: true,
+            },
+          } %>
+        </div>
+
+        <%#
+          The "big number" component links below are hardcoded separately (i.e. not in a loop in this instance) and therefore their 'index' properties are also hardcoded. If a new "big number" component is added or removed, this will need to be reflected in the 'index_link' and 'index_total' properties to ensure that they remain accurate for tracking/analytics purposes.
+        %>     
+        <div class="homepage-section__depts" data-module="gem-track-click ga4-link-tracker">
+          <%= render "govuk_publishing_components/components/big_number", {
+            number: t("homepage.index.ministerial_departments_count"),
+            label: t("homepage.index.ministerial_departments"),
+            href: "/government/organisations#ministerial_departments",
+            margin_bottom: 6,
+            data_attributes: {
+              "track-category": "homepageClicked",
+              "track-action": "departmentsLink",
+              "track-label": "/government/organisations#ministerial_departments",
+              "track-dimension": "#{t("homepage.index.ministerial_departments_count")} #{t("homepage.index.ministerial_departments")}",
+              "track-dimension-index": 29,
+              "track-value": 1,
+              "ga4_link": {
+                "event_name": "navigation",
+                "type": "homepage",
+                "index": {
+                  "index_section": 4,
+                  "index_link": 1,
+                  "index_section_count": 6,
+                },
+                "index_total": 2,
+                "section": t("homepage.index.departments_and_organisations", locale: :en),
+                "text": "#{t("homepage.index.ministerial_departments_count")} #{t("homepage.index.ministerial_departments", locale: :en)}"
+              }
+            },
+          } %>
+          <%= render "govuk_publishing_components/components/big_number", {
+            number: t("homepage.index.other_agencies_count"),
+            label: t("homepage.index.other_agencies"),
+            href: "/government/organisations#agencies_and_other_public_bodies",
+            margin_bottom: 6,
+            data_attributes: {
+              "track-category": "homepageClicked",
+              "track-action": "departmentsLink",
+              "track-label": "/government/organisations#agencies_and_other_public_bodies",
+              "track-dimension": "#{t("homepage.index.other_agencies_count")} #{t("homepage.index.other_agencies")}",
+              "track-dimension-index": 29,
+              "track-value": 1,
+              "ga4_link": {
+                "event_name": "navigation",
+                "type": "homepage",
+                "index": {
+                  "index_section": 4,
+                  "index_link": 2,
+                  "index_section_count": 6,
+                },
+                "index_total": 2,
+                "section": t("homepage.index.departments_and_organisations", locale: :en),
+                "text": "#{t("homepage.index.other_agencies_count")} #{t("homepage.index.other_agencies", locale: :en)}"
+              }
+            },
+          } %>
+        </div>        
+      </div>    
+  </div>
+</section>
diff --git a/app/views/homepage/new/_links_and_search.html.erb b/app/views/homepage/new/_links_and_search.html.erb
new file mode 100644
index 0000000000..3b04ac7f74
--- /dev/null
+++ b/app/views/homepage/new/_links_and_search.html.erb
@@ -0,0 +1,82 @@
+<section class="homepage-section homepage-section--links-and-search">
+  <div class="govuk-width-container">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds homepage-search">
+        <form
+          action="/search"
+          method="get"
+          role="search"
+          data-module="ga4-form-tracker"
+          data-ga4-form-include-text
+          data-ga4-form='{"event_name": "search", "type": "homepage", "url": "/search/all", "section": "Search", "action": "search"}'
+        >
+          <%= render "govuk_publishing_components/components/search", {
+            button_text: t("homepage.index.search_button"),
+            inline_label: false,
+            label_margin_bottom: 4,
+            label_size: "m",
+            label_text: t("homepage.index.search_label"),
+            margin_bottom: 0,
+            wrap_label_in_a_heading: true,
+            size: "large-mobile",
+            data_attributes: {
+              track_category: "homepageClicked",
+              track_action: "searchSubmitted",
+              track_label: "/search/all",
+              track_dimension_index: 29,
+              track_dimension: "Search GOV.UK",
+              ga4_scroll_marker: true,
+            },
+          } %>
+        </form>
+      </div>
+    </div>
+    <div class="homepage-popular">
+      <%= render "govuk_publishing_components/components/heading", {
+        font_size: "m",
+        margin_bottom: 4,
+        text: t("homepage.index.popular_links_heading"),
+        data_attributes: {
+          ga4_scroll_marker: true,
+        },
+      } %>
+      <ul class="homepage-most-viewed-list " data-module="gem-track-click ga4-link-tracker">
+        <% t("homepage.index.popular_links").each_with_index do | item, index | %>
+
+          <% if index % 3 == 0 %>
+            <div class="govuk-grid-row">
+          <% end %>
+
+          <li class="govuk-link govuk-grid-column-one-third homepage-most-viewed-list__item">
+            <%= link_to(item[:text], item[:href], {
+              class: "govuk-link homepage-most-viewed-list__item-link",
+              data: {
+                track_category: "homepageClicked",
+                track_action: "popularLink",
+                track_label: item[:href],
+                track_value: 1,
+                track_dimension_index: 29,
+                track_dimension: item[:text],
+                ga4_link: {
+                  'event_name': 'navigation',
+                  'type': 'homepage',
+                  'index': {
+                    'index_section': 1,
+                    'index_link': index + 1,
+                    'index_section_count': 6,
+                  },
+                  'index_total': t("homepage.index.popular_links").length,
+                  'section': "#{t("homepage.index.popular_links_heading", locale: :en)}"
+                }
+              }
+            }) %>
+          </li>
+
+          <% if index % 3 == 2 %>
+            </div>
+          <% end %>
+        <% end %>
+      </ul>
+    </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/app/views/homepage/new/_promotion-slots.html.erb b/app/views/homepage/new/_promotion-slots.html.erb
new file mode 100644
index 0000000000..6b61c50e8d
--- /dev/null
+++ b/app/views/homepage/new/_promotion-slots.html.erb
@@ -0,0 +1,49 @@
+<%#
+  Before updating a promotion slot please read the documentation.
+  See: https://docs.publishing.service.gov.uk/repos/frontend/update-homepage-promotion-slots.html
+%>
+
+<section class="homepage-section homepage-section--promotion-slots">
+    <%= render "govuk_publishing_components/components/heading", {
+      text: t("homepage.index.featured"),
+      font_size: "m",
+      margin_bottom: 6,
+      data_attributes: {
+        ga4_scroll_marker: true,
+      },
+    } %>
+
+    <% t("homepage.index.promotion_slots").each_with_index do | item, index | %>
+        <%= render "govuk_publishing_components/components/image_card", {
+          href: item[:href],
+          href_data_attributes: {
+            track_category: "homepageClicked",
+            track_action: "promoLink",
+            track_label: item[:href],
+            track_value: "1",
+            track_dimension_index: "29",
+            track_dimension: item[:title],
+            ga4_link: {
+              event_name: 'navigation',
+              type: 'homepage',
+              index: {
+                index_section: 5,
+                index_link: index + 1,
+                index_section_count: 6,
+              },
+              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],
+          description: item[:text],
+          font_size: "s",
+          sizes: "(max-width: 640px) 100vw, (max-width: 1020px) 33vw, 300px",
+          srcset: item.fetch(:srcset, {}).stringify_keys.transform_keys { |k| image_path(k) }.presence
+        } %>
+    <% end %>
+</section>