Верстка страницы карточки товара

Есть действующий 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), инструкция по изменению баннеров/контента.Критерии приемки (коротко)

https://www.figma.com/design/bSzGOmDb3scdsBgjR3hHLb/Robo?node-id=0-1&p=f https://robo.org.ua/index.php?route=product/product&path=145802278&product_id=237 Задача: редизайн страницы товара и отзывов на главной Сайт уже разработан и полностью работает. Дизайнер подготовил новый дизайн в Figma, который нужно реализовать на существующем сайте. Необходимо: верстать новый дизайн в соответствии с макетом; интегрировать его в текущий сайт; адаптировать страницы под мобильные устройства, планшеты и компьютеры; проверить корректную работу кнопок, форм, меню и других элементов; обеспечить максимально точное соответствие макету. Разрабатывать сайт с нуля не нужно — необходимо лишь выполнить редизайн и заменить текущее оформление на новое.

Вирус в настоящее время проник на сайт. Сайт не функционирует должным образом. В частности, главная страница работает некорректно. Нам нужен разработчик, который сможет исправить эту ошибку как можно скорее.

Есть воронка продаж для интернет магазина который мы хотим повторить у себя Выглядит она вот так Основной лендинг (товар который основной в продаже например рубашка ) Потом страница чек аут (где человек вводит свои данные и выбирает сколько например рубашек он хочет купить) Потом он идет дальше по воронке и ему предлагают допродажу 1 (носки) + потом допродажу 2 (трусы) и финал страница спасибо Как это должно работать в плане перехода по страницам и логике вы можете посмотреть здесь (нужно дойти до конца до страницы спасибо)https://3plus3.heroman.com.ua/standard/ У нас есть примеры страниц которые мы хотим сделать у себя То есть для нас по сути мы скопируем дизайн - верстаем - заполняем под наш товар Страницы с допродажами будут такие же по дизайну и структуре как в сайте что кинул выше (трусы) Вам заполнять не надо будет страницы инфой только собрать скелет - чтобы заявка правильно приходила Также придумывать структуру тоже не нужно страницы От вас по сути Скопировать и сверстать Настроить чтобы технически правильно работало Показать как с этим работать чтобы могли сами это делать Есть 2 конструктора сайтов на примете, с 1 плотно работаем сейчас и нужно понять можно ли на нем такое развернуть (но я читал в гпт можно)