PNI Consumer Creep-O-Meter Page Hero #11146
Conversation
mmmavis
force-pushed
the
11094-pni-hero
branch
from
fb0958c to
6ff6523
Compare
mmmavis
force-pushed
the
11094-pni-hero
branch
from
849e4d1 to
048ef6d
Compare
mmmavis
force-pushed
the
11094-pni-hero
branch
from
ecc3bff to
ead5fcf
Compare
mmmavis
force-pushed
the
11094-pni-hero
branch
from
ead5fcf to
f4dac50
Compare
mmmavis
force-pushed
the
11094-pni-hero
branch
from
f4dac50 to
52f0cbc
Compare
|
Hi @tessheinricks , thanks for reviewing. I've made the styling tweaks and the page is ready for review again! |
There was a problem hiding this comment.
Thank you for those revisions Mavis!
I am wondering if there is any way that the asterisk placement on desktop can more closely reflect the figma file (with the illustration bleeding past where the screen ends on the right), which will give a bit more space to the headline?
Please let me know if you have any questions, or if this would present challenges timeline or development wise. Thanks again!
Currently, it's bleeding outside of the "content container": 
If we want to place the illustration further to the right so it bleeds past the viewport I can def do it. However, this means there will be huge gap on larger screen sizes. e.g., 
Let me know which you prefer and I'll adjust the code accordingly. Thanks! |
|
@mmmavis okay amazing thank you for clarifying! I think leaving it how it is now (bleeding outside of the Content Container) is a better solution than the gap! If possible, it might be helpful to extend the horizontal spacing gap between the headline and the asterisk to 40 but again, if there is not enough time, no worries! |
Hi @tessheinricks , we'll have to address this at a later stage. I just tested it out with 40px gap but the illustration would become too cut off to be recognized (in my opinion). We'll probably need to adjust both the gap size and illustration dimension so the text and image are spaced out nicely. cutoff-asterisk.mov |
|
@mmmavis Agreed! Thank you for taking the time to test! We can keep it at the 16px [D_Horizontal-Gap_Primary] variable value for now. 👍 |
There was a problem hiding this comment.
Development looks great!
Design team is keeping additional refinement notes in a separate word doc for final adjustments.
| @@ -1,30 +1,64 @@ | |||
| # Generated by Django 3.2.21 on 2023-09-22 17:40 | |||
* Created a new page type for PNI Privacy Index page (#11107) * Create a new page type for PNI annual consumer creep-o-meter * fix migration conflict * PNI Consumer Creep-O-Meter Page Hero (#11146) * got general section structure in * implemented hero section * PNI CC Page - Sub Nav + 3 middle sections (#11156) * implemented the "sub nav", "big picture trends", "best & worst products" and "by the numbers" sections * PNI CC Page - Quiz section (part 1) (#11211) * Quiz Section Part 1 work. Includes the product selection screen and the result screen only. * PNI CC Page - Outro section + Newsletter box at the bottom of Quiz section (#11219) * Modified the existing PNI newsletter box setup so it can be used for difference scenarios & built Outro section & added newsletter box to Quiz section * fix migration conflicts * linting * updated all face existing SVGs * PNI CC Page - remaining work for Quiz Part 2 (#11224) * Added the newsletter signup prompt and thank you messages to quiz flow * PNI CC Page - Animated Eyes (#11241) * moved hero section to its own fragment file * animated creepy eyes * 11213 quiz share buttons (#11239) * Share buttons on Quiz section * PNI CC Page - MVP version of 'Stay in Control' section (#11245) * Added MVP version of 'Stay in Control' section * PNI CC Page - fixes and improvements (#11242) * fixes and improvements * [PNI CC Page] More fixes (#11248) * optimized face-5.svg * hero creepy face position adjectment --------- Co-authored-by: Daniel Miranda <[email protected]>
This is part of the PNI Annual Consumer Creep-O-Meter page work.
/privacynotincluded/articles/annual-consumer-creep-o-meter/Note that the animated eyes effect will be added in another ticket.
I also noticed there's some weird alignment issue with the existing PNI nav. Since it's outside of the scope of the consumer creep-o-meter page, I didn't fix it in this PR.