Верстка блоку з відгуками для Kursach.site

1. Загальна інформація

• Де знаходиться: Головна (замість теперішнього), комерційні сторінки (замість теперішнього), сторінка гарантій (під блоком з публічною офертою)

2. Макет та референси

• Посилання на макет: kursach – Figma

3. Опис блоку

Блок, який буде автоматично оновлюватись, тягнутиме дані з джерел з відгуками (поки що google), з якого, в подальшому, будемо брати дані для розмітки. 

4. Структура

• Заголовок
  

• Плашки з відгуками

  • Фото

  • Ім’я/Прізвище

  • Тип роботи

  • Оцінка

  • Текст відгуку

  • Джерело відгуку

• Кнопки для прогортки 

• Повзунок прогортки (десктоп)
  

• Кнопка “Залишити відгук”

5. Вимоги до верстки

• Блок повинен бути адаптивним та мати окремий фіксований вигляд для наступних розмірів: 

  • 320px, 360px, 414px - мобільні версії 

  • від 414px до 768px, 834px, 1024px - планшети

  • від 1024 до 1280px, 1366px, 1440px, 1600px, 1920px

• Блок повинен займати рівно 100% ширини екрану, без горизонтального скролу.

• Маємо мати змогу редагувати заголовок та підтверджувати/видаляти відгуки через адмінку WordPress

6. Інтерактивні елементи

• Плашки з відгуками можна гортати за допомогою кнопок для прогортки (прогортується по 3 штуки). В залежності від поточної сторінки відображуваних сторінок відгуків - змінюється повзунок прогортки на десктопі.

• При наведенні на кнопку “Залишити відгук” - з’являється тінь (як і на інших кнопках сайту)

7.  Логіка 

Не до кінця впевнені як це реалізувати, тому будемо раді консультації.

На даний момент, потрібно підключити тільки відгуки з Google.

Фото, Ім’я/Прізвище, оцінка та текст відгуку береться з самого відгуку. Джерело відгуку задається на основі того, звідки прийшов відгук (треба це автоматизувати). Тип роботи - задаємо через адмінку WordPress 

Кнопка “Залишити відгук” відкриває форму nps (має працювати так, як і зараз). Після залишення відгуку через цю кнопку - вона також має потрапляти в адмінку WordPress для підтвердження нами (на пошту потрапляє також - це реалізовано зараз). 

Якщо відгук не був підтверджений, то ми його не відображаємо  в блоці

8. Готовий результат

Готовий блок має бути зверстаний відповідно до макету, адаптивний, повністю займати ширину екрана (при цьому бути по розміру як і інші блоки) без виходу за межі viewport’у, відображатися коректно на всіх запланованих ширинах та інтегрованим в місця, які вказані в ТЗ.