VPN pages refresh (Fixes mozilla#13159) (mozilla#13190)

* VPN pages refresh (Fixes mozilla#13159) * Design updates, add pricing to landing, set up TC test * Add affiliate flow back to landing refresh page (mozilla#13417) * Add page descriptions --------- Co-authored-by: Craig Cook <craigcook@users.noreply.github.com>
alexgibson · Jul 20, 2023 · 2b124eb · 2b124eb
1 parent 680e35a
commit 2b124eb
Show file tree

Hide file tree

Showing 79 changed files with 2,525 additions and 13 deletions.
diff --git a/bedrock/products/templates/products/vpn/features.html b/bedrock/products/templates/products/vpn/features.html
diff --git a/bedrock/products/templates/products/vpn/includes/macros.html b/bedrock/products/templates/products/vpn/includes/macros.html
@@ -117,6 +117,26 @@ <h2 class="vpn-hero-sub-heading">{{ subheading }}</h2>
   {% endif %}
 {%- endmacro %}
 
+{% macro vpn_conditional_cta_refresh(position) -%}
+  <div class="c-aside {{ position }} mzp-l-content mzp-t-content-xl">
+    {% if vpn_available %}
+      <p>
+        {% set pricing_url = '#pricing' if request.path.endswith('/products/vpn/') else url('products.vpn.landing') + '#pricing' %}
+        <a class="mzp-c-button mzp-t-product mzp-t-xl" href="{{ pricing_url }}" data-cta-type="button" data-cta-text="Get Mozilla VPN" data-cta-position="{{ position }}">
+          Get Mozilla VPN
+        </a>
+      </p>
+      <p class="c-guarantee">30-day money-back guarantee</p>
+    {% else %}
+      <p>
+        <a class="mzp-c-button mzp-t-product mzp-t-xl" href="{{ url('products.vpn.invite') }}" data-cta-type="button" data-cta-text="Join the VPN Waitlist">
+          Join the Waitlist
+        </a>
+      </p>
+    {% endif %}
+  </div>
+{%- endmacro %}
+
 {% macro vpn_nav_cta(link_text, alt_link_text, download_link_text, utm_source, utm_campaign) -%}
   <div class="vpn-nav-cta">
     {% if vpn_available %}
@@ -131,10 +151,19 @@ <h2 class="vpn-hero-sub-heading">{{ subheading }}</h2>
   </div>
 {%- endmacro %}
 
-{% macro vpn_nav_cta_link() -%}
-<div class="vpn-nav-cta">
-  <a href="{{ url('products.vpn.landing') }}" class="mzp-c-button mzp-t-secondary mzp-t-md">{{ ftl('vpn-shared-subscribe-link') }}</a>
-</div>
+{% macro vpn_nav_cta_refresh() -%}
+  <div class="vpn-nav-cta">
+    {% if vpn_available %}
+      {% set pricing_url = '#pricing' if request.path.endswith('/products/vpn/') else url('products.vpn.landing') + '#pricing' %}
+      <a class="mzp-c-button mzp-t-secondary mzp-t-md" href="{{ pricing_url }}" data-cta-type="button" data-cta-text="Get Mozilla VPN" data-cta-position="navigation">
+        Get Mozilla VPN
+      </a>
+    {% else %}
+      <a class="mzp-c-button mzp-t-secondary mzp-t-md" href="{{ url('products.vpn.invite') }}" data-cta-type="button" data-cta-text="Join the VPN Waitlist" data-cta-position="navigation">
+        Join the Waitlist
+      </a>
+    {% endif %}
+  </div>
 {%- endmacro %}
 
 {% macro vpn_content_block(class_name=None, use_custom_body=False) -%}

diff --git a/bedrock/products/templates/products/vpn/includes/press.html b/bedrock/products/templates/products/vpn/includes/press.html
@@ -0,0 +1,39 @@
+{#
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+<section class="c-press mzp-l-content mzp-t-content-xl t-content-body">
+  <h2 class="c-section-title t-small">As seen in</h2>
+
+  <ul class="mzp-l-columns mzp-t-columns-three">
+    <li>
+      <cite><img loading="lazy" src="{{ static('img/products/vpn/common/press/washington-post.svg') }}" width="240" alt="The Washington Post"></cite>
+      <blockquote>
+        <p>
+          “Mozilla’s VPN can also <a href="https://addons.mozilla.org/firefox/addon/multi-account-containers/?src=external-www.mozilla.org-vpnlanding&utm_source=www.mozilla.org-vpnlanding&utm_medium=referral" rel="external noopener" target="_blank">integrate into some nifty
+          privacy-protection features</a> of its Firefox browser.”
+        </p>
+      </blockquote>
+    </li>
+    <li>
+      <cite><img loading="lazy" src="{{ static('img/products/vpn/common/press/verge.svg') }}" width="240" alt="The Verge"></cite>
+      <blockquote>
+        <p>
+          “…unique features, like its Multi-Account Containers, might make
+          the feature easily accessible to users with more serious privacy concerns.”
+        </p>
+      </blockquote>
+    </li>
+    <li>
+      <cite><img loading="lazy" src="{{ static('img/products/vpn/common/press/techradar.svg') }}" width="240" alt="Tech Radar"></cite>
+      <blockquote>
+        <p>
+          “Mozilla VPN’s feature list has grown considerably since launch,
+          and the service now beats many specialist VPNs in some areas.”
+        </p>
+      </blockquote>
+    </li>
+  </ul>
+</section>
diff --git a/bedrock/products/templates/products/vpn/includes/pricing-refresh-horizontal.html b/bedrock/products/templates/products/vpn/includes/pricing-refresh-horizontal.html
@@ -0,0 +1,86 @@
+{#
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+<div class="c-pricing-block-horizontal">
+  <div class="mzp-l-columns mzp-t-columns-three">
+    <div class="c-pricing-details">
+      <h2 class="c-pricing-details-heading">Included in subscription:</h2>
+
+      <ul class="mzp-u-list-styled">
+        <li>Connect up to {{ connect_devices }} devices</li>
+        <li>Access {{connect_servers }}+ servers in {{connect_countries }}+ countries</li>
+        <li>30-day money-back guarantee (for first-time customers only)</li>
+      </ul>
+    </div>
+
+    <section class="c-pricing-block">
+      <header class="c-pricing-block-header">
+        <p class="c-pricing-block-tag">{{ ftl('vpn-shared-pricing-recommended-offer') }}</p>
+
+        <h2 class="c-pricing-block-heading">
+          Annual
+        </h2>
+
+        <h3 class="c-pricing-block-sub-heading">
+          {{ vpn_monthly_price(plan='12-month', country_code=country_code, lang=LANG) }}
+        </h3>
+      </header>
+
+      <div class="c-pricing-block-detail">
+        <p class="c-pricing-block-saving">{{ vpn_saving(country_code=country_code, lang=LANG) }}</p>
+        <p class="c-pricing-block-total">{{ vpn_total_price(country_code=country_code, lang=LANG) }}</p>
+
+        {{ vpn_subscribe_link(
+          entrypoint=_utm_source,
+          link_text='Get annual subscription',
+          plan='12-month',
+          class_name='mzp-c-button mzp-t-product mzp-t-xl',
+          country_code=country_code,
+          lang=LANG,
+          optional_parameters={
+            'utm_campaign': _utm_campaign
+          },
+          optional_attributes={
+            'data-cta-type': 'fxa-vpn',
+            'data-cta-text': 'Get Mozilla VPN 12-month',
+            'data-cta-position': 'pricing'
+          })
+        }}
+      </div>
+    </section>
+
+    <section class="c-pricing-block">
+      <header class="c-pricing-block-header">
+        <h2 class="c-pricing-block-heading">
+          Monthly
+        </h2>
+
+        <h3 class="c-pricing-block-sub-heading">
+          {{ vpn_monthly_price(plan='monthly', country_code=country_code, lang=LANG) }}
+        </h3>
+      </header>
+
+      <div class="c-pricing-block-detail">
+        {{ vpn_subscribe_link(
+          entrypoint=_utm_source,
+          link_text='Get monthly subscription',
+          plan='monthly',
+          class_name='mzp-c-button mzp-t-product mzp-t-xl',
+          country_code=country_code,
+          lang=LANG,
+          optional_parameters={
+            'utm_campaign': _utm_campaign
+          },
+          optional_attributes={
+            'data-cta-type': 'fxa-vpn',
+            'data-cta-text': 'Get Mozilla VPN monthly',
+            'data-cta-position': 'pricing'
+          })
+        }}
+      </div>
+    </section>
+  </div>
+</div>
diff --git a/bedrock/products/templates/products/vpn/includes/pricing-refresh-vertical.html b/bedrock/products/templates/products/vpn/includes/pricing-refresh-vertical.html
@@ -0,0 +1,86 @@
+{#
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+<div class="c-pricing-block-vertical">
+  <div class="c-pricing-details">
+    <h2 class="c-pricing-details-heading">Included in subscription:</h2>
+
+    <ul class="mzp-u-list-styled">
+      <li>Connect up to {{ connect_devices }} devices</li>
+      <li>Access {{connect_servers }}+ servers in {{connect_countries }}+ countries</li>
+      <li>30-day money-back guarantee (for first-time customers only)</li>
+    </ul>
+  </div>
+
+  <section class="c-pricing-block">
+    <header class="c-pricing-block-header">
+      <p class="c-pricing-block-tag">{{ ftl('vpn-shared-pricing-recommended-offer') }}</p>
+
+      <h2 class="c-pricing-block-heading">
+        Annual
+      </h2>
+
+      <h3 class="c-pricing-block-sub-heading">
+        {{ vpn_monthly_price(plan='12-month', country_code=country_code, lang=LANG) }}
+      </h3>
+    </header>
+
+    <div class="c-pricing-block-detail">
+      <div class="c-pricing-block-detail-highlight">
+        <p class="c-pricing-block-saving">{{ vpn_saving(country_code=country_code, lang=LANG) }}</p>
+        <p class="c-pricing-block-total">{{ vpn_total_price(country_code=country_code, lang=LANG) }}</p>
+      </div>
+
+      {{ vpn_subscribe_link(
+        entrypoint=_utm_source,
+        link_text='Get annual subscription',
+        plan='12-month',
+        class_name='mzp-c-button mzp-t-product mzp-t-xl',
+        country_code=country_code,
+        lang=LANG,
+        optional_parameters={
+          'utm_campaign': _utm_campaign
+        },
+        optional_attributes={
+          'data-cta-type': 'fxa-vpn',
+          'data-cta-text': 'Get Mozilla VPN 12-month',
+          'data-cta-position': 'pricing'
+        })
+      }}
+    </div>
+  </section>
+
+  <section class="c-pricing-block">
+    <header class="c-pricing-block-header">
+      <h2 class="c-pricing-block-heading">
+        Monthly
+      </h2>
+
+      <h3 class="c-pricing-block-sub-heading">
+        {{ vpn_monthly_price(plan='monthly', country_code=country_code, lang=LANG) }}
+      </h3>
+    </header>
+
+    <div class="c-pricing-block-detail">
+      {{ vpn_subscribe_link(
+        entrypoint=_utm_source,
+        link_text='Get monthly subscription',
+        plan='monthly',
+        class_name='mzp-c-button mzp-t-product mzp-t-xl',
+        country_code=country_code,
+        lang=LANG,
+        optional_parameters={
+          'utm_campaign': _utm_campaign
+        },
+        optional_attributes={
+          'data-cta-type': 'fxa-vpn',
+          'data-cta-text': 'Get Mozilla VPN monthly',
+          'data-cta-position': 'pricing'
+        })
+      }}
+    </div>
+  </section>
+</div>
diff --git a/bedrock/products/templates/products/vpn/includes/subnav-refresh.html b/bedrock/products/templates/products/vpn/includes/subnav-refresh.html
@@ -0,0 +1,40 @@
+{#
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ #}
+
+<nav class="c-sub-navigation">
+  <div class="mzp-l-content">
+    <div class="c-sub-navigation-content">
+      <h2 class="c-sub-navigation-title is-summary">
+        <a href="{{ url('products.vpn.landing') }}" data-link-type="nav" data-link-position="subnav" data-link-name="Mozilla VPN">
+          Mozilla VPN
+        </a>
+      </h2>
+      <ul class="c-sub-navigation-list is-details is-closed">
+        <li class="c-sub-navigation-item">
+          <a href="{{ url('products.vpn.resource-center.article', 'what-is-a-vpn') }}" data-link-type="nav" data-link-position="subnav" data-link-name="What’s a VPN?">
+            What’s a VPN?
+          </a>
+        </li>
+        <li class="c-sub-navigation-item">
+          {% set pricing_url = '#pricing' if request.path.endswith('/products/vpn/') else url('products.vpn.landing') + '#pricing' %}
+          <a href="{{ pricing_url }}" data-link-type="nav" data-link-position="subnav" data-link-name="View VPN pricing">
+            Pricing
+          </a>
+        </li>
+        <li class="c-sub-navigation-item">
+          <a href="{{ url('products.vpn.features') }}" data-link-type="nav" data-link-position="subnav" data-link-name="Features">
+            Features
+          </a>
+        </li>
+        <li class="c-sub-navigation-item">
+          <a href="https://support.mozilla.org/products/firefox-private-network-vpn?{{ _params }}" data-link-type="nav" data-link-position="subnav" data-link-name="Get Help">
+            Get Help
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>