Wt-1122 add windows arm vpn

bedrock/products/templates/products/vpn/download.html

@@ -80,9 +80,15 @@ <h1>{{ self.page_title_full() }}</h1>
             <div class="platform-body">
               <h2>{{ ftl('vpn-download-for-windows-long') }}</h2>
               <p class="current-platform-lede">{{ ftl('vpn-download-based-on-your') }}</p>
-              <p>{{ ftl('vpn-download-for-windows-requirements') }}</p>
-              <a class="mzp-c-button ga-product-download" href="{{ url('products.vpn.windows-download') }}" data-cta-text="VPN Download (Windows)" data-testid="vpn-download-link-primary-windows">
-              {{ ftl('vpn-download-get-mozilla-vpn', fallback='vpn-shared-subscribe-link') }}
+              <p>{{ ftl('vpn-download-for-windows-requirements-v2') }}</p>
+              <div class="platform-link-container">
+                <a class="mzp-c-button ga-product-download" href="{{ url('products.vpn.windows-download') }}"  data-cta-text="Install via Flathub" class="platform-download-link">
+                {{ ftl('vpn-download-windows') }}
+                </a>
+                <a class="mzp-c-button ga-product-download" href="{{ url('products.vpn.windows-arm-download') }}"  data-cta-text="Install via APT" class="platform-download-link">
+                {{ ftl('vpn-download-windows-arm') }}
+                </a>
+              </div>
               </a>
             </div>
           </div>
@@ -127,7 +133,7 @@ <h2>{{ ftl('vpn-download-for-linux-long', fallback='vpn-download-for-linux') }}<
             <div class="platform-body">
               <h2>{{ ftl('vpn-download-for-ios-long-v2', fallback='vpn-download-for-ios') }}</h2>
               <p class="current-platform-lede">{{ ftl('vpn-download-based-on-your') }}</p>
-              <p>{{ ftl('vpn-download-version-requirements', version='15.0') }}</p>
+              <p>{{ ftl('vpn-download-version-requirements', version='17.0') }}</p>
               <a href="{{ ios_download_url }}" data-cta-text="VPN Download (iOS)" class="platform-download-link ga-product-download">
                 <img src="{{ static('img/products/vpn/download/apple-app-store-badge.svg') }}" alt=" {{ ftl('vpn-download-get-mozilla-vpn', fallback='vpn-shared-subscribe-link') }}">
               </a>
@@ -172,11 +178,18 @@ <h2>{{ ftl('vpn-download-for-firefox-extension') }}</h2>
             </div>
             <div class="platform-body">
               <h2>{{ ftl('vpn-download-for-windows-v2') }}</h2>
-              <p>{{ ftl('vpn-download-for-windows-requirements') }}</p>
+              <p>{{ ftl('vpn-download-for-windows-requirements-v2') }}</p>
+            </div>
+            <div class="platform-link-container">
+              <a class="mzp-c-button mzp-t-secondary ga-product-download" href="{{ url('products.vpn.windows-download') }}" data-cta-text="Install via Flathub" class="platform-download-link">
+                <span class="platform-download-arrow"></span>
+                {{ ftl('vpn-download-windows') }}
+              </a>
+              <a class="mzp-c-button mzp-t-secondary ga-product-download" href="{{ url('products.vpn.windows-arm-download') }}" data-cta-text="Install via APT" class="platform-download-link">
+                <span class="platform-download-arrow" aria-hidden="true"></span>
+                {{ ftl('vpn-download-windows-arm') }}
+              </a>
             </div>
-            <a href="{{ url('products.vpn.windows-download') }}" data-cta-text="VPN Download (Windows)" class="platform-download-link ga-product-download" data-testid="vpn-download-link-secondary-windows">
-              <span class="visually-hidden">{{ ftl('vpn-download-for-windows-long') }}</span>
-            </a>
           </li>
           <!-- Mac OS -->
           <li class="secondary-platform macos">
@@ -202,11 +215,11 @@ <h2>{{ ftl('vpn-download-for-linux') }}</h2>
             </div>
             <div class="platform-link-container">
               <a class="mzp-c-button mzp-t-secondary ga-product-download" href="https://flathub.org/apps/org.mozilla.vpn/?utm_medium=referral&utm_source=www.mozilla.org-vpn-download-page&utm_campaign=vpn-download-page" data-cta-text="Install via Flathub" class="platform-download-link">
-                <span class="platform-download-linux-arrow"></span>
+                <span class="platform-download-arrow"></span>
                 {{ ftl('vpn-download-flathub') }}
               </a>
               <a class="mzp-c-button mzp-t-secondary ga-product-download" href="{{ linux_download_url }}" data-cta-text="Install via APT" class="platform-download-link">
-                <span class="platform-download-linux-arrow" aria-hidden="true"></span>
+                <span class="platform-download-arrow" aria-hidden="true"></span>
                 {{ ftl('vpn-download-apt') }}
               </a>
             </div>
@@ -218,7 +231,7 @@ <h2>{{ ftl('vpn-download-for-linux') }}</h2>
             </div>
             <div class="platform-body">
               <h2>{{ ftl('vpn-download-for-ios') }}</h2>
-              <p>{{ ftl('vpn-download-version-requirements', version='15.0') }}</p>
+              <p>{{ ftl('vpn-download-version-requirements', version='17.0') }}</p>
             </div>
             <a href="{{ ios_download_url }}" data-cta-text="VPN Download (iOS)" class="platform-download-link ga-product-download">
               <span class="visually-hidden">{{ ftl('vpn-download-for-ios-long-v2') }}</span>

bedrock/products/templates/products/vpn/windows-arm-download.html

@@ -0,0 +1,144 @@
+{#
+ 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/.
+#}
+
+{% extends "products/vpn/download.html" %}
+
+{% block canonical_urls %}
+<meta name="robots" content="noindex,nofollow">
+<link rel="canonical" href="{{ settings.CANONICAL_URL + '/' + CANONICAL_LANG + canonical_path }}">
+{% endblock %}
+
+{% block page_title_full %}{{ ftl('vpn-windows-download-page-title') }}{% endblock %}
+
+{% block page_css %}
+  {{ css_bundle('protocol-picto') }}
+  {{ css_bundle('mozilla-vpn-platform-download') }}
+{% endblock %}
+
+{% block content %}
+  <div class="vpn-platform-download">
+    {% if block_download %}
+      <header class="platform-download-header">
+        <div class="mzp-l-content platform-download-blocked" data-testid="vpn-download-blocked-message">
+        <img src="{{ static('img/products/vpn/download/vpn-unavailable-country.svg') }}" alt="">
+        <h1>{{ ftl('vpn-download-unable-to-download') }}</h1>
+        <p>{{ ftl('vpn-download-not-in-country') }}</p>
+        </div>
+      </header>
+    {% endif %}
+
+    {% if not block_download %}
+    <header class="platform-download-header">
+      <div class="mzp-l-content platform-download-header-wrapper">
+        <div class="vpn-logo">
+          <img src="{{ static('img/logos/vpn/vpn-dark-logo.svg') }}" alt="">
+        </div>
+        <h1>{{ ftl('vpn-windows-downloading-mozilla-vpn') }}</h1>
+        <p>{{ ftl('vpn-your-download-should-start', url=windows_download_url, id='vpn-download-link-win') }}</p>
+      </div>
+    </header>
+    <section class="vpn-download-instructions windows mzp-l-content" data-testid="vpn-download-instructions">
+      <ol class="mzp-l-columns mzp-t-columns-three">
+        {% call picto(
+          base_el='li',
+          title=ftl('vpn-open-the-file'),
+          image=resp_img(
+            url='img/products/vpn/download/vpn-file-windows-500.png',
+            srcset={
+              'img/products/vpn/download/vpn-file-windows-700.png': '2x'
+            },
+            optional_attributes={
+              'class': 'mzp-c-picto-image',
+              'loading': 'lazy'
+            }
+          ),
+          body=True,
+          ) %}
+          <p>{{ ftl('vpn-windows-go-to-your-downloads') }}</p>
+        {% endcall %}
+        {% call picto(
+          base_el='li',
+          title=ftl('vpn-launch-the-app'),
+          image=resp_img(
+            url='img/products/vpn/download/windows-installer-500.png',
+            srcset={
+              'img/products/vpn/download/windows-installer-700.png': '2x',
+            },
+            optional_attributes={
+              'class': 'mzp-c-picto-image windows-launch-img',
+              'loading': 'lazy'
+            }
+          ),
+          body=True,
+          ) %}
+          <p>{{ ftl('vpn-windows-a-progress-bar') }}</p>
+        {% endcall %}
+        {% call picto(
+          base_el='li',
+          title=ftl('vpn-login-or-signup'),
+          image=resp_img(
+            url='img/products/vpn/download/vpn-app-windows-500.png',
+            srcset={
+              'img/products/vpn/download/vpn-app-windows-700.png': '2x',
+            },
+            optional_attributes={
+              'class': 'mzp-c-picto-image',
+              'loading': 'lazy'
+            }
+          ),
+          body=True,
+          ) %}
+          <p>{{ ftl('vpn-enter-your-email') }}</p>
+        {% endcall %}
+        {% call picto(
+          base_el='li',
+          title=ftl('vpn-turn-on-vpn'),
+          image=resp_img(
+            url='img/products/vpn/download/vpn-app-on-windows-500.png',
+            srcset={
+              'img/products/vpn/download/vpn-app-on-windows-700.png': '2x',
+            },
+            optional_attributes={
+              'class': 'mzp-c-picto-image',
+              'loading': 'lazy'
+            }
+          ),
+          body=True,
+          ) %}
+          <p>{{ ftl('vpn-pick-a-recommended') }}</p>
+        {% endcall %}
+        {% call picto(
+          base_el='li',
+          title=ftl('vpn-install-firefox-extension'),
+          image=resp_img(
+            url='img/products/vpn/download/vpn-firefox-extension-500.png',
+            srcset={
+              'img/products/vpn/download/vpn-firefox-extension-700.png': '2x',
+            },
+            optional_attributes={
+              'class': 'mzp-c-picto-image',
+              'loading': 'lazy'
+            }
+          ),
+          body=True,
+          ) %}
+          <p>{{ ftl('vpn-download-and-install', extension='https://addons.mozilla.org/firefox/addon/mozilla-vpn-extension/?utm_medium=referral&utm_source=mozilla-vpn-website&utm_campaign=evergreen&utm_content=thank-you-page') }}</p>
+        {% endcall %}
+      </ol>
+    </section>
+  </div>
+  {% include 'products/vpn/includes/download-faq.html' %}
+  {% endif %}
+  <footer class="vpn-footer">
+      {% include 'products/vpn/includes/footer-legal.html' %}
+  </footer>
+{% endblock %}
+
+{% block js %}
+  {% if not block_download %}
+    {{ js_bundle('vpn_platform_download') }}
+  {% endif %}
+{% endblock %}

bedrock/products/urls.py

@@ -21,6 +21,7 @@
     path("vpn/download/", views.vpn_download_page, name="products.vpn.download"),
     path("vpn/download/mac/thanks/", views.vpn_mac_download_page, name="products.vpn.mac-download"),
     path("vpn/download/windows/thanks/", views.vpn_windows_download_page, name="products.vpn.windows-download"),
+    path("vpn/download/windows-arm/thanks/", views.vpn_windows_arm_download_page, name="products.vpn.windows-arm-download"),
     page("vpn/mobile/", "products/vpn/platforms/mobile.html", ftl_files=["products/vpn/platforms/mobile_v2", "products/vpn/shared"]),
     page("vpn/mobile/ios/", "products/vpn/platforms/ios.html", ftl_files=["products/vpn/platforms/ios_v2", "products/vpn/shared"]),
     page("vpn/mobile/android/", "products/vpn/platforms/android.html", ftl_files=["products/vpn/platforms/android_v2", "products/vpn/shared"]),

bedrock/products/views.py

@@ -177,6 +177,22 @@ def vpn_windows_download_page(request):
     return l10n_utils.render(request, template_name, context, ftl_files=ftl_files)
 
 
+@require_safe
+def vpn_windows_arm_download_page(request):
+    template_name = "products/vpn/windows-arm-download.html"
+    country = get_country_from_request(request)
+    ftl_files = ["products/vpn/platform-post-download", "products/vpn/shared"]
+    windows_download_url = f"{settings.VPN_ENDPOINT}r/vpn/download/windows-arm"
+    block_download = country in settings.VPN_BLOCK_DOWNLOAD_COUNTRY_CODES
+
+    context = {
+        "windows_download_url": windows_download_url,
+        "block_download": block_download,
+    }
+
+    return l10n_utils.render(request, template_name, context, ftl_files=ftl_files)
+
+
 @require_safe
 def vpn_invite_page(request):
     ftl_files = ["products/vpn/landing", "products/vpn/shared"]

l10n/en/products/vpn/download.ftl

@@ -15,7 +15,9 @@ vpn-download-mozilla-vpn-offers = { -brand-name-mozilla-vpn } offers safe and se
 vpn-download-not-available-in-country = Sorry, { -brand-name-mozilla-vpn } is not available for download in your country.
 
 vpn-download-for-windows-v2 = VPN for { -brand-name-windows }
+# Obsolete string (expires: 2026-07-20)
 vpn-download-for-windows-requirements = { -brand-name-windows } 10/11 (64-bit only)
+vpn-download-for-windows-requirements-v2 = { -brand-name-windows } 10/11
 vpn-download-for-windows-long = Download { -brand-name-mozilla-vpn } for { -brand-name-windows }
 vpn-download-for-firefox-extension = Install { -brand-name-firefox } extension
 vpn-download-for-mac = VPN for { -brand-name-mac-short }
@@ -55,3 +57,5 @@ vpn-download-install-via-flathub = Install via Flathub
 vpn-download-install-via-apt = Install via APT
 vpn-download-flathub = Flathub
 vpn-download-apt = APT
+vpn-download-windows = 64-bit
+vpn-download-windows-arm = ARM

media/css/products/vpn/download.scss

@@ -95,6 +95,10 @@ $vpn-download-mq-2xl: '(min-width: 1450px)';
             gap: $spacing-sm;
         }
 
+        .platform-link-container .mzp-c-button{
+            flex: 1;
+        }
+
         .platform-image {
             margin-bottom: $spacing-xl;
         }
@@ -188,15 +192,16 @@ $vpn-download-mq-2xl: '(min-width: 1450px)';
             display: flex;
             flex-direction: column;
             gap: $spacing-sm;
+            width: 150px;
         }
 
-        .platform-link-container .mzp-c-button:has(.platform-download-linux-arrow) {
+        .platform-link-container .mzp-c-button:has(.platform-download-arrow) {
             display: flex;
             gap: 10px;
             justify-content: center;
         }
 
-        .platform-download-linux-arrow {
+        .platform-download-arrow {
             background-color: currentColor;
             -webkit-mask: url('/media/img/products/vpn/download/vpn-download-icon-simple.svg') no-repeat center/16px 16px;
             mask: url('/media/img/products/vpn/download/vpn-download-icon-simple.svg') no-repeat center/16px 16px;