<figure class="mt-[10px] lg:mt-[40px] mx-auto max-w-max lg:max-w-[1328px] px-[24px]">
{% include '@App/shared/ui/header/header.html.twig' %}
<div class="mt-[14px] p-[18px] max-w-max md:max-w-[1328px] mx-auto rounded-[24px] bg-white">
<p class="text-[#1B2028] font-semibold text-[48px] leading-[48px] mt-[20px] mb-[48px]">{% trans from 'how_it_works' %}Як встановити eSIM?{% endtrans %}</p>
<nav id="tabs" class="flex list-none justify-between rounded-full bg-[#fff] border-[#5B5B5B] border p-[4px] w-[374px] mb-[32px]">
<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>
<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>
</nav>
<div class="rounded-[16px] p-[18px] border-[#E2E2E9] bg-[#F7F7FA]">
<section id="tab-contents">
<div id="apple" class="tab-contents block opacity-100 mt-[24px]">
<div>
<ol class="flex flex-col gap-[10px]">
<div class="grid grid-cols-2 gap-[16px] mb-[24px]">
<div>
<img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/apple1.png" alt="" class="mb-[24px]">
<li class="before:content-['1'] before:text-white before:text-[14px] flex
before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
before:mr-[8px]">
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
{% trans from 'how_it_works' %}Перейдіть у розділ Налаштування.{% endtrans %}
</p>
</li>
</div>
<div>
<img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/apple2.png" alt="" class="mb-[24px]">
<li class="before:content-['2'] before:text-white before:text-[14px] flex
before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
before:mr-[8px]">
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
{% trans from 'how_it_works' %} Виберіть «Стільникові дані» або «Мобільні дані».{% endtrans %}
</p>
</li>
</div>
<div>
<img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/apple3.png" alt="" class="mb-[24px]">
<li class="before:content-['3'] before:text-white before:text-[14px] flex
before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
before:mr-[8px]">
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
{% trans from 'how_it_works' %}Виберіть «Додати стільниковий тариф».{% endtrans %}
</p>
</li>
</div>
<div>
<img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/apple4.png" alt="" class="mb-[24px]">
<li class="before:content-['4'] before:text-white before:text-[14px] flex
before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
before:mr-[8px]">
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
{% trans from 'how_it_works' %}За допомогою мобільного пристрою відскануйте QR-код.{% endtrans %}
</p>
</li>
</div>
</div>
<li class="before:content-['5'] before:text-white before:text-[14px] flex
before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
before:mr-[8px]">
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
{% trans from 'how_it_works' %}Підтвердьте вибір стільникового оператора натиснувши «Додати стільниковий тариф».{% endtrans %}
</p>
</li>
<li class="before:content-['6'] before:text-white before:text-[14px] flex
before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
before:mr-[8px]">
<div>
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
{% 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 %}
</p>
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px]">
{% trans from 'how_it_works' %}Для активації номера в роумінгу наберіть безкоштовний номер{% endtrans %}
<a style="color: {{ companyStyles.linkTextColor }}"
class="underline hover:no-underline" href="tel:+380 500 400 111">+380 500 400
111</a>.
</p>
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px]">
{% trans from 'how_it_works' %}Дочекайтеся SMS про активацію номера та підключення пакета послуг на місяць в обраному тарифі (перший місяць уже включений) і користуйтеся всіма перевагами мобільного зв’язку Vodafone:{% endtrans %}
</p>
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px]">
{% trans from 'how_it_works' %}Після підключення eSIM від lifecell оберіть та підключіть тарифний план у зручний для вас спосіб:{% endtrans %}
</p>
<ul class="list-disc text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px] ml-[24px]">
<li>
{% 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 %}
</li>
<li>
{% 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 %}
</li>
<li>
{% trans from 'how_it_works' %}наберіть{% endtrans %} <a
style="color: {{ companyStyles.linkTextColor }}"
class="underline hover:no-underline" href="tel:*141#">*141#</a>
</li>
<li>
{% trans from 'how_it_works' %}термін підбору тарифного плану – 180 днів.{% endtrans %}
</li>
</ul>
</div>
</li>
</ol>
</div>
</div>
<div id="android" class="tab-contents hidden opacity-0 mt-[24px]">
<div>
<ol class="flex flex-col gap-[10px]">
<div class="grid grid-cols-2 gap-[16px] mb-[24px]">
<div>
<img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/android1.png" alt="" class="mb-[24px]">
<li class="before:content-['1'] before:text-white before:text-[14px] flex
before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
before:mr-[8px]">
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
{% trans from 'how_it_works' %}Перейдіть у «Налаштування» та оберіть «Підключення»{% endtrans %}
</p>
</li>
</div>
<div>
<img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/android2.png" alt="" class="mb-[24px]">
<li class="before:content-['2'] before:text-white before:text-[14px] flex
before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
before:mr-[8px]">
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
{% trans from 'how_it_works' %}Перейдіть у розділ «Диспечер SIM-карт» {% endtrans %}
</p>
</li>
</div>
<div>
<img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/android3.png" alt="" class="mb-[24px]">
<li class="before:content-['3'] before:text-white before:text-[14px] flex
before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
before:mr-[8px]">
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
{% trans from 'how_it_works' %}Натисніть «Додавання eSIM»{% endtrans %}
</p>
</li>
</div>
<div>
<img src="{{ app.request.getSchemeAndHttpHost() }}/build/images/android4.png" alt="" class="mb-[24px]">
<li class="before:content-['4'] before:text-white before:text-[14px] flex
before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
before:mr-[8px]">
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
{% trans from 'how_it_works' %}Оберіть додати за допомогою QR-коду та відскануйте його{% endtrans %}
</p>
</li>
</div>
</div>
<li class="before:content-['5'] before:text-white before:text-[14px] flex
before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
before:mr-[8px]">
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
{% trans from 'how_it_works' %}Щойно ваш мобільний тарифний план буде додано, натисніть OK.{% endtrans %}
</p>
</li>
<li class="before:content-['6'] before:text-white before:text-[14px] flex
before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
before:mr-[8px]">
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
{% trans from 'how_it_works' %}Після активації вашої eSIM, її можна буде побачити в «Управлінні SIM-картами».{% endtrans %}
</p>
</li>
<li class="before:content-['7'] before:text-white before:text-[14px] flex
before:block before:text-center before:font-bold before:leading-[24px] before:min-w-[24px] before:h-[24px] before:rounded-full before:bg-[#1B2028]
before:mr-[8px]">
<div>
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px]">
{% 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 %}
</p>
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px]">
{% trans from 'how_it_works' %}Для активації номера в роумінгу наберіть безкоштовний номер{% endtrans %}
<a style="color: {{ companyStyles.linkTextColor }}"
class="underline hover:no-underline" href="tel:+380 500 400 111">+380 500 400
111</a>.
</p>
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px]">
{% trans from 'how_it_works' %}Дочекайтеся SMS про активацію номера та підключення пакета послуг на місяць в обраному тарифі (перший місяць уже включений) і користуйтеся всіма перевагами мобільного зв’язку Vodafone:{% endtrans %}
</p>
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px]">
{% 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>
</p>
<p class="text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px]">
{% trans from 'how_it_works' %}Оберіть та підключіть тарифний план у зручний для вас спосіб:{% endtrans %}
</p>
<ul class="list-disc text-[14px] font-medium text-[#5B5B5B] leading-[18px] mt-[14px] ml-[24px]">
<li>
{% 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 %}
</li>
<li>
{% 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 %}
</li>
<li>
{% 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 %}
</li>
<li>
{% 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>
</li>
</ul>
</div>
</li>
</ol>
</div>
</div>
</section>
</div>
{# <p class="text-[#1B2028] font-semibold text-[16px] leading-[18px] mt-[20px] mb-[15px]">{% trans from 'how_it_works' %}Відповіді на найбільш поширені питання{% endtrans %}</p>#}
{# <div data-accordion="keep">#}
{# <h2 id="accordion-collapse-heading-1" class="peer">#}
{# <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">#}
{# <span class="pointer-events-none text-left">{% trans from 'how_it_works' %}Не отримав листа на e-mail/Не зміг підключити eSIM{% endtrans %}</span>#}
{# <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">#}
{# <path stroke="{{ companyStyles.linkTextColor }}" stroke-linecap="round" stroke-linejoin="round"#}
{# stroke-width="2" d="M9 5 5 1 1 5"/>#}
{# </svg>#}
{# </button>#}
{# </h2>#}
{# <div id="accordion-collapse-body-1" class="mt-[7px] peer-[.open]:block hidden"#}
{# aria-labelledby="accordion-collapse-heading-1">#}
{# <div class="prose">#}
{# <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>#}
{# <ul>#}
{# <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>#}
{# <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>#}
{# </ul>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div data-accordion="keep">#}
{# <h2 id="accordion-collapse-heading-1" class="peer">#}
{# <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">#}
{# <span class="pointer-events-none text-left">{% trans from 'how_it_works' %}Чи можливо видалити/відключити профіль eSIM?{% endtrans %}</span>#}
{# <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">#}
{# <path stroke="{{ companyStyles.linkTextColor }}" stroke-linecap="round" stroke-linejoin="round"#}
{# stroke-width="2" d="M9 5 5 1 1 5"/>#}
{# </svg>#}
{# </button>#}
{# </h2>#}
{# <div id="accordion-collapse-body-1" class="mt-[7px] peer-[.open]:block hidden"#}
{# aria-labelledby="accordion-collapse-heading-1">#}
{# <div class="prose">#}
{# <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>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div class="mt-[20px] mb-[15px]">#}
{# {% include '@App/shared/ui/link/link.html.twig' with {#}
{# link: path('index_page'),#}
{# text: 'Повернутися до вибору оператора'|trans({}, 'tarif_choice')#}
{# } %}#}
{# </div>#}
</div>
</figure>