A4A: Implement Hosting page v3 header.

[jkguidaven]

This PR implements the new Hosting Page v3 header.

Screen.Recording.2024-12-09.at.4.29.00.PM.mov

Closes https://github.com/Automattic/automattic-for-agencies-dev/issues/1545

Proposed Changes

• Implement MigrationOfferV3 banner based on the new design.
• Override certain layout styles to enable scrolling in the main layout container. We also implement an onScroll event listener to connect our expanding and compacting header with the scroll position.
• Introduce the new header featuring key animations when switching to compact mode. In this mode, the title and migration offer are hidden at specific scroll positions.

Why are these changes being made?

• This is part of the In-product hosting page v3 project.

Testing Instructions

• Use the A4A live link and go to the /marketplace/hosting page.
• Confirm you see the new header and scrolling down works.
• Test that the scrolling works. (Note that there are a few responsiveness issues, but this will be addressed in a separate PR).

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-127127

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-127127&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-127127&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~1104 bytes added 📈 [gzipped])

name                                parsed_size           gzip_size
a8c-for-agencies-marketplace            +5292 B  (+0.6%)    +1104 B  (+0.4%)
staging-site                              +22 B  (+0.0%)      +14 B  (+0.0%)
sites-dashboard                           +22 B  (+0.0%)      +14 B  (+0.0%)
site-tools                                +22 B  (+0.0%)      +14 B  (+0.0%)
site-settings                             +22 B  (+0.0%)      +14 B  (+0.0%)
site-performance                          +22 B  (+0.0%)      +14 B  (+0.0%)
site-overview                             +22 B  (+0.0%)      +14 B  (+0.0%)
site-monitoring                           +22 B  (+0.0%)      +14 B  (+0.0%)
site-marketing                            +22 B  (+0.0%)      +14 B  (+0.0%)
site-logs                                 +22 B  (+0.0%)      +14 B  (+0.0%)
plugins                                   +22 B  (+0.0%)      +14 B  (+0.0%)
jetpack-cloud-plugin-management           +22 B  (+0.0%)      +14 B  (+0.0%)
hosting-features                          +22 B  (+0.0%)      +14 B  (+0.0%)
hosting                                   +22 B  (+0.0%)      +14 B  (+0.0%)
github-deployments                        +22 B  (+0.0%)      +14 B  (+0.0%)
domains                                   +22 B  (+0.0%)      +14 B  (+0.0%)
a8c-for-agencies-team                     +22 B  (+0.0%)      +14 B  (+0.0%)
a8c-for-agencies-sites                    +22 B  (+0.0%)      +14 B  (+0.0%)
a8c-for-agencies-settings                 +22 B  (+0.0%)      +14 B  (+0.0%)
a8c-for-agencies-referrals                +22 B  (+0.0%)      +14 B  (+0.0%)
a8c-for-agencies-purchases                +22 B  (+0.0%)      +14 B  (+0.0%)
a8c-for-agencies-plugins                  +22 B  (+0.0%)      +14 B  (+0.0%)
a8c-for-agencies-partner-directory        +22 B  (+0.0%)      +14 B  (+0.0%)
a8c-for-agencies-overview                 +22 B  (+0.0%)      +14 B  (+0.0%)
a8c-for-agencies-migrations               +22 B  (+0.0%)      +14 B  (+0.0%)
a8c-for-agencies-landing                  +22 B  (+0.0%)      +14 B  (+0.0%)
a8c-for-agencies-client                   +22 B  (+0.0%)      +14 B  (+0.0%)
a8c-for-agencies-agency-tier              +22 B  (+0.0%)      +14 B  (+0.0%)
a8c-for-agencies                          +22 B  (+0.0%)      +14 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/a4a/hosting-page-v3-header on your sandbox.

[madebynoam]

Looking good, @jkguidaven! Just adding a few notes:
Can we change the transition on hosting-v3-hero-section to .35s as .2s is a bit too fast to perceive it.

As I scroll down, I see z-index issues (in Arc (Chrome)):

Also noticing the tab color is different on small breakpoints:

Finally, is there a way to bring the content back in once the user scrolls up (similar to the prototype)?

[jeffgolenski]

Thanks, James! Just tested and looks good. Thanks for working with Noam to make that scroll behavior more graceful. Just two items I noticed with the header:

1. Migration banner: If I click anywhere on the title it expands the banner (expected). But if I click the chevron, nothing happens.
2. hosting tabs: Currently there isn't a border radius on the top left or top right. Can we make the tab corners match the radii of the limited time offer banner?

[jkguidaven]

@madebynoam @jeffgolenski thank you both for catching bugs and areas to improve.

Can we change the transition on hosting-v3-hero-section to .35s as .2s is a bit too fast to perceive it.

Done ✅

Also noticing the tab color is different on small breakpoints:

Fixed ✅

Finally, is there a way to bring the content back in once the user scrolls up (similar to the prototype)?

Fixed ✅

Migration banner: If I click anywhere on the title it expands the banner (expected). But if I click the chevron, nothing happens.
hosting tabs: Currently there isn't a border radius on the top left or top right. Can we make the tab corners match the radii of the limited time offer banner?

Both are fixed ✅

[jkguidaven]

As I scroll down, I see z-index issues (in Arc (Chrome)):

I plan to address the overlapping issues in a separate PR where I handle the Plan selector component.

[cleacos]

The code looks good. I can see the header and the scroll works well, except some overlapping elements and a scroll-down effect that seems the tab is not scrolling synchronous and smoothly.

[cleacos]

LGTM! The current issues will be fixed in a follow-up PR.

[jkguidaven]

The code looks good. I can see the header and the scroll works well, except some overlapping elements and a scroll-down effect that seems the tab is not scrolling synchronous and smoothly.

Thanks for the review 🙇

Do you have some screencaps with the scrolling issue? I'd like to confirm if this is a performance issue related.

[jkguidaven]

The code looks good. I can see the header and the scroll works well, except some overlapping elements and a scroll-down effect that seems the tab is not scrolling synchronous and smoothly.

Thanks for the review 🙇

Do you have some screencaps with the scrolling issue? I'd like to confirm if this is a performance issue related.

@cleacos Ohh nvm saw what you mean.. @madebynoam I think the .35s animation kinda makes this more obvious. Should we revert to .2s?

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17057530

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Hi @jkguidaven, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include all of the following strings:

• {{b}}Limited time offer:{{/b}} Migrate your sites to Pressable or WordPress.com and earn up to $10,000!
• {{b}}WP Engine customers:{{/b}} You will receive $100 per site, up to $10,000. You will also get credited for the remaining time on your WP Engine contract, so you won't have to pay twice.
• {{b}}For any other host:{{/b}} You will receive $100 per site migrated up to a maximum of $3,000.
• See full terms ↗
• * Offer valid until the end of 2024
• High Performance, Highly-Secure{{br/}}Managed WordPress Hosting for Agencies
• Refer a WordPress.com site to your client
• Purchase sites individually or in bulk, as you need them
• Refer a variety of plans, or single high-resource sites to your clients
• Choose from a variety of plans, or purchase single high-resource sites as add-ons
• Deliver unmatched performance with the highest security standards on our enterprise platform

Thank you in advance!