Cайт бронирования - необходимо натянуть готовый дизайн (Figma) на cms

Необходимо создать сайт (MVP) по продаже путешествий на яхте на нашем дизайне (Figma).

По функционалу сайт почти полностью идентичен с https://www.theyachtweek.com, с той разницей, что у нас нет кабинета пользователя (мы его не создаем, а просто отправляем пользователю его информацию на имейл).

В ТЗ, который будет передан выбранному исполнителю есть описание всех страниц и функций каждого блока. Дизайн выполнен в Figma, структурирован и содержит комментарии по функционалу элементов. В данный момент используется сайт на шаблоне wordpress со старым контентом и функционалом - https://sailomate.com

Основные требования:

• Языки - сайт должен поддерживать мультиязычность, на старте 3 языка, в будущем возможно до 5
• Интеграции - сайт должен иметь возможность интеграции с https://www.klarna.com/us/business/ , https://stripe.com, https://www.getresponse.ru, https://www.liveagent.com
• Права доступа:
• общедоступная часть - все посетители
• админ-панель - администратор
• страницы защищенные паролем - все посетители с кодом доступа

• Пользователь попадает на главную - > выбирает направление (страну) -> выбирает из списка даты - > выбирает один из четырех пакетов - > выбирает один из двух типов размещения - > выбирает тип каюты (если на предыдущем шаге был выбран тип размещения "каюта") -> вводит свои данные и производит оплату (после оплаты данные пользователя и его выбор отправляются админу и попадают в список рассылки на Getresponse)
• Администратор наполняет сайт контентом таким как: медиа, тексты, описания и т.д., создает на базе шаблона новые страницы вояжей, устанавливает для страниц отдельных вояжей при необходимости статус "защищенной паролем" и создает пароль, управляет настройками сайта.

Главная (/)

- блок выбора направления (выпадающее меню) и дат (выпадающее меню. Даты выбирать произвольно нельзя, выбор происходит из списка вояжей, каждый вояж ровно неделя), кнопка "Start browsing" - переносит на соответсвующий шаг

- блок "How it works" - 4 текстовых блока слева и картинка справа. Клик по одному из текстовых блоков переключает картинку. Блоки также переключаются автоматически с задержкой в 5 секунд. Кнопка "Read more" перекидывает пользователя на страницу FAQ. Кнопка "Book now" перекидывает пользователя на страницу "Destinations".

- блок "People love Sailomate" - галерея отзывов (фото+текст+ рейтинг). При наведении мышки на текстовую часть она увеличивается по высоте и появляется кнопка "Go same route as Joe". Тексты, фото, рейтинг и ссылку на кнопке администратор вводит вручную в админ-панели

- блок "Our destinations" - кнопка "Browse all destinations" отправляет пользователя на "/destinations". Карточки направлений содержат фото, название, период (may-aug), цену - заполняются админом в админ-панели. Кнопка "Explore" переводит пользователя на "/destinations/name1", кнопка "Book" переводит пользователя на выбор дат с учетом выбранного направления.

- блок "Get to know your crew in advance" - карточки пользователей (заполняются админом вручную), кнопка "Join Now" - отправляет пользователя на присоединение к группе в FB

- блок "Book now, Pay later" - описательный, заполняется админом в админ-панели, текстовая ссылка "Choose your voyage and price" отправляет пользователя на страницу '/destinations"

- блок "Be the first to know" - подписывает пользователя по API в рассылку на getresponder.ru

- блок "Our partners" - содержит логотипы партнеров, заполняется админом в админ-панели

Destination (/destinations)

- блок "Our destinations" такой же как на главной - кнопка "Browse all destinations" отправляет пользователя на "/destinations". Карточки направлений содержат фото, название, период (may-aug), цену - заполняются админом в админ-панели. Кнопка "Explore" переводит пользователя на "/destinations/name1", кнопка "Book" переводит пользователя на выбор дат с учетом выбранного направления.

Dates (/dates)

- блок "Choose your voyage dates" содержит список доступных дат (недель) вояжей. Неделям администратором может быть присвоен статус "HOT", или "SOLD OUT". В случае присвоения статуса "HOT" напротив дат недели появляется соответсвующий стикер. В случае присвоения статуса "SOLD OUT" напротив дат недели появляется соответсвующий стикер, а стрелочка перехода к бронированию становится серой и ведет не на страницу '/package', а на попап 'waiting list'. На каждую неделю есть 4 пакета/цены, на этой странице в графе "from $..." отображается цена ('pricepp') самого дешевого пакета этой недели. Все цены вносит администратор в админ-панели. Нажатие на стрелочку активной недели запоминает выбор пользователя и отправляет его на страницу '/package'.

Package (/package).

- блок "Choose your package" - пользователь выбирает один из 4х пакетов. Цены пакетов вносит администратор в админ-панели. У пакетов может быть 2 статуса "активный" и "SOLD OUT". В случае, если администратор присвоил какому-либо пакету недели статус "SOLD OUT", на странице 'Package' у этого пакета появляется соответсвующий стикер, а кнопка "Select" заменяется на "Join waiting list", которая при нажатии открывает попап "waiting list'. Кнопка "Select" запоминает выбор пользователя и отправляет пользователя на страницу "/crew"

Crew (/crew)

- блок выбора размещения - у пользователя есть 2 варианта: "Full yacht" и "Cabins or spots". При выборе "Cabins or spots" кнопка "Select" запоминает выбор пользователя и отправляет пользователя на страницу "/cabin". При выборе "Full yacht" кнопка "Select" запоминает выбор пользователя и отправляет пользователя на страницу "/payment", минуя страницу "/cabin"

Сabin (/cabin)

- блок "Choose your cabin" - пользователь выбирает количество и тип кают. Каюты бывают 3х типов: мужские, женские и смешанные. Чтобы пройти дальше пользователь должен выбрать как минимум одну каюту любого типа, без этого кнопка не активна. Количество доступных кают устанавливает администратор в админ панели. При попытке выбирать более кают, чем количество свободных, отображается служебное сообщение "Unfortunately there are not enough free cabins onboard". В нижней части блока отображается суммарная стоимость всех выбранных кают, которая рассчитывается по формуле: = "цена per person данного пакета данной недели *2" ('pricecb'='pricepp'*2). Кнопка "Continue" запоминает выбор пользователя и цену и перемещает его на страницу /confirmation

Confirmation (/confirmation)

- блок оплаты - "Pay .." - отображает число равное 10% от цены выбранного вояжа ('pricecb'). Раздел оплаты отправляет платеж равный 10% от цены выбранного вояжа ('pricecb') (интеграция с Klarna). Галочки "I agree" и "I will ensure" обязательные, без низ кнопка оплаты не активна. При попытке нажать при не выбранных галочках выводится служебное сообщение "You must agree with terms and conditions and confirm following COVID-19 requirements"

- блок "чаво" - представляет собой вопроси и раскрывающиеся ответы, заполняется администратором из админ-панели.

- блок "Trip Summary" отображает картинку выбранного направления, и список выбранных предпочтений пользователя.

- блок "Payment Installments" отображает разбивку цены __ по периодам: 10% - today ('pricecb'*0.1), 30% ('pricecb'*0.3) (дата = 'bookingdate'+30 дней) , 60% (дата = 'voyagedate'-60 дней)

После оплаты открывается попап "Thank you"

Попап "waiting list" передает в список рассылки на Getresponce имя, имейл и телефон пользователя. Отправляет на имейл админа данные о пользователе: имя, имейл и телефон пользователя, выбранные им даты вояжа и пакет (если выбран)

Попап "thank you" содержит картинку и текст "Thank you for your booking, we are preparing your dream vacation, you will receive the details to your email in no time!"

Страница описания направления (/destinations/croatia) - описательная страница, использует такие же блоки как и другие страницы сайта.

Страниц описания вояжа - описательная страница, использует такие же блоки как и другие страницы сайта + использует счетчик обратного отсчета времени до даты начала вояжа.

Переменные:

'pricepp' - цена на одного человека для определенного вояжа в определенную неделю

'pricecb' - цена за каюту для определенного вояжа в определенную неделю, рассчитывается по формуле: "='pricepp'*2"

'voyagedate' - дата начала вояжа

'bookingdate' - дата бронирования