Fix#2933: Update Brave VPN intro card text + Graphic

BraveShared/BraveStrings.swift

@@ -1017,11 +1017,17 @@ extension Strings {
                               value: "Buy",
                               comment: "Button text to buy Brave VPN")
 
+        public static let tryForFreeButton =
+            NSLocalizedString("learnMore",
+                              bundle: .braveShared,
+                              value: "Try for FREE",
+                              comment: "Button text to try free Brave VPN")
+
         public static let settingHeaderBody =
             NSLocalizedString("vpn.settingHeaderBody",
                               bundle: .braveShared,
-                              value: "Protect your connection and block invasive trackers.",
-                              comment: "")
+                              value: "Upgrade to a VPN to protect your connection and block invasive trackers everywhere.",
+                              comment: "VPN Banner Description")
 
         public static let errorCantGetPricesTitle =
             NSLocalizedString("vpn.errorCantGetPricesTitle",

Client/Assets/Images.xcassets/BraveVPN/enable_vpn_settings_banner.imageset/Contents.json

@@ -1,16 +1,17 @@
 {
   "images" : [
     {
+      "filename" : "enable_vpn_settings_banner.png",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "filename" : "settings_vpn_banner@2x.png",
+      "filename" : "enable_vpn_settings_banner@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "settings_vpn_banner@3x.png",
+      "filename" : "enable_vpn_settings_banner@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

Client/Frontend/BraveVPN/EnableVPNSettingHeader.swift

@@ -19,7 +19,7 @@ class EnableVPNSettingHeader: UIView {
     }
 
     private let titleLabel = UILabel().then {
-        $0.text = Strings.VPN.vpnName
+        $0.text = Strings.VPN.vpnMenuItemTitle
         $0.appearanceTextColor = .white
         $0.font = UIFont.systemFont(ofSize: 19, weight: .semibold)
     }
@@ -37,8 +37,10 @@ class EnableVPNSettingHeader: UIView {
 
         let title = { () -> String in
             switch BraveVPN.vpnState {
-            case .notPurchased, .expired:
-                return Strings.learnMore
+                case .notPurchased:
+                    return Strings.VPN.tryForFreeButton
+                case .expired:
+                    return Strings.learnMore
             case .purchased, .installed:
                 return Strings.VPN.enableButton
             }
@@ -86,8 +88,8 @@ class EnableVPNSettingHeader: UIView {
         contentView.addSubview(mainStackView)
         mainStackView.snp.makeConstraints {
             $0.top.bottom.equalToSuperview().inset(16)
+            $0.leading.trailing.equalToSuperview().inset(25)
             $0.centerX.equalToSuperview()
-            $0.width.equalTo(250)
         }
 
         contentView.snp.makeConstraints {