<section class=“plan plan–{{ include.type }}”>

<div class="container">
  <div class="plan__row">
    <div class="plan__title-header">
      {% if include.hasIntro %}
      <p class="plan__intro">
        Chegou Veloe, sua nova experiência de pagamento para pedágios e
        estacionamentos em shoppings, aeroportos e centros comerciais. Sem
        pegar filas, abrir a carteira ou contar moedas.
      </p>
      {% endif %}
      <div>
        <h1
          class="plan__title {{
            'plan__title--' | append: include.type | default: ''
          }}"
        >
          {{ page.title }}
        </h1>
      </div>
    </div>
    <div>
      <img
        src="{{ site.baseurl | append: page.logo.url }}"
        alt="{{ page.logo.alt }}"
        class="plan__brand plan__brand--white"
      />
      <img
        src="{{ site.baseurl | append: page.logo.url }}"
        alt="{{ page.logo.alt }}"
        class="plan__brand plan__brand--black"
      />
    </div>
  </div>
  <div class="plan__row">
    <div class="plans">
      {% for plan in page.plans %}
      <form
        id="confirm-plan-pre"
        action="{{ plan.submit_action }}"
        class="plan__box"
        data-promocode="{{ plan.promocode }}"
      >
        <header class="plan__header">
          <h3 class="plan__name">{{ plan.name }}</h3>
          <p class="plan__description">
            {{ plan.description }}
          </p>
        </header>
        <article class="plan__content">
          <ul class="plan__list">
            <li class="plan__item">
              <span class="plan__text">Taxa de Adesão</span>
              <span class="plan__value plan__value--free">Grátis</span>
            </li>
            <li class="plan__item">
              <span class="plan__text">Entrega da tag</span>
              <span class="plan__value plan__value--free">Grátis</span>
            </li>
            <li class="plan__item">
              <span class="plan__text">Mensalidade</span>
              <span class="plan__value plan__value--scratched">{{
                plan.price
              }}</span>
            </li>
            <li class="plan__item">
              <span class="plan__free">
                <strong
                  ><span class="plan__free--value free-value">{{
                    plan.bonus
                  }}</span>
                  mensalidades grátis!</strong
                >
              </span>
            </li>
          </ul>
          <label class="plan__term">
            <input
              type="checkbox"
              name="termos"
              class="plan__checkbox terms-checkbox"
              data-submit-button-id="{{ 'btn-submit-' | append: plan.id }}"
            />
            <span class="plan__checkmark"></span>
            <p>
              Estou ciente que ao prosseguir, aceito os
              <a
                target="_blank"
                href="{{ site.baseurl | append: plan.terms }}"
                title="Termos e condições da campanha"
              >
                termos e condições da campanha
              </a>
            </p>
          </label>
        </article>
        <input type="hidden" name="origem" value="lp" />
        <input type="hidden" name="codigo" value="{{ plan.promocode }}" />
        <input
          type="submit"
          class="plan__button"
          value="{{ plan.button }}"
          id="{{ 'btn-submit-' | append: plan.id }}"
          disabled
        />
      </form>
      {% endfor %}
    </div>
  </div>
  <div class="plan__row">
    <div class="rules">
      <p class="rules__description">
        {{ page.expires_at }}
      </p>
    </div>
  </div>
</div>

</section>

<script src=“{{ site.baseurl }}/assets/plan.js”></script>