Fix #850 - Add promo pricing banner

privaterelay/locales/en-US/app.ftl

@@ -11,6 +11,7 @@
 -brand-name-relay = Relay
 -brand-name-firefox-browser = Firefox Browser
 -brand-name-mozilla = Mozilla
+-brand-name-mozilla-vpn = Mozilla VPN
 -brand-name-mozilla-privacy-pack = Mozilla Privacy Pack
 -brand-name-firefox-lockwise = Firefox Lockwise
 -brand-name-firefox-monitor = Firefox Monitor
@@ -256,3 +257,11 @@ survey-option-somewhat-disappointed = Somewhat disappointed
 survey-option-very-disappointed = Very disappointed
 survey-option-very-likely = Very likely
 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-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/header.html

@@ -7,6 +7,8 @@
 
 <header class="flx flx-col spc-btwn">
 
+  {% include "includes/vpn-promo-banner.html" %}
+
   {% if settings.RECRUITMENT_BANNER_LINK and LANGUAGE_CODE|slice:"0:2" == "en" %}
     <div class="recruitment-banner">
       <a id="recruitment-banner" class="text-link" href="{{ settings.RECRUITMENT_BANNER_LINK }}" target="_blank" rel="noopener noreferrer" data-ga="send-ga-funnel-pings" data-event-category="Recruitment" data-event-label="{{ settings.RECRUITMENT_BANNER_TEXT }}">{{ settings.RECRUITMENT_BANNER_TEXT }}</a>

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

@@ -0,0 +1,17 @@
+{% load static %}
+{% load relay_tags %}
+{% load ftl %}
+{% ftlconf bundle='privaterelay.ftl_bundles.main' %}
+
+<div id="vpnPromoBanner" class="vpn-promo-banner ">
+	<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>
+		</div>
+		<a class="vpn-promo-cta" href="https://www.mozilla.org/products/vpn/?utm_source=monitor&utm_medium=monitor&utm_campaign=intro-pricing">{% 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/app.scss

@@ -17,4 +17,5 @@
 
 @import "partials/fx-bento";
 @import "partials/glocal-menu";
+@import "partials/vpn-promo";
 

static/scss/partials/vpn-promo.scss

@@ -0,0 +1,184 @@
+html,
+body {
+  --vpn-purple: #c5c8fb;
+}
+
+.vpn-banner-visible .clear-header {
+  padding-top: 28rem;
+}
+
+.vpn-banner-visible .micro-survey-banner {
+  display: none;
+}
+
+.vpn-promo-banner {
+  background-color: var(--background);
+  font-family: "Metropolis", sans-serif;
+  font-size: 16px;
+  position: relative;
+  transition: max-height 0.3s ease-out;
+  overflow: hidden;
+  max-height: 500px;
+}
+
+@media (prefers-reduced-motion) {
+  .vpn-promo-banner {
+    transition-property: none;
+  }
+}
+
+.vpn-promo-banner.closed {
+  max-height: 0;
+}
+
+.vpn-promo-banner + .recruitment-banner {
+  display: none;
+}
+
+.vpn-promo-banner-wrapper {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 1rem 2rem;
+  text-align: center;
+}
+
+.vpn-promo-logo {
+  display: block;
+  max-width: 122px;
+  margin: 0 auto 1rem;
+}
+
+.vpn-promo-copy {
+  text-align: center;
+  font-size: 1rem;
+  max-width: 320px;
+  margin: 0 auto 1rem;
+  line-height: 1.2rem;
+  color: var(--inkDark);
+}
+
+.vpn-promo-copy strong, .vpn-promo-copy span {
+  display: block;
+  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);
+  box-shadow: 8px 8px 0 #6a57dc;
+  color: var(--inkDark);
+  cursor: pointer;
+  display: inline-block;
+  font-size: 1.125rem;
+  font-weight: bold;
+  line-height: 1.5rem;
+  padding: 0.5rem 1rem;
+  margin-bottom: 1rem;
+  position: relative;
+  text-decoration: none;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.vpn-promo-banner a:hover,
+.vpn-promo-banner a:active,
+.vpn-promo-banner a:focus {
+  background-color: var(--inkDark);
+  color: var(--bgLight);
+}
+
+.vpn-promo-banner button {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  position: absolute;
+  top: 0.5rem;
+  right: 0;
+  border: none;
+  outline: none;
+  display: block;
+}
+
+.vpn-promo-banner button:hover img {
+  transform: scale(1.1);
+}
+
+.vpn-promo-banner button:active img {
+  transform: scale(0.9);
+}
+
+.vpn-promo-banner button img {
+  display: block;
+  width: 30px;
+  height: 30px;
+  transition: transform 0.2s ease-out;
+}
+
+@media screen and (min-width: 700px) {
+  .vpn-promo-banner-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  .vpn-promo-copy {
+    flex-shrink: 2;
+  }
+
+  .vpn-promo-copy strong {
+    display: block;
+  }
+
+  .vpn-promo-banner button {
+    top: 0;
+    right: 0;
+  }
+
+  .vpn-promo-logo,
+  .vpn-promo-copy {
+    margin: 0;
+  }
+
+  .vpn-promo-banner a {
+    margin-bottom: 0.25rem;
+  }
+
+  .vpn-banner-visible .clear-header {
+    padding-top: 18rem;
+  }
+
+  .vpn-promo-copy small {
+    max-width: 400px;
+  }
+
+}
+
+@media screen and (min-width: 800px) {
+  .vpn-promo-copy {
+    max-width: none;
+    padding: 0 1rem;
+  }
+  .vpn-banner-visible .clear-header {
+    padding-top: 16rem;
+  }
+  .vpn-promo-copy small {
+    max-width: none;
+  }
+}
+
+@media screen and (min-width: 960px) {
+  .vpn-promo-banner button {
+    top: 0.25rem;
+    right: 0.25rem;
+  }
+  .vpn-promo-banner a {
+    flex-shrink: 0;
+  }
+}