VPN new Paywall Design and Value Props

[larreewong]

Description

We want to update the VPN paywall with the new design (single page vs swiping) + value props (along with the 10 devices support)

See final Figma design: https://www.figma.com/design/DSDkzFJ4NdBKLKkf3tDdnE/%F0%9F%94%90-VPN?node-id=3054-395&t=K9ujRYnjxvoKwFRT-1

Per convo with @timchilds,

• we'll update all these in one update. Thus, I'm closing this ticket
• @soner-yuksel: Let's not completely replace the whole paywall in case we need to roll back to the old paywall.

cc @timchilds @mattmcalister @macauleyberg @rmcfadden3 @anthonypkeane @AndyAnds265

Steps to reproduce

n/a

Actual result

n/a

Expected result

n/a

Reproduces how often

Easily reproduced

Brave version

n/a

Device/iOS version

n/a

Affected browser versions

• [ ] latest AppStore
• [ ] latest TestFlight
• [ ] previous TestFlight

Reproducibility

• [ ] with Brave Shields disabled
• [ ] in the latest version of mobile Safari

Miscellaneous information

No response

[timchilds]

@soner-yuksel this one should be driven by the VPN pod. Please ping @mattmcalister and @larreewong if you need anything clarified re: new design/copy.

[timchilds]

@larreewong please change the image in the issue description. It's currently showing the Android designs.

[timchilds]

@larreewong the figma link in the description is also linking to the "scrap" tab. That is not the final design.

Here is the correct link: https://www.figma.com/design/DSDkzFJ4NdBKLKkf3tDdnE/%F0%9F%94%90-VPN?node-id=3054-395&t=K9ujRYnjxvoKwFRT-1

Please update the link in the issue description.

[larreewong]

Figma link in the org ticket is updated cc @aguscruiz @timchilds @mattmcalister