Cайт-визитка на WordPress

Вводная:

Дизайн: готов, предоставим

Верстка: готова, предоставим

Тексты и элементы по страницам: анимированы. Все анимации реализованы в верстке.

FTP аккаунт / Админ панель: подготовлены, предоставляем доступы

CMS: WordPress (последняя версия)

Необходим будет плагин ACF

Техническое описание

1. Меню сайта

1.1. Меню сайта (web версия): 

Home 

Values

Contact

Get in touch

Анимационное блоки в меню (только web версия):

Company

Sectors

How we work

Футер (web версия, в выпадающем меню):

Контакты

Номер телефона

Ссылка / Иконка: LinkedIn

Ссылка на страницу: Privacy Policy

Копирайты

Клик на каждый пункт в меню - ведет в соответствующий раздел / страницу сайта

Клик на “Почтовый контакт” - открывает почтовый клиент на девайсе пользователя

Клик на “Номер телефона” - открывает почтовый клиент на девайсе пользователя

Клик на иконку LinkedIn - ведет на страницу компании в LinkedIn

Клик на “Privacy Policy” - открывает страницу с Privacy Policy, в том же окне

1.2. Меню сайта (mobile версия): 

Home 

Company

Sectors

How we work

Values

Contact

Get in touch

Футер (mobile версия, в выпадающем меню):

Контакты

Номер телефона

Ссылка / Иконка: LinkedIn

Ссылка на страницу: Privacy Policy

Клик на каждый пункт в меню - ведет в соответствующий раздел / страницу сайта

Клик на “Почтовый контакт” - открывает почтовый клиент на девайсе пользователя

Клик на “Номер телефона” - открывает почтовый клиент на девайсе пользователя

Клик на иконку LinkedIn - ведет на страницу компании в LinkedIn

Клик на “Privacy Policy” - открывает страницу с Privacy Policy, в том же окне

2. Админ панель

В админ панели сайта должны редактироваться все текстовые поля (пункты меню, футер, хедер, заголовки, текстовые блоки), изображения на всех страницах, а также названия полей форм отправки данных (со страниц: contact us и enquiry). 

Будет необходимость в редактировании максимально всего, что есть на сайте

3. Языки сайта

Контент сайта будет на двух языках

Английский

Арабский

Необходимо предусмотреть возможность:

Включить / Выключить из админки языки для отображения. Так как при первом запуске будет доступен только английская версия

Задать все переводы. Соответственно важно иметь возможность редактирования всех текстов на сайте.

4. Поп-ап при первом входе на сайт

В открываемом поп-апе пользователь соглашается с политикой кук.

При клике на “More details” - открываем страницу с Cookies Policy

При клике на “Decline” - пользователь отказывается принимать куки

При клике на “Accept” - пользователь соглашается принимать куки

Пока пользователь не нажал на кнопки “Decline” или “Accept” - поп-ап остается отображаться при переходе между страницами сайта

5. Home

5.1. Структура страницы:

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Центральный слоган компании

Информационные блоки, описывающие область работы компании (не кликабельные):

Artificial Intelligence 

Blockchain

Data Center

Software Development

Футер (web версия, только на home странице):

Контакты

Номер телефона

Ссылка / Иконка: LinkedIn

Ссылка на страницу: Privacy Policy

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

Клик на “Почтовый контакт” - открывает почтовый клиент на девайсе пользователя

Клик на “Номер телефона” - открывает почтовый клиент на девайсе пользователя

Клик на иконку LinkedIn - ведет на страницу компании в LinkedIn

Клик на “Privacy Policy” - открывает страницу с Privacy Policy, в том же окне

5.2. Mobile адаптация

Обратить внимание: в mobile версии, информационные блоки, описывающие область работы компании автоматически скролятся (реализовано в верстке) и кликабельны. Соответственно, в отличие от web версии, они ведут на соответствующие разделы / страницы сайта

Футер (mobile версия, только на home странице):

Копирайты

Ссылка на страницу: Privacy Policy

Ссылка на страницу: Contact Us

Ссылка / Иконка: LinkedIn

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

Клик на кнопку “Artificial Intelligence” - ведет на соответствующую страницу

Клик на кнопку “Blockchain” - ведет на соответствующую страницу

Клик на кнопку “Data Center” - ведет на соответствующую страницу

Клик на кнопку “Software Development” - ведет на соответствующую страницу

Клик на “Privacy Policy” - открывает страницу с Privacy Policy, в том же окне

Клик на “Contact Us” - открывает страницу с Contact Us, в том же окне

Клик на иконку LinkedIn - ведет на страницу компании в LinkedIn

6. Company

6.1. Структура страницы:

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Заголовок

Описание

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

7. Sectors

7.1. Структура страницы:

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Заголовок 

Информационные блоки, описывающие область работы компании:

Artificial Intelligence 

Blockchain

Data Center

Software Development

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

Клик на блок “Artificial Intelligence” - ведет на соответствующую страницу

Клик на блок “Blockchain” - ведет на соответствующую страницу

Клик на блок “Data Center” - ведет на соответствующую страницу

Клик на блок “Software Development” - ведет на соответствующую страницу

ВАЖНО: ниже будут описаны типовые страницы. Верстальщик сверстал только Artificial Intelligence. Остальные нужно будет создать из админки по аналогии. На типовых страницах отличаются только подложки блоков. Все блоки с подложками - сверстаны.

7.2. Artificial Intelligence

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Заголовок 

Описание

Блоки (не кликабельные)

Machine learning 

Data science

Computer vision

Текст с предложением подать заявку

Кнопка для подачи заявки

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

Клик на кнопку “Make an enquiry” - открывает страницу Get in touch

7.3. Blockchain

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Заголовок 

Описание

Блоки (не кликабельные)

Trading

Investment

Cryptocurrency

Текст с предложением подать заявку

Кнопка для подачи заявки

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

Клик на кнопку “Make an enquiry” - открывает страницу Get in touch

7.4. Data Center 

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Заголовок 

Описание

Блоки (не кликабельные)

Green Technology

Servers

Текст с предложением подать заявку

Кнопка для подачи заявки

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

Клик на кнопку “Make an enquiry” - открывает страницу Get in touch

7.5. Software Development 

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Заголовок 

Описание

Блоки (не кликабельные)

Hardware

Software

Web

Текст с предложением подать заявку

Кнопка для подачи заявки

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

Клик на кнопку “Make an enquiry” - открывает страницу Get in touch

8. How we work

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Заголовок 

Описание

Кнопка для подачи заявки

Графика (подложка)

Блоки с шагами к успеху

Кнопка для подачи заявки

Графика (подложка)

Кнопка “Стрелка” для возврата вверх страницы

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

Клик на кнопку “Make an enquiry” - открывает страницу Get in touch

Клик на “Стрелку”  автоматически скроллит страницу в самый верх 

9. Enquiry

Представляет собой пошаговую (в три этапа) форму для отправки запроса на почтовый ящик админа. Почтовый ящик должен быть задан в админке с возможностью менять, для получения писем. Соответственно с формы пользователь должен иметь возможность отправить письмо на заданный в админке почтовый ящик.

9.1. Step ⅓

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Поле формы для ввода текста / цифр / символов  “Company / Organization Name” - ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода текста / цифр / символов  “Location” - ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода текста / цифр / символов  “Site” - ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода значения из выпадающего списка “Year of foundation” - НЕ ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода текста / цифр / символов  “What amount of investment is required” - ОБЯЗАТЕЛЬНО для заполнения

Кнопка “Next step”

Текст ошибки в поле в случае отсутствия данных (относится ко всем трем шагам формы):

Текст ошибки: Empty field

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

Клик на кнопку “Next step” ведет на следующий шаг Step ⅔ 

(!) Все поля в форме редактируемые

(!) При переходе между шагами формы, заполненные поля должны быть сохранены

(!) Валидация на символы: точка, запятая, тире

9.2. Step ⅔ 

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Поле формы для ввода значения из выпадающего списка  “The current stage of the project” - ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода текста / цифр / символов  “What industry do you plan to develop” - ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода текста / цифр / символов  “What MRR do you generate” - ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода текста / цифр / символов  “What funding round” - ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода текста / цифр / символов  “Project competitors” - ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода текста / цифр / символов  “Competitive advantages” - ОБЯЗАТЕЛЬНО для заполнения

Кнопка “Next step”

Кнопка “Back”

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

Клик на кнопку “Next step” ведет на следующий шаг Step ⅔ 

Клик на кнопку “Back” ведет на предыдущий шаг Step ⅓

(!) Все поля в форме редактируемые

(!) При переходе между шагами формы, заполненные поля должны быть сохранены

(!) Валидация на символы: точка, запятая, тире

9.3. Step 3/3

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Поле формы для ввода текста / цифр / символов   “First Name” - ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода текста / цифр / символов  “Last Name” - ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода текста / цифр / символов  “E-mail - ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода цифр “Phone Number” - ОБЯЗАТЕЛЬНО для заполнения

Поле для заливки файла  “Add file or drop files here” - НЕ ОБЯЗАТЕЛЬНО для заполнения

Кнопка “Send”

Текст предупреждение: “By submitting the form you agree to the processing of personal data”

Кнопка “Back”

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

Клик на “Add file or drop files here” открывает окно для поиска файла с девайса. Залитый файл можно удалить через “х” после его заливки.

Клик на кнопку “Send” - отправляем все заполненные данные и вложенный файл на почтовый ящик админа (заданный в админке)

Клик на кнопку “Back” ведет на предыдущий шаг Step ⅔

(!) Все поля в форме редактируемые

(!) При переходе между шагами формы, заполненные поля должны быть сохранены

(!) Валидация на символы: точка, запятая, тире

(!) Валидация на поле email - проверка на @ и точки

При успешной отправке отображаем текст: “Thank you for your message. It has been sent” поверх нижней навигации между шагами формы

Текст ошибки в поле в случае неверно введенного почтового ящика (при отсутствии @ и точки)

Текст ошибки: Incorrect value

10. Values

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Заголовок 

6-ть блоков с описанными ценностями (анимированные)

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

11. Get in touch

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Поле формы для ввода текста / цифр / символов  “First Name” - ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода текста / цифр / символов  “Last Name” - ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода текста / цифр / символов  “E-mail - ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода цифр  “Phone Number” - ОБЯЗАТЕЛЬНО для заполнения

Поле формы для ввода текста / цифр / символов  “Please let us know what we can do to serve your needs” - ОБЯЗАТЕЛЬНО для заполнения

Кнопка “Send”

Текст предупреждение: “By submitting the form you agree to the processing of personal data”

Чекбокс “Please, inform me about news”

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

Клик на кнопку “Send” - отправляем все заполненные данные на почтовый ящик админа (заданный в админке)

Клик на кнопку чекбокс “Please, inform me about news” отправляет, дополнительно к данным введенным пользователем в полях формы, текст “Клиент согласен на новостную подписку”.

(!) Все поля в форме редактируемые

(!) Валидация на символы: точка, запятая, тире

(!) Валидация на поле email - проверка на @ и точки

При успешной отправке отображаем текст: “Thank you for your message. It has been sent” поверх нижней навигации формы

Текст ошибки в поле в случае неверно введенного почтового ящика (при отсутствии @ и точки)

Текст ошибки: Incorrect value

Текст ошибки в поле в случае отсутствия данных:

Текст ошибки: Empty field

12. Contact

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Заголовок

Address: 

Текст-ссылка: Show on map

Opening Hours:

Phone number:

E-mail

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

Клик на “Почтовый контакт” - открывает почтовый клиент на девайсе пользователя

Клик на “Номер телефона” - открывает почтовый клиент на девайсе пользователя

Клик на “Show on map” подтягивает внизу страницы карту (сервис mapbox) - которую можно свернуть нажав на “х”

13. Privacy Policy

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Текст с абзацами

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

14. Cookie Policy

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

Текст с абзацами

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

15. 404 ошибка

В случае, если страница, к которой обращается пользователь - не доступна

Хедер

Логотип компании

Переключатель языка сайта

Вызов бокового меню

404

Текст

Кнопка “Back to home”

Клик на “Лого компании” открывает домашнюю страницу - home, в том же окне

Клик на “Переключатель языка” - меняет язык на странице

Клик на “Меню” открывает боковое меню

Клик на “Back to home” открывает домашнюю страницу - home, в том же окне