Pogoda
Магазин обжарщика, где у каждого кофе своя погода
Протрите запотевшее окно и найдите кофе недели, сравните вкус на синоптической карте, заварите по рецепту с таймером и закажите пачку, подписку или оптовую поставку.
Next.js · React · TypeScript
Задача
Дескрипторы вроде «бергамот» или «винный» мало что говорят до первой чашки. Покупателю нужно быстро сравнить кислотность, тело и сладость и понять, как заварить выбранную пачку.
Дальше по странице
Как устроен сценарий
-
Протереть окно
На первом экране кофе недели скрыт за запотевшим стеклом. Протрите его курсором или пальцем, и название проявится, а потом стекло снова затянет.
-
Сравнить по карте
Каждый сорт — станция на синоптической карте: правее — ярче кислотность, выше — плотнее тело, а изолинии соединяют равную сладость. В каталоге наведение на сорт меняет небо на его погоду.
-
Заварить и заказать
На странице сорта — происхождение, высота, урожай, кривая обжарки и рецепты, а калькулятор с таймером ведёт заваривание. Из корзины можно перейти к оформлению заказа, у подписки и опта свои заявки.
Polok Баня на берегу Катуни с отдельными парными