Верстка страницы из figma

Необходимо создать атмосферный промо-сайт, который не просто расскажет историю, а передаст идею честности, справедливости и борьбы с воровством. Это должен быть сайт, который вызывает эмоции, погружает в историю и оставляет после себя сильное впечатление. В основе сюжета — легенда о Тимофее, герое, который не смог пройти мимо несправедливости. Когда Кабиджон украл много золота, Тимофей отправился в погоню. После долгого преследования он догнал вора, вернул украденное и раздал золото бедным, доказав, что справедливость всегда сильнее жадности. Эта история должна быть подана красиво, эмоционально и современно, как небольшая цифровая легенда. Ожидаю не обычный шаблонный лендинг, а качественный сайт с продуманным дизайном, плавными анимациями, атмосферными переходами и визуальными эффектами, которые будут усиливать сюжет. Важно, чтобы каждый блок имел свою роль, а весь сайт воспринимался как единая история — от первого экрана до финального призыва поддерживать честную игру. Приоритет — уникальный дизайн, адаптивность для всех устройств, чистый код, высокая скорость работы и внимание к деталям. Если у вас есть опыт создания эффектных промо-сайтов или интерактивных историй — обязательно покажите примеры в отзыве. Рассматриваю исполнителей, которые умеют не просто создать сайт, а превратить идею в атмосферный цифровой проект, который запоминается.

Описание задачи: Мне нужен готовый, уже написанный шаблон (Boilerplate / Headless CMS) онлайн-магазина на Next.js стеке + Node.js с панелью администратора. Вам не нужно писать код с нуля, придумывать сложную архитектуру или создавать уникальный дизайн.Задача — взять готовое решение, развернуть его, изменить несколько фоновых изображений, подстроить структуру под свои характеристики и загрузить сайт на хостинг.Каков должен быть результат (структура целевой страницы сверху донизу): Главный экран: Ваша готовая конструкция. Мы просто заменим фоновое изображение. Вам нужна кнопка «Позвонить» (звонок совершается сразу на мобильном телефоне, а форма «Имя/Телефон» — на ПК). Описание сервисов: простой блок, состоящий ровно из трёх абзацев текста. Product Showcase: сетка продуктовых карточек из вашего шаблона. Единственное условие — на продуктах должны быть этикетки «New» и «Used» (и быстрый фильтр). Кнопка «Купить» открывает простую форму заказа (имя, телефон, выбранный продукт). Онлайн-оплаты нет. Обзоры видео: блок, где видео (ссылки с YouTube) идут строго в одну строку. Важно, чтобы загрузка была ленивой, чтобы видео не замедляло работу сайта. Нижний колонизатор: Контакты и ссылки на мессенджеры.Требования к панели администратора (Node.js): Мы используем стандартную панель администратора из вашего шаблона. Он должен уметь добавлять товары (Название, Цена, Фото, Описание, Новые/Подержанные этикетки) и вставлять ссылки на видео для блока отзывов.Все запросы с сайта (звонки и покупки) должны направляться на бот Telegram (скрипт уведомлений должен быть подключён).

Задача - верстка сайта. Есть готовый разработанный макет, сверстанный на конструкторе, который нужно переверстать в WP. Это небольшой (на 4-5 страниц) двуязычный информационный сайт с возможностью подключения WooCommerce. Сайт должен быть оптимизирован для SEO.

Создать и сверстать адаптивный мастер-шаблон для email-рассылок в Stripo (для экспорта в SendPulse).⚙️ Что нужно сделать:Разработать визуальную концепцию и дизайн блоков (хедер, баннеры, карточки товаров, футер).Сверстать адаптивный HTML-шаблон в Stripo с возможностью дальнейшего экспорта в SendPulse.Протестировать отображение в Gmail, Apple Mail, Outlook и Dark Mode. Требования:Уверенный уровень Figma и практический опыт верстки в Stripo.Понимание технических ограничений email-маркетинга.Портфолио с реализованными e-mail рассылками (e-commerce/fashion).

Описание задания Нужен опытный frontend-разработчик или верстальщик для поэтапного обновления большого действующего сайта. Сайт работает много лет, содержит значительное количество страниц, различные типы контента, формы, таблицы и интерактивные блоки. Используется собственная серверная система, имеются legacy HTML/CSS. Полная замена технологий или системы управления сайтом не планируется. На первом этапе необходимо разработать новый адаптивный общий шаблон сайта. После успешного завершения первого этапа планируется последовательное обновление внутренних страниц. Название сайта, URL, дизайн-макеты и текущие выходные файлы будут предоставлены ограниченному количеству кандидатов после предварительного отбора по портфолио и опыту.Что входит в первый этап Необходимо реализовать общую визуальную оболочку: шапку для desktop- и mobile-версий; основную и мобильную навигацию; служебные элементы шапки; общий контейнер и сетку страницы; навигационный цепочку («хлебные крошки»); базовые элементы интерфейса: кнопки, ссылки, поля ввода; общие стили типографики с возможностью их поэтапного подключения; футер; адаптивное поведение шаблона; совместимость новой оболочки со страницами, которые временно останутся в старом дизайне. Уникальные внутренние блоки отдельных страниц на первом этапе полностью переделывать не нужно.Особенности проекта Большой действующий сайт с множеством типов страниц. Имеется legacy CSS и местами устаревшая HTML-разметка. Новый дизайн будет внедряться постепенно. Одновременная полная замена всех страниц невозможна. Исполнитель не получает доступа к серверу, CMS и рабочему проекту. Заказчик самостоятельно интегрирует подготовленную верстку. Исполнителю будут предоставлены текущие CSS-файлы, макеты, графические материалы, HTML-фрагменты и примеры страниц в пределах, необходимых для выполнения работы. Предполагается несколько итераций после тестовой интеграции в реальный проект.Технический подход Предполагается подключение нового CSS поверх имеющихся стилей с дальнейшей постепенной миграцией и удалением устаревших правил. Разрешается: создавать новые CSS/SCSS-файлы; предлагать изменения HTML общих частей шаблона; исправлять имеющиеся CSS-правила, которые мешают реализации; предлагать улучшения структуры DOM; создавать новые повторно используемые компоненты. Изменения имеющегося CSS необходимо передавать отдельно в виде: patch/diff-файла; отдельного файла совместимости; или документированного перечня измененных правил и селекторов. Необходимо избегать: неконтролируемого использования !important; глубоко вложенных и хрупких CSS-селекторов; привязки стилей к тексту или порядковому номеру элемента; дублирования всей разметки отдельно для desktop- и mobile-версий; подключения тяжелых фреймворков без предварительного согласования; глобальных правил, которые могут нарушить отображение еще не обновленных страниц.Требования к качеству Проект рассчитан на дальнейший многолетний развитие. Нужно не разовое «подгонка под скриншот», а чистая, профессиональная и удобная для поддержки верстка. Ожидается: понятная компонентная структура; повторно используемые CSS-классы; CSS custom properties для цветов, размеров, отступов и других дизайн-токенов; разумная специфичность селекторов; семантическая HTML5-разметка; корректная иерархия заголовков; отсутствие лишних DOM-оберток; отсутствие дублирования контента, который индексируется; корректное использование header, nav, main, section, footer; использование кнопок и ссылок в соответствии с их назначением; доступность интерфейса с клавиатуры; состояния hover, focus, active и disabled; отсутствие горизонтального прокручивания страницы; корректная работа с динамическим контентом различной длины; понятный и профессионально организованный код.SEO и производительность Обновление шаблона не должно ухудшать технические SEO-показатели сайта. Необходимо: сохранить семантику основного контента; не создавать отдельные дубликаты DOM для мобильной и desktop-версий без обоснованной необходимости; не скрывать важный для индексации контент с помощью JavaScript; не нарушать иерархию заголовков; не удалять имеющиеся SEO-, аналитические и структурные атрибуты из предоставленных HTML-фрагментов; минимизировать дополнительный JavaScript; не использовать тяжелые библиотеки без согласования; предусмотреть размеры изображений и отсутствие заметных смещений макета во время загрузки; не допускать заметного ухудшения показателей Lighthouse и Core Web Vitals после интеграции. Исполнитель должен понимать, что качественный CSS сам по себе не исправляет структуру DOM. Если для профессионального результата необходимо изменить разметку, нужно подготовить и передать заказчику соответствующие HTML-фрагменты.Адаптивность Проверка верстки должна выполняться как минимум на таких ширинах: 1440 px; 1200 px; 1024 px; 768 px; 390 px; 360 px; 320 px. Между контрольными размерами интерфейс также должен оставаться корректным и функциональным. Горизонтальное прокручивание всей страницы не допускается. Исключения для отдельных компонентов, например больших таблиц, необходимо предварительно согласовать.Результат первого этапа Исполнитель передает: Новый CSS или SCSS вместе с готовым собранным CSS. Автономную демонстрационную HTML-страницу. HTML-фрагменты шапки, меню и футера, если разметка изменялась. Отдельный patch/diff изменений legacy CSS. Новые SVG, изображения, иконки и шрифты. Инструкцию по подключению и интеграции. Описание структуры CSS и компонентов. Перечень новых и измененных классов и селекторов. Скриншоты результата на контрольных размерах. Перечень известных ограничений и расхождений с макетами. Рекомендации по дальнейшей миграции внутренних страниц.Итерации В стоимость первого этапа должны входить: Согласование общей структуры и desktop-версии. Адаптивное доработка tablet- и mobile-версий. Исправление выявленных заказчиком проблем после первой тестовой интеграции. Дополнительные работы вне согласованного первого этапа оцениваются отдельно.Что нужно указать в заявке Просим указать: опыт работы с большими действующими сайтами и legacy CSS; примеры сложной адаптивной верстки; примеры кода или ссылки на репозитории, если они доступны; подход к организации архитектуры CSS; опыт постепенной миграции дизайна без полной остановки сайта;