Update Brave VPN intro card text + graphic

[karenkliu]

Description

Update the promotional copy for VPN so it mentions trying for free and makes it clearer what the additional protections are.

Original thread for this issue:

It seems strange to introduce the VPN with this Protect your connection and block ads and trackers across your whole device.
Our new mobile onboarding makes it pretty clear that Brave blocks trackers and ads. So why would someone need a VPN that also block trackers and ads??

Also:

...discussing why we aren't necessarily seeing a lot of users testing out the VPN. He brought up the point that maybe it's worth mentioning the free trial in some of the copy? You only find out about the free trial when you select a plan option.

Steps to Reproduce

1. Go to settings
2. See the intro card

Actual result:

Designs

New copy: Upgrade to a VPN to protect your connection and block invasive trackers everywhere.

Replace the background graphic as well; last release we missed incorrect grey icon colors in the background graphic.

Assets

Figma: https://www.figma.com/file/PqLTp3DnANLQMM1XzaChqZ/iOS-VPN?node-id=0%3A199

[anthonypkeane]

Please change the "Learn More" text to "Try for Free"

[karenkliu]

Copy updated!

[kjozwiak]

@karenkliu going to go off the following design as per #2933 (comment):

However, we'll need to update Figma as it's still displaying/using the old design.

[kjozwiak]

Verification PASSED on iPad Air (3rd Gen) on iOS 14.3 using the following build:

1.23 (21.1.28.17)

• ensured that the modal doesn't dismiss when closing settings or restarting the browser if the X wasn't selected
• ensured that tapping on X correctly closes the modal and doesn't re-appear when re-opening Settings
• ensured that selecting Try for FREE correctly opened Brave VPN subscription screen

Example	Example

Verification PASSED on iPad Mini 4 on iOS 13.7 using the following build:

1.23 (21.1.28.17)

• ensured that the modal doesn't dismiss when closing settings or restarting the browser if the X wasn't selected
• ensured that tapping on X correctly closes the modal and doesn't re-appear when re-opening Settings
• ensured that selecting Try for FREE correctly opened Brave VPN subscription screen

Example	Example

Verification PASSED on iPhone 11 on iOS 14.4 using the following build:

1.23 (21.1.28.17)

• ensured that the modal doesn't dismiss when closing settings or restarting the browser if the X wasn't selected
• ensured that tapping on X correctly closes the modal and doesn't re-appear when re-opening Settings
• ensured that selecting Try for FREE correctly opened Brave VPN subscription screen

Example	Example

Verification PASSED on iPhone 6+ on iOS 12.4.1 using the following build:

1.23 (21.1.28.17)

• ensured that the modal doesn't dismiss when closing settings or restarting the browser if the X wasn't selected
• ensured that tapping on X correctly closes the modal and doesn't re-appear when re-opening Settings
• ensured that selecting Try for FREE correctly opened Brave VPN subscription screen

Example	Example

[karenkliu]

@kjozwiak Okay thanks for the heads up; Figma updated.