Aleksandr ZhilaAleksandr Zhilahttps://teletype.in/atom/azhilas2026-04-16T07:28:22.443Zazhilas:Ey5KV29O5BAТехнічне завдання: Сайт благодійної організації InHarmony2024-11-20T15:38:15.136Z2025-07-09T10:49:07.296ZІнформація повина бути в гугл фалі - https://docs.google.com/spreadsheets/d/1_Cl124-AEEkdZSbCvvj1KkjAdB8NSP3d/edit?usp=sharing&ouid=105403187829970204387&rtpof=true&sd=true
<section style="background-color:hsl(hsl(55, 86%, var(--autocolor-background-lightness, 95%)), 85%, 85%);">
<h3 id="iFKU">Перелік того, що хотілось би отримати на сайті <a href="https://inharmony.com.ua/" target="_blank">https://inharmony.com.ua/</a> </h3>
</section>
<section style="background-color:hsl(hsl(34, 84%, var(--autocolor-background-lightness, 95%)), 85%, 85%);">
<p id="pSGG"><strong>Інформація повина бути в гугл фалі </strong>- <a href="https://docs.google.com/spreadsheets/d/1_Cl124-AEEkdZSbCvvj1KkjAdB8NSP3d/edit?usp=sharing&ouid=105403187829970204387&rtpof=true&sd=true" target="_blank">https://docs.google.com/spreadsheets/d/1_Cl124-AEEkdZSbCvvj1KkjAdB8NSP3d/edit?usp=sharing&ouid=105403187829970204387&rtpof=true&sd=true</a></p>
</section>
<section style="background-color:hsl(hsl(170, 33%, var(--autocolor-background-lightness, 95%)), 85%, 85%);">
<h3 id="NozX">Референс: <a href="https://uanimals.org/" target="_blank">https://uanimals.org/</a> </h3>
<p id="1Yk8"><em>Мінімалістичний дизайн, якісне подання інформації, ефективні блоки зборів.</em></p>
</section>
<p id="AEDl"></p>
<hr />
<h2 id="fsGk">1. Мета проєкту</h2>
<ul id="nxP9">
<li id="CRfY">Створення платформи для збору пожертв</li>
<li id="j2N9">Інформування про діяльність організації</li>
<li id="gIbl">Публікація звітності</li>
<li id="K2l3">Збільшення органічного трафіку через SEO</li>
</ul>
<h2 id="CMdh">2. Технічні вимоги та дизайн</h2>
<h3 id="CWfG">2.1. Локалізація</h3>
<ul id="wzQR">
<li id="3G13">Українська (за замовчуванням)</li>
<li id="O4Il">Англійська</li>
<li id="tvll">Автоматичне визначення мови браузера</li>
<li id="Cc8x">Можливість перемикання мов на будь-якій сторінці</li>
</ul>
<h3 id="d3ok">2.2. Адаптивність та кросбраузерність</h3>
<ul id="2Nrx">
<li id="2Xnz">Мобільні: 320-414px</li>
<li id="Grru">Планшети: 768-1024px</li>
<li id="t8mK">Десктоп: від 1024px</li>
<li id="VPn9">Підтримка браузерів:</li>
<ul id="m8jP">
<li id="ogUM">Chrome (останні 2 версії)</li>
<li id="1ixk">Firefox (останні 2 версії)</li>
<li id="xJxx">Safari (останні 2 версії)</li>
<li id="KfJ5">Edge (останні 2 версії)</li>
</ul>
</ul>
<h3 id="vfIn">2.3. Дизайн концепція</h3>
<ul id="WbX6">
<li id="wnHk">Мінімалістичний, сучасний дизайн</li>
<li id="RnYm">Емоційний візуальний контент</li>
<li id="mdo1">Інтуїтивна навігація</li>
<li id="NOEG">Анімації:</li>
<ul id="M0XM">
<li id="R4Ci">Плавні переходи між сторінками</li>
<li id="uI4X">Анімації при скролі</li>
<li id="FiXU">Інтерактивні прогрес-бари</li>
<li id="VMa3">Паралакс-ефекти</li>
<li id="lcAC">Мікроанімації для інтерактивних елементів</li>
</ul>
</ul>
<h2 id="outU">3. Структура сайту</h2>
<h3 id="mU8L">3.1. Хедер (фіксований)</h3>
<ul id="wTZY">
<li id="V4nH">Логотип (посилання на головну)</li>
<li id="eVAM">Навігаційне меню:</li>
<ul id="QyYX">
<li id="eQre">Головна</li>
<li id="68Bc">Поточні збори</li>
<li id="TMkw">Звітність</li>
<li id="hcqI">Блог</li>
<li id="5ZMC">Про нас</li>
</ul>
<li id="nW8A">Перемикач мов (UA/EN)</li>
<li id="bgKF">Кнопка "Допомогти" (червона, акцентна)</li>
<li id="7OAP">Соцмережі (іконки):</li>
<ul id="IA8E">
<li id="RcQP">Instagram</li>
<li id="KrRs">Telegram</li>
<li id="dTXd">TikTok</li>
<li id="AKBP">Facebook</li>
</ul>
</ul>
<h3 id="n5Ty">3.2. Головна сторінка</h3>
<h2 id="Hxw9">Hero секція</h2>
<ul id="GQgE">
<li id="xJ2S">Повноекранне відео на фоні</li>
<li id="xmy0">Заголовок місії</li>
<li id="IER9">Кнопка "Допомогти зараз"</li>
<li id="8ryA">Статистика:</li>
<ul id="sYzJ">
<li id="hFVz">Загальна сума зборів</li>
<li id="1Ltv">Кількість реалізованих проєктів</li>
<li id="IVd7">Кількість врятованих життів</li>
</ul>
</ul>
<h2 id="1hEU">Актуальні збори</h2>
<ul id="h85S">
<li id="ywPS">Сітка з 3-4 актуальних зборів</li>
<li id="jGb1">Для кожного збору:</li>
<ul id="1DBv">
<li id="1o5D">Фото</li>
<li id="nZSY">Заголовок</li>
<li id="ubMZ">Короткий опис</li>
<li id="FG6E">Живий лічильник суми</li>
<li id="miro">Прогрес-бар</li>
<li id="dETJ">Зібрано/Ціль</li>
<li id="skoe">Кнопка "Підтримати"</li>
<li id="0wkz">Індикатор терміновості</li>
<li id="ZqXP">Кількість донорів</li>
</ul>
<li id="MvOb">Кнопка "Всі збори"</li>
</ul>
<h2 id="kWsZ">Блок соціальних доказів</h2>
<ul id="hmuS">
<li id="FWUY">Стрічка останніх донатів:</li>
<ul id="ixLy">
<li id="4CMt">Ім'я донора/Anonymous</li>
<li id="IRpR">Сума</li>
<li id="tJKJ">Час донату</li>
</ul>
<li id="RRJl">Лічильник донатів за 24 години</li>
<li id="ldxw">Кількість шерів у соцмережах</li>
<li id="Vjfg">Відгуки отримувачів допомоги</li>
<li id="d3Vb">Загальна кількість донорів</li>
</ul>
<h2 id="i7gj">Про організацію</h2>
<ul id="yrFW">
<li id="N0yI">Заголовок</li>
<li id="DyZ9">Короткий опис діяльності</li>
<li id="Onco">Ключові напрямки роботи</li>
<li id="N81Y">Фото команди</li>
<li id="lNvn">Кнопка "Дізнатися більше"</li>
</ul>
<h2 id="Kj0u">Останні досягнення</h2>
<ul id="NrBL">
<li id="4x1B">Слайдер з реалізованими проєктами</li>
<li id="PSZl">Для кожного проєкту:</li>
<ul id="JgVT">
<li id="FOfS">Фото "до/після"</li>
<li id="y9iG">Опис результату</li>
<li id="Elbs">Сума збору</li>
<li id="igoh">Термін реалізації</li>
</ul>
</ul>
<h2 id="6dgP">Форма донату</h2>
<ul id="R7y2">
<li id="Ueys">Фіксовані суми</li>
<li id="squ4">Поле для введення кастомної суми</li>
<li id="f76U">Опція регулярного донату</li>
<li id="VUUP">Перемикач "Anonymous/Public"</li>
<li id="5ey5">Чекбокс "+3% комісії"</li>
<li id="SZGk">Кнопки платіжних систем</li>
</ul>
<h2 id="moY5">Останні публікації</h2>
<ul id="cYU7">
<li id="u8mU">3 останні статті</li>
<li id="CKHj">Для кожної:</li>
<ul id="qRkY">
<li id="TKBE">Зображення</li>
<li id="xeSD">Заголовок</li>
<li id="S99h">Короткий опис</li>
<li id="mykN">Дата</li>
<li id="Vwck">Кнопка "Читати"</li>
</ul>
</ul>
<h3 id="LiI3">3.3. Сторінка зборів</h3>
<h2 id="ZTAR">Фільтри</h2>
<ul id="ANQU">
<li id="yLcA">Категорії:</li>
<ul id="KZJH">
<li id="9pkR">Медична допомога</li>
<li id="zT59">Допомога тваринам</li>
<li id="UXOI">Гуманітарні проекти</li>
<li id="XLtg">Інше</li>
</ul>
<li id="yjl1">Сортування:</li>
<ul id="ceKk">
<li id="9Nyx">За терміновістю</li>
<li id="doij">За сумою</li>
<li id="y8La">За прогресом</li>
</ul>
</ul>
<h2 id="Ou1P">Картка збору</h2>
<ul id="RtXg">
<li id="912r">Фото/відео</li>
<li id="lT0D">Заголовок</li>
<li id="xJAK">Опис</li>
<li id="HZ1d">Живий лічильник зібраної суми</li>
<li id="nH5d">Прогрес-бар</li>
<li id="eR8Z">Індикатор терміновості:</li>
<ul id="jcRc">
<li id="aL0a">Відлік часу</li>
<li id="2pk3">Візуалізація терміновості</li>
</ul>
<li id="uIye">Соціальні докази:</li>
<ul id="SvKT">
<li id="FyjI">Кількість донорів</li>
<li id="crGe">Останні донати</li>
<li id="i0OJ">Відгуки отримувачів</li>
</ul>
<li id="ZNuS">Кнопки шерингу з лічильниками</li>
<li id="DQ33">Форма донату</li>
</ul>
<h2 id="v30P">Мобільна версія</h2>
<ul id="fGuC">
<li id="P2XY">Sticky-плашка внизу екрану:</li>
<ul id="F8Ko">
<li id="1y88">Кнопка "DONATE"</li>
<li id="hqWJ">Поточна сума збору</li>
<li id="uJfX">Відсоток виконання</li>
</ul>
</ul>
<h3 id="XJg6">3.4. Сторінка звітності</h3>
<h2 id="guZW">Фінансові звіти</h2>
<ul id="EZw8">
<li id="pR2e">Щомісячні звіти</li>
<li id="tLUk">Фільтр по даті</li>
<li id="0nPe">Можливість завантаження PDF</li>
<li id="PFvI">Візуалізація даних</li>
</ul>
<h2 id="n7WE">Реалізовані проекти</h2>
<ul id="NzKF">
<li id="870T">Фотогалерея</li>
<li id="MR23">Текстовий опис</li>
<li id="fs81">Фінальна сума</li>
<li id="4iXv">Термін реалізації</li>
<li id="jk4q">Результати</li>
<li id="ResB">Відгуки бенефіціарів</li>
</ul>
<h3 id="V1qR">3.5. Блог</h3>
<ul id="4OX1">
<li id="LJug">SEO-оптимізовані статті</li>
<li id="hDb8">Категорії</li>
<li id="RKIo">Теги</li>
<li id="eyBk">Пошук</li>
<li id="dwIi">Кнопки шерингу</li>
<li id="tIP6">Форма донату в кінці статті</li>
</ul>
<h3 id="Vc40">3.6. Про команду</h3>
<ul id="WymB">
<li id="Cse7">Історія організації</li>
<li id="szKw">Місія та цінності</li>
<li id="RvvF">Команда:</li>
<ul id="Hhop">
<li id="kfu5">Фото</li>
<li id="kLgh">Ім'я</li>
<li id="iaAe">Посада</li>
<li id="sbqZ">Опис</li>
</ul>
<li id="6UMo">Партнери (логотипи)</li>
</ul>
<h3 id="9qzu">3.7. Історії успіху</h3>
<ul id="koh6">
<li id="yvks">Категорії історій</li>
<li id="EPj8">Фото/відео галерея</li>
<li id="9Qug">Текстові історії</li>
<li id="aHz4">Відгуки бенефіціарів</li>
<li id="J5kL">Статистика допомоги</li>
<li id="aA9T">Форма донату</li>
<li id="RtH0">Кнопки шерингу</li>
</ul>
<h3 id="LjPZ">3.8. Футер</h3>
<ul id="7iyv">
<li id="0xbZ">Контактна інформація:</li>
<ul id="OSJC">
<li id="90N7">Адреса</li>
<li id="IKrs">Email</li>
<li id="nqWb">Телефон</li>
</ul>
<li id="1lOb">Соціальні мережі</li>
<li id="T5PW">Навігаційне меню</li>
<li id="F5dR">Privacy Policy</li>
<li id="PG6n">Реквізити</li>
<li id="rWh8">Форма зворотного зв'язку:</li>
<ul id="z7g9">
<li id="9cNv">Ім'я</li>
<li id="dGa1">Email</li>
<li id="GuZu">Повідомлення</li>
</ul>
</ul>
<h2 id="csEf">4. Платіжні системи та донати</h2>
<h3 id="p9LO">4.1. Способи оплати</h3>
<ul id="khzc">
<li id="jfw6">Кредитна картка (WayForPay):</li>
<ul id="YgOB">
<li id="D6PT">Одноразовий платіж</li>
<li id="AZRR">Щомісячна підписка</li>
</ul>
<li id="7Thy">Банківський переказ:</li>
<ul id="6IX9">
<li id="0cwO">Реквізити</li>
<li id="jptR">QR-код</li>
</ul>
<li id="zOxE">PayPal:</li>
<ul id="3Mht">
<li id="yB4G">Одноразовий</li>
<li id="jMr6">Регулярний</li>
</ul>
<li id="gpkX">Криптовалюти:</li>
<ul id="u2Wo">
<li id="qe6M">Bitcoin</li>
<li id="E1nG">Ethereum</li>
<li id="nlxs">USDT</li>
</ul>
</ul>
<h3 id="9fIo">4.2. Форма донату</h3>
<h2 id="zyFI">Основні поля</h2>
<ul id="MyUg">
<li id="CR6X">Вибір суми:</li>
<ul id="sQ7v">
<li id="UNB0">Фіксовані варіанти</li>
<li id="76Hw">Кастомна сума</li>
</ul>
<li id="BpKU">Регулярність:</li>
<ul id="bJ4d">
<li id="FH1H">Одноразово</li>
<li id="qGfb">Щомісячно</li>
</ul>
<li id="R4md">Призначення:</li>
<ul id="ew8r">
<li id="jj6d">Конкретний збір</li>
<li id="pzQj">Загальний фонд</li>
</ul>
<li id="0bta">Коментар</li>
</ul>
<h2 id="Lnsl">Додаткові опції</h2>
<ul id="owmp">
<li id="M0dm">Перемикач "Anonymous/Public Donation"</li>
<li id="44JU">"Donate in memory/honor of someone":</li>
<ul id="09D3">
<li id="BcXT">Ім'я особи</li>
<li id="iBYk">Повідомлення</li>
<li id="cP5x">Опція відправки сповіщення</li>
</ul>
<li id="1HYe">Чекбокс "Add 3% to cover transaction fees"</li>
</ul>
<h2 id="D7ho">UX-елементи</h2>
<ul id="HHey">
<li id="Nld4">Підказки при заповненні</li>
<li id="tsNT">Предпросмотр перед відправкою</li>
<li id="e96B">Індикатор безпеки платежів</li>
<li id="nblO">Автозбереження форми</li>
<li id="bPuW">Валідація полів в реальному часі</li>
<li id="XOhi">Індикатор прогресу заповнення</li>
</ul>
<h3 id="6UCC">4.3. Точки донату</h3>
<ul id="aqvo">
<li id="Xeaw">Головне меню (кнопка)</li>
<li id="NEsC">Картки зборів</li>
<li id="Snp0">Фіксована кнопка на мобільних</li>
<li id="uC5A">Кінець статей блогу</li>
<li id="nhC7">Футер</li>
<li id="pYWk">Exit-intent поп-ап</li>
</ul>
<h3 id="ehns">4.4. Соціальні докази</h3>
<ul id="iSc3">
<li id="U86H">Кількість успішних донатів</li>
<li id="44aI">Середня сума донату</li>
<li id="yZVb">Відгуки донорів</li>
<li id="WiU1">Сертифікати безпеки</li>
<li id="wx9Z">Логотипи платіжних систем</li>
<li id="Z4jY">Останні донати</li>
</ul>
<h2 id="63jz">5. Аналітика та відстеження</h2>
<h3 id="ks5B">5.1. Google Analytics</h3>
<ul id="XJf4">
<li id="ZUtf">Налаштування цілей:</li>
<ul id="JY1c">
<li id="WOGv">Перегляди зборів</li>
<li id="ljQF">Кліки на донат</li>
<li id="A7v7">Успішні платежі</li>
</ul>
<li id="Zqgk">Відстеження конверсій</li>
<li id="Yahz">Шляхи користувачів</li>
<li id="D9Bz">Час на сайті</li>
<li id="hrFE">Відмови</li>
</ul>
<h3 id="Lidu">5.2. Hotjar</h3>
<ul id="TSVs">
<li id="agbA">Теплові карти</li>
<li id="GVqv">Записи сесій</li>
<li id="zJx1">Воронки конверсій</li>
<li id="VIwK">Форми зворотного зв'язку</li>
<li id="xXCx">Опитування</li>
</ul>
<h3 id="NyMI">5.3. Лічильники та метрики</h3>
<ul id="gmaa">
<li id="Ym1n">Живі лічильники зборів:</li>
<ul id="X0HD">
<li id="ypkw">WebSocket оновлення</li>
<li id="mqFh">Кешування</li>
<li id="soGE">Fallback</li>
</ul>
<li id="izK9">Соціальна активність:</li>
<ul id="Lt6j">
<li id="xJyP">Шеринг</li>
<li id="pSxm">Донори</li>
<li id="wMP6">24-годинна активність</li>
</ul>
</ul>
<h2 id="GxF6">6. Адмін-панель</h2>
<h3 id="W8gG">6.1. Структура і ролі</h3>
<ul id="Ufr5">
<li id="P9cC">Адміністратор:</li>
<ul id="LCTO">
<li id="urXb">Повний доступ</li>
<li id="SiIW">Управління користувачами</li>
<li id="pddw">Налаштування сайту</li>
</ul>
<li id="OCLS">Редактор:</li>
<ul id="pgqY">
<li id="cmbv">Управління контентом</li>
<li id="Ekxl">Модерація</li>
<li id="PJ8k">Перегляд статистики</li>
</ul>
</ul>
<h3 id="fuLG">6.2. Модулі адмін-панелі</h3>
<h2 id="YlLk">Дашборд</h2>
<ul id="q4ec">
<li id="lUDb">Загальна статистика</li>
<li id="sbnN">Графіки зборів</li>
<li id="oCDS">Активні збори</li>
<li id="zTym">Останні донати</li>
<li id="TUuF">Відвідуваність</li>
</ul>
<h2 id="PZKd">Управління зборами</h2>
<ul id="Gck3">
<li id="kuDI">Створення/редагування</li>
<li id="oL6s">Категорії</li>
<li id="AoWo">Статуси</li>
<li id="nvz0">Прогрес</li>
<li id="VU39">Донати</li>
</ul>
<h2 id="2Nxt">Контент-менеджмент</h2>
<ul id="UcVB">
<li id="Ga2P">Статті</li>
<li id="WXAi">Історії успіху</li>
<li id="Q3WO">Сторінки</li>
<li id="6hFC">Медіа</li>
<li id="XKj2">SEO</li>
</ul>
<h2 id="gJ5K">Фінансовий модуль </h2>
<p id="duLf"><strong><em>(за нами)</em></strong></p>
<ul id="xim1">
<li id="kxPs">Транзакції</li>
<li id="bff4">Звіти</li>
<li id="5m2n">Статистика</li>
<li id="3f60">Експорт</li>
</ul>
<h2 id="wUTW">Email-маркетинг</h2>
<ul id="vHCS">
<li id="bWqe">SendPulse інтеграція</li>
<li id="R73b">Шаблони</li>
<li id="FaoL">Розсилки</li>
<li id="Z2D2">Статистика</li>
</ul>
<h2 id="KNiK">Аналітика</h2>
<ul id="iIbl">
<li id="PxRP">Google Analytics</li>
<li id="4dEU">Hotjar</li>
<li id="ojl4">Поведінка</li>
<li id="aWAO">Конверсії</li>
<li id="Ihmn">Звіти</li>
</ul>
<h3 id="RfX1">6.3. Додаткові модулі</h3>
<h2 id="Wv2i">Управління лічильниками</h2>
<ul id="8JvS">
<li id="1UvZ">Налаштування</li>
<li id="SDZL">Конфігурація</li>
<li id="5Znp">Моніторинг</li>
</ul>
<h2 id="HBoY">Соціальні докази</h2>
<ul id="kqYA">
<li id="391k">Модерація відгуків</li>
<li id="pREa">Налаштування донатів</li>
<li id="vDtk">Testimonials</li>
<li id="kXTY">Лічильники</li>
</ul>
<h2 id="zTZe">Аналітика поведінки</h2>
<ul id="dQcV">
<li id="hqg3">Теплові карти</li>
<li id="dQnN">Відмови</li>
<li id="Gm8u">A/B тести</li>
<li id="yEkP">Воронки</li>
</ul>
<h3 id="NZm6">6.4. Безпека</h3>
<ul id="oNGz">
<li id="0olS">2FA</li>
<li id="exv5">Журнал дій</li>
<li id="UhYs">IP-обмеження</li>
<li id="OPmC">Бекапи</li>
</ul>
<h2 id="uilK">7. SEO-оптимізація</h2>
<section style="background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);">
<p id="2vbM"><strong><em>(на нас, вам можливо підключити, за бажанням)</em></strong></p>
</section>
<h3 id="ZX5w">7.1. Технічна оптимізація</h3>
<ul id="sNg5">
<li id="lBpi">URL структура</li>
<li id="yuWh">Meta теги</li>
<li id="sSk8">Schema.org</li>
<li id="LN4h">XML карта</li>
<li id="ughv">Швидкість</li>
<li id="CYOA">Mobile-first</li>
</ul>
<h3 id="a0IQ">7.2. Контент</h3>
<ul id="WyFQ">
<li id="LKAT">Семантичне ядро</li>
<li id="BZtl">Контент-план</li>
<li id="WqJf">Внутрішня перелінковка</li>
<li id="KuaL">Оптимізація медіа</li>
</ul>
<h2 id="Ukb1">8. Email-маркетинг </h2>
<section style="background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);">
<p id="3Mf3"><strong><em>(на нас, вам можливо підключити, за бажанням)</em></strong></p>
</section>
<h3 id="O0pv">8.1. Типи розсилок</h3>
<ul id="w8Od">
<li id="TTNH">Вітальні</li>
<li id="PFRU">Новини</li>
<li id="VGLz">Звіти</li>
<li id="dBDd">Історії успіху</li>
<li id="Wf1N">Донорські апдейти</li>
</ul>
<h3 id="40r2">8.2. Автоматизація</h3>
<ul id="XIA1">
<li id="g6FT">Тригери</li>
<li id="Q9gf">A/B тести</li>
<li id="5uDp">Сегментація</li>
<li id="ffy7">Персоналізація</li>
</ul>
<h2 id="JDwg">9. Технічні особливості</h2>
<h3 id="ucef">9.1. Живі лічильники</h3>
<ul id="bdhv">
<li id="HKo4">WebSocket</li>
<li id="TwdT">Polling fallback</li>
<li id="ZaFf">Mobile оптимізація</li>
<li id="V4Hu">Кешування</li>
</ul>
<h3 id="Ys65">9.2. Mobile оптимізації</h3>
<ul id="juqu">
<li id="MfFJ">Sticky-елементи</li>
<li id="pyjY">Touch-friendly</li>
<li id="nfQ6">Швидкість</li>
<li id="zkSG">Трафік</li>
</ul>
<h3 id="adZ3">9.3. UX/UI</h3>
<ul id="lQdo">
<li id="B4L8">Мікроанімації</li>
<li id="pPt8">Skeleton loading</li>
<li id="Qzyv">Валідація</li>
<li id="2PTu">Підказки</li>
</ul>
<h3 id="8N2u">9.4. Безпека (сервер, на нас)</h3>
<ul id="u4xZ">
<li id="a5Fk">DDoS захист</li>
<li id="KI3P">Бекапи</li>
<li id="6k8I">Моніторинг</li>
<li id="Y83V">Логування</li>
</ul>
<hr />
<hr />
<hr />
<h2 id="dAkl">Комментарий к дизайну, первой версии (от 08.01.25) </h2>
<p id="E9SO"></p>
<p id="eNin"><strong>В целом вопрос по форме доната, ее нужно изменить</strong>.</p>
<section style="background-color:hsl(hsl(236, 74%, var(--autocolor-background-lightness, 95%)), 85%, 85%);">
<ul id="EaVr">
<li id="mQmz">Нам нужно добавить промежуточный шаг, сначала мы все спрашиваем, а затем уже перенаправляем на оплату где будут предложены методы оплаты картой.</li>
<li id="zxVq">И нужно будет добавить ссылку на отписку ежемесячной платежки </li>
</ul>
</section>
<h2 id="yjeY"><strong>Итого по задачам:</strong></h2>
<ol id="DvsE">
<li id="VV4S">мы сначала делаем форму с опросом (поля ниже напишу)</li>
<li id="IxeC">Затем отправляем на форму оплаты платежной системы (это будет уже backend, тут дизайн не нужен, они стандратные и на стороне платежки будут настраиватся)</li>
<li id="HzfR">Давайте добавим в футер пункт </li>
<ul id="iooO">
<li id="BpZP"><strong>“Скасувати місячну підписку” </strong></li>
<ul id="jnei">
<li id="RGDg">и там дадим форму опроса, как на сайте референса “<a href="https://uanimals.org/cancel-the-monthly-benefit/" target="_blank">https://uanimals.org/cancel-the-monthly-benefit/</a>”</li>
</ul>
</ul>
</ol>
<section style="background-color:hsl(hsl(55, 86%, var(--autocolor-background-lightness, 95%)), 85%, 85%);">
<p id="ooiI"><strong>Вот пример работы платежи</strong> - <a href="https://frnt-test.inharmony.com.ua/" target="_blank">https://frnt-test.inharmony.com.ua/</a></p>
<p id="8spg">Тут просто показан принцип, где выбираем месячный или разовый платеж и затем отправляем на форму оплаты.</p>
</section>
<hr />
<h2 id="22k9"><strong>ФОРМА Оплаты С ОПРОСОМ, описание полей:</strong></h2>
<ul id="oxB5">
<li id="Xpbk">Вибір суми:</li>
<ul id="blrJ">
<li id="1oGt">Фіксовані варіанти</li>
<li id="5jgR">Кастомна сума</li>
</ul>
<li id="8k88">Регулярність:</li>
<ul id="mVI7">
<li id="2McX">Одноразово</li>
<li id="ONfT">Щомісячно</li>
<li id="xins">❗️Додати підпис зі стрілкою, як в прикладі - “<strong><em>Регулярна допомога рятує більше життів!</em></strong>”</li>
</ul>
<li id="HXC2">Призначення: (должен быть выпадающий список активных сборов)</li>
<ul id="j7T7">
<li id="BQKr">Конкретний збір (из нашего списка активных сборов) - тут выбирается автоматом, если донатит на странице сбора. Если же переход с хэдера, то <strong>по дефолту ставим </strong>“<em>Підтримати фонд</em>”</li>
<li id="Qq0R"><strong>Підтримати фонд</strong> (добавить для тех, кто просто хочет задонатить)</li>
</ul>
<li id="pbON">Перемикач "Anonymous/Public Donation"</li>
<li id="gBw2">Для тех кто публично, то такие поля</li>
<ul id="WbVG">
<li id="xREv">Ім’я</li>
<li id="CmM5">Email</li>
<li id="kam1">Повідомлення (коментар)</li>
</ul>
<li id="Jol1">Чекбокс “🫶 Додати 2%, комісія банку”</li>
</ul>
azhilas:8GSnPdLLbВоронки по Ханта для FB ads2020-08-05T08:38:22.697Z2020-08-05T08:38:22.697Z<img src="https://leonardo.osnova.io/602d9dd3-ea22-a3d4-3532-29063952bf79/-/resize/1200/">Выше мы рассмотрели теорию, а сейчас перейдем к практике.
<h2>Как преобразовать воронку Ханта на рекламную кампанию в Facebook Ads?</h2>
<p>Выше мы рассмотрели теорию, а сейчас перейдем к практике.</p>
<p><strong>Выделяют следующие виды воронок:</strong></p>
<figure class="m_column">
<img src="https://leonardo.osnova.io/602d9dd3-ea22-a3d4-3532-29063952bf79/-/resize/1200/" width="1200" />
</figure>
<p>Воронка продаж не может быть универсальной для всех форм бизнеса. Она меняется в зависимости от специфики продукта, схемы продаж, каналов распространения, размера бизнеса. Кроме того, она обязательно корректируется в процессе работы. Невозможно сразу создать идеальную схему: все нужно проверять. Но мы рассмотрим наиболее общий вариант.</p>
<p>Описанные выше 5 этапов <strong>«Лестницы Ханта»</strong> трансформируются в 4. Дело в том, что маркетологи с помощью таргетированной рекламы не могут воздействовать на человека без конкретной проблемы.</p>
<p>По типам выделяют следующие 4 этапа воронки:</p>
<p><strong>1. Top of the funnel</strong> – верхняя часть воронки.</p>
<p>Здесь необходимо придумать как привлечь пользователя и заставить его заинтересоваться нашим продуктом. То есть, не фильтруем по каким-либо критериям аудиторию, а наоборот, показываем объявление, как можно большему количеству потенциальной аудитории, которая может оставить заявку или сделать покупку.</p>
<p><strong>Совет:</strong> если вы что-то продаете, то на данном этапе, старайтесь просто познакомить аудиторию с вашим продуктом и избегайте какой-либо конверсионной истории.</p>
<p><strong>2. Middle of the funnel</strong> – средняя часть воронки.</p>
<p>Вот уже на этом этапе, пользователь знакомится с компанией, которая должна правильного квалифицировать его и понять какой именно продукт поможет закрыть его потребности. Тем самым, позиционирование компании основывается на потребности клиента, что помогает ему выделить конкурентные преимущества.</p>
<p>Когда уже привлекли и подогрели n-количество клиентов, на этом этапе воронки, и правильно квалифицировали, тогда дальше подводим их к сделке, а именно, к следующему этапу воронки.</p>
<p><strong>3. Bottom of the funnel</strong> – Завершающий этап воронки.</p>
<p>Финальная стадия, при которой пользователь уже практически определился с продуктом и для принятия окончательного решения – предлагаем что-нибудь в подарок или дополнительную скидку. Тем самым, у пользователя не останется сомнений для оформления сделки.</p>
<p>Например, это может быть: пробная версия чего-либо, какая-то тестовая история и другие похожие лид-магниты. Также, можно привлечь за счет скидки, ограниченной по времени.</p>
<p>Для данного этапа, лучше всего подойдет динамическая реклама каталога товаров в Facebook или же динамический ретаргетинг.</p>
<p>Динамический ретаргетинг автоматически показывает продукты людям, которые уже проявили к ним интерес на сайте, в приложении или в аналогичном месте. Кроме того, синхронизация с каталогом гарантирует, что предложения будут только о товаре в наличии и по самой актуальной цене.</p>
<p>Пример: Людочке необходим новый телефон, но она не знает какой лучше выбрать. Посмотрев различные модели телефонов в интернет-магазине “H”, она решила, что сначала посоветуется с мужем, а потом только будет оформлять заказ, поэтому, все просматриваемые страницы были закрыты. Но, зайдя спустя 20 минут в Instagram, полистать ленту, она вдруг видит рекламу только что просматриваемого телефона на сайте “H” и решает еще раз изучить его параметры.</p>
<p><strong>4. Защита бренда или лояльная аудитория</strong></p>
<p>На данном этапе мы стараемся добиться максимального удержания конечного пользователя. Чтобы сделать его фанатом нашего продукта и впоследствии продавать ему новинки. Превратить его в адвоката бренда, т.е. он должен рассказывать каждому другу, и делиться эмоциями о приобретении.</p>
<figure class="m_column">
<img src="https://teletype.in/files/bb/6b/bb6b3a90-9d78-4c84-8574-a0c82af74cca.png" width="1200" />
</figure>