Верстка блока с кнопкой + PopUp-форма для сбора контактов

Верстка на сайте WordPress блока с кнопкой + PopUp-форма для сбора контактов в 2 языковых версиях

Сайт для реализации: saudi-arabia-stick.online

На данный момент настроена выгрузка всех лидов (покупок) в Telegram и Битрикс. Данные из  формы также должны падать в ТГ и CRM как лиды.

Блоки и ПопАп и их элементы сделаны на основе уже созданных блоков и элементов сайта, чтобы сделать быстрее и *не изобретать велосипед* и была возможность просто скопировать элемент с его всеми свойствами. Макеты в виде картинок предоставлены для ознакомления с визуалом. Основные моменты прописаны в ТЗ. Адаптивность и поведение при просмотре с разных устройств сохраняем как в общем на сайте.

Арабская версия блока отличается только зеркальным отображение (справа на лево).

ПопАп арасбкий как и сейчас, чтобы не заморачиваться делаем так же как был (центрируем текст по середине). Перевод будет предоставлен в конце ТЗ

Важно: Контент блока должен легко меняться через админку (текст заголовка, описание, текст кнопки). Тоже касается и ПопАп (текст заголовка, текст кнопки, текст Спасибо… после отправки формы).

Техническая часть выгрузки лида: Контакты должны падать в тг группу (интеграция уже реализована на сайте)

• Лид должен содержать следующую информацию:
• Имя (обязательное поле)
• Номер телефона (обязательное поле)
• Почта (не обязательное поле)
• В тг\Битрикс лид называется Bonus (по умолчанию).
• Время и дата лида

Десктоп дизайн блока (что не меняется):

• Размер и жирность заголовка Give contacts в блоке как и у остальных блоков - 60 pt, Jost Light
• Размер подписи снизу (Valid only for new customers…) - 30pt Jost Regular
• Кнопка - цвет, тень, закругленность, отступы, размер и жирность шрифта как на главном экране, только соответственно шире, учитывая количество текста. В будущем должна легко редактироваться (текстовая часть).
• Цвет фона - 5c2383.
• Поля формы такие же как на странице Checkout

Мобильная версия дизайн блока (что не меняется):

• Размер и жирность заголовка Give contacts… в блоке как и у остальных блоков - 40 pt, Jost Light
• Размер подписи снизу (Valid only for new customers…) - 24pt Jost Regular
• Кнопка - цвет, тень, закругленность, отступы, размер и жирность шрифта как на главном экране, только соответственно шире, учитывая количество текста. В будущем должна легко редактироваться (текстовая часть).
• Цвет фона - 5c2383.
• Поля формы такие же как и на странице Checkout

PopUp Мобильная версия (что не меняется):

• Размер окна и тень
• Размер и расположение иконки закрытия
• Размер шрифта заголовка
• Все отступы до контента
• Размеры и жирность шрифтов наименования полей и шрифтов внутри поля.
• Высота полей, border radius, их цвет (фон и обводка)
• Кнопка как на главной и в блоке.
• Закрывается с помощью иконки закрытия или нажатием мимо ПопАпа.

PopUp Декстоп (что не меняется):

• Размер ПопАпа и его тень.
• Размер и расположение иконки закрытия
• Размер шрифта заголовка.
• Цвет полей, border radius и цвет обводки
• Закрывается с помощью иконки закрытия или нажатием мимо ПопАпа.

PopUp Десктоп, особенности:

• Размеры и жирность шрифтов наименования полей и шрифтов внутри поля - 24pt Jost Light
• Ширина поля для заполнения 330px, Высота 52px
• Отступ внутри поля сверху 17px, слева 12px
• Ширина и высота кнопки как и поля. Размер шрифта 30pt Jost Regular, цвет 5c2383.

Мобильная версия дизайн блока, особенности:

• Может иметь 2 строки заголовка. Есть на примере на фото.
• Высота при 2 строчках заголовках - 362px
• Высота при 1 строчке заголовках - 316px
• Отступ сверху и снизу от контента - 58px

Десктоп версия дизайн блока, особенности:

• Высота блока - 204 px
• Отступ сверху и снизу от контента, и снизу до кнопки - 50px

После заполнения формы - PopUp спасибо.

• Появляется в том же месте где и предыдущий. По факту это же этот ПопАп только с текстом Thanks for filling out the form! Wait for a manager's message! Jost Regular 36pt
• Размер формы, тень, иконка закрытия такие же как и ранее.
• Заголовок и в десктоп и в мобилке такие же.
• Заголовок отцентрован посередине ПопАпа со всех сторон.
• Закрывается сам через 2 секунды или с помощью иконки закрытия или нажатием мимо ПопАпа.

Перевод текстов для арабской версии:

1)    Give contacts and get a bonus

2)    

3)    Valid only for new customers. The bonus is determined by the manager.

4)    I WANT A BONUS

5)    Fill in all fields

6)    Your name

7)    Email

8)   Thanks for filling out the form! Wait for a manager's message!

1) امنح جهة الاتصال واحصل على مكافأة

 2) 

 3) صالح للعملاء الجدد فقط.  يتم تحديد المكافأة من قبل الموظف.

 4) أريد مكافأة

 5) املأ جميع الحقول

 6) اسمك

 7) البريد الإلكتروني

8) شكرا لملء النموذج! انتظر رسالة المدير!

К задаче крепится несколько макетов для понимания визуала и типографики. Готовый результат должен максимально соответствовать макетам.