Fix #898 - Update VPN promo banner copy (#912)

* Fix #898 - Update VPN promo banner copy

* Updated HREF with new UTMs

* Update text to new copy

* Revised gulp tasks to wait until finished to run next command

* Update close button bg color

gulpfile.js

@@ -3,42 +3,36 @@ const sass = require("gulp-sass");
 const del = require("del");
 
 // directory for building LESS, SASS, and bundles
-const buildDir = "static/scss/libs/protocol/";
-const finalDir = "static/css/";
+const buildDir = "./static/scss/libs/protocol/";
+const finalDir = "./static/css/";
 
-function clean(cb) {
-    del([
+function clean() {
+    return del([
         finalDir
     ]);
-    cb();
 }
 
-function reset(cb) {
-    del([
+function reset() {    
+    return del([
         finalDir,
         buildDir,
     ]);
-    cb();
 }
 
-function styles(cb) {
-    src("static/scss/app.scss")
+function styles() {
+    return src("./static/scss/app.scss")
         .pipe(sass().on("error", sass.logError))
         .pipe(dest(finalDir));
-
-    cb();
 }
 
-function assetsCopy(cb) {
-    src(["node_modules/@mozilla-protocol/core/protocol/**/*"]).pipe(dest(buildDir));
-    cb();
+function assetsCopy() { 
+    return src(["./node_modules/@mozilla-protocol/core/protocol/**/*"]).pipe(dest(buildDir));
 }
 
 exports.build = series(reset, assetsCopy, styles);
-
 exports.default = series(
     clean, assetsCopy, styles, function() {
         // You can use a single task
-        watch("static/scss/**/*.scss", { ignoreInitial: false }, series(clean, styles));
+        watch("./static/scss/**/*.scss", { ignoreInitial: false }, series(clean, styles));
     }
-);
+);

privaterelay/locales/en-US/app.ftl

@@ -247,9 +247,6 @@ survey-option-not-likely = Not likely
 
 ## VPN Promo Banner
 
-vpn-promo-headline = Now’s the time to boost your safety online.
-vpn-promo-copy = { -brand-name-mozilla }’s Virtual Private Network helps shield your internet connection from hackers and spies. 
+vpn-promo-headline = Save 50% with a full year subscription
+vpn-promo-copy = Protect your online data—and choose a VPN subscription plan that works for you.
 vpn-promo-cta = Get { -brand-name-mozilla-vpn }
-vpn-promo-price-headline = Introductory offer ends soon: $4.99/month for { -brand-name-mozilla-vpn }
-vpn-promo-price-copy = Now's the time to protect your device against hackers and prying eyes.
-vpn-promo-price-disclaimer = Offer only available in the United States, United Kingdom, Canada, New Zealand, Malaysia, and Singapore

privaterelay/templates/includes/vpn-promo-banner.html

@@ -7,11 +7,10 @@
 	<div class="vpn-promo-banner-wrapper">
 		<img alt="Mozilla VPN" class="vpn-promo-logo" src="{% static 'images/logos/mozilla-vpn.svg' %}"/>
 		<div class="vpn-promo-copy">
-			<strong>{% ftlmsg 'vpn-promo-price-headline' %}</strong>
-			<span>{% ftlmsg 'vpn-promo-price-copy' %}</span>
-			<small>{% ftlmsg 'vpn-promo-price-disclaimer' %}</small>
+			<strong>{% ftlmsg 'vpn-promo-headline' %}</strong>
+			<span>{% ftlmsg 'vpn-promo-copy' %}</span>
 		</div>
-		<a class="vpn-promo-cta" href="https://www.mozilla.org/products/vpn/?utm_source=relay&utm_medium=banner&utm_campaign=intro-pricing">{% ftlmsg 'vpn-promo-cta' %}</a>
+		<a class="vpn-promo-cta" href="https://www.mozilla.org/products/vpn/?utm_source=private-relay&utm_medium=banner&utm_campaign=relay-banner">{% ftlmsg 'vpn-promo-cta' %}</a>
 		<button id="vpnPromoCloseButton" type="button" name="button" data-event-category="vpn-promo-close"><img src="{% static 'images/x-close-black.svg' %}"/></button>
 	</div>
 </div>

static/scss/partials/vpn-promo.scss

@@ -11,10 +11,6 @@ body {
   display: none;
 }
 
-// .vpn-banner-visible .micro-survey-banner {
-//   display: none;
-// }
-
 .vpn-promo-banner {
   background-color: var(--background);
   font-family: "Metropolis", sans-serif;
@@ -40,23 +36,23 @@ body {
 }
 
 .vpn-promo-banner-wrapper {
-  max-width: 1000px;
+  max-width: $content-lg;
   margin: 0 auto;
-  padding: 1rem 2rem;
+  padding: $spacing-md $spacing-xl;
   text-align: center;
 }
 
 .vpn-promo-logo {
   display: block;
   max-width: 122px;
-  margin: 0 auto 1rem;
+  margin: 0 auto $spacing-md;
 }
 
 .vpn-promo-copy {
   text-align: center;
   font-size: 1rem;
-  max-width: 320px;
-  margin: 0 auto 1rem;
+  max-width: $content-sm;
+  margin: 0 auto $spacing-md;
   line-height: 1.2rem;
   color: var(--inkDark);
 }
@@ -66,15 +62,6 @@ body {
   margin: 0 0 2px;
 }
 
-.vpn-promo-copy small {
-  padding-top: 2px;
-  display: block;
-  font-size: 0.65rem;
-  margin: 0 auto;
-  line-height: normal;
-  font-style: italic;
-}
-
 .vpn-promo-banner a {
   background-color: var(--bgLight);
   border: solid 2px var(--inkDark);
@@ -85,8 +72,8 @@ body {
   font-size: 1.125rem;
   font-weight: bold;
   line-height: 1.5rem;
-  padding: 0.5rem 1rem;
-  margin-bottom: 1rem;
+  padding: $spacing-sm $spacing-md;
+  margin-bottom: $spacing-md;
   position: relative;
   text-decoration: none;
   transition: background-color 0.15s ease, color 0.15s ease;
@@ -103,11 +90,12 @@ body {
   -moz-appearance: none;
   -webkit-appearance: none;
   position: absolute;
-  top: 0.5rem;
+  top: $spacing-sm;
   right: 0;
   border: none;
   outline: none;
   display: block;
+  background-color: transparent;
 }
 
 .vpn-promo-banner button:hover img {
@@ -134,6 +122,7 @@ body {
 
   .vpn-promo-copy {
     flex-shrink: 2;
+    padding: 0 $spacing-md;
   }
 
   .vpn-promo-copy strong {
@@ -160,32 +149,23 @@ body {
     }
     padding-top: 10rem;
   }
-
-  .vpn-promo-copy small {
-    max-width: 400px;
-  }
-
 }
 
 @media screen and (min-width: 800px) {
   .vpn-promo-copy {
-    max-width: none;
-    padding: 0 1rem;
+    padding: 0 $spacing-md;
   }
 
   .vpn-banner-visible main {
     padding-top: 5rem;
   }
 
-  .vpn-promo-copy small {
-    max-width: none;
-  }
 }
 
 @media screen and (min-width: 960px) {
   .vpn-promo-banner button {
-    top: 0.25rem;
-    right: 0.25rem;
+    top: $spacing-xs;
+    right: $spacing-xs;
   }
   .vpn-promo-banner a {
     flex-shrink: 0;