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

<% content_for :title, t("pages.features.meta_title") %>
<% content_for :meta_description, t("pages.features.meta_description") %>
<% content_for :canonical_url, seo_absolute_url(public_features_path) %>

<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>

        <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="features-hero__visual">
        <%= image_tag "/hero-devices.png",
              alt: t("pages.features.hero_alt"),
              class: "features-hero__img",
              loading: "eager",
              fetchpriority: "high" %>
      </div>
    </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><%= MatchLiveTv::Demo.home_team %></strong>
              <span><%= t("pages.features.youtube_mock_subs") %></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <%= render "shared/sponsor_cover_promo" %>

  <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><%= MatchLiveTv::Demo.match_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><%= MatchLiveTv::Demo.match_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><%= MatchLiveTv::Demo.match_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">
        <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">
        <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">
        <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>

  <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>