New styles: F3 landing page

[maureenlholland]

This is where we'll tackle styling/behaviour that was out of scope for the initial launch.

DESIGN/COPY notes (Mozilla only): https://docs.google.com/spreadsheets/d/17SH9BTWKnYtmU1ukek2fEKLqMFr4kc1ctDSeyEtV6sg/edit#gid=0

Figma Current WIP version (Mozilla only): https://www.figma.com/file/zEWcXI6tFGtGcEvdwBWYz0/Firefox-Families?node-id=100%3A1597

Workflow: keep in separate branches, we will combine them on a demo branch for design approval before code review and merge

P1

• [x] Add copy-to-clipboard functionality on section anchors (with title to notify user of behaviour)
• [x] Consolidate Public wifi white boxes into one box
• [ ] pop up window appearance (including tech talk speech bubble in hero, multiple overlapping window popups in mental health section) @maureenlholland (example)
• [ ] private browser window bg changes from light to dark on scroll (private mask in yellow circle appears when window changes to dark bg) @nathan-barrett
• [ ] On "accept all dad jokes" click, add emoji eye roll before fade out
• [ ] radiating heart animation (likes increase needs live text, can try F3 mono font) @craigcook

P2

• [ ] icons pop up along with checkmarks in agreement image @maureenlholland
• [x] fixed attachment for grid backgrounds @craigcook
• [ ] Animate copy on parental pro tip to gently slide in from opposite sides @nathan-barrett

[reemhamz]

Do we know how we want the eyeroll emoji to come in + fade out? Should it be where the button was/remove all of the text in the banner then show emoji? How big do we want it, etc...

[maureenlholland]

Everything approved and merged! Closing as completed