web: rebrand onboarding

[onvisions]

Acceptance criteria:

• /home screen looks according to the attached Figma link
• "from Chrome Web Store" button opens Superhero Wallet extension page on Chrome Web Store
• "from Firefox Add-ons" button opens Superhero Wallet extension page on Firefox Add-ons
• "Chat with Wallet Bot" button starts a conversation with the Wallet Bot
• Bottom section (Complete these to get the most out of Superhero):
  • "Download Superhero" is text is changed to "Download Superhero Chat app"
  • The modal which opens when "Download apps" button is clicked does not display "Download Superhero Desktop" text and button

Figma reference link: https://www.figma.com/file/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?type=design&node-id=30337-177460&mode=design&t=CxNFquWOTkWrR7HR-0

Figma visual reference:

[onvisions]

@michele-franchi As discussed with @ifaouibadi I created mockups for responsive design of the onboarding page. I am also suggesting a minor visual change in the banner compared to previous version:

• gradient background (see below);
• size of download buttons is even now (min-width: 256px).

Responsive design (640px-1920px):

Dark mode templates:

Light mode template:

Figma reference link: https://www.figma.com/file/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?type=design&node-id=30337-177460&mode=design&t=Q85RI7dxgDrMLcF9-0

[Liubov-crypto]

In general LGTM, but I have a question: is it ok, that buttons are placed one under one abut not in the row like in Figma design?

@onvisions could you confirm it please?

[onvisions]

It has discrepancies with the design optimization for different resolutions suggested.

The design provided covers resolutions with screen width in the range between 640px - 1920px. The optimisation for lower resolutions with less space available is doable with CSS only (although it may require a few lines of CSS rules modified for the specific break point). The screenshot you posted belongs to the case of 750px width. The design is supposed to look like this:

Even if not exactly pixel perfect we should at least pay attention to:

• the image on the right side is smashed (disproportionally scaled);
• the image is not the right size (at this break point the layout changes because we lack space. It can be done with CSS only but requires some rules specific for this resolution);
• font-size, line-height, margins between different paragraphs and text blocks;
• button size and styling (very different from design provided)...

Figma Reference: https://www.figma.com/file/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?type=design&node-id=30475-184191&mode=design&t=tM6Zr7XhZxq5o7Sa-0

[Liubov-crypto]

@ifaouibadi please check @onvisions comments.

[onvisions]

@ifaouibadi @paolomolo I don't know if we have to invest much time into fixing all discrepancies and being pixel perfect because some of the branding may actually change as far as I know. However I would fix: the smashed image on the right, the button sizes and the text styling (font-size, line-height, new lines etc.), the margins between elements (between the buttons, text blocks on the left).