WD-16600 Rebrand embedding/landing page

[muhammad-ali-pk]

Done

• Rebranded /embedding/landing page.

QA

• Open this demo in your web browser.
  • Make sure to test on mobile, tablet and desktop.
• Make sure the page matches the Figma design and Copydoc

Issue / Card

Fixes #WD-16600

[webteam-app]

Demo

Jenkins

demos.haus

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Please upload report for BASE (feature-rebrand-embedding@5806f94). Learn more about missing BASE report.

Additional details and impacted files

@@                     Coverage Diff                      @@
##             feature-rebrand-embedding   #14620   +/-   ##
============================================================
  Coverage                             ?   69.64%           
============================================================
  Files                                ?      120           
  Lines                                ?     3419           
  Branches                             ?     1174           
============================================================
  Hits                                 ?     2381           
  Misses                               ?     1013           
  Partials                             ?       25           

[mattea-turic]

Thanks @muhammad-ali-pk ! Looks great, no comments from me on the visual side.

I just had a question about loading times, in that the images seem to take a little longer to load than usual. Should I maybe reupload at a smaller file size – or are all the assets optimised well enough by the assets manager, and it's maybe just my wifi today :p

Edit: Forgot to check smaller screens:

• I noticed title & paragraph text in the hero is a little tight for these
• And would it be possible to add wrapping to allow for the entire link to stack underneath the button in the "Embedding support" section? Right now, the sentence is splitting:

[eliman11]

Looks perfect, thank you @muhammad-ali-pk! No comments :)

[muhammad-ali-pk]

Thanks @mattea-turic!

1. Images are loading fine on my end. Though, hero image is a little big in size, but still, loads fine. It's your call if you want to re-upload smaller assets.
2. Yes you are right. The H1 and paragraph are very closely stacked. This was an issue in the Vanilla itself. I have raised a PR there, so it's gonna be fixed whenever that is approved.
3. Fixed the wrapping.

[petesfrench]

As a fly-by, can you add the is-required class to the form fields that have the required attribute. From the doc it also looks like 'phone number' shouldn't be required

[petesfrench]

After submitting the form I can't see it being received in marketo. This is likely caused by two of the form field being append to the payload: canonicalProducts and about-use-case.
It looks like you need to add .js-remove-radio-names to the radio fieldset, see dynamic-forms.js to ensure the name attribute if stripped before submission and remove the name attribute from the textarea

[petesfrench]

Need a small change on the form to make it work