templates/Slivki/landing-subscription/index.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <meta name="google-site-verification" content="LZdJyY-ROJZoDrU1Akiha-FF7W_PmSiN4mJRSyWexog" />
  7.     <title>Landing</title>
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  9.     <link rel="stylesheet" href="/landing/css/style.css?v={{ subscription_landing_css_version }}">
  10.     <!-- CSS only -->
  11.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
  12.           integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  13.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  14.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
  15.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  16.     <!-- JS, Popper.js, and jQuery -->
  17.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  18.     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
  19.             integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
  20.             crossorigin="anonymous"></script>
  21.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
  22.             integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
  23.             crossorigin="anonymous"></script>
  24.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-viewport-checker/1.8.8/jquery.viewportchecker.min.js"></script>
  25.     <script src="https://cdn.jsdelivr.net/npm/jquery-menu-aim@1.1.0/jquery.menu-aim.min.js"></script>
  26.     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js?v=1"></script>
  27.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  28.     <script src="https://www.google.com/recaptcha/api.js"></script>
  29.     {% if not isMobileDevice() %}
  30.         <script src="/js/jquery.placeholder.js"></script>
  31.         <script src="/js/jquery.maskedinput.min.js"></script>
  32.         <script type="text/javascript" src="/js/jquery.cookie.min.js?v=1"></script>
  33.         <script type="text/javascript" src="/js/jquery.lazyload.js?v=1"></script>
  34.         <script src="/js/jquery.jscrollpane.min.js?v=2"></script>
  35.         <script src="/js/common.min.js?v={{ common_js_version }}"></script>
  36.         <script src="/js/common-old.min.js?v={{ common_old_js_version }}"></script>
  37.         <script src="/js/slivki_v1.js?v={{ slivki_v1_js_version }}"></script>
  38.     {% endif %}
  39.     <meta name="google-site-verification" content="33UhU8AvLA9eoT3WZfkzuOaxKNujSVAtcYZHf-pGToI" />
  41.     <!-- Google tag (gtag.js) -->
  42.     <script async src="https://www.googletagmanager.com/gtag/js?id=AW-978097094"></script>
  43.     <script>
  44.         window.dataLayer = window.dataLayer || [];
  45.         function gtag(){dataLayer.push(arguments);}
  46.         gtag('js', new Date());
  48.         gtag('config', 'AW-978097094');
  49.     </script>
  51.     <!-- Yandex.Metrika counter -->
  52.     <script type="text/javascript">
  53.         (function (m, e, t, r, i, k, a) {
  54.             m[i] = m[i] || function () {
  55.                 (m[i].a = m[i].a || []).push(arguments)
  56.             };
  57.             m[i].l = 1 * new Date();
  58.             k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
  59.         })
  60.         (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
  62.         ym(20933521, "init", {
  63.             clickmap: true,
  64.             trackLinks: true,
  65.             accurateTrackBounce: true,
  66.             webvisor: false
  67.         });
  68.     </script>
  69.     <noscript>
  70.         <div><img src="https://mc.yandex.ru/watch/20933521" style="position:absolute; left:-9999px;" alt=""/></div>
  71.     </noscript>
  72.     <!-- /Yandex.Metrika counter -->
  73. </head>
  74. <body style="overflow-x:hidden ">
  75. <script>
  76.     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  77.         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  78.         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  79.     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  80.     ga('create', 'UA-185332166-1', 'auto');
  81.     ga('send', 'pageview');
  82. </script>
  83. <div class="container mb-2 py-4">
  84.     {% set tarifMinimalID = 14 %}
  85.     {% set tarifLightID = 15 %}
  86.     {% set tarifClassicID = 16 %}
  87.     {% set tarifEasyYearID = 27 %}
  88.     {% set tarifLightYearID = 28 %}
  90.     <div class="row">
  91.         <div class="col-10">
  92.             <a class="logo-landing d-inline-block" href="https://www.slivki.by/">
  93.                 <img alt="" src="/landing/img/logo.svg"/>
  94.             </a>
  95.         </div>
  96.         <div class="col-2">
  97.             <div class="close-landing d-flex justify-content-end align-center cursor-pointer color-violet"
  98.                  onclick="history.back()">
  99.                 <p class="m-0">Закрыть</p>
  100.                 <p class="m-0 pl-2">X</p>
  101.             </div>
  102.         </div>
  103.     </div>
  104. </div>
  106. <div class="container">
  107.     <div class="row">
  108.         <div class="col">
  109.             <div class="button-tabs nav nav-tabs d-flex br-15 w-fit-content bg-violet-light border-none br-15 mt-4 mb-4">
  110.                 <a class="button-tab active cursor-pointer" data-id="subscriptionBtn" data-toggle="tab"
  111.                    href="#subscriptionTab">
  112.                     <p class="font-size-1000 align-self-center mb-0">Подписка</p>
  113.                 </a>
  114.                 <a class="button-tab cursor-pointer" data-id="packagesBtn" data-toggle="tab" href="#packagesTab">
  115.                     <p class="font-size-1000 align-self-center mb-0">Пакеты</p>
  116.                 </a>
  117.                 <a class="button-tab cursor-pointer" data-toggle="tab" href="#clubCards">
  118.                     <p class="font-size-1000 align-self-center mb-0">Клубная карта</p>
  119.                 </a>
  120.             </div>
  121.         </div>
  122.     </div>
  124.     <div class="tab-content">
  125.         <div id="packagesTab" class="tab-pane">
  126.             <div class="row">
  127.                 <div class="col">
  128.                     <h3 class="packages-title mb-3">Выбирайте оптимальный пакет для себя!</h3>
  129.                 </div>
  130.             </div>
  131.             <div class="row">
  132.                 <div class="col">
  133.                     <div class="packages-block p-4 br-04 mb-5">
  134.                         <div class="d-flex justify-content-between mb-3 sf-bold-font">
  135.                             <div class="pl-0">
  136.                                 <h5 class="font-size-1250 m-0 text-uppercase">Пакеты промокодов</h5>
  137.                                 <p class="color-violet">Без ежемесячных списаний</p>
  138.                             </div>
  139.                             <div>
  140.                                 <div class="d-flex color-violet text-right">
  141.                                     <span class="mr-1">⚡</span>
  142.                                     <p>Выбирайте оптимальный <br> пакет для себя!</p>
  143.                                 </div>
  144.                             </div>
  145.                         </div>
  146.                         <div class="mb-4">
  147.                             {% for batchCodesPlan in batchCodesPlans %}
  148.                                 {% if loop.index0 is divisible by (3) or loop.first %}
  149.                                     <div class="d-flex">
  150.                                 {% endif %}
  151.                                 <div class="packages-item d-flex custom-control custom-radio">
  152.                                     <input id="radioPack_{{ batchCodesPlan.getID() }}"
  153.                                            class="radio-pack form-check-input" name="radioPack" type="radio"
  154.                                            value="{{ batchCodesPlan.getID() }}"
  155.                                            data-price="{{ batchCodesPlan.getCost() }}" {{ loop.first ? ' checked' }}>
  156.                                     <label class="sf-font cursor-pointer" for="radioPack_{{ batchCodesPlan.getID() }}">
  157.                                         <div class="d-flex sf-bold-font font-size-1000 mb-1">
  158.                                             <span class="color-violet font-size-1125 mr-1">{{ batchCodesPlan.getCodesCount() }}</span>
  159.                                             <span>{{ ['промокод', 'промокода', 'промокодов']|plural(batchCodesPlan.getCodesCount()) }}</span>
  160.                                             {% if batchCodesPlan.isRecommended() %}
  161.                                                 <span class="d-flex align-items-center">
  162.                                                         <p style="font-size: 0.8rem; color: #6747E5; margin: 0 5px 0 10px;"> Рекомендуется</p>
  163.                                                         <img style="width: 1rem;" src="/images/stars.png" alt="stars">
  164.                                                     </span>
  165.                                             {% endif %}
  166.                                         </div>
  167.                                         <div class="sf-bold-font mb-1">
  168.                                             <span class="text-decoration-line-through color-red mr-1">{{ batchCodesPlan.getCostOld()|number_format(2, ',', '.') }} руб</span>
  169.                                             <span>{{ batchCodesPlan.getCost()|number_format(2, ',', '.') }} руб</span>
  170.                                         </div>
  171.                                         <p class="m-0" style="color: #C4C4C4">{{ batchCodesPlan.getDescription() }}</p>
  172.                                     </label>
  173.                                 </div>
  174.                                 {% if loop.index is divisible by (3) or loop.last %}
  175.                                     </div>
  176.                                 {% endif %}
  177.                             {% endfor %}
  178.                         </div>
  179.                         {% if batchCodesPlans|length > 0 %}
  180.                             <div class="d-flex flex-column w-100">
  181.                                 <div class="d-flex justify-content-between">
  182.                                     <div id="payBatchCodesLanding" class="button w-50 text-uppercase mr-3">Оформить
  183.                                     </div>
  184.                                 </div>
  185.                             </div>
  186.                         {% endif %}
  187.                     </div>
  188.                     <div class="packages-block-mobile">
  189.                         <h5 class="font-size-1250 m-0 text-uppercase">Пакеты промокодов</h5>
  190.                         <p class="color-violet">Без ежемесячных списаний</p>
  191.                         <div class="packages-items-mobile">
  192.                             {% for batchCodesPlan in batchCodesPlans %}
  193.                                 <a class="d-block packages-item-mobile w-100 mb-3"
  194.                                    href="{{ not app.user ? '/auth?path=' }}{{ path('profileSubscription', {'packID': batchCodesPlan.getID()}) }}">
  195.                                     <div class="position-relative br-04 b-sh-block p-3 mb-2">
  196.                                         <div class="text-black mb-3">
  197.                                             <div class="d-flex justify-content-between align-items-center mb-2">
  198.                                                 <p class="sf-bold-font m-0">
  199.                                                     <span class="font-size-2125 color-violet">{{ batchCodesPlan.getCodesCount() }}</span> {{ ['промокод', 'промокода', 'промокодов']|plural(batchCodesPlan.getCodesCount()) }}
  200.                                                 </p>
  201.                                                 {% if batchCodesPlan.isRecommended() %}
  202.                                                     <span class="d-flex align-items-center">
  203.                                                         <p class="sf-bold-font"
  204.                                                            style="font-size: 0.8rem; color: #6747E5; margin: 0 5px 0 10px;"> Рекомендуется</p>
  205.                                                         <img style="width: 1rem;" src="/images/stars.png" alt="stars">
  206.                                                     </span>
  207.                                                 {% endif %}
  208.                                             </div>
  209.                                             <p class="mb-2"
  210.                                                style="color: #C4C4C4;">{{ batchCodesPlan.getDescription() }}</p>
  211.                                             <h5 class="font-size-1125 sf-bold-font m-0 mb-4">
  212.                                                 <span class="text-decoration-line-through color-red mr-1 sf-font">{{ batchCodesPlan.getCostOld()|number_format(2, ',', '.') }} руб </span>
  213.                                                 {{ batchCodesPlan.getCost()|number_format(2, ',', '.') }} руб
  214.                                             </h5>
  215.                                         </div>
  216.                                         <div class="packages-item-mobile-btn font-size-1000 text-decoration-underline color-violet"
  217.                                              href="#">Оформить
  218.                                         </div>
  219.                                     </div>
  220.                                 </a>
  221.                             {% endfor %}
  222.                         </div>
  223.                     </div>
  224.                 </div>
  225.             </div>
  226.             <h4 class="mb-5">Пакеты промокодов без ежемесячных списаний!</h4>
  227.             <div class="packages-info-items">
  228.                 <div class="row">
  229.                     <div class="col-sm-12 col-md-4">
  230.                         <div class="packages-info-item d-flex flex-column align-items-center text-center">
  231.                             <img class="packages-info-item-img mb-2" src="/landing/img/packages-info-item-img-1.png"
  232.                                  alt="packages-info-item-img">
  233.                             <h5 class="packages-info-item-title font-size-1125 sf-bold-font mb-3">Без ежемесячных
  234.                                 списаний!</h5>
  235.                             <p class="packages-info-item-text">Вы платите только один раз. Ежемесяных списаний не
  236.                                 будет</p>
  237.                         </div>
  238.                     </div>
  239.                     <div class="col-sm-12 col-md-4">
  240.                         <div class="packages-info-item d-flex flex-column align-items-center text-center">
  241.                             <img class="packages-info-item-img mb-2" src="/landing/img/packages-info-item-img-2.png"
  242.                                  alt="packages-info-item-img">
  243.                             <h5 class="packages-info-item-title font-size-1125 sf-bold-font mb-3">Пакеты не
  244.                                 сгорают!</h5>
  245.                             <p class="packages-info-item-text">Пакеты хранятся на вашем балансе бессрочно</p>
  246.                         </div>
  247.                     </div>
  248.                     <div class="col-sm-12 col-md-4">
  249.                         <div class="packages-info-item d-flex flex-column align-items-center text-center">
  250.                             <img class="packages-info-item-img mb-2" src="/landing/img/packages-info-item-img-3.png"
  251.                                  alt="packages-info-item-img">
  252.                             <h5 class="packages-info-item-title font-size-1125 sf-bold-font mb-3">Чем больше, тем
  253.                                 выгоднее!</h5>
  254.                             <p class="packages-info-item-text">Вы сами выбираете сколько будет стоить промокод</p>
  255.                         </div>
  256.                     </div>
  257.                 </div>
  258.             </div>
  259.         </div>
  260.         <div id="subscriptionTab" class="tab-pane active">
  261.             <div class="row">
  262.                 <div class="col">
  263.                     <p class="font-size-1125 mb-3">Выберите самый выгодный<br>тарифный план!</p>
  264.                     <div class="row no-gutters mt-5 flex-mobile-landing">
  265.                         <div class="col-7">
  266.                             <p class="sf-bold-font tittle-subscription-page" style="line-height: 53px; font-size: 44px;">Экономьте еще больше <br> на покупке промокодов!</p>
  267.                         </div>
  268.                         <div class="col font-size-1125 pt-3">
  269.                             <p class="text-uppercase color-violet sf-bold-font font-size-2000">ПОДПИСКА</p>
  270.                             <h4 class="mb-4">от 19  копеек за промокод</h4>
  271.                             <ul class="pl-3">
  272.                                 <li style="color: #ffcc00;"><p class="text-black mb-2">Гибкий выбор тарифов для каждого!</p></li>
  273.                                 <li style="color: #ffcc00;"><p class="text-black mb-2">Специальные акции для подписчиков!</p></li>
  274.                                 <li style="color: #ffcc00;"><p class="color-violet mb-4">Семейный аккаунт -
  275.                                         добавляйте до 5 человек в одну оплату!</p></li>
  276.                             </ul>
  277.                         </div>
  278.                     </div>
  279.                     <div class="col m-2 p-0 mt-4 ">
  280.                         <div class="custom-control custom-checkbox">
  281.                             <input type="checkbox" class="custom-control-input" id="applyTermsOfUse" checked="checked">
  282.                             <label class="custom-control-label text-gray" for="applyTermsOfUse">Нажимая на кнопку Вы
  283.                                 принимаете <a
  284.                                         href="/polzovatelskoe-soglashenie-slivki-by" target="_blank"
  285.                                         style="color:#9c9c9c">Условия
  286.                                     подписки</a>. Подписка будет продлена автоматически.
  287.                             </label>
  288.                         </div>
  289.                     </div>
  290.                     <p class="sf-bold-font" style="line-height: 53px;font-size: 30px;margin-bottom: 0;">Тарифы на месяц</p>
  291.                 </div>
  292.             </div>
  293.             <div class="row">
  294.                 {% for subscriptionPlan in subscriptionPlanList %}
  295.                     {% if subscriptionPlan.period < 40 and subscriptionPlan.id != 33 and subscriptionPlan.id != 34 %}
  296.                         <div class="col-lg-4  my-3">
  297.                         <div class="position-relative d-flex flex-column justify-content-between p-4 br-04 b-sh-block h-100">
  298.                             <div>
  299.                                 <div class="{{ subscriptionPlan.isRecommended ? 'd-lg-flex' : 'd-flex' }} mb-3">
  300.                                     <h5 class="text-uppercase align-self-center{{ subscriptionPlan.isRecommended ? ' mb-0' }}">{{ subscriptionPlan.name }}</h5>
  301.                                     {% if subscriptionPlan.period > 1 %}
  302.                                         <p class="sf-bold ml-2 color-violet"
  303.                                            style="font-size: 0.7rem;">{{ subscriptionPlan.trialPeriod.period != null ? subscriptionPlan.trialPeriod.period : subscriptionPlan.period }} ДН</p>
  304.                                     {% endif %}
  305.                                 </div>
  306.                                 {% if subscriptionPlan.isRecommended %}
  307.                                     <img class="stars-img" src="/landing/img/stars.png"/>
  308.                                 {% endif %}
  309.                                 <h5>
  310.                                     <span class="sf-normal text-decoration-line-through color-red mr-1">{{ subscriptionPlan.oldPrice }} руб </span>
  311.                                     {{ subscriptionPlan.trialPeriod.price != null ? subscriptionPlan.trialPeriod.price : subscriptionPlan.price }} руб<span
  312.                                             class="sf-normal"> / за {{ subscriptionPlan.trialPeriod.period != null ? subscriptionPlan.trialPeriod.period : subscriptionPlan.period }} {{ ['день', 'дня', 'дней']|plural(subscriptionPlan.trialPeriod.period != null ? subscriptionPlan.trialPeriod.period : subscriptionPlan.period) }}</span>
  313.                                 </h5>
  314.                                 <p class="sf-bold font-size-1000">
  315.                                     {% if subscriptionPlan.numberOfPromoCodes > 0 and subscriptionPlan.getID() != 24 %}
  316.                                         <span class="color-violet"
  317.                                                  style="font-size: 1.4rem;">{{ subscriptionPlan.numberOfPromoCodes }}</span>
  318.                                         промокод{{ ['', 'а', 'ов']|plural(subscriptionPlan.numberOfPromoCodes) }}
  319.                                     {% else %}
  320.                                         <span class="color-violet" style="font-size: 1.4rem;">НЕОГРАНИЧЕННО</span>
  321.                                         промокодов
  322.                                     {% endif %}
  323.                                 </p>
  324.                                 {% if subscriptionPlan.getId() != tarifMinimalID and subscriptionPlan.getId() != tarifLightID %}
  325.                                     Добавляйте до {{ subscriptionPlan.getId() == tarifClassicID ? '3' : '5' }} человек в семейный аккаунт
  326.                                 {% endif %}
  327.                                     {% if subscriptionPlan.hasReclamation %}
  328.                                         <br>Без рекламы на сайте
  329.                                     {% endif %}</p>
  330.                             </div>
  331.                             <div>
  332.                                 <p style="color: #C4C4C4;">{{ subscriptionPlan.description|raw }}</p>
  333.                                 <div class="d-flex w-100">
  334.                                     <a data-id="{{ subscriptionPlan.id }}"
  335.                                        href="{{ not app.user ? '/auth?path=' }}{{ path('profileSubscription', {'show': subscriptionPlan.id}) }}"
  336.                                        style="height: 3.5rem"
  337.                                        class="button-tarif w-100 p-3 bg-violet border-0 br-04 text-white text-center">ПОДПИСАТЬСЯ</a>
  338.                                 </div>
  339.                             </div>
  340.                         </div>
  341.                     </div>
  342.                     {% endif %}
  343.                 {% endfor %}
  344.             </div>
  345.             <div class="row d-none">
  346.                 <div class="col">
  347.                     <div class="p-4 b-sh-block br-04">
  348.                         <div class="d-lg-flex">
  349.                             <div class="col pl-0">
  350.                                 <h5 class="text-uppercase">корпорация</h5>
  351.                             </div>
  352.                             <div>
  353.                                 <p class="color-violet">⚡ Система скидок для ваших сотрудников!</p>
  354.                             </div>
  355.                         </div>
  356.                         <p style="color: #C4C4C4;">для юридических лиц</p>
  358.                         <div class="d-lg-flex mx-2">
  359.                             {% for subscriptionPlan in subscriptionPlanForLegalEntitiesList %}
  360.                                 <div class="col mr-lg-5">
  361.                                     <div class="d-flex">
  362.                                         <input class="form-check-input" name="forLegalRadio" type="radio"
  363.                                                value="{{ subscriptionPlan.id }}"
  364.                                                id="defaultCheck{{ subscriptionPlan.id }}"{{ loop.first ? ' checked' }}>
  365.                                         <label class="sf-bold" for="defaultCheck{{ subscriptionPlan.id }}"><span
  366.                                                     class="sf-normal text-decoration-line-through color-red mr-1">{{ subscriptionPlan.oldPrice }} руб</span>
  367.                                             {{ subscriptionPlan.oldPrice }} руб <span
  368.                                                     class="sf-normal">/ за {{ subscriptionPlan.period > 1 ? subscriptionPlan.period }} {{ ['день', 'дня', 'дней']|plural(subscriptionPlan.period) }}</span></label>
  369.                                     </div>
  370.                                     <p class="sf-bold font-size-1000">
  371.                                         {% if subscriptionPlan.numberOfPromoCodes > 0 %}
  372.                                             <span class="color-violet"
  373.                                                      style="font-size: 1.4rem;">{{ subscriptionPlan.numberOfPromoCodes }}</span>
  374.                                             промокод{{ ['', 'а', 'ов']|plural(subscriptionPlan.numberOfPromoCodes) }}
  375.                                         {% else %}
  376.                                             <span class="color-violet" style="font-size: 1.4rem;">НЕОГРАНИЧЕННО</span>
  377.                                             промокодов
  378.                                         {% endif %}
  379.                                     </p>
  380.                                     <p style="color: #C4C4C4;">{{ subscriptionPlan.description|raw }}</p>
  381.                                 </div>
  382.                             {% endfor %}
  383.                         </div>
  384.                         <div class="d-lg-flex">
  385.                             <div class="col-lg-4 d-flex">
  386.                                 <a id="corporation" href="#"
  387.                                    class="w-100 p-3 bg-violet border-0 br-04 text-white text-center js-subscribe-for-legal-btn-landing"
  388.                                    style="height: 3.5rem">ПОДПИСАТЬСЯ</a>
  389.                             </div>
  390.                             <div class="col ml-lg-4 text-lg-left text-center mt-lg-0 mt-3">
  391.                                 <p>Форма оплаты: безналичная либо по карте<br>
  392.                                     Телефон для справок: <span class="sf-bold">+375 29 608-22-22</span>
  393.                                 </p>
  394.                             </div>
  395.                         </div>
  396.                     </div>
  397.                 </div>
  398.             </div>
  399.             <p class="sf-bold-font" style="line-height: 53px;font-size: 30px;margin-bottom: 0;">Тарифы на год</p>
  400.             <div class="row">
  401.                 {% for subscriptionPlan in subscriptionPlanList %}
  402.                     {% if subscriptionPlan.period > 40 and subscriptionPlan.id != 33 and subscriptionPlan.id != 34 %}
  403.                         <div class="col-lg-4  my-3">
  404.                             <div class="position-relative d-flex flex-column justify-content-between p-4 br-04 b-sh-block h-100">
  405.                                 <div>
  406.                                     <div class="{{ subscriptionPlan.isRecommended ? 'd-lg-flex' : 'd-flex' }} mb-3">
  407.                                         <h5 class="text-uppercase align-self-center{{ subscriptionPlan.isRecommended ? ' mb-0' }}">{{ subscriptionPlan.name }}</h5>
  408.                                         {% if subscriptionPlan.period > 1 %}
  409.                                             <p class="sf-bold ml-2 color-violet"
  410.                                                style="font-size: 0.7rem;">{{ subscriptionPlan.trialPeriod.period != null ? subscriptionPlan.trialPeriod.period : subscriptionPlan.period }} ДН</p>
  411.                                         {% endif %}
  412.                                     </div>
  413.                                     {% if subscriptionPlan.isRecommended %}
  414.                                         <img class="stars-img" src="/landing/img/stars.png"/>
  415.                                     {% endif %}
  416.                                     <h5>
  417.                                         <span class="sf-normal text-decoration-line-through color-red mr-1">{{ subscriptionPlan.oldPrice }} руб </span>
  418.                                         {{ subscriptionPlan.trialPeriod.price != null ? subscriptionPlan.trialPeriod.price : subscriptionPlan.price }} руб<span
  419.                                                 class="sf-normal"> / за {{ subscriptionPlan.trialPeriod.period != null ? subscriptionPlan.trialPeriod.period : subscriptionPlan.period }} {{ ['день', 'дня', 'дней']|plural(subscriptionPlan.trialPeriod.period != null ? subscriptionPlan.trialPeriod.period : subscriptionPlan.period) }}</span>
  420.                                     </h5>
  421.                                     <p class="sf-bold font-size-1000">
  422.                                         {% if subscriptionPlan.numberOfPromoCodes > 0 and subscriptionPlan.getID() != 24 %}
  423.                                             <span class="color-violet"
  424.                                                   style="font-size: 1.4rem;">{{ subscriptionPlan.numberOfPromoCodes }}</span>
  425.                                             промокод{{ ['', 'а', 'ов']|plural(subscriptionPlan.numberOfPromoCodes) }}
  426.                                         {% else %}
  427.                                             <span class="color-violet" style="font-size: 1.4rem;">НЕОГРАНИЧЕННО</span>
  428.                                             промокодов
  429.                                         {% endif %}
  430.                                     </p>
  431.                                     {% if subscriptionPlan.getId() != tarifMinimalID and subscriptionPlan.getId() != tarifLightID
  432.                                         and subscriptionPlan.getId() != tarifEasyYearID and subscriptionPlan.getId() != tarifLightYearID %}
  433.                                         Добавляйте до {{ subscriptionPlan.getId() == 29 ? '3' : '5' }} человек в семейный аккаунт
  434.                                     {% endif %}
  435.                                     {% if subscriptionPlan.hasReclamation %}
  436.                                     <br>Без рекламы на сайте
  437.                                     {% endif %}</p>
  438.                                 </div>
  439.                                 <div>
  440.                                     <p style="color: #C4C4C4;">{{ subscriptionPlan.description|raw }}</p>
  441.                                     <div class="d-flex w-100">
  442.                                         <a data-id="{{ subscriptionPlan.id }}"
  443.                                            href="{{ not app.user ? '/auth?path=' }}{{ path('profileSubscription', {'show': subscriptionPlan.id}) }}"
  444.                                            style="height: 3.5rem"
  445.                                            class="button-tarif w-100 p-3 bg-violet border-0 br-04 text-white text-center">ПОДПИСАТЬСЯ</a>
  446.                                     </div>
  447.                                 </div>
  448.                             </div>
  449.                         </div>
  450.                     {% endif %}
  451.                 {% endfor %}
  452.             </div>
  453.         </div>
  454.         <div id="clubCards" class="tab-pane">
  455.             <div class="container" style="padding-left: 0 !important;padding-right: 0 !important;">
  456.                 <p class="my-4" style="font-size: 16px;">
  457.                     <b>Инвестируйте в лояльность сотрудников!<br>
  458.                         Клубная карта Slivki уже ждет вас!</b>
  459.                 </p>
  461.                 <div class="d-flex flex-deriction-column-reverse-mob">
  462.                     <div class="col-sm-12 col-md-7 px-0">
  463.                         <div class="row justify-content-center no-gutters">
  464.                             <div class="col p-2">
  465.                                 <div class="subscription-card d-flex flex-column justify-content-between h-100 br-04 position-relative ">
  466.                                     <div class="subscription-info">
  467.                                         <div class="d-flex">
  468.                                             <img class="w-100" src="/images/img_club_card/min.png"/>
  469.                                         </div>
  470.                                         <h5 class="subscription-rate font-size-1125 sf-bold-font px-3"><span
  471.                                                     class="text-decoration-line-through color-red mr-1">108 руб </span>
  472.                                             48 руб <span class="sf-font">/ 30 дней</span></h5>
  473.                                         <p class="subscription-codes sf-bold-font font-size-1000 px-3">
  474.                                             <span class="color-violet font-size-1400">1000</span>
  475.                                             промокодов
  476.                                         </p>
  477.                                         <p class="my-2 px-3">
  478.                                             Ищете простой способ порадовать своих сотрудников? Клубная карта Slivki mini - это 1000 промокодов за 48р, предоставляющие вашим сотрудникам возможность экономить. Это недорогой способ повысить их лояльность и удовлетворенность. Покажите свою заботу о команде!
  479.                                         </p>
  480.                                     </div>
  481.                                     <div class="d-flex w-100">
  482.                                         <a data-id="33"
  483.                                            href="{{ not app.user ? '/auth?path=' }}{{ path('profileSubscription', {'show': 33}) }}"
  484.                                            style="height: 3.5rem"
  485.                                            class="button-tarif w-100 p-3 bg-violet border-0 br-04 text-white text-center">ПОДПИСАТЬСЯ</a>
  486.                                     </div>
  487.                                 </div>
  488.                             </div>
  489.                             <div class="col p-2">
  490.                                 <div class="subscription-card d-flex flex-column justify-content-between h-100 br-04 position-relative ">
  491.                                     <div class="subscription-info">
  492.                                         <div class="d-flex">
  493.                                             <img class="w-100" src="/images/img_club_card/max.png"/>
  494.                                         </div>
  495.                                         <h5 class="subscription-rate font-size-1125 sf-bold-font px-3"><span
  496.                                                     class="text-decoration-line-through color-red mr-1">1980 руб </span>
  497.                                             98 руб <span class="sf-font">/ 365 дней</span></h5>
  498.                                         <p class="subscription-codes sf-bold-font font-size-1000 px-3">
  499.                                             <span class="color-violet font-size-1400">10 000</span>
  500.                                             промокодов
  501.                                         </p>
  502.                                         <p class="my-2 px-3">
  503.                                             Хотите повысить мотивацию персонала и оптимизировать расходы? Клубная карта Slivki MAX - это инвестиция в вашу команду! За 98р ваши сотрудники получат доступ к 10000 промокодов. Это 1 копейка за промокод, дающая возможность экономить на всем: от питания до отдыха. Инвестируйте в благополучие своей команды!                                            </p>
  504.                                     </div>
  505.                                     <div class="d-flex w-100">
  506.                                         <a data-id="34"
  507.                                            href="{{ not app.user ? '/auth?path=' }}{{ path('profileSubscription', {'show': 34}) }}"
  508.                                            style="height: 3.5rem"
  509.                                            class="button-tarif w-100 p-3 bg-violet border-0 br-04 text-white text-center">ПОДПИСАТЬСЯ</a>
  510.                                     </div>
  511.                                 </div>
  512.                             </div>
  513.                         </div>
  514.                     </div>
  515.                     <div class="col px-0 margin-left-desk">
  516.                         <div class="features">
  517.                             <h2 class="color-violet my-0" style="font-family: 'SF Pro Rounded Bold'">КЛУБНАЯ
  518.                                 КАРТА</h2>
  519.                             <ul class="mt-1" style="line-height: 30px; font-size: 14px; padding: 0 27px;">
  520.                                 <li>Доступ к миру скидок</li>
  521.                                 <li>Выгодная цена</li>
  522.                                 <li>Гибкость выбора тарифов</li>
  523.                                 <li>Постоянный доступ к новым скидкам</li>
  524.                             </ul>
  525.                         </div>
  526.                         <div class="benefits">
  527.                             <h2 class="color-violet my-0" style="font-family: 'SF Pro Rounded Bold'">ПРЕИМУЩЕСТВА
  528.                                 ДЛЯ КОМПАНИЙ И HR-СПЕЦИАЛИСТОВ:</h2>
  529.                             <ul class="mt-1" style="font-size: 14px; padding: 0 27px;">
  530.                                 <li style="line-height: 17px;margin: 13px 0;"><b>Лояльность сотрудников:</b> клубная
  531.                                     карта – отличный способ повысить лояльность и удовлетворенность сотрудников.
  532.                                 </li>
  533.                                 <li style="line-height: 17px;margin: 13px 0;"><b>Мотивация персонала:</b>
  534.                                     предоставление доступа к скидкам повышает мотивацию сотрудников.
  535.                                 </li>
  536.                                 <li style="line-height: 17px;margin: 13px 0;"><b>Социальная ответственность:</b> вы
  537.                                     можете показать свою заботу о сотрудниках, предоставив им возможность экономить
  538.                                     на повседневных покупках.
  539.                                 </li>
  540.                                 <li style="line-height: 17px;margin: 13px 0;"><b>Простой и доступный способ:</b> это
  541.                                     простой и доступный способ предоставить сотрудникам дополнительный бонус.
  542.                                 </li>
  543.                             </ul>
  544.                         </div>
  545.                     </div>
  546.                 </div>
  547.             </div>
  548.         </div>
  549.     </div>
  551. </div>
  552. <input type="hidden" id="subscriptionPath" value="{{ not app.user ? '/auth?path=' }}/profile/subscription/manage?show=">
  553. <input type="hidden" id="offerID" value="{{ offerID }}">
  554. <input type="hidden" id="codesCount" value="{{ codesCount }}">
  555. {% if demoSubscription %}
  556.     {% set isLanding = true %}
  557.     <div id="popupDemoSubscr" class="modal modal--small fade">
  558.         <div class="modal-dialog modal-dialog-centered">
  559.             <div class="modal-content">
  560.                 <div class="modal-header">
  561.                     <div class="close" data-dismiss="modal"></div>
  562.                     <p class="modal-title sf-bold-font mt-4 font-size-1000">Попробуйте преимущества подписки!</p>
  563.                 </div>
  564.                 <div class="p-3 m-4 mt-4 b-sh-block br-04 position-relative ">
  565.                     <div class="d-flex mb-4">
  566.                         <h5 class="text-uppercase align-self-center m-0 font-size-1250 sf-bold-font">{{ demoSubscription.getName() }}</h5>
  567.                         <p class="ml-lg-2 sf-bold-font color-violet"
  568.                            style="font-size: 0.7rem; line-height: 1rem;">{{ demoSubscription.trialPeriod.period }} ДН</p>
  569.                     </div>
  570.                     <h5 class="font-size-1125 sf-bold-font mb-3"><span
  571.                                 class="text-decoration-line-through color-gray mr-1 sf-font font-size-1000"
  572.                                 style="text-decoration-color:rgba(0, 0, 0, 0.3);">{{ demoSubscription.oldPrice }} руб</span>
  573.                         {{ demoSubscription.trialPeriod.price }} руб<span
  574.                                 class="sf-font font-size-1000"> / {{ demoSubscription.trialPeriod.period }} дней</span>
  575.                     </h5>
  576.                     <p class="sf-bold-font mb-4">
  577.                         <span class="color-violet font-size-1600">{{ demoSubscription.trialPeriod.numberOfPromoCodes}}</span>
  578.                         промокод{{ ['', 'а', 'ов']|plural(demoSubscription.trialPeriod.numberOfPromoCodes) }}
  579.                     </p>
  580.                     <p class="mt-2 min-height sf-font mb-0 font-size-0900">{{ demoSubscription.recommendedDescription }}</p>
  581.                     <p class="sf-font color-gray"
  582.                        style="font-size: 0.9em;">{{ demoSubscription.description }}</p>
  583.                     <div class="button-tarif d-flex w-100 mt-2 sf-font">
  584.                         {% set href = '#' %}
  585.                         {% if isLanding %}
  586.                             {% set href = path('profileSubscription', {'show': demoSubscription.id}) %}
  587.                             {% if not app.user %}
  588.                                 {% set href = '/auth?path=' ~ href %}
  589.                             {% endif %}
  590.                         {% endif %}
  591.                         <a data-id="{{ demoSubscription.id }}" data-price="{{ demoSubscription.oldPrice }}"
  592.                            data-period="{{ demoSubscription.period }}" href="{{ href }}"
  593.                            style="height: 3.5rem; line-height: 3.5rem;"
  594.                            class="w-100 p-0 bg-violet border-0 br-04 text-white text-center js-subscribe-btn-popup{{ not isLanding ? ' js-subscribe-btn' }}">
  595.                             ПОДПИСАТЬСЯ
  596.                         </a>
  597.                     </div>
  598.                 </div>
  599.                 <div class="col m-2 p-2 pl-3">
  600.                     <div class="custom-control custom-checkbox font-size-0900">
  601.                         <input type="checkbox" class="custom-control-input" id="applyTermsOfUsePopup" checked="checked">
  602.                         <label class="custom-control-label text-gray" for="applyTermsOfUsePopup">Нажимая на кнопку Вы
  603.                             принимаете <a href="/polzovatelskoe-soglashenie-slivki-by" target="_blank"
  604.                                           style="color:#9c9c9c">Условия подписки</a>.</label>
  605.                     </div>
  606.                 </div>
  607.             </div>
  608.         </div>
  609.     </div>
  610. {% endif %}
  611. {% include 'Slivki/delivery/modal/questions.html.twig' %}
  612. {% include 'Slivki/delivery/modal/questionsSuccess.html.twig' %}
  613. {% include 'Slivki/popups/subscription-bonus.html.twig' %}
  614. <div id="infoPopup" class="modal fade">
  615.     <div class="modal-dialog">
  616.         <div class="modal-content">
  617.             <h4 class="info-popup-title" style="margin-bottom: 2rem;">Информация по условиям бонусов от партнеров</h4>
  618.             <div style="margin-bottom: 2rem;">
  619.                 <div style="margin-bottom: 2rem;">
  620.                     <h5>SLIVKI & Везуха</h5>
  621.                     <p>Всем новым пользователям, при оформлении подписки на Slivki.by,
 Везуха дарит 8 рублей при
  622.                         регистрации.</p>
  623.                     <p style="color: rgba(0, 0, 0, 0.6);">Что такое каршеринг Везуха? Везуха – это ваш автомобиль, но
  624.                         только тогда, когда он нужен. Это удобная аренды автомобиля без водителя со свободной зоной
  625.                         парковки. На чём я поеду в Везухе? Автопарк в основном представлен просторными Kia Rio X-line с
  626.                         коробкой автомат, кондиционером и теплыми опциями, с кабелем для зарядки устройств, мультимедиа
  627.                         и бустерами для маленьких пассажиров. Все автомобили заправлены, помыты, обслужены и
  628.                         застрахованы - вам необходимо только выбрать ближайшую в приложении и отправиться в путь. Куда
  629.                         можно ехать на Везухе? В любую точку Беларуси, главное вернуться в Минск и завершить аренду в
  630.                         разрешенных зонах, которые видны в приложении. Сколько все это стоит? Выбирайте наиболее
  631.                         подходящий для вашей поездки тариф: для города и коротких аренд – умный тариф “Минуты и
  632.                         километры” для более длительных подойдут абонементы на 70 минут, 3, 6 или 12 часов. для поездок
  633.                         “далеко и надолго” предусмотрены - суточный, 50 часовой или недельный абонементы Кто может
  634.                         воспользоваться сервисом? Граждане Республики Беларусь и Российской Федерации, достигшие 20 лет
  635.                         со стажем вождения от 1 года.</p>
  636.                 </div>
  637.                 <div class="subscription-close" data-dismiss="modal"></div>
  638.             </div>
  639.         </div>
  640.     </div>
  641.     <script src="/landing/js/main.js?v=5"></script>
  642.     <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
  643.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-viewport-checker/1.8.8/jquery.viewportchecker.min.js"></script>
  644.     <script>
  645.         $('.single-item').slick({
  646.             dots: false,
  647.             infinite: false,
  648.             speed: 600,
  649.             slidesToShow: 3,
  650.             slidesToScroll: 1,
  651.             adaptiveHeight: true,
  652.             arrows: false,
  653.             responsive: [
  654.                 {
  655.                     breakpoint: 1000,
  656.                     settings: {
  657.                         slidesToShow: 2,
  658.                     }
  659.                 },
  660.                 {
  661.                     breakpoint: 750,
  662.                     settings: {
  663.                         slidesToShow: 1.8,
  664.                     }
  665.                 },
  667.                 {
  668.                     breakpoint: 600,
  669.                     settings: {
  670.                         slidesToShow: 1.1,
  671.                     }
  672.                 }
  673.             ]
  674.         });
  676.         $('#deliveryFeedbackSubmit').click(function () {
  677.             getRecaptcha();
  678.             let message = $('.js-delivery-feedback-form textarea[name="deliveryFeedback"]').val();
  679.             if (message.length == 0) {
  680.                 $('#questionsModal').modal('hide');
  681.                 $('#collapseDeliveryQuestion').collapse('hide');
  682.                 showNewMessageBox('Ошибка', 'Введите сообщение');
  683.                 return;
  684.             }
  685.             let data = 'name=' + $('.js-delivery-feedback-form input[name="deliveryFeedbackName"]').val() + '&email=' + $('.js-delivery-feedback-form input[name="deliveryFeedbackEmail"]').val() +
  686.                 '&message=' + message;
  687.             $.post('/delivery/feedback/' + $('#offerID').val(), data);
  688.             $('#collapseDeliveryQuestion').collapse('hide');
  689.             $('#questionsModal').modal('hide');
  690.             $('.multi-collapse').collapse();
  691.             $('#questionsSuccessModal').modal();
  692.         });
  694.         $('.js-subscribe-for-legal-btn-landing').on('click', function () {
  695.             let checkedCheckbox = $('[name=forLegalRadio]:checked');
  696.             if (!checkedCheckbox.length) {
  697.                 alert('please, select subscription plan');
  698.                 return false;
  699.             }
  700.             window.location.href = $('#subscriptionPath').val() + checkedCheckbox.val();
  701.             return false;
  702.         });
  703.         $('.packages-subscription-block .button').on('click', function () {
  704.             let that = $(this);
  705.             let thatId = that.attr('id');
  707.             $('.button-tab').each(function (index, item) {
  708.                 let that = $(item);
  709.                 let tabId = that.attr('data-id');
  710.                 if (thatId === tabId) {
  711.                     that.trigger('click');
  712.                 }
  713.             });
  715.             $('html, body').animate({scrollTop: $('.button-tabs').offset().top - 50}, 100);
  716.         });
  717.         $('#payBatchCodesLanding').on('click', function () {
  718.             let planId = $('.radio-pack:checked').val();
  719.             window.location.href = '/auth?path=/profile/subscription/manage?packID=' + planId;
  720.         });
  721.     </script>
  723.     <!-- Yandex.Metrika counter -->
  724.     <script type="text/javascript" >
  725.         (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
  726.             m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
  727.         (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
  729.         ym(20933521, "init", {
  730.             clickmap:true,
  731.             trackLinks:true,
  732.             accurateTrackBounce:true
  733.         });
  734.     </script>
  735.     <noscript><div><img src="https://mc.yandex.ru/watch/20933521" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
  736.     <!-- /Yandex.Metrika counter -->
  737. </div>
  738. </body>
  739. </html>