Add Web App button beside Premium on arvio.tv

netlify-arvio-tv-site/index.html

@@ -27,15 +27,18 @@
 <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"ARVIO","applicationCategory":"MultimediaApplication","operatingSystem":"Android TV, Google TV, Android","url":"https://arvio.tv/","inLanguage":"en","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"downloadUrl":"https://play.google.com/store/apps/details?id=com.arvio.tv","codeRepository":"https://github.com/ProdigyV21/ARVIO","description":"Free, open-source Android TV media player for Jellyfin, Plex, Emby, IPTV and compatible addons. Get the ARVIO APK, connect your sources and track with Trakt or Simkl."}</script>
 
   <title>ARVIO — Free Android TV Media Player &amp; APK</title>
-  <link rel="stylesheet" href="/assets/home-v2.css?v=6">
+  <link rel="stylesheet" href="/assets/home-v2.css?v=7">
 <script defer src="/assets/premium-journey.js?v=2"></script>
 </head>
 <body>
 <a class="skip" href="#main">Skip to content</a>
 <header class="nav">
   <a class="brand" href="#top" aria-label="ARVIO home"><img src="/assets/arvio-wordmark.png" width="134" height="34" alt="ARVIO"></a>
   <nav aria-label="Main navigation"><a href="#experience">Explore</a><a href="#devices">Devices</a><a class="nav-premium-link" href="#premium">Premium</a><a href="/guides/">Guides</a><a class="nav-community" href="https://discord.gg/UavuEYMfQ4">Discord <span aria-hidden="true">↗</span></a></nav>
-  <a class="button small mint-button nav-premium" href="https://ko-fi.com/arvio/tiers" data-premium-placement="header-membership">Get Premium <span aria-hidden="true">↗</span></a>
+  <div class="nav-actions">
+    <a class="button small glass nav-webapp" href="https://web.arvio.tv/">Web App <span aria-hidden="true">↗</span></a>
+    <a class="button small mint-button nav-premium" href="https://ko-fi.com/arvio/tiers" data-premium-placement="header-membership">Get Premium <span aria-hidden="true">↗</span></a>
+  </div>
 </header>
 <main id="main">
 <section class="hero hero-v2" id="top">

netlify-arvio-tv-site/scripts/generate-localized-homepages.mjs

@@ -30,6 +30,7 @@ const locales = {
 };
 
 const copy = [
+  ["Web App", "Web App", "App web"],
   ["Media kit", "Kit de imprensa", "Kit de prensa"],
   ["Guides", "Guias", "Guías"],
   ["ARVIO 2.0.", "ARVIO 2.0.", "ARVIO 2.0."],

netlify-arvio-tv-site/scripts/home-navigation.test.cjs

@@ -0,0 +1,20 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const site = path.resolve(__dirname, '..');
+
+for (const file of ['index.html', 'es/index.html', 'pt-br/index.html']) {
+  test(`${file}: Web App and Premium stay together in the header`, () => {
+    const html = fs.readFileSync(path.join(site, file), 'utf8');
+    const header = html.match(/<header\b[^>]*>([\s\S]*?)<\/header>/u)?.[1];
+    const actions = header?.match(/<div class="nav-actions">([\s\S]*?)<\/div>/u)?.[1];
+    assert.ok(actions, 'Header actions must be grouped');
+    assert.match(actions, /class="button small glass nav-webapp" href="https:\/\/web\.arvio\.tv\/"/u);
+    assert.match(actions, /class="button small mint-button nav-premium" href="https:\/\/ko-fi\.com\/arvio\/tiers"/u);
+    assert.ok(actions.indexOf('nav-webapp') < actions.indexOf('nav-premium'));
+    assert.match(actions, file === 'es/index.html' ? />App web </u : />Web App </u);
+    assert.ok(!actions.includes('target="_blank"'), 'Web App should navigate directly');
+  });
+}