Aggiorna marketing: prezzi lancio, Funzionalità narrativa e link store.

Allinea i piani Light/Full ai prezzi di lancio, ripensa /funzionalita per vendere il prodotto e aggiunge i badge App Store/Play nella home.

Co-authored-by: Cursor <cursoragent@cursor.com>

backend/app/helpers/public/billing_helper.rb

@@ -57,6 +57,10 @@ module Public
       Billing::Stripe::PlanChangeMessages.button_label(plan: plan, interval: interval, kind: btn_kind)
     end
 
+    def plan_cta_name(plan)
+      I18n.t("pages.plans.cta_name.#{plan.slug}", default: plan.name)
+    end
+
     def billing_plan_change_info_lines(subscription: nil)
       Billing::Stripe::PlanChangeMessages.billing_info_lines(subscription: subscription)
     end

backend/app/services/billing/payment_description.rb

@@ -5,9 +5,13 @@ module Billing
 
     AMOUNT_HINTS = {
       500 => %w[premium_light monthly],
+      790 => %w[premium_light monthly],
       4000 => %w[premium_light yearly],
+      5900 => %w[premium_light yearly],
       2000 => %w[premium_full monthly],
-      20_000 => %w[premium_full yearly]
+      2490 => %w[premium_full monthly],
+      20_000 => %w[premium_full yearly],
+      19_900 => %w[premium_full yearly]
     }.freeze
 
     class << self

backend/app/services/billing/stripe/plan_change_messages.rb

@@ -23,10 +23,11 @@ module Billing
 
       def button_label(plan:, interval:, kind:)
         price = PriceCatalog.label(plan_slug: plan.slug, interval: interval)
+        name = I18n.t("pages.plans.cta_name.#{plan.slug}", default: plan.name)
         if kind == :checkout
-          I18n.t("billing.messages.activate_button", plan: plan.name, price: price)
+          I18n.t("billing.messages.activate_button", plan: name, price: price)
         else
-          I18n.t("billing.messages.switch_button", plan: plan.name, price: price)
+          I18n.t("billing.messages.switch_button", plan: name, price: price)
         end
       end
 

backend/app/services/billing/stripe/price_catalog.rb

@@ -4,9 +4,16 @@ module Billing
       INTERVALS = %w[monthly yearly].freeze
       DEFAULT_INTERVAL = "yearly"
 
-      PRICING = {
-        "premium_light" => { "yearly" => "€40/anno", "monthly" => "€5/mese" },
-        "premium_full" => { "yearly" => "€200/anno", "monthly" => "€20/mese" }
+      # Importi in centesimi (EUR). Il yearly è il prezzo lancio addebitato.
+      AMOUNTS = {
+        "premium_light" => {
+          "yearly" => { charge: 5900, list: 7900, equivalent_monthly: 492 },
+          "monthly" => { charge: 790 }
+        },
+        "premium_full" => {
+          "yearly" => { charge: 19_900, list: 24_900, equivalent_monthly: 1658 },
+          "monthly" => { charge: 2490 }
+        }
       }.freeze
 
       class << self
@@ -30,7 +37,23 @@ module Billing
         end
 
         def label(plan_slug:, interval:)
-          PRICING.dig(plan_slug.to_s, normalize_interval(interval)) || normalize_interval(interval)
+          interval = normalize_interval(interval)
+          format_interval_price(charge_cents(plan_slug, interval), interval)
+        end
+
+        def list_label(plan_slug:, interval: "yearly")
+          interval = normalize_interval(interval)
+          cents = list_cents(plan_slug, interval)
+          return nil if cents.blank?
+
+          format_interval_price(cents, interval)
+        end
+
+        def equivalent_monthly_label(plan_slug:)
+          cents = AMOUNTS.dig(plan_slug.to_s, "yearly", :equivalent_monthly)
+          return nil if cents.blank?
+
+          format_interval_price(cents, "monthly")
         end
 
         def available_intervals(plan_slug:)
@@ -52,8 +75,33 @@ module Billing
           nil
         end
 
+        def format_eur(cents)
+          cents = cents.to_i
+          whole, frac = cents.divmod(100)
+          if frac.zero?
+            "€#{whole}"
+          else
+            sep = I18n.locale.to_s == "en" ? "." : ","
+            "€#{whole}#{sep}#{frac.to_s.rjust(2, '0')}"
+          end
+        end
+
         private
 
+        def charge_cents(plan_slug, interval)
+          AMOUNTS.dig(plan_slug.to_s, interval, :charge)
+        end
+
+        def list_cents(plan_slug, interval)
+          AMOUNTS.dig(plan_slug.to_s, interval, :list)
+        end
+
+        def format_interval_price(cents, interval)
+          return nil if cents.blank?
+
+          I18n.t("billing.prices.#{interval}", amount: format_eur(cents))
+        end
+
         def price_id_for(plan_slug, interval)
           case [plan_slug, interval]
           when %w[premium_light monthly]

backend/app/views/layouts/marketing.html.erb

@@ -8,7 +8,7 @@
     <%= render "shared/meta_tags" %>
     <%= yield :head %>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer">
-    <link rel="stylesheet" href="/marketing.css?v=50">
+    <link rel="stylesheet" href="/marketing.css?v=63">
   </head>
   <body data-confirm-i18n='<%= raw confirm_dialog_i18n_json %>'<% if MatchLiveTv.google_analytics_configured? %> data-ga-id="<%= MatchLiveTv.google_analytics_measurement_id %>"<% end %>>
     <%= render "shared/cookie_banner" %>

backend/app/views/layouts/marketing_live.html.erb

@@ -6,7 +6,7 @@
     <title><%= content_for?(:title) ? yield(:title) : "Match Live TV" %></title>
     <%= render "shared/meta_tags" %>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer">
-    <link rel="stylesheet" href="/marketing.css?v=50">
+    <link rel="stylesheet" href="/marketing.css?v=63">
     <link rel="stylesheet" href="/live.css?v=26">
     <%= yield :head %>
   </head>

backend/app/views/public/pages/features.html.erb

@@ -2,63 +2,283 @@
 <% content_for :meta_description, t("pages.features.meta_description") %>
 <% content_for :canonical_url, seo_absolute_url(public_features_path) %>
 
-<div class="wrap">
-  <h1 style="margin-top:24px"><%= t("pages.features.title") %></h1>
-  <p style="color:#aaa;max-width:640px"><%= t("pages.features.lead") %></p>
+<article class="features-page">
+  <header class="features-hero">
+    <div class="wrap features-hero__grid">
+      <div class="features-hero__copy">
+        <p class="features-hero__eyebrow">Match Live TV</p>
+        <h1><%= t("pages.features.hero_title") %></h1>
+        <p class="features-hero__lead"><%= t("pages.features.hero_lead") %></p>
 
-  <section class="section">
-    <h2><%= t("pages.features.staff_section_title") %></h2>
-    <div class="features-grid">
-      <div class="feature-card">
-        <h3><%= t("pages.features.staff_invite_title") %></h3>
-        <p><%= t("pages.features.staff_invite_body") %></p>
+        <ol class="features-flow" aria-label="<%= t("pages.features.flow_aria") %>">
+          <li class="features-flow__item">
+            <span class="features-flow__icon" aria-hidden="true"><i class="fa-solid fa-mobile-screen"></i></span>
+            <span class="features-flow__label"><%= t("pages.features.flow_phone") %></span>
+          </li>
+          <li class="features-flow__arrow" aria-hidden="true"><i class="fa-solid fa-arrow-right"></i></li>
+          <li class="features-flow__item">
+            <span class="features-flow__icon features-flow__icon--blue" aria-hidden="true"><i class="fa-solid fa-user"></i></span>
+            <span class="features-flow__label"><%= t("pages.features.flow_account") %></span>
+          </li>
+          <li class="features-flow__arrow" aria-hidden="true"><i class="fa-solid fa-arrow-right"></i></li>
+          <li class="features-flow__item features-flow__item--live">
+            <span class="features-flow__icon features-flow__icon--live" aria-hidden="true">
+              <span class="features-flow__dot"></span>
+            </span>
+            <span class="features-flow__label"><%= t("pages.features.flow_live") %></span>
+          </li>
+        </ol>
       </div>
-      <div class="feature-card">
-        <h3><%= t("pages.features.staff_access_title") %></h3>
-        <p><%= t("pages.features.staff_access_body") %></p>
+      <div class="features-hero__visual">
+        <%= image_tag "/hero-devices.png",
+              alt: t("pages.features.hero_alt"),
+              class: "features-hero__img",
+              loading: "eager",
+              fetchpriority: "high" %>
       </div>
-      <div class="feature-card">
-        <h3><%= t("pages.features.staff_plans_title") %></h3>
-        <p><%= t("pages.features.staff_plans_body") %></p>
+    </div>
+  </header>
+
+  <section class="section wrap features-how" aria-labelledby="features-how-title">
+    <h2 id="features-how-title"><%= t("pages.features.how_title") %></h2>
+    <ol class="features-how__steps">
+      <li class="features-how__step">
+        <span class="features-how__num" aria-hidden="true">1</span>
+        <h3><%= t("pages.features.how_1_title") %></h3>
+        <p><%= t("pages.features.how_1_body") %></p>
+      </li>
+      <li class="features-how__step">
+        <span class="features-how__num" aria-hidden="true">2</span>
+        <h3><%= t("pages.features.how_2_title") %></h3>
+        <p><%= t("pages.features.how_2_body") %></p>
+      </li>
+      <li class="features-how__step">
+        <span class="features-how__num" aria-hidden="true">3</span>
+        <h3><%= t("pages.features.how_3_title") %></h3>
+        <p><%= t("pages.features.how_3_body") %></p>
+      </li>
+      <li class="features-how__step">
+        <span class="features-how__num" aria-hidden="true">4</span>
+        <h3><%= t("pages.features.how_4_title") %></h3>
+        <p><%= t("pages.features.how_4_body") %></p>
+      </li>
+      <li class="features-how__step">
+        <span class="features-how__num" aria-hidden="true">5</span>
+        <h3><%= t("pages.features.how_5_title") %></h3>
+        <p><%= t("pages.features.how_5_body") %></p>
+      </li>
+    </ol>
+  </section>
+
+  <section class="section wrap features-accounts" aria-labelledby="features-accounts-title">
+    <div class="features-panel">
+      <h2 id="features-accounts-title"><%= t("pages.features.accounts_title") %></h2>
+      <p class="features-panel__lead"><%= t("pages.features.accounts_lead") %></p>
+      <div class="features-accounts__grid">
+        <div class="features-accounts__card">
+          <span class="feature-card__icon" aria-hidden="true"><i class="fa-solid fa-user-plus"></i></span>
+          <h3><%= t("pages.features.accounts_invite_title") %></h3>
+          <p><%= t("pages.features.accounts_invite_body") %></p>
+        </div>
+        <div class="features-accounts__card">
+          <span class="feature-card__icon feature-card__icon--blue" aria-hidden="true"><i class="fa-solid fa-mobile-screen"></i></span>
+          <h3><%= t("pages.features.accounts_transmit_title") %></h3>
+          <p><%= t("pages.features.accounts_transmit_body") %></p>
+        </div>
+        <div class="features-accounts__card">
+          <span class="feature-card__icon feature-card__icon--gold" aria-hidden="true"><i class="fa-solid fa-user-shield"></i></span>
+          <h3><%= t("pages.features.accounts_revoke_title") %></h3>
+          <p><%= t("pages.features.accounts_revoke_body") %></p>
+        </div>
+      </div>
+      <p class="features-highlight"><%= t("pages.features.accounts_highlight") %></p>
+    </div>
+  </section>
+
+  <section class="section wrap features-score" aria-labelledby="features-score-title">
+    <div class="features-split">
+      <div class="features-split__copy">
+        <h2 id="features-score-title"><%= t("pages.features.score_title") %></h2>
+        <p class="features-panel__lead features-panel__lead--left"><%= t("pages.features.score_lead") %></p>
+        <ul class="features-checklist">
+          <li><%= t("pages.features.score_item_app") %></li>
+          <li><%= t("pages.features.score_item_signup") %></li>
+          <li><%= t("pages.features.score_item_password") %></li>
+          <li><%= t("pages.features.score_item_link") %></li>
+        </ul>
+      </div>
+      <aside class="features-score__card" aria-label="<%= t("pages.features.score_card_aria") %>">
+        <div class="features-score__visual" aria-hidden="true">
+          <div class="features-score__phone">
+            <div class="features-score__phone-top">
+              <span class="features-score__live"><span class="features-score__live-dot"></span> REGIA</span>
+              <span class="features-score__set">3° set</span>
+            </div>
+            <div class="features-score__board">
+              <div class="features-score__team">
+                <span class="features-score__team-name">Casa</span>
+                <span class="features-score__points">21</span>
+              </div>
+              <span class="features-score__sep">–</span>
+              <div class="features-score__team features-score__team--away">
+                <span class="features-score__team-name">Ospiti</span>
+                <span class="features-score__points">18</span>
+              </div>
+            </div>
+            <div class="features-score__actions">
+              <span class="features-score__btn">+1</span>
+              <span class="features-score__btn features-score__btn--muted">+1</span>
+            </div>
+          </div>
+          <div class="features-score__linkchip">
+            <i class="fa-solid fa-link" aria-hidden="true"></i>
+            <span>matchlivetv.it/regia/…</span>
+          </div>
+        </div>
+        <div class="features-score__body">
+          <span class="feature-card__badge feature-card__badge--link"><%= t("pages.features.access_link") %></span>
+          <p class="features-score__card-title"><%= t("pages.features.score_card_title") %></p>
+          <p><%= t("pages.features.score_card_body") %></p>
+        </div>
+      </aside>
+    </div>
+  </section>
+
+  <section class="section wrap features-distribute" aria-labelledby="features-distribute-title">
+    <h2 id="features-distribute-title"><%= t("pages.features.distribute_title") %></h2>
+    <p class="features-panel__lead"><%= t("pages.features.distribute_lead") %></p>
+    <ol class="features-pipeline" aria-label="<%= t("pages.features.distribute_aria") %>">
+      <li class="features-pipeline__node">
+        <span class="features-pipeline__icon" aria-hidden="true"><i class="fa-solid fa-mobile-screen"></i></span>
+        <span class="features-pipeline__label"><%= t("pages.features.distribute_phone") %></span>
+      </li>
+      <li class="features-pipeline__join" aria-hidden="true"></li>
+      <li class="features-pipeline__node features-pipeline__node--hub">
+        <span class="features-pipeline__icon" aria-hidden="true"><i class="fa-solid fa-tower-broadcast"></i></span>
+        <span class="features-pipeline__label"><%= t("pages.features.distribute_mltv") %></span>
+      </li>
+      <li class="features-pipeline__join" aria-hidden="true"></li>
+      <li class="features-pipeline__targets">
+        <div class="features-pipeline__node">
+          <span class="features-pipeline__icon features-pipeline__icon--blue" aria-hidden="true"><i class="fa-solid fa-users"></i></span>
+          <span class="features-pipeline__label"><%= t("pages.features.distribute_viewers") %></span>
+        </div>
+        <div class="features-pipeline__node">
+          <span class="features-pipeline__icon" aria-hidden="true"><i class="fa-brands fa-youtube"></i></span>
+          <span class="features-pipeline__label"><%= t("pages.features.distribute_youtube") %></span>
+        </div>
+      </li>
+    </ol>
+  </section>
+
+  <section class="section wrap features-youtube" aria-labelledby="features-youtube-title">
+    <div class="features-panel features-panel--accent features-youtube__panel">
+      <div class="features-youtube__copy">
+        <span class="feature-card__badge feature-card__badge--invite"><%= t("pages.features.youtube_badge") %></span>
+        <h2 id="features-youtube-title"><%= t("pages.features.youtube_title") %></h2>
+        <p class="features-panel__lead features-panel__lead--left"><%= t("pages.features.youtube_body") %></p>
+      </div>
+      <div class="features-youtube__visual" aria-hidden="true">
+        <div class="features-yt-mock">
+          <div class="features-yt-mock__player">
+            <span class="features-yt-mock__live"><span class="features-yt-mock__dot"></span> LIVE</span>
+            <span class="features-yt-mock__play"><i class="fa-brands fa-youtube"></i></span>
+          </div>
+          <div class="features-yt-mock__meta">
+            <span class="features-yt-mock__avatar"><i class="fa-solid fa-shield-halved"></i></span>
+            <div class="features-yt-mock__text">
+              <strong><%= t("pages.features.youtube_mock_channel") %></strong>
+              <span><%= t("pages.features.youtube_mock_subs") %></span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <section class="section">
-    <h2><%= t("pages.features.live_section_title") %></h2>
-    <div class="features-grid">
+  <section class="section wrap features-replay" aria-labelledby="features-replay-title">
+    <div class="features-split features-split--reverse">
+      <div class="features-split__copy">
+        <h2 id="features-replay-title"><%= t("pages.features.replay_title") %></h2>
+        <p class="features-panel__lead features-panel__lead--left"><%= t("pages.features.replay_lead") %></p>
+        <ul class="features-checklist">
+          <li><%= t("pages.features.replay_item_server") %></li>
+          <li><%= t("pages.features.replay_item_plan") %></li>
+          <li><%= t("pages.features.replay_item_download") %></li>
+        </ul>
+      </div>
+      <aside class="features-replay__card" aria-label="<%= t("pages.features.replay_card_title") %>">
+        <div class="features-replay__visual" aria-hidden="true">
+          <div class="features-archive-mock">
+            <div class="features-archive-mock__head">
+              <i class="fa-solid fa-cloud" aria-hidden="true"></i>
+              <span><%= t("pages.features.replay_card_title") %></span>
+            </div>
+            <ul class="features-archive-mock__list">
+              <li>
+                <span class="features-archive-mock__thumb features-archive-mock__thumb--a"></span>
+                <span class="features-archive-mock__info">
+                  <strong><%= t("pages.features.replay_mock_1_title") %></strong>
+                  <em><%= t("pages.features.replay_mock_1_meta") %></em>
+                </span>
+                <i class="fa-solid fa-download" aria-hidden="true"></i>
+              </li>
+              <li>
+                <span class="features-archive-mock__thumb features-archive-mock__thumb--b"></span>
+                <span class="features-archive-mock__info">
+                  <strong><%= t("pages.features.replay_mock_2_title") %></strong>
+                  <em><%= t("pages.features.replay_mock_2_meta") %></em>
+                </span>
+                <i class="fa-solid fa-download" aria-hidden="true"></i>
+              </li>
+              <li>
+                <span class="features-archive-mock__thumb features-archive-mock__thumb--c"></span>
+                <span class="features-archive-mock__info">
+                  <strong><%= t("pages.features.replay_mock_3_title") %></strong>
+                  <em><%= t("pages.features.replay_mock_3_meta") %></em>
+                </span>
+                <i class="fa-solid fa-download" aria-hidden="true"></i>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="features-replay__body">
+          <p class="features-score__card-title"><%= t("pages.features.replay_card_title") %></p>
+          <p><%= t("pages.features.replay_card_body") %></p>
+        </div>
+      </aside>
+    </div>
+  </section>
+
+  <section class="section wrap features-more" aria-labelledby="features-more-title">
+    <h2 id="features-more-title"><%= t("pages.features.more_title") %></h2>
+    <div class="features-grid features-grid--compact">
       <div class="feature-card">
-        <h3><%= t("pages.features.live_phone_title") %></h3>
-        <p><%= t("pages.features.live_phone_body") %></p>
+        <span class="feature-card__icon" aria-hidden="true"><i class="fa-solid fa-tower-broadcast"></i></span>
+        <h3><%= t("pages.features.more_stable_title") %></h3>
+        <p><%= t("pages.features.more_stable_body") %></p>
       </div>
       <div class="feature-card">
-        <h3><%= t("pages.features.live_score_title") %></h3>
-        <p><%= t("pages.features.live_score_body") %></p>
+        <span class="feature-card__icon feature-card__icon--blue" aria-hidden="true"><i class="fa-solid fa-share-nodes"></i></span>
+        <h3><%= t("pages.features.more_link_title") %></h3>
+        <p><%= t("pages.features.more_link_body") %></p>
       </div>
       <div class="feature-card">
-        <h3><%= t("pages.features.live_link_title") %></h3>
-        <p><%= t("pages.features.live_link_body") %></p>
-      </div>
-      <div class="feature-card">
-        <h3><%= t("pages.features.live_archive_title") %></h3>
-        <p><%= t("pages.features.live_archive_body") %></p>
-      </div>
-      <div class="feature-card">
-        <h3><%= t("pages.features.live_youtube_mltv_title") %></h3>
-        <p><%= t("pages.features.live_youtube_mltv_body") %></p>
-      </div>
-      <div class="feature-card">
-        <h3><%= t("pages.features.live_youtube_club_title") %></h3>
-        <p><%= t("pages.features.live_youtube_club_body") %></p>
-      </div>
-      <div class="feature-card">
-        <h3><%= t("pages.features.live_website_title") %></h3>
-        <p><%= t("pages.features.live_website_body") %></p>
+        <span class="feature-card__icon" aria-hidden="true"><i class="fa-brands fa-youtube"></i></span>
+        <h3><%= t("pages.features.more_yt_mltv_title") %></h3>
+        <p><%= t("pages.features.more_yt_mltv_body") %></p>
       </div>
     </div>
   </section>
 
-  <p style="text-align:center;margin:40px 0">
-    <%= link_to t("pages.features.cta_signup"), public_signup_path, class: "btn btn-primary" %>
-  </p>
-</div>
+  <section class="section wrap features-cta" aria-labelledby="features-cta-title">
+    <div class="features-cta__box">
+      <h2 id="features-cta-title"><%= t("pages.features.cta_title") %></h2>
+      <p><%= t("pages.features.cta_body") %></p>
+      <div class="features-cta__actions">
+        <%= link_to t("pages.features.cta_primary"), public_signup_path, class: "btn btn-primary" %>
+        <%= link_to t("pages.features.cta_secondary"), public_prezzi_path, class: "btn btn-outline" %>
+      </div>
+    </div>
+  </section>
+</article>

backend/app/views/public/pages/home.html.erb

@@ -10,7 +10,8 @@
     "url" => seo_absolute_url(root_path),
     "applicationCategory" => "SportsApplication",
     "operatingSystem" => "Web, Android, iOS",
-    "description" => t("home.schema_description")
+    "description" => t("home.schema_description"),
+    "sameAs" => [MatchLiveTv.app_store_url, MatchLiveTv.play_store_url]
   }.to_json) %>
   </script>
 <% end %>
@@ -26,6 +27,10 @@
         <%= link_to t("home.cta_signup"), public_signup_path, class: "btn btn-primary" %>
         <%= link_to t("home.cta_live"), public_live_index_path, class: "btn btn-secondary" %>
       </div>
+      <div class="hero-stores">
+        <p class="hero-stores-label"><%= t("home.stores_label") %></p>
+        <%= render "shared/store_badges", variant: "hero" %>
+      </div>
       <ul class="hero-features" aria-label="<%= t('home.features_aria') %>">
         <li class="hero-feature-item">
           <span class="hero-feature-icon" aria-hidden="true"><i class="fa-solid fa-tower-broadcast"></i></span>

backend/app/views/public/pages/pricing.html.erb

@@ -22,19 +22,60 @@
 
   <%= render "shared/plan_cards" %>
 
-  <div class="table-scroll">
+  <div class="table-scroll compare-table-wrap">
     <table class="compare-table">
+      <colgroup>
+        <col class="compare-table__feature">
+        <col class="compare-table__plan">
+        <col class="compare-table__plan">
+        <col class="compare-table__plan compare-table__plan--featured">
+      </colgroup>
       <thead>
-        <tr><th></th><th>Free</th><th>Premium Light</th><th>Premium Full</th></tr>
+        <tr>
+          <th></th>
+          <th>Free</th>
+          <th>Premium Light</th>
+          <th>Premium Full</th>
+        </tr>
       </thead>
       <tbody>
-        <tr><td><%= t("pages.pricing.table_staff") %></td><td>1</td><td>5</td><td><%= t("pages.pricing.table_unlimited") %></td></tr>
+        <tr>
+          <td><%= t("pages.pricing.table_staff") %></td>
+          <td>1</td>
+          <td>5</td>
+          <td><%= t("pages.pricing.table_unlimited") %></td>
+        </tr>
         <tr><td><%= t("pages.pricing.table_matches") %></td><td>1</td><td>3</td><td>10</td></tr>
         <tr><td><%= t("pages.pricing.table_live_mltv") %></td><td><%= t("pages.pricing.table_yes") %></td><td><%= t("pages.pricing.table_yes") %></td><td><%= t("pages.pricing.table_yes") %></td></tr>
         <tr><td><%= t("pages.pricing.table_youtube") %></td><td><%= t("pages.pricing.table_no") %></td><td>Match Live TV</td><td><%= t("pages.pricing.table_youtube_club") %></td></tr>
         <tr><td><%= t("pages.pricing.table_replay") %></td><td><%= t("pages.pricing.table_no") %></td><td><%= t("pages.plans.replay_days", count: 30) %></td><td><%= t("pages.plans.replay_days", count: 90) %></td></tr>
         <tr><td><%= t("pages.pricing.table_download") %></td><td><%= t("pages.pricing.table_no") %></td><td><%= t("pages.pricing.table_yes") %></td><td><%= t("pages.pricing.table_yes") %></td></tr>
-        <tr><td><%= t("pages.pricing.table_price") %></td><td><%= t("pages.pricing.table_price_free") %></td><td><%= raw t("pages.pricing.table_price_light_html") %></td><td><%= raw t("pages.pricing.table_price_full_html") %></td></tr>
+        <tr>
+          <td><%= t("pages.pricing.table_price") %></td>
+          <td><%= t("pages.pricing.table_price_free") %></td>
+          <td>
+            <div class="compare-price">
+              <strong><%= Billing::Stripe::PriceCatalog.label(plan_slug: "premium_light", interval: "yearly") %></strong>
+              <span class="compare-price__launch"><%= t("pages.plans.launch_price") %></span>
+              <small class="compare-price__note"><%= t(
+                "pages.pricing.table_price_note",
+                list: Billing::Stripe::PriceCatalog.list_label(plan_slug: "premium_light", interval: "yearly"),
+                monthly: Billing::Stripe::PriceCatalog.label(plan_slug: "premium_light", interval: "monthly")
+              ) %></small>
+            </div>
+          </td>
+          <td>
+            <div class="compare-price">
+              <strong><%= Billing::Stripe::PriceCatalog.label(plan_slug: "premium_full", interval: "yearly") %></strong>
+              <span class="compare-price__launch"><%= t("pages.plans.launch_price") %></span>
+              <small class="compare-price__note"><%= t(
+                "pages.pricing.table_price_note",
+                list: Billing::Stripe::PriceCatalog.list_label(plan_slug: "premium_full", interval: "yearly"),
+                monthly: Billing::Stripe::PriceCatalog.label(plan_slug: "premium_full", interval: "monthly")
+              ) %></small>
+            </div>
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>

backend/app/views/shared/_marketing_footer.html.erb

@@ -2,6 +2,7 @@
   <div class="wrap">
     <div>
       <strong style="color:#fff">Match Live TV</strong> — <%= t("footer.tagline") %>
+      <%= render "shared/store_badges", variant: "footer" %>
     </div>
     <div>
       <%= link_to t("common.support"), public_support_path %> ·

backend/app/views/shared/_plan_cards.html.erb

@@ -15,23 +15,33 @@
          current_interval: current_interval,
          subscription: subscription
        ) : nil %>
-    <div class="plan-card">
+    <% featured = plan.slug == "premium_full" %>
+    <div class="plan-card<%= " plan-card--featured" if featured %>">
+      <% if featured %>
+        <p class="plan-card__recommend"><%= t("pages.plans.recommended_badge") %></p>
+      <% end %>
       <%= render "shared/plan_title", plan: plan %>
       <% if plan.slug == "free" %>
         <div class="plan-price">€0</div>
-      <% elsif plan.slug == "premium_light" %>
-        <% light_yearly = Billing::Stripe::PriceCatalog.label(plan_slug: plan.slug, interval: "yearly") %>
-        <% light_monthly = Billing::Stripe::PriceCatalog.label(plan_slug: plan.slug, interval: "monthly") %>
-        <div class="plan-price" style="color:#e53935"><%= light_yearly %></div>
-        <p class="plan-price-alt"><%= raw t("pages.plans.price_alt_html", price: light_monthly) %></p>
       <% else %>
-        <% full_yearly = Billing::Stripe::PriceCatalog.label(plan_slug: plan.slug, interval: "yearly") %>
-        <% full_monthly = Billing::Stripe::PriceCatalog.label(plan_slug: plan.slug, interval: "monthly") %>
-        <div class="plan-price"><%= full_yearly %></div>
-        <p class="plan-price-alt"><%= raw t("pages.plans.price_alt_html", price: full_monthly) %></p>
+        <% yearly = Billing::Stripe::PriceCatalog.label(plan_slug: plan.slug, interval: "yearly") %>
+        <% monthly = Billing::Stripe::PriceCatalog.label(plan_slug: plan.slug, interval: "monthly") %>
+        <% list = Billing::Stripe::PriceCatalog.list_label(plan_slug: plan.slug, interval: "yearly") %>
+        <% equiv = Billing::Stripe::PriceCatalog.equivalent_monthly_label(plan_slug: plan.slug) %>
+        <div class="plan-price-block">
+          <% if list.present? %>
+            <div class="plan-price-list"><s><%= list %></s></div>
+          <% end %>
+          <div class="plan-price<%= " plan-price--featured" if featured %>"><%= yearly %></div>
+          <span class="plan-price-badge"><%= t("pages.plans.launch_price") %></span>
+          <% if equiv.present? %>
+            <p class="plan-price-equiv"><%= t("pages.plans.price_equiv", price: equiv) %></p>
+          <% end %>
+        </div>
+        <p class="plan-price-alt"><%= raw t("pages.plans.price_alt_html", price: monthly) %></p>
       <% end %>
       <ul>
-        <li><%= raw t("pages.plans.staff_html", count: plan.max_staff_transmission || t("pages.plans.staff_unlimited")) %></li>
+        <li><%= raw(plan.max_staff_transmission ? t("pages.plans.staff_html", count: plan.max_staff_transmission) : t("pages.plans.staff_unlimited_html")) %></li>
         <li><%= raw t("pages.plans.matches_html", count: plan.concurrent_streams_limit || t("pages.plans.matches_unlimited")) %></li>
         <li><%= raw t(
           "pages.plans.replay_html",
@@ -48,6 +58,9 @@
                  end
         ) %></li>
       </ul>
+      <% if plan.slug == "premium_full" %>
+        <p class="plan-staff-note"><%= t("pages.plans.staff_note_full") %></p>
+      <% end %>
       <% if billing_mode %>
         <% action_kind = action[:kind] %>
         <% if action_kind == :current %>
@@ -78,8 +91,12 @@
         <%= link_to t("pages.plans.start_free"), public_signup_path, class: "btn btn-secondary" %>
       <% else %>
         <div class="plan-interval-actions">
-          <% plan_intervals_for_display(Billing::Stripe::PriceCatalog.available_intervals(plan_slug: plan.slug)).each do |interval| %>
-            <%= link_to t("pages.plans.register_with_price", price: Billing::Stripe::PriceCatalog.label(plan_slug: plan.slug, interval: interval)),
+          <% %w[yearly monthly].each do |interval| %>
+            <%= link_to t(
+                  "billing.messages.activate_button",
+                  plan: plan_cta_name(plan),
+                  price: Billing::Stripe::PriceCatalog.label(plan_slug: plan.slug, interval: interval)
+                ),
                   public_signup_path(plan: plan.slug, interval: interval),
                   class: plan_interval_button_class(interval) %>
           <% end %>
@@ -88,4 +105,3 @@
     </div>
   <% end %>
 </div>
-

backend/app/views/shared/_store_badges.html.erb

@@ -0,0 +1,31 @@
+<% variant = local_assigns.fetch(:variant, "hero") %>
+<div class="store-badges store-badges--<%= variant %>">
+  <%= link_to MatchLiveTv.app_store_url,
+        class: "store-badge",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        aria: { label: t("home.store_app_store_aria") } do %>
+    <%= image_tag "/images/store/apple.svg",
+          alt: "",
+          class: "store-badge__logo store-badge__logo--apple",
+          aria: { hidden: true } %>
+    <span>
+      <span class="store-badge__kicker"><%= t("home.store_app_store_kicker") %></span>
+      <span class="store-badge__name"><%= t("home.store_app_store_name") %></span>
+    </span>
+  <% end %>
+  <%= link_to MatchLiveTv.play_store_url,
+        class: "store-badge",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        aria: { label: t("home.store_play_aria") } do %>
+    <%= image_tag "/images/store/google-play.svg",
+          alt: "",
+          class: "store-badge__logo store-badge__logo--play",
+          aria: { hidden: true } %>
+    <span>
+      <span class="store-badge__kicker"><%= t("home.store_play_kicker") %></span>
+      <span class="store-badge__name"><%= t("home.store_play_name") %></span>
+    </span>
+  <% end %>
+</div>