У клиента есть дизайн для сайта https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396437091
Он хочет его построить на React js. (или на тех страницах, где можно избежать джаваскрипта, а использовать Parallax анимации).
Бекенд и апи будет разработан нами на YII2
Не смотря на Invision дизайн, который он нам предоставил, проект будет состоять из 35-50 страниц.
1) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440598 - при входе на сайт мы попадаем на данный экран, где нужно указать возраст. Если возраст будет до 21 года, то юзеру будет доступ запрещен.
2) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440596 - экран ввода года роджения. Если с данного компа юзер уже заходил на сайт, то второй раз запрашивать не будет данную процедуру. (согласно памяти браузера)
3) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396437091
Первая секция будет анимированной на джаваскрипте. Будут летать облака, и их движение будет плюс минус подстраиваться под движение мышки.
На второй секции, при наведении мышки на каждого из Breeders - их логотип будет становиться интерактивным и вокруг логотипа будут появляться кружочки и продукцией, которую предлагает данный Breeder.
Данная страница будет еще как и в виде слайдера (можно сделать как Parallax)
http://prntscr.com/r54dd5 - при прокрутке влево будет отдельный большой слайдер-секция с анимацией как и главный экран (но уже другая картинка) и ниже будет одна секция как детальное описание.
http://prntscr.com/r54dd5 - при прокрутке вправо будет другой слайдер-секция и + ниже одна секция с описанием (история создания компании)
4) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/402588786 - при нажатии на логотип каждой компании, будет появляться интерактивное меню-список продуктов (вокруг логотипа), которые предлагает данная компания. (при Нажатии на продукт, мы сможем перейти к этому продукту на другую страницу)
5) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/400029744
На этой странице есть так же слайдер влево и вправо.
Первая секция должна быть анимированной похожей на эту https://hinderer-wolff.fr/cepages-alsace
Так же на этой странице есть вторая секция ниже - она должна быть анимированной по принципу второй секции ниже по принципу этой страницы https://hinderer-wolff.fr/cepages-alsace
6) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440591 - будет анимированная страница и секция по принципу страницы выше.
7) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440590 - страница будет анимированной по принципу страницы выше.
На этой странице, кнопка BUY SEEDS будет работать по принципу этой кнопки http://prntscr.com/r54qtl https://hinderer-wolff.fr/cepages-alsace
На этой же странице в секции ниже будет возможность Поиска Breeders (список которых отображался на первых страницах. И при нажатии на эту кнопку нас вернет на страницу Breeders)
Так же на этой странице есть кнопка Search Seeds - будем перенаправлены на другую страницу с поиска знатного планчика.
8) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440589 - эта страница по принципу страниц выше. Те же кнопки в секциях ниже. Слайдер влево - вправо, в которых будут тоже будут секции с описанием и стандартными анимациями, как на страницах выше.
9) Shopping Cart - как вы заметили, на всех страницах, где есть продукты есть возможность добавить продукт в шопинг карту.
10) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440594
Ниже секция будет стандартно анимирована, как и секции подобных страниц выше.
11) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440593 - здесь так же как и на странице выше
12) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396435171 - страница с контактами и меню. Все кнопки активны. Проверьте в инвижене, что куда переходит
13) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396435169 - картинка будет чуть больше и анимирована по принципу этой же картинки, которая встречалась раньше
14) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396435170 - принцип как и выше
15) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440588 - Кнопка поиска Serach Seeeds. После ее нажатия, мы попали на этот экран
16) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440587 - результат поиска. При наведении мышкой на продукт, будет возможность добавить в корзину и указать количество
17) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440592 - FAQ
18) + еще 3 страницы FAQ http://prntscr.com/r552iz
19) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440586 - Шопинг Карта (Как сказал клиент, там будет в 2 раза больше полей для заполнения, нам нужно будет их нарисовать или внедрить по примеру)
20) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/402332637 - здесь будет экран заполнения доп инфы по оплате и доставке
21) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/402332636 - платежная система, оплата, + экран после оплаты
22) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/400200753 - Sign In
23) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396490354 - Карта, которая хранит память, что было добавлено ранее
24) Нам нужно еще сделать USER-profile. Там будет возможность внесения стандартных данных о юзере, данные о доставке, данные его платежки
=================================
Главным вдохновением для клиента был сайт https://hinderer-wolff.fr/cepages-alsace, его аниции, кнопки и функционал.
Нужны ориентировочные бюджеты на работу, сроки, вопросы.
Нужен опорный разработчик на реакте на постоянной основе.
