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 @@
-
-
-
- <%= render "govuk_publishing_components/components/heading", {
- font_size: "m",
- text: t("homepage.index.government_activity"),
- data_attributes: {
- ga4_scroll_marker: true,
- },
- } %>
-
-
- <%= render "govuk_publishing_components/components/lead_paragraph", {
- text: t("homepage.index.government_activity_description"),
- margin_bottom: 0
- } %>
-
-
-
- <% 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 %>
-
-
-
-
-
+
+
<%= 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,
},
} %>
- <%#
- 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.
- %>
-
- <%= 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
+ } %>
+
+
+
+ <% 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 %>
+
+
+
+
+
+ <%= render "govuk_publishing_components/components/heading", {
+ font_size: "m",
+ text: t("homepage.index.departments_and_organisations"),
+ data_attributes: {
+ ga4_scroll_marker: true,
+ },
+ } %>
+
+
+ <%#
+ 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.
+ %>
+
+ <%= 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)}"
+ }
+ },
+ } %>
+
+
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 @@
+
+
+ <%= render "homepage/services_and_information" %>
+
+
+ <%= render "homepage/promotion-slots" %>
+
+
+<%= 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
%>
-
+
+
<%= 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: {
@@ -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
} %>
+
<% end %>
+
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 %>
">
@@ -17,15 +24,13 @@
<%= render "homepage/links_and_search" %>
-
-
- <%= render "homepage/services_and_information" %>
-
-
- <%= render "homepage/promotion-slots" %>
-
-
- <%= 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 %>
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 @@
+
+
+ <%= render "homepage/services_and_information" %>
+
+
+ <%= render "homepage/new/promotion-slots" %>
+
+
+<%= 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 @@
+
+
+
+
+
+
+ <%= render "govuk_publishing_components/components/heading", {
+ font_size: "m",
+ text: t("homepage.index.government_activity"),
+ data_attributes: {
+ ga4_scroll_marker: true,
+ },
+ } %>
+
+
+ <%= render "govuk_publishing_components/components/lead_paragraph", {
+ text: t("homepage.index.government_activity_description"),
+ margin_bottom: 0
+ } %>
+
+
+
+ <% 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 %>
+
+
+
+
+
+ <%= render "govuk_publishing_components/components/heading", {
+ font_size: "m",
+ text: t("homepage.index.departments_and_organisations"),
+ data_attributes: {
+ ga4_scroll_marker: true,
+ },
+ } %>
+
+
+ <%#
+ 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.
+ %>
+
+ <%= 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)}"
+ }
+ },
+ } %>
+
+
+
+
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 @@
+
+
+
+
+ <%= 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,
+ },
+ } %>
+
+ <% t("homepage.index.popular_links").each_with_index do | item, index | %>
+
+ <% if index % 3 == 0 %>
+
+ <% end %>
+
+
+ <%= 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)}"
+ }
+ }
+ }) %>
+
+
+ <% if index % 3 == 2 %>
+
+ <% end %>
+ <% end %>
+
+
+
+
\ 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
+%>
+
+
+ <%= 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 %>
+