From 95ef35630da5a2ddb86720473f494e0d4766fe79 Mon Sep 17 00:00:00 2001
From: wen-2018 <42974891+wen-2018@users.noreply.github.com>
Date: Mon, 6 Oct 2025 17:02:35 -0300
Subject: [PATCH 1/2] add Flathub download option (fix #16552)

---
 .../templates/products/vpn/download.html      | 24 +++++++++++++-----
 l10n/en/products/vpn/download.ftl             |  5 ++++
 media/css/products/vpn/download.scss          | 25 +++++++++++++++++++
 .../vpn/download/vpn-download-icon-simple.svg |  1 +
 4 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 media/img/products/vpn/download/vpn-download-icon-simple.svg

diff --git a/bedrock/products/templates/products/vpn/download.html b/bedrock/products/templates/products/vpn/download.html
index c9061de27a2..8fc009415e9 100644
--- a/bedrock/products/templates/products/vpn/download.html
+++ b/bedrock/products/templates/products/vpn/download.html
@@ -109,9 +109,14 @@ <h2>{{ ftl('vpn-download-for-mac-long', fallback='vpn-download-for-mac') }}</h2>
               <h2>{{ ftl('vpn-download-for-linux-long', fallback='vpn-download-for-linux') }}</h2>
               <p class="current-platform-lede">{{ ftl('vpn-download-based-on-your') }}</p>
               <p>{{ ftl('vpn-download-for-linux-requirements', version='22.04') }}</p>
-              <a class="mzp-c-button ga-product-download" href="{{ linux_download_url }}" data-cta-text="VPN Download (Linux)" class="platform-download-link">
-              {{ ftl('vpn-download-get-mozilla-vpn', fallback='vpn-shared-subscribe-link') }}
-              </a>
+              <div class="platform-link-container">
+                <a class="mzp-c-button ga-product-download" href="https://flathub.org/apps/org.mozilla.vpn/?utm_medium=referral&utm_source=mozilla-vpn-website&utm_campaign=evergreen&utm_content=downloads-page" data-cta-text="Install via Flathub" class="platform-download-link">
+                {{ ftl('vpn-download-install-via-flathub') }}
+                </a>
+                <a class="mzp-c-button ga-product-download" href="{{ linux_download_url }}" data-cta-text="Install via APT" class="platform-download-link">
+                {{ ftl('vpn-download-install-via-apt') }}
+                </a>
+              </div>
             </div>
           </div>
           <!-- iOS -->
@@ -195,9 +200,16 @@ <h2>{{ ftl('vpn-download-for-mac') }}</h2>
               <h2>{{ ftl('vpn-download-for-linux') }}</h2>
               <p>{{ ftl('vpn-download-for-linux-requirements', version='22.04') }}</p>
             </div>
-            <a href="{{ linux_download_url }}" data-cta-text="VPN Download (Linux)" class="platform-download-link ga-product-download">
-              <span class="visually-hidden">{{ ftl('vpn-download-for-linux-long') }}</span>
-            </a>
+            <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=mozilla-vpn-website&utm_campaign=evergreen&utm_content=downloads-page" data-cta-text="Install via Flathub" class="platform-download-link">
+                <span class="platform-download-linux-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>
+                {{ ftl('vpn-download-apt') }}
+              </a>
+            </div>
           </li>
           <!-- iOS -->
           <li class="secondary-platform ios">
diff --git a/l10n/en/products/vpn/download.ftl b/l10n/en/products/vpn/download.ftl
index b5e62716e76..639034f9387 100644
--- a/l10n/en/products/vpn/download.ftl
+++ b/l10n/en/products/vpn/download.ftl
@@ -50,3 +50,8 @@ vpn-download-from-the-maker = From the maker of { -brand-name-firefox }, { -bran
 vpn-download-we-never-log = We never log, track, or share your network data.
 
 vpn-download-previous-versions = Download previous versions for { -brand-name-windows } and { -brand-name-mac-short }
+
+vpn-download-install-via-flathub = Install via Flathub
+vpn-download-install-via-apt = Install via APT
+vpn-download-flathub = Flathub
+vpn-download-apt = APT
diff --git a/media/css/products/vpn/download.scss b/media/css/products/vpn/download.scss
index ec73b9d2e5f..b1e6bc10708 100644
--- a/media/css/products/vpn/download.scss
+++ b/media/css/products/vpn/download.scss
@@ -90,6 +90,11 @@ $vpn-download-mq-2xl: '(min-width: 1450px)';
         padding: $spacing-xl;
         display: none;
 
+        .platform-link-container {
+            display: flex;
+            gap: $spacing-sm;
+        }
+
         .platform-image {
             margin-bottom: $spacing-xl;
         }
@@ -179,6 +184,26 @@ $vpn-download-mq-2xl: '(min-width: 1450px)';
             }
         }
 
+        .platform-link-container {
+            display: flex;
+            flex-direction: column;
+            gap: $spacing-sm;
+        }
+
+        .platform-link-container .mzp-c-button:has(.platform-download-linux-arrow) {
+            display: flex;
+            gap: 10px;
+            justify-content: center;
+        }
+
+        .platform-download-linux-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;
+            height: 16px;
+            width: 16px;
+        }
+
         .platform-download-link {
             background-image: url('/media/img/products/vpn/download/vpn-download-icon.svg');
             background-repeat: no-repeat;
diff --git a/media/img/products/vpn/download/vpn-download-icon-simple.svg b/media/img/products/vpn/download/vpn-download-icon-simple.svg
new file mode 100644
index 00000000000..a6a27f50222
--- /dev/null
+++ b/media/img/products/vpn/download/vpn-download-icon-simple.svg
@@ -0,0 +1 @@
+<svg width="16" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)" fill="#000"><path d="M7.2507.5 7.2507 10.71 3.5307 6.99 2.4707 8.05 8.0007 13.58 13.5307 8.05 12.4707 6.99 8.7507 10.71V.5L7.2507.5ZM16 15 0 15 0 16.5 16 16.5V15Z"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(0 .5)" d="M0 0H16V16H0z"/></clipPath></defs></svg>
\ No newline at end of file

From d5814aadac2f02aa1da7ae9e8913e78d848e58db Mon Sep 17 00:00:00 2001
From: wen-2018 <42974891+wen-2018@users.noreply.github.com>
Date: Wed, 22 Oct 2025 12:09:59 -0300
Subject: [PATCH 2/2] address review feedback

---
 bedrock/products/templates/products/vpn/download.html        | 4 ++--
 media/img/products/vpn/download/vpn-download-icon-simple.svg | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/bedrock/products/templates/products/vpn/download.html b/bedrock/products/templates/products/vpn/download.html
index 8fc009415e9..fcc20d6874d 100644
--- a/bedrock/products/templates/products/vpn/download.html
+++ b/bedrock/products/templates/products/vpn/download.html
@@ -110,7 +110,7 @@ <h2>{{ ftl('vpn-download-for-linux-long', fallback='vpn-download-for-linux') }}<
               <p class="current-platform-lede">{{ ftl('vpn-download-based-on-your') }}</p>
               <p>{{ ftl('vpn-download-for-linux-requirements', version='22.04') }}</p>
               <div class="platform-link-container">
-                <a class="mzp-c-button ga-product-download" href="https://flathub.org/apps/org.mozilla.vpn/?utm_medium=referral&utm_source=mozilla-vpn-website&utm_campaign=evergreen&utm_content=downloads-page" data-cta-text="Install via Flathub" class="platform-download-link">
+                <a class="mzp-c-button 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">
                 {{ ftl('vpn-download-install-via-flathub') }}
                 </a>
                 <a class="mzp-c-button ga-product-download" href="{{ linux_download_url }}" data-cta-text="Install via APT" class="platform-download-link">
@@ -201,7 +201,7 @@ <h2>{{ ftl('vpn-download-for-linux') }}</h2>
               <p>{{ ftl('vpn-download-for-linux-requirements', version='22.04') }}</p>
             </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=mozilla-vpn-website&utm_campaign=evergreen&utm_content=downloads-page" data-cta-text="Install via Flathub" class="platform-download-link">
+              <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>
                 {{ ftl('vpn-download-flathub') }}
               </a>
diff --git a/media/img/products/vpn/download/vpn-download-icon-simple.svg b/media/img/products/vpn/download/vpn-download-icon-simple.svg
index a6a27f50222..506396484ab 100644
--- a/media/img/products/vpn/download/vpn-download-icon-simple.svg
+++ b/media/img/products/vpn/download/vpn-download-icon-simple.svg
@@ -1 +1 @@
-<svg width="16" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)" fill="#000"><path d="M7.2507.5 7.2507 10.71 3.5307 6.99 2.4707 8.05 8.0007 13.58 13.5307 8.05 12.4707 6.99 8.7507 10.71V.5L7.2507.5ZM16 15 0 15 0 16.5 16 16.5V15Z"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(0 .5)" d="M0 0H16V16H0z"/></clipPath></defs></svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)" fill="#000"><path d="M7.2507.5 7.2507 10.71 3.5307 6.99 2.4707 8.05 8.0007 13.58 13.5307 8.05 12.4707 6.99 8.7507 10.71V.5L7.2507.5ZM16 15 0 15 0 16.5 16 16.5V15Z"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(0 .5)" d="M0 0H16V16H0z"/></clipPath></defs></svg>