Тестовое: лендинг обжарки

Тестовое задание · веб-разработчик junior+

Скачать PDF

Лендинг для обжарки кофе, который не выглядит сгенерированным

Соберите лендинг для небольшой обжарки с работающей формой заявки. ИИ использовать можно и нужно: нам важно увидеть, как вы им управляете, а не только итог.

4–6 ччистой работы
19.10, 18:00дедлайн, пн, по Москве
1 ссылкана живой сайт

01Клиент

Обжарка «Кварта», Минск. Клиент вымышленный, все факты ниже даны для работы.

Маленькая мастерская: обжаривают партиями по 5 кг с 2019 года. Основатели — Аня и Дмитрий, раньше работали бариста. Обжаривают по четвергам, по пятницам развозят по Минску. Свежесть — главное, что они продают: зерно приходит к клиенту на 1–3 день после обжарки.

Адрес мастерской: Минск, ул. Короля, 9 (самовывоз). Часы: пн–пт 8:00–20:00, сб–вс 10:00–18:00. Доставка по Минску в пятницу, от 50 BYN бесплатно.

Кто покупает: 25–45 лет, пьют кофе дома или в офисе, большинство заходит с телефона по рекламе в Instagram и Яндексе. Тон: тёплый и простой, без пафоса и без «премиального» глянца.

02Задача лендинга

Главная цель — заявка на подписку или на разовый заказ. Менеджер перезванивает и оформляет. Корзина и онлайн-оплата не нужны.

Обязательно должно быть: кто они и почему свежесть важна, ассортимент с ценами, подписка, доставка и самовывоз, контакты и форма заявки. Порядок, структура, дополнительные блоки и тексты — на ваше усмотрение. Тексты выше можно переписать.

Главное требование к виду: сайт должен выглядеть как работа хорошей студии для конкретно этого клиента, а не как типовой сгенерированный лендинг. Если вы попросили ИИ «сделать красиво» и согласились с первым вариантом, скорее всего, это будет заметно.

03Форма и бэкенд

Форма: имя, телефон, что интересует (подписка, разовый заказ, вопрос), комментарий. Заявку принимает ваш эндпоинт, например POST /api/lead. Требования:

  • Телефон — белорусский номер. Неверный номер не принимается, человек видит понятную подсказку.
  • Повторная отправка того же номера в течение 10 минут, в том числе двойное нажатие на кнопку, не создаёт вторую заявку.
  • Заявки идут с рекламы. Менеджеру важно знать, откуда пришёл клиент: из какой рекламы, с какого объявления, с какой страницы.
  • Если отправка не удалась, человек должен это увидеть и понять, что делать.
  • Куда складывать заявки — выберите сами: файл, SQLite или что-то ещё. Объясните выбор в README.

Будет плюсом, но не обязательно

  • Дублировать заявку в Telegram-бот.
  • Превью ссылки в мессенджерах: картинка, заголовок и описание.
  • Анимации, если они уместны и не тормозят сайт.

04Рамки

  • Стек свободный. Next.js будет плюсом, у нас основной стек такой.
  • ИИ-инструменты любые. Предпочтительно Claude Code: у него есть экспорт сессии.
  • Хостинг бесплатный: Vercel, Netlify, Cloudflare Pages или аналог. Сайт должен открываться по ссылке, и форма должна работать прямо там.
  • Фото подберите сами с бесплатной лицензией (Unsplash, Pexels) или сгенерируйте. Логотип можно сделать текстом.
  • Вопросы можно задавать. Если решили что-то сами, просто запишите допущение в README.

05Что прислать

  1. Ссылку на сайт.
  2. Ссылку на репозиторий (публичный или с доступом для нас). Коммиты по шагам, а не один коммит в конце.
  3. Лог работы с ИИ: экспорт сессии (/export в Claude Code) или скриншоты ключевых моментов. Причесывать не нужно, нам интересен настоящий процесс.
  4. Замер Lighthouse для мобильной версии (скриншот или отчёт).
  5. README на полстраницы: что делали сами, а что ИИ; где ИИ ошибся и как вы это заметили; что не успели или сделали бы иначе.

Всё отправьте одним сообщением тому, кто прислал задание.

Дедлайн: понедельник, 19 октября, 18:00 по Москве. Работы, присланные позже, не принимаются.

Неполная работа с честным README лучше, чем «идеальная» без объяснений. Если работа подойдёт, мы с вами свяжемся.