Тестовое задание · веб-разработчик junior+
Скачать PDFЛендинг для обжарки кофе, который не выглядит сгенерированным
Соберите лендинг для небольшой обжарки с работающей формой заявки. ИИ использовать можно и нужно: нам важно увидеть, как вы им управляете, а не только итог.
01Клиент
Обжарка «Кварта», Минск. Клиент вымышленный, все факты ниже даны для работы.
Маленькая мастерская: обжаривают партиями по 5 кг с 2019 года. Основатели — Аня и Дмитрий, раньше работали бариста. Обжаривают по четвергам, по пятницам развозят по Минску. Свежесть — главное, что они продают: зерно приходит к клиенту на 1–3 день после обжарки.
| Эфиопия Иргачеффецветочный, бергамот, светлая обжарка · 250 г | 32 BYN |
| Колумбия Уилакарамель, красное яблоко · 250 г | 29 BYN |
| Бразилия Серрадоорех, шоколад, под эспрессо · 250 г | 26 BYN |
| Дрип-пакеты, ассорти10 штук | 18 BYN |
| Подписка2 пачки по 250 г раз в месяц, доставка бесплатно | 54 BYN / мес |
Адрес мастерской: Минск, ул. Короля, 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Что прислать
- Ссылку на сайт.
- Ссылку на репозиторий (публичный или с доступом для нас). Коммиты по шагам, а не один коммит в конце.
- Лог работы с ИИ: экспорт сессии (
/exportв Claude Code) или скриншоты ключевых моментов. Причесывать не нужно, нам интересен настоящий процесс. - Замер Lighthouse для мобильной версии (скриншот или отчёт).
- README на полстраницы: что делали сами, а что ИИ; где ИИ ошибся и как вы это заметили; что не успели или сделали бы иначе.
Всё отправьте одним сообщением тому, кто прислал задание.
Неполная работа с честным README лучше, чем «идеальная» без объяснений. Если работа подойдёт, мы с вами свяжемся.