Тестовое задание от компании Only

Описание

Реализовать следующий блок в соответствии с макетом

Блок содержит информацию о временных отрезках, в каждом из которых существует несколько событий. При переключении временных отрезков изменяются соответствующие числа и под ними показывается новый слайдер, который содержит подробную информацию по ключевым событиям на активном временном отрезке.

Возможно существование от 2 до 6 временных отрезков. Все интерактивные точки на окружности располагаются на одинаковом расстоянии друг от друга

Весь блок стоит сделать независимым от другой логики на странице. Например, если добавить на страницу ещё один такой же блок, верстка и логика работы этих блоков не будет нарушена

Все существующие в макете линии — это не разметочная сетка, а часть верстки

Требования к реализации

Технологии

TypeScript [+]
React.js или JS (В случае использования нативного JS, можно воспользоваться любым удобным для Вас HTML-шаблонизатором или обычным HTML) [+]
SASS/SCSS (В случае работы с React.js, возможно использование styled-components) [+]
Webpack [+-]
Swiper [+]
Для реализации js-анимаций можно использовать библиотеку gsap [+]

Ограничения

Не использовать JQuery
Не использовать Bootstrap, Tailwind и т.п.
Не использовать библиотеки с готовыми UI-компонентами такие, как Material UI, AntDesign и т.п.

Инструкция по запуску

⚠️ Убедитесь что у вас установлен Node.js

Клонировать репозиторий

git clone git@github.com:exodie/test-task-only.git или
git clone https://github.com/exodie/test-task-only.git

Перейти в каталог с проектом

Например,

  cd test-task-only

Установить зависимости проекта

Например, используя NPM (Node Package Manager)

  npm i

Запустить проект