Правки по фронтенду сайта на ReactJS

1. Исправить калькулятор, когда он начинает уходить в рекурсию при определенных параметрах

2. Сделать чтобы кнопки выбора ранка были в гриде как на этой картинке https://imgur.com/iBroZXh

3. Добавить новые разделы Competitive Wins, Placement в калькулятор рядом с кнопкой "Ranked Boost" с формой как на этом сайте:

https://boostroyal.com/valorant-boosting/competitive-wins/

https://boostroyal.com/valorant-boosting/placements/

Ranked boost уже есть, через него можно большую часть компонентов использовать для этих частей.

4. Сделать чтобы можно было в роутере обращатся сразу к определенному калькулятору по типу:

/boost/competitive_win

/boost/ranked

/boost/placements

5. Сделать чтобы иконки рангов менялись на выбранный уровень. Сейчас на всех ранках стоит только 1 картинка первого дивизиона, но когда выбирают 2 дивизион необходимо чтобы бралась иконка 2 дивизиона: https://support-valorant.riotgames.com/hc/article_attachments/7088900088979

6. Добавить анимацию загрузки когда калькулятор забирает с сервера ответ. Сейчас стоит промис который резолвится вместо настоящего запроса, нужно чтобы калькулятор показывал что информация подгружается какой то анимцией. Например в "Resume" чтобы цены убирались на какуюто анимацию прогрузки пока с сервера идёт ответ.

7. В попапе входа добавить кнопку дискорда которая ничего не делает.

8. При загрузке страниц / их переключении нужно убрать белый экран браузера который слепит пользователя. Тк у нас дизайн тёмный, то при переключениях это раздражает пользователей. Пока картинки загружаются итд, лучше какой то экран загрузки показывать на странице.

9. Перенести на SSG/SSR через nextjs/vite чтобы можно было билдить статично весь контент и раздавать в виде html который поисковики могут увидеть.

10. Когда в калькуляторе выбирают опцию "Предпочтения по Агентам" нужно показывать список агентов мультиселект. Картинки можно оставить любые, контент потом наполним. На этом сайте есть эта функция в калькуляторе https://boostingmarket.com/ru/valorant-boost/valorant-placements-boost

11. Добавить стиль Disabled у кнопок калькулятора, сейчас это просто стиль курсора но нужно сделать чтобы кнопки становились серыми например.

12. Добавить кнопку trustpilot и reviewsio под кнопкой покупки как тут: https://gameboost.com/valorant/boosting/rank-boost

13. Когда нажимают "Заказать", если пользователь не авторизован то нужно открывать окно логина которое уже есть. Если залогинен, то исполнить процедуру sendDataToServer.

Текущую версию сайта можно посмотреть по https://zesty-caramel-212565.netlify.app/boost.

Исходный код: https://drive.google.com/file/d/1JNACaE8YYKjrNPi6Y4pHl_wsAyvTYZGu/view?usp=sharing

Читайте на 123ru.net