[MWPW-160629] - Updated Homepage UI

[snowiewdev]

Description

Updated Homepage layout based on updated design in Figma. Updates include:

• Updated Masonry block with hero-masonry variant locally to support new design in Figma specific to Blog repo
• Used Editorial Card with minor css updates for selected topic section
• Updated banner block to support new design in figma
• Added Article Grid block to support fetching latest articles or custom selected articles, and displaying custom banner in desired position
• Examples of possible block variants are listed in the Test Urls section below

Resolves

• Jira Ticket: https://jira.corp.adobe.com/browse/MWPW-160629
• Figma: https://www.figma.com/design/Dz1Y9DeroVATX3RG73S4vY/Adobe-Blog-(INT)?node-id=2965-18629&t=yjvvJBXgXAQ9ZHSQ-4

Test Urls

Home

• Before: https://main--blog--adobecom.hlx.page/en/drafts/snowie-testing/home/final-home-v2?martech=off
• After: https://redesign-home--blog--adobecom.hlx.page/en/drafts/snowie-testing/home/final-home-v2?martech=off

Blocks

• Hero Masonry

  • Users could update masonry background via putting background image or color in background field, or adding circle-gradient in section-metadata table with format like #hexcode1, #hexcode2
  • Before: https://main--blog--adobecom.hlx.page/en/drafts/snowie-testing/blocks/hero-masonry?martech=off
  • After: https://redesign-home--blog--adobecom.hlx.page/en/drafts/snowie-testing/blocks/hero-masonry?martech=off

• Banner

  • Before: https://main--blog--adobecom.hlx.page/en/drafts/snowie-testing/blocks/banner?martech=off
  • After: https://redesign-article--blog--adobecom.hlx.page/en/drafts/snowie-testing/blocks/banner?martech=off

• Article Grid

  • IntersectionObserver is added to only load the block when it's scroll into view to reduce initial load time so it should not affect page load time, as seen by green lighthouse score on homepage
  • Before: https://main--blog--adobecom.hlx.page/en/drafts/snowie-testing/home/article-grid?martech=off
  • After: https://redesign-home--blog--adobecom.hlx.page/en/drafts/snowie-testing/home/article-grid?martech=off

QA Tracking Sheet:

• https://docs.google.com/spreadsheets/d/175GuPMerA_eqMZuxwynazG4iBnjBwuh0bYIJXp1onFY/edit?gid=0#gid=0

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• d69d20c ✅ (latest)
• 3913b64 ✅
• 0dbcd72 ✅
• e8653b2 ✅
• e425583 ✅
• a166aa0 ✅
• 45b0d46 ✅
• 26e6838 ✅
• 5ac5249 ✅
• d91e136 ✅
• 8d881eb ✅
• c95926f ✅
• a7e33a5 ✅
• 43e1f17 ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/en/drafts/snowie-testing/blocks/hero-masonry?martech=off
🖥️	/en/drafts/snowie-testing/blocks/hero-masonry?martech=off
📱	/en/drafts/snowie-testing/home/article-grid?martech=off
🖥️	/en/drafts/snowie-testing/home/article-grid?martech=off
📱	/en/drafts/snowie-testing/home/final-home-v2?martech=off
🖥️	/en/drafts/snowie-testing/home/final-home-v2?martech=off