templates/pages/how_it_works/how_it_works.html.twig line 1

Open in your IDE?
  1. {% extends '@App/base.html.twig' %}
  3. {% block additional_stylesheets %}
  4.     <style>
  5.         li.active.group a {
  6.             background: {{ companyStyles.linkTextColor }} !important;
  7.         }
  8.     </style>
  9. {% endblock %}
  10. {% block content %}
  11.     {% if isMobile %}
  12.         <figure class="mt-[10px] lg:mt-[40px]">
  13.             {% include '@App/shared/ui/backButton/backButton.html.twig' %}
  15.             <div class="mt-[14px] p-[18px] max-w-max md:max-w-[600px] mx-auto rounded-[24px] bg-white">
  16.                 <div class="text-[24px] font-semibold mb-[32px]"
  17.                      style="{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::BLOCK_TITLE_STYLES')) }}"
  18.                 >{% trans from 'how_it_works' %}Як працює eSim?{% endtrans %}</div>
  19.                 <p class="text-[#1B2028] font-medium text-{{ companyStyles.descriptionTextAlign }} text-[16px] mb-[28px] leading-[22px]">{% trans from 'how_it_works' %}eSIM - це звичайний номер, але без фізичної SIM-картки{% endtrans %}</p>
  20.                 <p class="text-[#1B2028] font-semibold text-[16px] mb-[12px] leading-[22px]">{% trans from 'how_it_works' %}Опис Віртуальна eSIM для заміни звичайної SIM-карти {% endtrans %}</p>
  21.                 <p style="color: {{ companyStyles.linkTextColor }}" class="font-semibold text-[14px] leading-[18px] mb-[5px]">{% trans from 'how_it_works' %}Замінюйте свою звичайну SIM-карту на віртуальну та користуйтесь усіма перевагами eSIM{% endtrans %}</p>
  22.                 <p class="text-[#5B5B5B] font-semibold text-[14px] leading-[18px] mb-[15px]">{% trans from 'how_it_works' %}eSIM – віртуальна SIM-карта, яка вбудована у ваш смартфон. eSIM дозволяє активувати ваш вже діючий тариф без використання фізичної SIM-карти. Технологія eSIM дозволяє переключатись між власним та робочим номерами, при цьому немає необхідності у фізичній заміні SIM-карт в mono-SIM смартфоні. Електронна SIM-картка – eSIM – це просто, зручно та безпечно.{% endtrans %}</p>
  23.                 <p class="text-[#1B2028] font-semibold text-[14px] leading-[18px] mb-[15px]">{% trans from 'how_it_works' %}Список девайсів з підтримкою eSIM Станом на 06.10.2023 eSIM підтримують: {% endtrans %}</p>
  25.                 <div data-accordion="keep">
  27.                     <h2 id="accordion-collapse-heading-1" class="peer">
  28.                         <button type="button" class="js--accordionBtn group text-[14px] mt-[6px] flex items-center justify-start w-full font-semibold text-gray-500 gap-[16px]" data-accordion-target="#accordion-collapse-body-1" aria-expanded="false" aria-controls="accordion-collapse-body-1">
  29.                             <svg class="w-[34px] min-w-[34px] h-[34px]">
  30.                                 <use href="{{ asset('build/sprite.svg#apple_icon') }}"></use>
  31.                             </svg>
  32.                             <span class="pointer-events-none">Apple</span>
  33.                             <svg data-accordion-icon class="pointer-events-none bg-[#EDEDF1] w-[40px] h-[40px] p-[13px] rounded-full ml-auto group-aria-expanded:rotate-0 rotate-180 shrink-0 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
  34.                                 <path stroke="{{ companyStyles.linkTextColor }}" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
  35.                             </svg>
  36.                         </button>
  37.                     </h2>
  38.                     <div id="accordion-collapse-body-1" class="mt-[4px] peer-[.open]:block hidden" aria-labelledby="accordion-collapse-heading-1">
  39.                         <div class="prose">
  40.                             <ul>
  41.                                 <li>iPhone 11/12/13/14/15/XR/XS</li>
  42.                                 <li>iPhone 11 Pro/12 Pro/13 Pro/14 Pro/15 Pro</li>
  43.                                 <li>iPhone 11 Pro Max/12 Pro Max/13 Pro Max</li>
  44.                                 <li>iPhone 14 Pro Max/15 Pro Max</li>
  45.                                 <li>iPhone 14/15 Plus</li>
  46.                                 <li>iPhone XS Max</li>
  47.                                 <li>iPhone 12 mini/13 mini</li>
  48.                                 <li>iPhone SE 2/SE 3 (2022)</li>
  49.                                 <li>iPad – 7, 8, 9 generation</li>
  50.                                 <li>iPad Air – 3, 4, 5 generation</li>
  51.                                 <li>iPad Pro 11” – 1, 2, 3 generation</li>
  52.                                 <li>iPad Pro 12.9” – 3, 4, 5 generation</li>
  53.                             </ul>
  54.                         </div>
  55.                     </div>
  56.                 </div>
  57.                 <div data-accordion="keep">
  58.                     <h2 id="accordion-collapse-heading-2" class="peer">
  59.                         <button type="button" class="js--accordionBtn group text-[14px] mt-[6px] flex items-center justify-start w-full font-semibold text-gray-500 gap-[16px]" data-accordion-target="#accordion-collapse-body-1" aria-expanded="false" aria-controls="accordion-collapse-body-2">
  60.                             <svg class="w-[34px] min-w-[34px] h-[34px]">
  61.                                 <use href="{{ asset('build/sprite.svg#google_icon') }}"></use>
  62.                             </svg>
  63.                             <span class="pointer-events-none">Google</span>
  64.                             <svg data-accordion-icon class="pointer-events-none bg-[#EDEDF1] w-[40px] h-[40px] p-[13px] rounded-full ml-auto group-aria-expanded:rotate-0 rotate-180 shrink-0 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
  65.                                 <path stroke="{{ companyStyles.linkTextColor }}" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
  66.                             </svg>
  67.                         </button>
  68.                     </h2>
  69.                     <div id="accordion-collapse-body-2" class="mt-[4px] peer-[.open]:block hidden" aria-labelledby="accordion-collapse-heading-2">
  70.                         <div class="prose">
  71.                             <ul>
  72.                                 <li>Pixel 3, Pixel 3 XL, Pixel 3a, Pixel 3a XL</li>
  73.                                 <li>Pixel 4, Pixel 4 XL, Pixel 4a, 5а</li>
  74.                                 <li>Pixel 5</li>
  75.                                 <li>Pixel 7, Pixel 7 Pro</li>
  76.                                 <li>Pixel 7a</li>
  77.                                 <li>Pixel 6a</li>
  78.                             </ul>
  79.                         </div>
  80.                     </div>
  81.                 </div>
  82.                 <div data-accordion="keep">
  83.                     <h2 id="accordion-collapse-heading-3" class="peer">
  84.                         <button type="button" class="js--accordionBtn group text-[14px] mt-[6px] flex items-center justify-start w-full font-semibold text-gray-500 gap-[16px]" data-accordion-target="#accordion-collapse-body-3" aria-expanded="false" aria-controls="accordion-collapse-body-3">
  85.                             <svg class="w-[34px] min-w-[34px] h-[34px]">
  86.                                 <use href="{{ asset('build/sprite.svg#samsung_icon') }}"></use>
  87.                             </svg>
  88.                             <span class="pointer-events-none">Samsung</span>
  89.                             <svg data-accordion-icon class="pointer-events-none bg-[#EDEDF1] w-[40px] h-[40px] p-[13px] rounded-full ml-auto group-aria-expanded:rotate-0 rotate-180 shrink-0 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
  90.                                 <path stroke="{{ companyStyles.linkTextColor }}" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
  91.                             </svg>
  92.                         </button>
  93.                     </h2>
  94.                     <div id="accordion-collapse-body-3" class="mt-[4px] peer-[.open]:block hidden" aria-labelledby="accordion-collapse-heading-3">
  95.                         <div class="prose">
  96.                             <ul>
  97.                                 <li>Galaxy S23, Galaxy S23 Plus, Galaxy S23 Ultra</li>
  98.                                 <li>Galaxy S22, Galaxy S22 Plus, Galaxy S22 Ultra</li>
  99.                                 <li>Galaxy S21, Galaxy S21 Plus, Galaxy S21 Ultra</li>
  100.                                 <li>Galaxy S20, Galaxy S20 Plus, Galaxy S20 Ultra</li>
  101.                                 <li>Galaxy Note 20/Note 20 Ultra</li>
  102.                                 <li>Galaxy Fold, Galaxy Z Fold 2, Galaxy Z Flip</li>
  103.                                 <li>Galaxy Z Fold 3, Galaxy Z Flip 3</li>
  104.                                 <li>Galaxy Fold4, Galaxy Flip4</li>
  105.                             </ul>
  106.                         </div>
  107.                     </div>
  108.                 </div>
  109.                 <div data-accordion="keep">
  110.                     <h2 id="accordion-collapse-heading-4" class="peer">
  111.                         <button type="button" class="js--accordionBtn group text-[14px] mt-[6px] flex items-center justify-start w-full font-semibold text-gray-500 gap-[16px]" data-accordion-target="#accordion-collapse-body-4" aria-expanded="false" aria-controls="accordion-collapse-body-4">
  112.                             <svg class="w-[34px] min-w-[34px] h-[34px]">
  113.                                 <use href="{{ asset('build/sprite.svg#moto_icon') }}"></use>
  114.                             </svg>
  115.                             <span class="pointer-events-none">Motorola</span>
  116.                             <svg data-accordion-icon class="pointer-events-none bg-[#EDEDF1] w-[40px] h-[40px] p-[13px] rounded-full ml-auto group-aria-expanded:rotate-0 rotate-180 shrink-0 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
  117.                                 <path stroke="{{ companyStyles.linkTextColor }}" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
  118.                             </svg>
  119.                         </button>
  120.                     </h2>
  121.                     <div id="accordion-collapse-body-4" class="mt-[4px] peer-[.open]:block hidden" aria-labelledby="accordion-collapse-heading-4">
  122.                         <div class="prose">
  123.                             <ul>
  124.                                 <li>Razr</li>
  125.                                 <li>Razr 5G</li>
  126.                             </ul>
  127.                         </div>
  128.                     </div>
  129.                 </div>
  130.                 <div data-accordion="keep">
  131.                     <h2 id="accordion-collapse-heading-5" class="peer">
  132.                         <button type="button" class="js--accordionBtn group text-[14px] mt-[6px] flex items-center justify-start w-full font-semibold text-gray-500 gap-[16px]" data-accordion-target="#accordion-collapse-body-5" aria-expanded="false" aria-controls="accordion-collapse-body-5">
  133.                             <svg class="w-[34px] min-w-[34px] h-[34px]">
  134.                                 <use href="{{ asset('build/sprite.svg#huawei_icon') }}"></use>
  135.                             </svg>
  136.                             <span class="pointer-events-none">Huawei</span>
  137.                             <svg data-accordion-icon class="pointer-events-none bg-[#EDEDF1] w-[40px] h-[40px] p-[13px] rounded-full ml-auto group-aria-expanded:rotate-0 rotate-180 shrink-0 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
  138.                                 <path stroke="{{ companyStyles.linkTextColor }}" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
  139.                             </svg>
  140.                         </button>
  141.                     </h2>
  142.                     <div id="accordion-collapse-body-5" class="mt-[4px] peer-[.open]:block hidden" aria-labelledby="accordion-collapse-heading-5">
  143.                         <div class="prose">
  144.                             <ul>
  145.                                 <li>P40</li>
  146.                                 <li>P40 Pro Mate 40, Mate 40 Pro</li>
  147.                                 <li>Mate Xs</li>
  148.                             </ul>
  149.                         </div>
  150.                     </div>
  151.                 </div>
  152.                 <div data-accordion="keep">
  153.                     <h2 id="accordion-collapse-heading-6" class="peer">
  154.                         <button type="button" class="js--accordionBtn group text-[14px] mt-[6px] flex items-center justify-start w-full font-semibold text-gray-500 gap-[16px]" data-accordion-target="#accordion-collapse-body-6" aria-expanded="false" aria-controls="accordion-collapse-body-6">
  155.                             <svg class="w-[34px] min-w-[34px] h-[34px]">
  156.                                 <use href="{{ asset('build/sprite.svg#other_icon') }}"></use>
  157.                             </svg>
  158.                             <span class="pointer-events-none">Others</span>
  159.                             <svg data-accordion-icon class="pointer-events-none bg-[#EDEDF1] w-[40px] h-[40px] p-[13px] rounded-full ml-auto group-aria-expanded:rotate-0 rotate-180 shrink-0 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
  160.                                 <path stroke="{{ companyStyles.linkTextColor }}" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
  161.                             </svg>
  162.                         </button>
  163.                     </h2>
  164.                     <div id="accordion-collapse-body-6" class="mt-[4px] peer-[.open]:block hidden" aria-labelledby="accordion-collapse-heading-6">
  165.                         <div class="prose">
  166.                             <ul>
  167.                                 <li>Microsoft Surface Duo</li>
  168.                                 <li>Xiaomi 12T Pro</li>
  169.                                 <li>Xiaomi 13T</li>
  170.                                 <li>Xiaomi 13T Pro </li>
  171.                                 <li>Xiaomi 13 Lite</li>
  172.                                 <li>Xiaomi 13</li>
  173.                                 <li>Xiaomi 13 Pro (глобальні версії)</li>
  174.                                 <li>Nokia G60</li>
  175.                             </ul>
  176.                         </div>
  177.                     </div>
  178.                 </div>
  180.                 <p class="text-[#1B2028] font-semibold text-[14px] leading-[18px] mt-[15px] mb-[15px]">{% trans from 'how_it_works' %}Ми гарантуємо коректну роботу eSIM лише на сертифікованих в Україні пристроях. {% endtrans %}</p>
  181.                 <p class="text-[#1B2028] font-semibold text-[14px] leading-[18px] mb-[20px]">{% trans from 'how_it_works' %}Встановити eSIM в смарт-годинники на даний момент неможливо.{% endtrans %}</p>
  183.                 <p class="text-[#1B2028] font-semibold text-[16px] leading-[18px] mb-[15px]">{% trans from 'how_it_works' %}Переваги eSIM Віртуальна SIM{% endtrans %}</p>
  184.                 <div class="prose">
  185.                     <ul>
  186.                         <li class="leading-[18px] mb-[7px]">{% trans from 'how_it_works' %}Розширте можливості свого mono-SIM девайса – використовуйте його з 2 SIM картами.{% endtrans %}</li>
  187.                         <li class="leading-[18px] mb-[7px]">{% trans from 'how_it_works' %}Просте підключення. Купіть eSIM в інтернет-магазині, отримайте детальну інструкцію і самостійно налаштуйте свою eSIM{% endtrans %}</li>
  188.                         <li class="leading-[18px] mb-[7px]">{% trans from 'how_it_works' %}Безпека. Завдяки eSIM ваші дані більш захищені, бо віртуальну карту неможливо викрасти чи загубити{% endtrans %}</li>
  189.                         <li class="leading-[18px] mb-[7px]">{% trans from 'how_it_works' %}Турбота про природу. eSIM – це повністю цифрова SIM-карта, жодного пластику. {% endtrans %}</li>
  190.                     </ul>
  191.                 </div>
  193.                 <p class="text-[#1B2028] font-semibold text-[16px] leading-[18px] mt-[20px] mb-[15px]">{% trans from 'how_it_works' %}Як скористатися?{% endtrans %}</p>
  194.                 <div class="prose">
  195.                     <ul>
  196.                         <li class="leading-[18px] mb-[7px]">{% trans from 'how_it_works' %}Перевірте ваш пристрій на підтримку технології eSIM (у списку девайсів або на сайті виробника вашого пристрою).{% endtrans %}</li>
  197.                         <li class="leading-[18px] mb-[7px]">{% trans from 'how_it_works' %}Придбайте eSIM для заміни SIM.{% endtrans %}</li>
  198.                         <li class="leading-[18px] mb-[7px]">{% trans from 'how_it_works' %}Замініть SIM на eSIM, дотримуючись інструкції в електронному ваучері, який надійде вам на електронну пошту після онлайн-оплати.{% endtrans %}</li>
  199.                     </ul>
  200.                 </div>
  201.                 <p class="text-[#1B2028] font-semibold text-[16px] leading-[18px] mt-[20px] mb-[15px]">{% trans from 'how_it_works' %}Як встановити eSIM?{% endtrans %}</p>
  202.                 <div class="rounded-[16px] p-[18px] border border-[#E2E2E9] bg-[#F7F7FA]">
  203.                     <nav id="tabs" class="flex list-none justify-between rounded-full bg-[#E2E2E9] border-[#A0A4AE] p-[4px]">
  204.                         <li class="active group w-full list-none text-center font-medium text-[16px]"><a href="#apple" class="py-[5px] block group-[.active]:rounded-full group-[.active]:text-white">Apple (IOS)</a></li>
  205.                         <li class="group list-none w-full text-center font-medium text-[16px]"><a href="#android" class="py-[5px] block group-[.active]:rounded-full group-[.active]:text-white">Android</a></li>
  206.                     </nav>
  208.                     <section id="tab-contents">
  209.                         <div id="apple" class="tab-contents block opacity-100 mt-[24px]">
  210.                             <div>
  211.                                 <ol class="flex flex-col gap-[10px]">
  212.                                     <li class="before:content-['1'] before:text-white before:text-[14px] flex
  213.                                         before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
  214.                                         before:mr-[8px]">
  215.                                         <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
  216.                                             {% trans from 'how_it_works' %}Перейдіть у розділ Налаштування.{% endtrans %}
  217.                                         </p>
  218.                                     </li>
  219.                                     <img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/apple1.png" alt="">
  220.                                     <li class="before:content-['2'] before:text-white before:text-[14px] flex
  221.                                         before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
  222.                                         before:mr-[8px]">
  223.                                         <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
  224.                                             {% trans from 'how_it_works' %} Виберіть «Стільникові дані» або «Мобільні дані».{% endtrans %}
  225.                                         </p>
  226.                                     </li>
  228.                                     <img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/apple2.png" alt="">
  229.                                     <li class="before:content-['3'] before:text-white before:text-[14px] flex
  230.                                         before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
  231.                                         before:mr-[8px]">
  232.                                         <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
  233.                                             {% trans from 'how_it_works' %}Виберіть «Додати стільниковий тариф».{% endtrans %}
  234.                                         </p>
  235.                                     </li>
  237.                                     <img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/apple3.png" alt="">
  239.                                     <li class="before:content-['4'] before:text-white before:text-[14px] flex
  240.                                         before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
  241.                                         before:mr-[8px]">
  242.                                         <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
  243.                                             {% trans from 'how_it_works' %}За допомогою мобільного пристрою відскануйте QR-код.{% endtrans %}
  244.                                         </p>
  245.                                     </li>
  246.                                     <img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/apple4.png" alt="">
  248.                                     <li class="before:content-['5'] before:text-white before:text-[14px] flex
  249.                                         before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
  250.                                         before:mr-[8px]">
  251.                                         <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
  252.                                             {% trans from 'how_it_works' %}Підтвердьте вибір стільникового оператора натиснувши «Додати стільниковий тариф».{% endtrans %}
  253.                                         </p>
  254.                                     </li>
  255.                                     <li class="before:content-['6'] before:text-white before:text-[14px] flex
  256.                                         before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
  257.                                         before:mr-[8px]">
  258.                                         <div>
  259.                                             <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
  260.                                                 {% trans from 'how_it_works' %}Після підключення eSIM від Vodafone наберіть{% endtrans %} <a style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline" href="tel:111">111</a> або <a style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline" href="tel:0 800 400 111">0 800 400 111</a>. {% trans from 'how_it_works' %}Ваш номер і тариф активуються. Потім дочекайтеся голосового привітання і завершіть дзвінок.{% endtrans %}
  261.                                             </p>
  262.                                             <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px]">
  263.                                                 {% trans from 'how_it_works' %}Для активації номера в роумінгу наберіть безкоштовний номер{% endtrans %}
  264.                                                 <a style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline" href="tel:+380 500 400 111">+380 500 400 111</a>.
  265.                                             </p>
  266.                                             <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px]">
  267.                                                 {% trans from 'how_it_works' %}Дочекайтеся SMS про активацію номера та підключення пакета послуг на місяць в обраному тарифі (перший місяць уже включений) і користуйтеся всіма перевагами мобільного зв’язку Vodafone:{% endtrans %}
  268.                                             </p>
  269.                                             <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px]">
  270.                                                 {% trans from 'how_it_works' %}Після підключення eSIM від lifecell оберіть та підключіть тарифний план у зручний для вас спосіб:{% endtrans %}
  271.                                             </p>
  272.                                             <ul class="list-disc text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px] ml-[24px]">
  273.                                                 <li>
  274.                                                     {% trans from 'how_it_works' %}перейдіть за посиланням{% endtrans %} <a style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline" href="https://s.lifecell.ua/sp">s.lifecell.ua/sp</a> {% trans from 'how_it_works' %}або{% endtrans %}
  275.                                                 </li>
  276.                                                 <li>
  277.                                                     {% trans from 'how_it_works' %}зателефонуйте на безкоштовний номер{% endtrans %} <a style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline" href="tel:5433">5433</a> {% trans from 'how_it_works' %}або{% endtrans %}
  278.                                                 </li>
  279.                                                 <li>
  280.                                                     {% trans from 'how_it_works' %}наберіть{% endtrans %} <a style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline" href="tel:*141#">*141#</a>
  281.                                                 </li>
  282.                                                 <li>
  283.                                                     {% trans from 'how_it_works' %}термін підбору тарифного плану – 180 днів.{% endtrans %}
  284.                                                 </li>
  285.                                             </ul>
  286.                                         </div>
  288.                                     </li>
  289.                                 </ol>
  290.                             </div>
  291.                         </div>
  292.                         <div id="android" class="tab-contents hidden opacity-0 mt-[24px]">
  293.                             <div>
  294.                                 <ol class="flex flex-col gap-[10px]">
  295.                                     <li class="before:content-['1'] before:text-white before:text-[14px] flex
  296.                                         before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
  297.                                         before:mr-[8px]">
  298.                                         <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
  299.                                             {% trans from 'how_it_works' %}Перейдіть у «Налаштування» та оберіть «Підключення»{% endtrans %}
  300.                                         </p>
  301.                                     </li>
  302.                                     <img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/android1.png" alt="">
  303.                                     <img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/android2.png" class="mt-[10px]" alt="">
  304.                                     <li class="before:content-['3'] before:text-white before:text-[14px] flex
  305.                                         before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
  306.                                         before:mr-[8px]">
  307.                                         <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
  308.                                             {% trans from 'how_it_works' %}Натисніть «Додавання eSIM»{% endtrans %}
  309.                                         </p>
  310.                                     </li>
  311.                                     <img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/android3.png" alt="">
  313.                                     <li class="before:content-['4'] before:text-white before:text-[14px] flex
  314.                                         before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
  315.                                         before:mr-[8px]">
  316.                                         <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
  317.                                             {% trans from 'how_it_works' %}Оберіть додати за допомогою QR-коду.{% endtrans %}
  318.                                         </p>
  319.                                     </li>
  321.                                     <img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/android4.png" alt="">
  324.                                     <li class="before:content-['5'] before:text-white before:text-[14px] flex
  325.                                         before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
  326.                                         before:mr-[8px]">
  327.                                         <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
  328.                                             {% trans from 'how_it_works' %}Відскануйте QR-код.{% endtrans %}
  329.                                         </p>
  330.                                     </li>
  331.                                     <img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/android5.png" alt="">
  332.                                     <li class="before:content-['6'] before:text-white before:text-[14px] flex
  333.                                         before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
  334.                                         before:mr-[8px]">
  335.                                         <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
  336.                                             {% trans from 'how_it_works' %}Щойно ваш мобільний тарифний план буде додано, натисніть OK.{% endtrans %}
  337.                                         </p>
  338.                                     </li>
  339.                                     <li class="before:content-['7'] before:text-white before:text-[14px] flex
  340.                                         before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
  341.                                         before:mr-[8px]">
  342.                                         <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
  343.                                             {% trans from 'how_it_works' %}Після активації вашої eSIM, її можна буде побачити в «Управлінні SIM-картами».{% endtrans %}
  344.                                         </p>
  345.                                     </li>
  346.                                     <li class="before:content-['8'] before:text-white before:text-[14px] flex
  347.                                         before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
  348.                                         before:mr-[8px]">
  349.                                         <div>
  350.                                             <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
  351.                                                 {% trans from 'how_it_works' %}Після підключення eSIM від Vodafone наберіть{% endtrans %} <a style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline" href="tel:111">111</a> або <a  style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline" href="tel:0 800 400 111">0 800 400 111</a>. {% trans from 'how_it_works' %}Ваш номер і тариф активуються. Потім дочекайтеся голосового привітання і завершіть дзвінок.{% endtrans %}
  352.                                             </p>
  353.                                             <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px]">
  354.                                                 {% trans from 'how_it_works' %}Для активації номера в роумінгу наберіть безкоштовний номер{% endtrans %}
  355.                                                 <a style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline" href="tel:+380 500 400 111">+380 500 400 111</a>.
  356.                                             </p>
  357.                                             <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px]">
  358.                                                 {% trans from 'how_it_works' %}Дочекайтеся SMS про активацію номера та підключення пакета послуг на місяць в обраному тарифі (перший місяць уже включений) і користуйтеся всіма перевагами мобільного зв’язку Vodafone:{% endtrans %}
  359.                                             </p>
  360.                                             <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px]">
  361.                                                 {% trans from 'how_it_works' %}Після підключення eSIM від Lifecell активуйте SIM-картку безкоштовним дзвінком на{% endtrans %} <a style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline" href="tel:111">111</a> {% trans from 'how_it_works' %}або за посиланням{% endtrans %} <a style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline" href="https://s.lifecell.ua/shp">s.lifecell.ua/shp</a>
  362.                                             </p>
  363.                                             <p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px]">
  364.                                                 {% trans from 'how_it_works' %}Оберіть та підключіть тарифний план у зручний для вас спосіб:{% endtrans %}
  365.                                             </p>
  366.                                             <ul class="list-disc text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px] ml-[24px]">
  367.                                                 <li>
  368.                                                     {% trans from 'how_it_works' %}перейдіть за посиланням{% endtrans %} <a  style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline" href="https://s.lifecell.ua/sp">s.lifecell.ua/sp</a> {% trans from 'how_it_works' %}або{% endtrans %}
  369.                                                 </li>
  370.                                                 <li>
  371.                                                     {% trans from 'how_it_works' %}зателефонуйте на безкоштовний номер{% endtrans %} <a  style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline" href="tel:5433">5433</a> {% trans from 'how_it_works' %}або{% endtrans %}
  372.                                                 </li>
  373.                                                 <li>
  374.                                                     {% trans from 'how_it_works' %}наберіть{% endtrans %} <a  style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline" href="tel:*141#">*141#</a> {% trans from 'how_it_works' %}або{% endtrans %}
  375.                                                 </li>
  376.                                                 <li>
  377.                                                     {% trans from 'how_it_works' %}авторизуйтесь на{% endtrans %} <a style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline" href="https://my.lifecell.ua">my.lifecell.ua</a>
  378.                                                 </li>
  379.                                             </ul>
  380.                                         </div>
  382.                                     </li>
  383.                                 </ol>
  384.                             </div>
  385.                         </div>
  386.                     </section>
  387.                 </div>
  389.                 <p class="text-[#1B2028] font-semibold text-[16px] leading-[18px] mt-[20px] mb-[15px]">{% trans from 'how_it_works' %}Відповіді на найбільш поширені питання{% endtrans %}</p>
  390.                 <div data-accordion="keep">
  391.                     <h2 id="accordion-collapse-heading-1" class="peer">
  392.                         <button type="button" class="js--accordionBtn bg-[#EDEDF1] p-[6px] leading-[18px] group rounded-[8px] text-[14px] mt-[6px] flex items-center justify-start w-full font-semibold text-gray-500 gap-[16px]" data-accordion-target="#accordion-collapse-body-1" aria-expanded="false" aria-controls="accordion-collapse-body-1">
  393.                             <span class="pointer-events-none text-left">{% trans from 'how_it_works' %}Не отримав листа на e-mail/Не зміг підключити eSIM{% endtrans %}</span>
  394.                             <svg data-accordion-icon class="pointer-events-none w-[40px] h-[40px] p-[13px]  ml-auto group-aria-expanded:rotate-0 rotate-180 shrink-0 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
  395.                                 <path stroke="{{ companyStyles.linkTextColor }}" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
  396.                             </svg>
  397.                         </button>
  398.                     </h2>
  399.                     <div id="accordion-collapse-body-1" class="mt-[7px] peer-[.open]:block hidden" aria-labelledby="accordion-collapse-heading-1">
  400.                         <div class="prose">
  401.                             <p class="text-[#5B5B5B] font-medium text-[14px] leading-[17px] mb-[15px]">{% trans from 'how_it_works' %}При купівлі eSIM товар надійде вам на електронну пошту у форматі email з QR-кодом. Якщо ви не отримали лист з QR-кодом у вказаний термін, прохання перевірити папку «Спам». У випадку проблем з підключенням eSIM, переконайтесь, що при підключенні ви дотримувалися інструкції і пристрій був підключений до Wi-Fi або іншої інтернет-мережі. Якщо ви не знайшли відповідь на запитання, зателефонуйте в контактний центр вашого оператора.  Безкоштовно зі стаціонарних та мобільних номерів по Україні.{% endtrans %}</p>
  402.                             <ul>
  403.                                 <li><span class="font-bold">{% trans from 'how_it_works' %}Vodafone{% endtrans %}</span> - <a href="tel:0800 400 111" style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline">0800 400 111</a> {% trans from 'how_it_works' %}або{% endtrans %} <a href="tel:111" style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline"> 111</a> {% trans from 'how_it_works' %}з мобільного Vodafone{% endtrans %}</li>
  404.                                 <li><span class="font-bold">{% trans from 'how_it_works' %}Lifecell{% endtrans %}</span> - <a href="tel:0 800 20 5433"  style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline">0 800 20 5433</a> {% trans from 'how_it_works' %}або{% endtrans %} <a href="tel:5433" style="color: {{ companyStyles.linkTextColor }}" class="underline hover:no-underline"> 5433</a> {% trans from 'how_it_works' %}з мобільного lifecell{% endtrans %}</li>
  405.                             </ul>
  406.                         </div>
  407.                     </div>
  408.                 </div>
  409.                 <div data-accordion="keep">
  410.                     <h2 id="accordion-collapse-heading-1" class="peer">
  411.                         <button type="button" class="js--accordionBtn bg-[#EDEDF1] p-[6px] leading-[18px] group rounded-[8px] text-[14px] mt-[6px] flex items-center justify-start w-full font-semibold text-gray-500 gap-[16px]" data-accordion-target="#accordion-collapse-body-1" aria-expanded="false" aria-controls="accordion-collapse-body-1">
  412.                             <span class="pointer-events-none text-left">{% trans from 'how_it_works' %}Чи можливо видалити/відключити профіль eSIM?{% endtrans %}</span>
  413.                             <svg data-accordion-icon class="pointer-events-none w-[40px] h-[40px] p-[13px]  ml-auto group-aria-expanded:rotate-0 rotate-180 shrink-0 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
  414.                                 <path stroke="{{ companyStyles.linkTextColor }}" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
  415.                             </svg>
  416.                         </button>
  417.                     </h2>
  418.                     <div id="accordion-collapse-body-1" class="mt-[7px] peer-[.open]:block hidden" aria-labelledby="accordion-collapse-heading-1">
  419.                         <div class="prose">
  420.                             <p class="text-[#5B5B5B] font-medium text-[14px] leading-[17px] mb-[15px]">{% trans from 'how_it_works' %}Так, ви можете видалити профіль, дотримуючись інструкції нижче: Для IOS: «Параметри» → «Стільникові дані» → оберіть стільниковий план, який потрібно видалити» → видаліть дані сім-карти Для Android: «Налаштування» → «Мережа й Інтернет» →»Мобільна мережа» → виберіть профіль який потрібно видалити→ видалити SIM-карту Якщо ви випадково або за необхідності (наприклад, при зміні девайса) видалили профіль eSIM, у вас є можливість скористуватися QR-кодом повторно з поточного або іншого пристрою, який підтримує технологію eSIM. Видалення профілю eSIM не є видаленням номера з мережі вашого оператора. Також ви можете відключити стільниковий план eSIM і тимчасово не користуватися мережею вашого оператора (за аналогією з вийнятою з телефону фізичною SIM-картою). {% endtrans %}</p>
  421.                         </div>
  422.                     </div>
  423.                 </div>
  424.                 <div class="mt-[20px] mb-[15px]">
  425.                     {% include '@App/shared/ui/link/link.html.twig' with {
  426.                         link: path('index_page'),
  427.                         text: 'Повернутися до вибору оператора'|trans({}, 'tarif_choice')
  428.                     } %}
  429.                 </div>
  431.             </div>
  432.         </figure>
  434.     {% else %}
  435.         {% include '@App/pages/how_it_works/how_it_works_web.html.twig' %}
  436.     {% endif %}
  437. {% endblock %}