Enhancing Footer Support Block

[jeffgolenski]

Per a p2 conversation, we'll be fixing up the design of the footer support block and tidying some things up.

Before:

After:
Paid

Language for ease of use:

Need help?
Utilize your priority-speed Jetpack support whenever you need it thanks to your paid plan.
[btn] Ask a question [btn] Search our support site

Unpaid

After is styled to the most up-to-date Calypso styles. Reference components from the top-right HE block here: https://wordpress.com/plans/my-plan/jetpack.com
Settings as can be seen here: https://wordpress.com/settings/general/jetpack.com
Language for ease of use:

Need help?
Utilize your free Jetpack support whenever you need.
[btn] Ask a question [btn] Search our support site
Need a fast response? Upgrade to a paid plan to get priority support.

---

To do:

• Add button to contact support directly: https://jetpack.com/contact-support/
• Add button to search support: https://jetpack.com/support/
• Add three names (chosen name and not necessarily first name) and gravatars for HE's (not clickable
• Distinguish between users with plans and those without to generate correct version of the support block

_Related P2: p6TEKc-11E-p2
Note that the Settings in Calypso and Jetpack changed significantly from the start of that conversation and have influenced the design proposed here.

[eliorivero]

@jeherve why is this a high priority?

[jeherve]

@eliorivero I applied the priority based on the discussion at p6TEKc-11E-p2, but feel free to update if necessary!

[ashleighaxios]

Comps updated to reflected latest Calypso and settings styles with latest language also added as quotes above. Reach out with any questions.

[rickybanister]

It was pointed out on a call today about the banners that we could use the banner component for the support footer as well. Something more like this:

[ashleighaxios]

Updated Unpaid comp with banner component in place.

[eliorivero]

Without some text making even a small reference to the avatars, it's not clear who that happy people is. In any case this is more copywriting ground so it can be tweaked later.
How this will look in small screen sizes?

[ashleighaxios]

@eliorivero Yeah, language was developed when the demand was for no images of people and then that was turned on its head. Here's revised content (not changing in comps right now).

Paid:

We're here to help.
Utilize your priority-speed Jetpack support whenever you need it thanks to your paid plan.
[btn] Ask a question [btn] Search our support site

Unpaid:

We're here to help.
Utilize your free Jetpack support whenever you need.
[btn] Ask a question [btn] Search our support site
Need a fast response? Upgrade for priority support

And rough of the mobile comp (drop all but one HE reference there; refer to the component from the top-right HE block here: https://wordpress.com/plans/my-plan/jetpack.com):

[eliorivero]

Thanks, the updated text does give the proper context 👍

[eliorivero]

Closing in favor of #6720