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 @@ + \ 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 %> +