Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Woo Installer: Landing page redesign #57419

Closed
6 tasks done
lsl opened this issue Oct 28, 2021 · 2 comments
Closed
6 tasks done

Woo Installer: Landing page redesign #57419

lsl opened this issue Oct 28, 2021 · 2 comments
Assignees

Comments

@lsl
Copy link
Contributor

lsl commented Oct 28, 2021

Redesign the /woocommerce-installation/ landing page based on the design in figma r6eTqDpL2GGk96hcPLhsBb-fi-0%3A1

I believe the images were placeholders so please confirm copy / images are good to use before starting (cc @JanaMW27)

Currently only business sites on atomic can load the existing page. The existing page renders a confirmation screen and then takes you through a plugin installation process. Eventually this will be completely replaced by the new onboarding flow leaving only your new landing page in its place.

The navigation menu is controlled by Jetpack and wpcomsh, it is currently only shown to atomic sites using wpcomsh. You can enable displaying the menu navigation item by adding the 'woop' flag in blogrc or using wpsh to add the site sticker.

For now we just need the landing page redesigned for these business+atomic site users, we will later swap out the installation step with the new onboarding flow under /start/*

Implementation suggestion: Build this as a standalone new component under client/my-sites/woocommerce/some-new-landing-page-thing as we should be able to remove everything else that is currently in there once the new onboarding flow is completed.

For now you should be able to import your new landing page component into this render function and pass in startSetup as the CTA handler.

  • Redesign the landing page.
  • Hide/Show Navigation Button when scrolling past the CTA Button.
  • Create WaveImageMasonry component (right-side component with web images).
  • Design Titles and CTA Button.
  • Make the new landing page responsive.
  • Add back <SetupNotices />

Screenshot from figma (see there for more variations, ignore the premium plan upgrade stuff for now)
Screenshot(45)

@lsl lsl added the Woop WooCommerce on Plans Pod label Oct 28, 2021
@lsl lsl changed the title Woo Installer: Create landing page Woo Installer: landing page step Oct 28, 2021
@lsl lsl changed the title Woo Installer: landing page step Woo Installer: Landing page step Oct 28, 2021
@lsl lsl changed the title Woo Installer: Landing page step Woo Installer: Landing page step - base component Oct 28, 2021
@lsl lsl removed the Woop WooCommerce on Plans Pod label Oct 28, 2021
@lsl lsl changed the title Woo Installer: Landing page step - base component Woo Installer: Landing page replacement Nov 8, 2021
@lsl lsl changed the title Woo Installer: Landing page replacement Woo Installer: Landing page redesign Nov 8, 2021
@lsl lsl mentioned this issue Nov 8, 2021
4 tasks
@lsl
Copy link
Contributor Author

lsl commented Nov 8, 2021

Use top part only for now

@allilevine
Copy link
Member

Closing via #58179 but we may want to add additional content in the future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Archived in project
Development

No branches or pull requests

3 participants