feat(support-landing): add Short Cards and Content Text Body blocks

[proeung]

Issue

Fixes https://jira.sdlc.merative.com/browse/MERATIVE-893 and https://jira.sdlc.merative.com/browse/MERATIVE-894

Description

• This PR adds blocks and styles needed for the new design of the Support Hub Landing as well as Product/Brand Support Landing.

New

• Short Cards block - used for creating CTA cards for showing brand/product logos or support with graphic links.
• Content Text Body block - 2/3 body that displays texts, links, lists, etc.

Design Specs

• Figma Link - https://www.figma.com/file/PgG604uUME84O2wSdLcln2/Support-Experience?type=design&node-id=457%3A19481&mode=design&t=M3Aau9H1Kft66ENo-1

Test URLs

Support Hub Landing

• Before (Changes from main): https://main--merative2--hlxsites.hlx.page/support
• After (Changes from this PR): https://feat-card-cta-893--merative2--proeung.hlx.page/support

Product Support Landing

• Before (Changes from main): https://main--merative2--hlxsites.hlx.page/support/curam
• After (Changes from this PR): https://feat-card-cta-893--merative2--proeung.hlx.page/support/curam

Product Support Landing

• Before (Changes from main): https://main--merative2--hlxsites.hlx.page/support/micromedex
• After (Changes from this PR): https://feat-card-cta-893--merative2--proeung.hlx.page/support/micromedex

Testing Instruction

• Visit the preview links above and ensure that the front-end display matches with the design.

[aem-code-sync[bot]]

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed. In case there are problems, just click the checkbox below to rerun the respective action.

• [ ] Re-run PSI Checks

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/support
/support/curam

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/support
/support/curam

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/support
/support/curam

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/support
/support/curam

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/support
/support/curam

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/support
/support/curam
/support/micromedex

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/support
/support/curam
/support/micromedex

[proeung]

@sachinmesh @sharathmrft See my response to your feedback below.

On desktop, vertical padding between cards should be 48px

This is a mistake and one that @anabarcelona has already fixed in Figma. The gap is 24px for both variations (Short Cards with Logos and Graphics)

On product support, Caret issue in tab and mobile.

Fixed

Issue when resizing from mobile to tab to desktop. Could be cache memory issue.

Not able to replicate this issue. Sounds like a memory issue within your computer and not so much from the site.

Alignment issue of cards in Tab/mobile. They should be inline with the heading.

Fixed

Padding issues on right side on tablet and mobile in below the cards

Fixed

1.'Other products' icon is deferent than the design

Updated the icon

2.Short cards all are not displaying in one shot in tab view these are horizontally placed

This is part of the design specs where the "Short Cards with Graphics" turns into horizontal scroll on tablet and mobile breakpoints.

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/support
/support/curam
/support/micromedex

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/support
/support/curam
/support/micromedex