Сделать верстку магазина адаптивной для мобильных устройств

Это недоработанный плагин для After Effects: https://drive.google.com/drive/u/0/folders/1Nq9a672OK6ep9Com1lqelUhZxbx3_3f1 Это, если я правильно понимаю, CEP-плагин (Adobe Extension) для After Effects. Это HTML/JavaScript-панель через Adobe CSXS, которая взаимодействует с After Effects через ExtendScript. Целью было автоматизировать процесс создания видео в стиле "maze challenge", референс на YouTube GOALRUSH-f8x или аналог. Видео ручного монтажа: https://drive.google.com/file/d/1Ylzvax6w2JGDwaBqeCdbD49jh5wB5buY/view?usp=sharing Файл одного из проектов: https://drive.google.com/file/d/15vKd1L9VfHtDqK2wtLQdYEmDpH1d8Jvy/view?usp=sharing Кроме "багованности" системы через вайбкодинг (поэтому вайбкодеры мимо), не устраивали накладки такие детали (реальные правки): https://docs.google.com/spreadsheets/d/18Svc6GoQ34PgLe1HY7gNX5tPLH0Cpv9E4mfjCRBCMFU/edit?gid=0#gid=0 Нужно сделать систему, которая будет генерировать проекты в After Effects со всеми необходимыми компонентами видео, которые написаны в База.pdf, более детальная логика в виде фото, текстового документа и mind map для понимания всех возможных вариаций на диске: https://drive.google.com/drive/folders/1Uf4Pnw3SKmwpmhL7sjPZFnfAbN0arUjr?usp=sharing Еще более детально (с более углубленной описательной частью и ссылками на таймкоды в референсах) ТЗ будет фиксироваться в рабочей области проекта Конечный результат — это система, которая создает видео: от 40 секунд до 1 минуты, полностью уникальный контент каждое создание, без метаданных ИИ в файле видео, в нем должен быть понятный сюжет (ловушки, тупики, разные эмоции персонажей-знаменитостей в результате каких-то сюжетных поворотов в видео), саунд-дизайн под сюжет (крики и другие эмоции, взрывы и т.д.), стилистически не отличающиеся от видео референса с канала

Потребуется доработка рабочего лендинга -конфигуратора созданного в ИИ Созданы почти все визуализации и опции. Передадим архив. Нужно чтобы все хорошо работало, показывалось и адаптивность под моб и ПК. Прикреплен скриншот лендинга

ТЕХНИЧЕСКОЕ ЗАДАНИЕ НА РАЗРАБОТКУ ЛЕНДИНГА НА БАЗЕ WORDPRESSО проекте: Требуется создать продающий лендинг для авторского онлайн-интенсива на действующем корпоративном сайте юридической фирмы. Платформа сайта: WordPress. Ожидаемый URL страницы: salyk.net/online_intensiveОплата:Проект оплачивается с резервированием денег на депозите сайта. Без никаких «сперва сделаю работу, потом утверждаю проект и вы проводите оплату».1. Дизайн и структура:Есть готовый прототип в виде чистого HTML/CSS кода (включает тексты, структуру, цветовую гамму, адаптивность и вертикальные видеоотзывы 9:16). Код прилагается к этом ТЗ в файле «код». Можете его вставить здесь https://htmledit.squarefree.com/ и посмотреть предварительный дизайн.Задача по дизайну: Взять этот код за основу, но не просто скопировать. Приветствуется доработка UX/UI, добавление аккуратных микроанимаций, теней, современных эффектов (фич), которые сделают страницу более привлекательной и продающей, сохраняя строгий корпоративный стиль.Фотографии: пока прилагаются только 3 шт., сгенерированные ИИ. После утверждения проекта отправлю свои личные фотографии для интеграции на лендинге.2. Интеграция с CMS (Редактируемость):Критически важно: Лендинг не должен висеть на сайте как «голый» HTML-код. Страницу необходимо собрать с помощью визуального конструктора (Elementor) или реализовать через гибкие поля (ACF).У заказчика должна быть возможность легко менять любые тексты, ссылки, тарифы, фотографии и видео-отзывы прямо из админ-панели WordPress без вмешательства в код.3. Технические требования и адаптивность:Полная адаптивность кроссбраузерной верстки: Desktop, Tablet, Mobile. Страница должна корректно отображаться на всех типах устройств (в том числе пропорции 3 вертикальных видеоотзывов).Высокая производительность: Обязательна базовая оптимизация скорости загрузки (Google PageSpeed). Изображения должны быть сжаты и конвертированы в формат WebP, скрипты и стили минифицированы.4. Форма обратной связи (Лидогенерация):На лендинге есть форма заявки (Имя, Телефон). Ее нужно сделать полностью рабочей.Все заявки должны моментально отправляться на корпоративный email: info@сайт.net.Необходимо настроить отправку через SMTP-сервер или использовать надежный плагин (WPForms / Contact Form 7), чтобы заявки гарантированно не попадали в папку «Спам».5. Мультиязычность:Текущий сайт подразумевает наличие трех языков (РУС, КАЗ, АНГЛ).В рамках проекта исполнитель должен настроить мультиязычность для нового лендинга (с помощью плагинов Polylang, WPML или аналогов).В процессе выполнения задачи заказчик предоставит готовые переводы текста на казахский и английский языки. Исполнитель должен создать и оформить эти дополнительные языковые версии страницы.6. Интеграция с главным сайтом:Настроить переход на лендинг с основного сайта.В главном меню (в хедере) действующего сайта salyk.net необходимо добавить новую кнопку или пункт меню (например, «Онлайн-интенсив»), которая будет вести на адрес /online_intensive.Дополнительно: сделать функцию на всем сайте переключения между языками rus/eng/kaz в стиле сайта.

Есть действующий production-сайт с каталогом товаров, карточками моделей и информационными страницами. Стек frontend: — Next.js; — React; — TypeScript; — существующая компонентная система; — staging и production environments. Есть согласованное визуальное направление и дизайн новой главной страницы. Необходимо внедрить его в существующий проект, адаптировать под desktop/tablet/mobile и привести все основные типы страниц сайта к единой обновлённой стилистике. Полный редизайн продукта и изменение бизнес-логики не требуются. ОБЯЗАТЕЛЬНЫЙ SCOPE 1. Новая главная страница — реализовать главную страницу по предоставленному дизайну; — сохранить существующую функциональность, ссылки и маршрутизацию; — корректно подключить согласованные секции и CTA; — использовать существующие данные и API; — предусмотреть корректное отображение динамического контента. Основные типы секций: — header/navigation; — hero; — информационные блоки; — карточки моделей/предложений; — аналитические или market insight блоки; — CTA-секции; — footer. Точный состав секций будет предоставлен выбранному исполнителю вместе с макетом. 2. Responsive Необходимо реализовать: — desktop; — tablet; — mobile; — промежуточные разрешения; — корректное поведение сеток, карточек, меню, кнопок и типографики; — отсутствие горизонтального скролла и визуальных конфликтов. 3. Типографика и общие стили — внедрить новые согласованные шрифты; — привести размеры, веса, line-height и интервалы к единой системе; — обновить стили кнопок, карточек, полей, бейджей и заголовков; — по возможности использовать общие design tokens или CSS variables; — не дублировать стили отдельно для каждой страницы без необходимости. 4. Унификация существующих страниц Проверить и привести к новой стилистике основные типы страниц: — каталог; — карточка модели / PDP; — информационные страницы; — header; — footer; — формы; — модальные окна; — существующие CTA; — loading / empty / error states, если они уже присутствуют в проекте. Речь идёт о визуальной унификации существующих компонентов, а не о полном индивидуальном редизайне каждой страницы. 5. Каталог Проверить: — сетку карточек; — изображения; — название, reference и цену; — фильтры и сортировки; — кнопки и ссылки; — desktop/mobile отображение; — loading и empty states; — отсутствие визуальных сдвигов при загрузке. 6. PDP Проверить: — галерею; — основной информационный блок; — цену и CTA; — аналитические секции; — таблицы и метрики; — About Watch; — desktop/mobile компоновку; — длинные названия, references и отсутствующие данные. Необходимо сохранить текущую функциональность и существующие контракты API. 7. Header и Footer — единая стилистика на всех страницах; — responsive navigation; — mobile menu; — корректные active/hover/focus states; — отсутствие расхождений между главной, каталогом и PDP. 8. Состояния интерфейса Для динамических блоков проверить: — loading; — empty data; — API error; — insufficient data; — отсутствующее изображение; — отсутствующая цена; — длинный текст; — мобильное отображение. Не требуется разрабатывать новую сложную бизнес-логику. Необходимо корректно визуализировать уже существующие состояния. 9. Качество и производительность — не ухудшить SEO и текущую индексацию; — сохранить корректные metadata и semantic HTML; — не создавать критических layout shifts; — оптимизировать изображения и шрифты; — учитывать reduced motion для анимаций; — проверить базовую доступность: focus states, contrast, keyboard navigation; — не подключать тяжёлые библиотеки без обоснованной необходимости. 10. Staging и QA — развернуть изменения на staging; — проверить основные типы страниц; — проверить desktop, tablet и mobile; — устранить визуальные и responsive-баги; — после приёмки выполнить production deployment; — обеспечить исправление багов по реализованному scope не менее 7 календарных дней после выкладки. РЕЗУЛЬТАТ РАБОТЫ — Pull Request с frontend-кодом; — реализованная новая главная; — responsive desktop/tablet/mobile; — единые шрифты, карточки и базовые UI-компоненты; — визуально согласованные каталог, PDP и информационные страницы; — staging deployment; — исправление найденных визуальных ошибок; — production deployment; — краткое описание изменённых компонентов; — 7-дневный bug-fix period после приёмки. ACCEPTANCE CRITERIA 1. Главная соответствует предоставленному дизайну. 2. Все секции корректно работают на desktop, tablet и mobile. 3. Header и footer единообразны на всех страницах. 4. Каталог и PDP визуально соответствуют новой системе. 5. Текущая функциональность сайта не нарушена. 6. API-контракты и backend-логика не изменены без согласования. 7. Нет горизонтального скролла и критических layout shifts. 8. Шрифты и изображения загружаются корректно. 9. Loading, empty и error states отображаются без поломки layout. 10. Изменения проверены на staging и развернуты в production. 11. Исправлены визуальные ошибки, обнаруженные при приёмке в рамках согласованного scope. ЧТО НЕ ТРЕБУЕТСЯ — разработка backend; — изменение бизнес-логики; — создание нового каталога или CMS; — разработка нового API; — полный редизайн каждой информационной страницы; — новые пользовательские функции, отсутствующие в макетах; — разработка сложной дизайн-системы с нуля; — создание нового проекта вместо доработки существующего; — изменение SEO-структуры без отдельного согласования. ТРЕБОВАНИЯ К ИСПОЛНИТЕЛЮ — уверенный Next.js / React / TypeScript; — опыт работы с существующими production-проектами; — качественная responsive-вёрстка; — опыт внедрения дизайна из Figma; — компонентный подход; — уверенная работа с CSS / CSS Modules / Tailwind или существующей системой проекта; — понимание Core Web Vitals; — Git / Pull Request workflow; — умение работать через staging. В ОТКЛИКЕ ОБЯЗАТЕЛЬНО УКАЗАТЬ 1. Fixed price за полный обязательный scope. 2. Срок выполнения в рабочих днях. 3. Оценку в часах. 4. Когда готовы начать. 5. Ссылки на 2–3 релевантных проекта на Next.js/React. 6. Есть ли опыт работы с каталогами, карточками товаров или аналитическими интерфейсами. 7. Что потребуется для точной оценки до начала работы. 8. Входят ли в цену: — staging; — responsive QA; — production deployment; — исправление багов; — 7-дневный bug-fix period. Шаблонные отклики без просмотра требований и без конкретной оценки рассматриваться не будут. Доступ к production на первом этапе не предоставляется. Работа начинается после ограниченного code review и разворачивается через staging.

ТЕХНИЧЕ ЗАДАНИЕ Обновление интернет-магазина bp.ua О проекте Действующий интернет-магазин парфюмерии на OpenCart 2.x. Нужно перенести на OpenCart 4.x, обновить дизайн и функционал, сохранить все данные, интеграции и SEO. Сайт двуязычный (украинский + русский). Ищем исполнителя (или команду) для backend и frontend. Можно откликаться на одну часть или на обе.Часть 1. Backend (OpenCart 4)Миграция Развертывание чистого OpenCart 4.x (последняя стабильная ветка), PHP 8.1+. Перенос данных: товары, категории, атрибуты, опции, бренды, клиенты, заказы, отзывы, контент-страницы. Сохранение SEO-URL (ЧПУ) один-в-один; карта 301-редиректов со старых адресов. Прямого апгрейда 2.x → 4.x нет: только чистое развертывание + контролируемый перенос.API-интеграция с поставщиком (приоритет) Портирование существующей кастомной доработки обмена с сервером поставщика (цены + остатки). Автоматическая синхронизация по расписанию (cron), лог ошибок, ручной запуск. Скрытие/статус для позиций, которых нет в наличии. Поддержка каталога 2 000+ позиций.Модули Новая Почта: выбор отделений/поштоматов, автоформирование ТТН из админки. Оплата: подключение платежной системы (LiqPay / Fondy / WayForPay — согласовать), наложенный платеж. Чекаут: серверная логика, гостевой заказ, статусы, уведомления клиенту. Массовый импорт/обновление товаров из прайса (xlsx/csv), привязка фото по артикулу/штрихкоду.Двуязычность (uk / ru) Два языка магазина: uk-UA (основной) и ru-RU. Двуязычные поля товаров, категорий, контент-страниц, мета-тегов. Отдельные SEO-URL для каждого языка, теги hreflang, канонические URL. 301-редиректы со старых URL обоих языков (проверить текущую схему: /ru/, поддомен или параметр). Письма покупателю — на языке сессии клиента.Блог Сохранить существующий раздел статей https://blog.bp.ua/. Перенести существующие статьи (uk/ru) с сохранением URL и 301-редиректами где нужно. Двуязычность, корректная SEO-разметка статей. Раздел блога должен оставаться редактируемым из админки.SEO (серверное) Замена стороннего SEO-модуля на нативный механизм OC4. Генерация sitemap.xml (отдельные языковые ветки), корректный robots.txt. Микроразметка Schema.org (Product, Offer, BreadcrumbList, Article для блога).Производительность и безопасность Кеш (OPcache + встроенный OC4), оптимизация запросов, gzip/brotli, HTTP/2. Изображения: WebP, resize с кешированием. HTTPS, 2FA в админке, актуальные патчи, ежедневные бэкапы. Core Web Vitals в «зеленой» зоне на мобильном.Порядок работ Все работы ведутся на staging. Старый сайт работает до полного тестирования нового. Переключение на прод — с возможностью отката 30 дней. Часть 2. Frontend (дизайн + верстка)Дизайн Стиль: минималистичный, премиальный, много «воздуха», акцент на фото товара. Мобильный-первый подход (большинство трафика — мобильный). Дизайн-система в Figma: палитра, типографика, компоненты, состояния. Макеты ключевых экранов (десктоп + мобильный): главная, каталог, карточка товара, бренд-страница, корзина, чекаут, поиск, блог и страница статьи.Верстка Семантический HTML5, чистый CSS, адаптив (mobile-first). Интеграция в twig-шаблоны OpenCart 4 (не статика), работа с живыми данными. Изображения: WebP, lazy-load, srcset. Шрифт с полной кириллицей (uk/ru). Кроссбраузерность: Chrome, Safari, Firefox, Edge + iOS/Android. Core Web Vitals: LCP < 2.5 c, CLS < 0.1, INP < 200 мс (мобильный).Функционал интерфейса Фасетные фильтры каталога: бренд, тип, объем, нота, пол, цена. Карточка товара: фото, описание, ноты, формат/объем, отзывы, «с этим покупают». Quick view, список желаний, сравнение, бейджи (новинка, хит, лимитированное количество). Адаптивный чекаут с минимумом шагов, автозаполнение Новой Почты. Раздел блога: список статей и страница статьи в стиле сайта.Двуязычность (uk / ru) Переключатель языков в шапке, корректный на мобильном. Верстка учитывает разную длину строк в двух языках. Весь текст темы — через языковые переменные OC4 (без «зашитого» текста). Приемка и сотрудничествоЧто передать на завершение Backend: доступы (сервер, БД, админка, репозиторий), краткая документация по доработкам и cron, инструкция по развертыванию/откату, список сторонних модулей. Frontend: Figma-файл с дизайн-системой и экранами, код темы (twig + CSS/JS), инструкция по изменению баннеров/контента.Критерии приемки (коротко)