Виправлення UI/UX багів (React, Tailwind, Framer Motion)

Доброго дня! Готовий взятися за ваш проєкт із виправлення UI/UX багів у мобільній та десктопній версіях. Маю практичний досвід роботи з React та Tailwind CSS, а також розумію специфіку роботи Framer Motion, зокрема вирішення конфліктів між анімаціями (transform) та фіксованим позиціонуванням (position: sticky), налаштуванням z-index та ефектів glassmorphism.

Перед початком роботи хотів би прояснити один момент: чи зможете ви надати доступ до репозиторію для локального розгортання проєкту та тестування правок безпосередньо на мобільних пристроях?

Напишіть мені, і ми узгодимо всі технічні деталі!

Доброго дня! Готовий приступити до роботи. Маю досвід з React, Tailwind, Framer Motion, розумію можливі причини проблем зі стилями, шаруванням та sticky-елементами. Можу швидко знайти джерело конфліктів і акуратно виправити, не ламаючи анімації. Готовий подивитися код.

Доброго дня.
Я переглянув опис проблем і можу їх виправити. Коротко поясню, що саме відбувається і як це можна вирішити.
1. Сині назви розділів у шапці (мобільна версія)
У мобільній версії браузер підміняє колір посилань на стандартний синій. Це звичайний конфлікт стилів. Потрібно правильно перевизначити стилі, щоб назви розділів завжди відображались білим кольором.
2. Проблема з плавучою кнопкою
Кнопка зроблена з анімацією, тому її потрібно виправляти обережно, щоб не зламати ефект. Я відновлю правильну прозорість і вигляд кнопки (ефект скла), при цьому сама анімація залишиться працювати як зараз.
3. Погано видно назви розділів у шапці (десктоп)
Під час вибору розділу з’являється світла анімована плашка, яка частково перекриває текст. Через це назва стає менш читабельною. Це вирішу налаштуванням шарів елементів, щоб текст завжди був чітко видно.
4. Зникнення шапки при відкритті правої панелі (мобільна версія)
… Коли відкривається бокова панель, анімація змінює поведінку сторінки і шапка перестає правильно "триматися" при скролі. Потрібно трохи змінити структуру відображення, щоб шапка залишалась на місці.
Усі ці проблеми технічні, але вони вирішуються без переробки дизайну чи функціоналу. Я акуратно виправлю їх так, щоб нічого не зламати в існуючих анімаціях і адаптивності.
Готовий взятись за роботу та оперативно все полагодити.

Добрий день. Готовий взятися за проєкт та обговорити, маю великий досвід у роботі з реактом та тейлвінд

Надішліть, будь ласка, у пп посилання на сайт для ознайомлення

Вітаю! Ознайомився з переліком багів. Опис проблем дуже чіткий, і я вже розумію їхню природу: від специфіки стекінгу контекстів (Stacking Context) до конфліктів transform з position: sticky.

Доброго дня! Можу виконати ваші завдання. Досвід є. Пишіть, домовимось.

Показати оригінал

Перекласти

Вітаю.

Я NodeJS розробник. Готовий взятися. Пишіть, обговоримо.

Добрий вечір

Мене звати Дмитро, компанія King Kong Lab.

Ознайомився з описом проблем. Можемо швидко розібратися з цими багами у фронтенді та акуратно виправити їх, не ламаючи поточну логіку інтерфейсу та анімацій framer-motion.

Виправимо колір назв розділів у мобільній версії, щоб вони коректно відображалися білим і не перебивалися дефолтними стилями браузера або конфліктами Tailwind. Також відновимо правильне відображення плавучої кнопки — повернемо glassmorphism та прозорість, зберігши анімацію компонента.

Окремо вирішимо проблему читабельності тексту у навігації — налаштуємо правильне шарування елементів (z-index, прозорість або blend), щоб текст завжди був чітко видимим поверх анімованої “плашки”.
…
Також розв’яжемо конфлікт sticky шапки з framer-motion при відкритті правої панелі в мобільній версії. Перевіримо структуру контейнерів і при необхідності змінимо архітектуру скролу або трансформацій, щоб шапка стабільно працювала при скролі.

Готові подивитися код або репозиторій і швидко внести необхідні правки.

Доброго дня! Розробник з досвідом, стикався з читанням чужого коду та дуже і дуже часто з подібними багами, готовий вам допомогти якнайшвидше та якнайбільш якісно)

Вітаю, виправлю сьогодні/завтра, маю досвід з React, tailwind css дуже гарно знаю, montion також, це все якраз мій стек, напишіть мені, підтверджу те що є такий досвід, покажу що я робив, і виправлю вашу легку помилку)

Добрий день! Ознайомився з ТЗ. Можу виправити проблеми з шапкою сайту, стилями в мобільній та десктопній версії, а також конфлікти з framer-motion і Tailwind. Працював із подібними задачами (sticky елементи, анімації, адаптивність), тому зможу акуратно виправити відображення без поломки поточної логіки компонентів. Готовий приступити найближчим часом.

Вітаю!

По першому питанню з синіми назвами розділів у шапці на мобільній версії - використаю DevTools для аналізу проблеми. Швидше за все, допоможе додавання класу з підвищеним рівнем пріоритету для текстових елементів назв розділів аби перекрити стилі посилань.

Друге питання з плавучою кнопкою вирішу шляхом редагування анімації у Framer Motion. Розберу існуючу реалізацію і підправлю стилі скей і кольорів так щоб відновити потрібну прозорість і зберегти фізику анімації.

По питання поганої читабельності назв розділів - допоможе зміна шарування елементів шляхом корекції z-index або додавання прозорості фону активної "таблетки" щоб текст завжди був зверху.

Останнє питання зі зникненням шапки при відкритті правої панелі вирішу шляхом зміна архітектури скрол-контейнера або відкоригування анімаційних трансформацій у Framer Motion щоб вони не впливали на поведінку position: sticky.
…
Зроблю все максимально швидко і якісно щоб нічого не впливало на працездатність сайту.

Доброго дня.

Ознайомився з описом задачі. Можу допомогти з виправленням UI/UX багів у мобільній та десктопній версіях.

Маю досвід роботи з адаптивною версткою, CSS та JavaScript, тому зможу:
• виправити стилі назв розділів у мобільній шапці
• скоригувати відображення плаваючої кнопки
• виправити проблему з читабельністю активної вкладки (шари, прозорість, z-index)
• вирішити конфлікт sticky-шапки з анімацією панелі
…
Постараюсь зробити правки акуратно, щоб не порушити існуючу логіку компонентів і анімацій.

Готовий обговорити деталі та приступити до роботи.