Потрібно допиляти фронтенд існуючого React/TypeScript проєкту. Не розробка з нуля, а акуратне закриття кількох UI/UX багів у вже робочому продукті. Проєкт: D&D-довідник з пошуком, секціями, деталками, глосарієм правил, авторизацією, профілями, коментарями, фільтрами та мобільним меню. Стек: - React 19 - TypeScript - Vite 7 - Tailwind CSS 4 - Framer Motion - TanStack React Query - react-hook-form - zod - Google OAuth - PWA - SSR/prerender Важливий контекст по коду: - основна логіка фронтенду сильно зібрана в одному великому App.tsx - навігація не класичний react-router flow, а ручна через history.pushState / popstate - фільтри вже працюють і синхронізуються з query params - auth-flow уже реалізований: login, register, verify email, forgot password, Google login - є внутрішні smart-лінки по термінах і секціях - є анімації через Framer Motion Потрібно закрити такі задачі: 1. Перебудувати auth-flow з акцентом на вхід Проблема: Зараз у UI місцями акцент на “вхід / реєстрація”. Потрібно зробити акцент саме на вході. Що потрібно: - основна CTA має бути “Увійти” - перший екран auth modal має бути login - із login screen має бути нормальний перехід на register - реєстрація лишається доступною, але як secondary-path - не ламати forgot password, verify email, Google login Результат: Флоу виглядає сучасніше і логічніше: головна дія — вхід, але новий користувач все одно легко доходить до реєстрації. 2. Виправити відображення фільтра при скролі на desktop і mobile Проблема: Під час скролу верхній блок пошуку/фільтра виглядає погано або майже не читається. Що потрібно: - або зробити floating filter/search block нормально видимим при скролі - або логічно ховати його при скролі - рішення має однаково адекватно працювати на desktop і mobile Результат: Фільтр не “висить у повітрі”, не губиться в інтерфейсі і не виглядає поламаним. 3. Виправити mobile-баг: перший тап по пункту меню/табу показує підказку, а не виконує дію Проблема: На мобілці перший тап по tab/menu item викликає tooltip/підказку, а перехід спрацьовує лише з другого тапу. Що потрібно: - перший тап має одразу виконувати дію - tooltip не повинен блокувати основну взаємодію на mobile - desktop hover/focus tooltip потрібно зберегти, якщо це можливо без регресій Результат: На mobile навігація працює з першого тапу. 4. Прибрати повторне програвання анімації при поверненні назад у mobile browser Проблема: На мобілці при browser back повторно програється наша reveal/scroll animation. Що потрібно: - не прибирати анімації повністю - прибрати саме повторне програвання в сценарії повернення назад у браузері - зберегти нормальну анімацію у звичайному сценарії переходу Результат: При browser back сторінка відновлюється без дубльованої анімації. Що важливо: - не переписувати проєкт з нуля - не ламати ручний роутинг - не ламати query params фільтрів - не ламати auth-flow - не ламати внутрішню навігацію по smart links - бажано мінімальний, акуратний рефакторинг тільки там, де він реально потрібен Що буде плюсом: - досвід із Framer Motion - досвід із mobile browser Що очікую від виконавця: -Використовувати телеграм групою де є таски та відео/скріни - коротко описати, як будете підходити до задач - після виконання пул реквестнути з комітами до кожної зміни - бажано скріни/коротке відео/GIF із фіксами desktop/mobile - не просто “пофіксити візуально”, а не зламати поточну логіку