Задача: 

Есть сайт https://rubbish.taxi/ 

Для этого сайта нужно внести  изменения по задачам описанным ниже. Работа должна вестись на субдомене rubbish.taxi.cosmos.studio. После подтверждения, переносим все правки на рабочий сайт.

Макеты: 

1. Главная 
2. Pricing page
3. Calculator 
4. Areas we cover 
5. Contact
6.  UI кит

Общие задачи: 

1. Деактивировать cookie policy или сделать так, чтобы автоматически пропадало после 2-3 секунд. Тут нужен совет, как правильно по GDPR. 

2. Не всегда при клике на моб телефон идет окно с вызовом, аналогично для мобильных устройств. Просьба исправить этот момент для всех страниц. (также везде меняем мобильный номер на актуальный) 

Задачи: 

Главная страница: 

1. Убрать точку на главном экране и на всех страницах в названии компании Rubbish Taxi. Аналогично меняем везде где встречается данное название. 

2. Кнопка Calculate cost заменить Book an Appointment. Должна вести на ссылку 

https://book.servicem8.com/request_service_online_booking?strVendorUUID=8a652691-8155-42e8-a7e7-9d55cf62587b#5210a36d-866e-449f-bab3-1d04abdabd6b

3. Блок Where do we trip? Есть баг в блоке где используется интерактивная анимация машинки. Пунктирные линии отображаются неверно, и машина заезжает на текст. Как должна работать данная анимация: когда человек попадает на этот блок и начинает прокручивать его вниз, машинка стартует и начинает ехать с первой точки и продолжает движение по мере скролла: если человек скроллит вниз – она едет вниз. Если вверх, она едет вверх. 

Анимация: https://drive.google.com/open?id=1WNz7uQOkjCNXArp50605nFqrbnraCBrt 

Для появления и исчезновения машинки использовался параметры scale и opacity.

4. Блок Pricing. Добавляем кнопку Calculate your cost, которая должна вести на страницу https://rubbish.taxi/calculator-step1 

Также в данном блоке увеличилось фото, для того чтобы соответствовать структуре текста. 

5. Блок How does it work. Меняем текст для данного блока (актуальный текст указан в макете) 

В тексте есть линк  “calculator”, меняем его  на “estimate” и меняем ссылку - https://book.servicem8.com/request_service_online_booking?strVendorUUID=8a652691-8155-42e8-a7e7-9d55cf62587b#5210a36d-866e-449f-bab3-1d04abdabd6b 

Также из-за смены тексты, изменилась иконка. (показано на скриншоте) 

Актуальный текст для блока:

How Does it Work?

- Schedule your no obligation "estimate" (на слове estimate ссылку и выделение желтым цветом)

- We will text you 30 min before arrival and provide you with an upfront price.

- We will remove your items and collect a payment once job is complete.

6. Блок Ready to clear. Меняем текст для кнопки. Актуальный текст Calculate your cost. Линк остается тот же. Также меняем картинку с машиной в блоке CTA.  Касается и остальных страниц где используем данный блок. 

7. Блок Q&A. Данный блок просьба закомментировать для страницы, не удаляя его при этом. 

8. Блок What our clients say. Данный блок добавляем с сайта https://elfsight.com/ 

Здесь настраиваем нужный дизайн, отступы и шрифты. 

Пошаговые скриншоты по настройке тут https://drive.google.com/drive/folders/1D10EeLtDv73YbTnCYmiVaralT1w09pcl

Инструкция для настройки Google review через сервис apps.elfsight.com

1. Переходим на сайт apps.elfsight.com
2. Заходим в личный кабинет. 
3. На панели слева выбираем Aplications, нажимаем Add Aplications
4. Выбираем Google reviews 
5. Выбираем тему Grid и жмем continue with this template 
6. Настраиваем Filters, minimum rating 5 stars (или по желанию)
7. Можно настроить исключение по ключевым словам, в поле EXCLUDE BY NAME OR KEYWORD 
8. Или подобрать отзывы по ключевым словам в поле HAND-PICK REVIEWS BY NAME OR KEYWORD. Возвращаемся назад
9. Переходим в поле Heading, show heading - off, возвращаемся назад. 
10. Переходим в поле Layout 
11. В поле Header - меняем на off
12. В поле content width прописываем 1496
13. Grid setting выставляем 6
14. Переходим во вкладку review 
15. Review card layout - classic 
16. Source style - icon 
17. Review element to display, убираем review source 
18. How to display review text - Short 
19. Переходим на вкладку style 
20. Выбираем Custom 
21. Accent color - rgb(255, 180, 0)
22. Background type - color 
23. Background color rgb(255, 253, 245)
24. Text color rgb(0, 0, 0)
25. Review background color rgb(255, 253, 245)
26. Rating color rgb(255, 180, 0)
27. Жмем сохранить в правом верхнем углу. 
28. Настроены виджет будет доступен в Вашем личном кабинете.

9. Блок Instagram. Данный блок добавляем с сайта https://elfsight.com/ 

Здесь настраиваем нужный дизайн, отступы и шрифты.

Пошаговые скриншоты по настройке тут https://drive.google.com/drive/folders/1D10EeLtDv73YbTnCYmiVaralT1w09pcl

Заголовок, который предоставляет плагин, отключаем и добавляем наш, также добавляем графические элементы с макета. 

Инструкция для настройки Instagram через сервис apps.elfsight.com

1. Переходим на сайт apps.elfsight.com
2. Заходим в личный кабинет. 
3. На панели слева выбираем Aplications, нажимаем Add Aplications
4. Выбираем Instagram feed 
5. На левой панели выбираем Slider и жмем continue with this template 
6. Выбираем Personal Account и подключаем учетную запись Instagram 
7. Переходим на вкладку Layout
8. Выбираем поле Columns & Rows. В поле Columns - 6, Rows - 2, Space between - 25. 
9. Mobile optimisation: 1st - window width 1440, Columns - 6, Rows - 2, Space between - 20. 2nd - window width 768, Columns - 3, Rows - 2, Space between - 15. 3rd - window width 768, Columns - 2, Rows - 2, Space between - 15. После ввода возвращаемся назад в Layout
10. Выбираем Post setting, опускаемся к ACTION ON IMAGE CLICK и ставим open in popup. Возвращаемся назад в Layout 
11. Переходим на вкладку Colors 
12. Открываем Slider colors. 
13. Arrows - rgb(0, 0, 0), Arrows background - rgb(251, 202, 39). Возвращаемся на вкладку Colors
14. Переходим на вкладку More 
15. Feed title - убераем. 
16. С правой стороны экрана, выбираем пустой фон, 3я иконка. 
17. Жмем сохранить в правом верхнем углу. 
18. Настроены виджет будет доступен в Вашем личном кабинете.

10. Футер. Убираем точку  из названия Rubbish Taxi. Добавляем актуальный номер телефона. Также заменяем логотип Cosmos Studio на актуальный. Ставим актуальный 2021 год. 

Pricing page

1. На главном экране меняем текст кнопки. Актуальный текст Calculate your cost. 

2. В таблицу с прайсингом добавляем еще 2 строки, как на старом сайте и привязываем Математически к калькулятору. (как работает данная таблица см. страница Calculator)

Calculator 

На эту страницу мы попадаем после нажатия на кнопку “Calculate your Cost”. Калькулятор состоит из нескольких шагов (страниц). 

Макет https://www.figma.com/file/O0uHZ8dqaCbdo39tPP2soI/Rubbish-taxi-revisions?node-id=117%3A0 

1. Меняется кнопка Next на данной странице, она стала длиннее для всех версий: десктоп, мобайл и таблет.  Это расположение меняется для всех этапов калькулятора. (Редизайнили данную кнопку для того чтобы виджет ее полностью не закрывал) 

Из-за того, что кнопка Next стала длиннее, общую сумму, которая отображается как “Total” перенесли выше. 

2. Во втором шаге калькулятора добавляем еще две строки в таблицу. Новые 2 строки показывают нам кол-во грузчиков и время за которое они смогут перевезти тот или иной предмет. Эти две новые опции мы также должны подвязать к калькулятору по такой же системе и функциональности как подвязаны две верхние. 

3. В калькуляторе есть строка Total weight. Для этой строки просьба убрать нули, чтобы всегда было округление. 

4. Для мобильной версии сначала показывать  шаг 3 Estimation (сейчас открывается при нажатии  Show card), а дальше форма заполнения (Personal Information). Возможно ли это сделать технически только для мобильного, при этом оставить для десктопа так как есть сейчас? 

Areas we cover

1. Нужно заменить кнопку Calculate Costs на первом экране на Book an Appointment. Должна вести на ссылку 

https://book.servicem8.com/request_service_online_booking?strVendorUUID=8a652691-8155-42e8-a7e7-9d55cf62587b#5210a36d-866e-449f-bab3-1d04abdabd6b

2. Редизайнили и переосмысли данную страницу. (полностью обновили систему работы этой странички)  

Пример работы этой секции: https://stylus.ua/contacts.html 

На карте выставлены маркеры городов указанных в списке.

При ховере на город в столбике слева, курсор меняется на руку, текст кнопки выделяется желтым цветом #EFB123 и справа появляется боковое меню с выбором районов города. Районы могут быть или не быть у каждого города, то есть этот блок должен быть легко редактируемым. Также могут добавляться/убираться города.

При клике на выбранный город, карта приближает его.  

Навигация бокового меню по скролу. При ховере на название района, название выделяется желтым #EFB123 и появляется стрелка, курсор мыши меняется на руку и на карте устанавливается маркер выбранного района. 

При клике на название района, открывается новая страница с описанием. 

Анимация по текущей стилистике сайта. 

Contact us 

1. Нужно поставить актуальный мейл. (также изменить для других страниц, где это нужно)  Он должен быть кликабельным. При клике на мейл должно открываться окно для письма, в том сервисе, который человек по умолчанию использует для отправки мейлов. 

2. Актуализировать и на этой странице мобильный телефон. Также на этой странице мобильный телефон должен быть кликабельным, вести на звонок, как для декстопа, так и для мобильного. 

3. Добавить время работы выходных дней Sat: 8: 00-16: 00 i Sun 9: 00-15: 00.