Верстка проекта из Figma

Стоимость:Договорная
Срок выполнения:30 дней
Варианты оплаты:По договоренности
Дата публикации:2025-12-11 20:55
Обновлено:2025-12-11 20:57
Был на сайте:2025-12-12 19:32

Верстка проекта из Figma

 
Задача

Сверстать статичный фронтенд сайта по продаже и активации рандом-ключей.
Бизнес-логика и API будут подключены позже.
Верстка должна соответствовать макету на desktop (пиксель-перфект) и корректно работать на mobile.

Полная логика взаимодействий, включая последовательности экранов и майнд-мэп, предоставлена отдельно и является руководством для поведения интерфейса.



1. Общие принципы
• Статичная верстка без реальных сетевых запросов.
• Курсор - стандартный.
• Все кликабельные элементы имеют состояния hover/active.
• Desktop - пиксель-перфект.
• Mobile-first.
• Поведение элементов соответствует логике, указанной в приложенной диаграмме / майнд-мэпе.



2. Основные экраны

2.1. Главная (заглушка)
• Поле для ввода ключа.
• Кнопка активируется после ввода.
• Поддержка автоподстановки ключа из URL.
• Блок со списком игр открывается после активации.
• Кнопка «Получить ключ» форма логин/e-mail.



2.2. Форма логин / e-mail + OTP
• Поля обязательные, валидация email.
• ...

Видеть полную информацию и оставлять заявки могут только авторизованные пользователи.

Оптимизировано и агрегировано ИИ:

Нам нужно сверстать статичный фронтенд сайта по продаже и активации рандом-ключей, основываясь на макете из Figma. Верстка должна быть пиксель-перфект на десктопе и адаптирована для мобильных устройств, с использованием подхода mobile-first. Все кликабельные элементы должны иметь состояния hover/active, и их поведение должно соответствовать предоставленной логике взаимодействий. Проект должен быть выполнен с использованием Vue.js и, желательно, Tailwind CSS, с возможностью последующего подключения бизнес-логики и API. Пожалуйста, предоставьте ссылку на ваш GitHub с примерами кода, предпочтительно с работами на Vue и Tailwind. Для реализации этого задания потребуются навыки: верстки (HTML/CSS), работы с Vue.js, адаптивного дизайна (mobile-first), использования Tailwind CSS, понимания принципов компонентной архитектуры, а также опыт работы с инструментами дизайна, такими как Figma.
Рекомендации агрегированы на основе похожих успешных проектов и реальных навыков исполнителей.
Для подачи заявки на участие в задании Вам нужно авторизоваться
Юрий Web
Юрий Web u1624
Основная специализация: ИТ и Разработка
    Сделаю.
    Html5, интерактив, анимация.
    Евгений Красин
    Евгений Красин evgeniyseogr1
    Основная специализация: ИТ и Разработка
    Добрый день, Антон.
    Готов сверстать и посадить на СMS если нужно.
    Могу увидеть макет для оценки работ?
    Предлагаю обсудить детали проекта.

    Пример Лендингов: https://docs.google.com/document/d/1-xFJ161wO-2CEcHal6XjJEWN4wVKC7BAbN-ogS9dXug/edit
    Пример Сайт компании: https://docs.google.com/document/d/1J479-unD_I9-EdlrK9Zytvap073_-x8l0qi0qHJWiN0/edit?usp=sharing
    Пример Интернет магазина: https://docs.google.com/document/d/1CmqKtfQUWhEInDXSx1eVOos0QzebblLKpGqtdQ9Jdtw/edit?usp=sharing
    Примеры Битрикс: https://docs.google.com/document/d/17teiUTr-Frp9nxUknvqFpCXEbZZpoQb5ikMdzL76qYo/edit?usp=sharing

    Примеры моих работ

    SWEET-SHIRT.RU
    PELTRI.RU
    BOMPANI.RU
    Абел Симонян
    Абел Симонян simab
    Основная специализация: Веб-разработка и Продуктовый дизайн
      Здрасте, сделаю быстро до НГ, качественно.

      tg - @ab_simonyan

      Примеры моих работ

      Создание сайтов
      «Ваш будущий сайт уже почти готов — осталось заказать»
      Full-Stack разработка
      Илья Кобизький
      Илья Кобизький yakabz
      Основная специализация: Веб-разработка и Продуктовый дизайн
      Здравствуйте! У меня более двух лет опыта работы с сайтами, скриптами. За это время я занимался их разработкой, настройкой, правками что позволило мне приобрести уверенные навыки в работе с различными платформами и инструментами такие как:
      Html, css, js, react, react native, astro, node js и другим. Буду рад выполнить вашу работу, с возможностью дальнейшего сотрудничества

      Связь со мной:
      telegram: https://t.me/YAKABZ
      whatsapp: +7 925 233 56 33
      Надежда Пилипенко
      Надежда Пилипенко pilipenkonso
      Основная специализация: Маркетинг и Реклама
        работаю только с серьезными проектами, без долгих обсуждений, звоните по номеру который в профиле указан, обсудим задачу, кейсы в портфолио не все, выдам ссылку на полный яндекс диск по запросу

        Примеры моих работ

        Веб-разработка, разработка сайта Российский университет спецназа
        Веб-разработка, разработка сайта Ла Луна
        Веб-разработка, разработка сайта TOP MEDIA CORPORATION
        Владимир Дауб
        Владимир Дауб VladimirDaub
        Основная специализация: ИТ и Разработка
        Здравствуйте!

        Готов сверстать ваш проект по продаже и активации рандом-ключей по макету из Figma на Vue + Nuxt c Tailwind, с мобильной версией и пиксель-перфектом на desktop. Есть опыт верстки по сложным UI-флоу и логике экранов, поэтому могу аккуратно реализовать все состояния и переходы, опираясь на mind-map и сценарии.

        Как подойду к задаче:

        подниму проект на Nuxt, настрою Tailwind, подключу статичные JSON-данные;

        сверстаю все основные экраны: заглушку с вводом ключа, формы e-mail/логин + OTP, быстрые авторизации, каталог, модалки, личный кабинет, блок Random Keys, footer;

        реализую нужные состояния (hover/active/disabled), таймеры, лоадеры, поведение модалок (ESC, клик вне, разные сценарии на desktop/mobile);

        обеспечу mobile-first верстку и корректную работу в Chrome / Safari / Firefox, с акцентом на кликабельные зоны на мобильных;

        аккуратно разнесу всё на компоненты, чтобы подключение реальной бизнес-логики и API было максимально простым.

        По срокам: ориентировочно 30 рабочих дней на полную верстку всех описанных экранов и состояний (с запасом под уточнения по логике).
        По стоимости:50 000 ? за весь объём (готов обсудить поэтапную оплату: базовые экраны -> личный кабинет -> доп. модалки и состояния).
        15:37 12.12.25
        Для точной оценки подскажите, пожалуйста:

        сколько уникальных экранов/состояний в Figma и mind-map (примерно);

        есть ли дизайн всех mobile-состояний или часть адаптива нужно продумать;

        планируете Nuxt 2 или Nuxt 3 и есть ли уже базовый каркас проекта/репозиторий.

        Оставлять заявки могут только авторизованные пользователи.

        Другие открытые задания:

        Ведения и оптимизации рекламных кампаний в Яндекс Директ15 000 р.

        Бюджет: 15 000 р. Нужен опытный специалист, который возьмёт на себя полный цикл настройки, ведения и оптимизации рекламных кампаний в Яндекс Директ. Задачи: -Сбор и кластеризац…

        Интеграция с внешним ресурсом для вывода онлайн цен для бронирования отелей на нашем сайте100 000 р.

        Бюджет: 100 000 р. Подробная информация при контакте. Требуется опыт разработки подобных продуктов в сфере туризма. Сайт на WordPress.

        Создание сметы на работы по монтажу сети ЛВС7 000 р.

        Бюджет: 7 000 р. Смета нужна по ГЭСН, 3 квартал 25 года, Москва.

        поиск заданий