Add Flathub link to VPN download page

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=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">
+                {{ 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=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>
+              <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">

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

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;