Waitlist CTA for users in non-premium countries #2106
Conversation
| margin-top: -40px; | ||
| width: 180px; | ||
| height: 30px; | ||
| background-image: url("../../../../static/images/newlanding/ribbon-plan.svg"); |
There was a problem hiding this comment.
Unfortunately we haven't been able to merge #1998 yet, so you couldn't deduce this from looking at other background-images, but... We only used the static directory for backwards compatibility while migrating to React.
Now that we've migrated, you can put images next to where they are used, so you don't need to move up all those directories, which is a pattern Maxx and Luke asked us to use. See e.g. https://github.com/mozilla/fx-private-relay/pull/1998/files#diff-8291c47a2bca23664c27f5f184c26351f367bbba1f83f05b528cd7be53ffc09eR41
| @include text-body-xs; | ||
| position: absolute; | ||
| color: white; | ||
| font-weight: 700; |
There was a problem hiding this comment.
I thought we were using 500? :)
There was a problem hiding this comment.
Oops, guess I have to take my own review medicine lol
There was a problem hiding this comment.
Actually, I checked the Figma spec and it does set to 700. Perhaps we should store font weights into a variable like font-weight-bold or font-weight-extra-bold so its standard across the board?
There was a problem hiding this comment.
Hmm, not sure - the Figma said 700 in my PR where you called that out as well, then when I asked Eduardo, he changed it to 500. So I don't have a strong preference here, but if Eduardo indeed wants another level of boldness, those variables would make sense to me.
| @include text-body-xs; | ||
| position: absolute; | ||
| color: white; | ||
| font-weight: 700; |
There was a problem hiding this comment.
Hmm, not sure - the Figma said 700 in my PR where you called that out as well, then when I asked Eduardo, he changed it to 500. So I don't have a strong preference here, but if Eduardo indeed wants another level of boldness, those variables would make sense to me.
New feature description
When a user is from a non-premium country, the pricing panels on the landing page will show different UI: a premium waitlist CTA and encourage them to sign up for a free account in the meantime.
Note: Some minor discrepancies between the design spec and the UI, but confirmed with Eduardo that they're a non-issue.
Screenshot (if applicable)
Desktop view:
Mobile view:
How to test
Go to the landing page and check that the original pricing plans section has not changed.
Change your browser language to a non-premium country such as Romanian (Română) and check that the pricing section displays the updated UI as shown above.
Checklist
/static/scss/libs/protocol/css/includes/tokens/dist/index.scss).