MARTOX: сайт оператора выхода брендов на рынок США

Аудитория MARTOX — селлеры Wildberries и Ozon, которые упёрлись в потолок одного рынка. Разговор с ними идёт не про смену профессии, а про второй рынок: тот же товар, другая цена и покупатель, который платит в долларах.

Сложность продукта в том, что он состоит из семи разных работ сразу. Показать их списком — читатель видит хаос и подозревает, что за словами ничего нет. Значит, сайт должен показать не перечень услуг, а систему: путь товара от документов до витрины, где каждый шаг закрыт.

Палитра — винный #873543, кремовый #F2EDE9 и почти чёрный #141109. Сознательный отказ от стоковой «американской мечты»: ни флагов, ни небоскрёбов, ни самолётов на закате. Вместо этого — документальная плотность: бумага, печати, крафт, склад.

Типографика в паре: Spectral держит заголовки и цифры, Onest — текст. Курсивом набрана вторая строка каждого заголовка — приём, который из одной находки стал системой: «на рынок США», «до консультации», «сотрудничества».

Формы: крупные скругления карточек-стопок, панели поменьше, чередование тёмных и светлых секций как ритм чтения. Всё живёт на токенах — цвета, отступы, скорости анимации описаны один раз и переиспользуются, поэтому правка «сделай отступ меньше» меняет ритм всего сайта, а не одного блока.

Первый экран объясняет услугу раньше, чем читатель дойдёт до текста: изометрическая схема пути товара — документы, склад, транспорт, приёмка в США, витрина площадки, — связанная линиями направления.

Схема не статична. Это зациклённое видео, где на каждом узле что-то происходит: качается кран, едут коробки, ставится штамп. Петля собрана так, чтобы шва не было видно — первый и последний кадр совпадают.

Отдельная история — цвет. Браузер рисует h264 не тем же преобразованием, что кадры, вынутые из файла: дважды «попал» мимо фона, пока не начал брать цвет пипеткой прямо со страницы и подгонять под него секцию.

Ядро сайта — семь этапов выхода. Карточки лежат стопкой и наезжают друг на друга по скроллу: каждая следующая накрывает предыдущую, оставляя видимой шапку с номером и сроком. Читатель одновременно видит весь путь и подробности того шага, на котором остановился.

По просьбе заказчика раскрытая карточка ужалась на треть — плотнее, меньше пустоты. Побочный эффект всплыл сразу: боковые бордеры обрывались о верхнюю грань следующей карточки и торчали обрубками в вырезах скруглений. Бордер завели под соседа и закрепили тестом, который меряет наезд относительно радиуса.

Второй смысловой блок отвечает на вопрос «зачем мне второй рынок»: четыре факта крупными цифрами вместо абзацев убеждения — и честная оговорка внизу, что цифр роста выручки здесь нет, они считаются на консультации.

Кнопка «Оценить потенциал бренда» ведёт не в форму, а в квиз из четырёх вопросов: категория, оборот, что уже пробовали, когда стартовать. Менеджер получает заявку с контекстом, а не голый контакт. Тринадцать каналов продаж упакованы в PDF-гайд, который отдаётся за контакт.

Вопросы собраны тем же приёмом, что и этапы, только управляются нажатием: карточка поднимается, предыдущая уходит под неё. Один язык на два разных блока — сайт читается как система, а не как набор секций.

Здесь же сработала самая полезная проверка проекта. Тест контраста научился видеть градиенты на псевдоэлементах и сразу нашёл настоящую дыру: в середине анимации закрытия текст оказывался на 2.96 при норме 4.5. Глазами такое не поймать — состояние живёт четверть секунды.

Форматы сотрудничества — Ecosystem, Support и Growth — сведены в таблицу сравнения, где видно, докуда «довозит» каждый пакет.

Под каждый сделана отдельная страница-статья: состав по блокам, к каждому блоку своя иллюстрация, в конце — форма с пометкой, из какого пакета пришла заявка. Состав не расширялся сверх документа заказчика: если услуги нет в исходнике, её нет и на странице.

Блок основателя — светлый разворот с портретом в смещённой винной рамке и четырьмя фактами: девять лет собственных брендов, тридцать бизнесов под ключ, звание «Экспортёр года», грин-карта талантов. Материал взят с личного сайта владелицы, формулировки достижений сохранены дословно.

Кейсы — пять брендов, которые компания уже вывела на рынок США: превью витрин в бесконечной карусели, при наведении — название и переход на живой сайт бренда. Карусель уходит за край экрана и растворяется маской по краям, а не обрывается о кромку.

Мобильная версия — не сжатый десктоп, а отдельная раскладка: вместо кнопки в шапке бургер, внутри — разделы, пакеты с подписями, кнопка заявки и контакты.

Самую дорогую находку проекта дал именно телефон. Блок «13 способов продаж» был слоем липкой стопки: закреплён сверху, снизу его накрывает следующий слой — и всё, что не поместилось в один экран, не показывалось никогда. На 360×667 недосчитались 199 пикселей вместе с кнопкой лид-магнита. На глаз блок выглядит аккуратным; поймал замер высоты.

Форма и квиз ходят в одну серверную функцию, оттуда заявка мгновенно падает менеджеру в Telegram.

Главное свойство приёмника — честность: успех отдаётся только после того, как Telegram подтвердил доставку. Нет ключей, не ответил API — форма продолжает показывать ожидание вместо выдуманного «заявка отправлена». Пользовательский текст очищается от управляющих символов, чтобы нельзя было подделать структуру сообщения в чате заявок.

Вместо «посмотрел — вроде хорошо» у проекта 174 автопроверки. Они гоняются и по локальной сборке, и по живому сайту: интерактив, переполнения на трёх ширинах, контрасты, доставка заявок.

Правило простое: каждый новый тест сначала обязан упасть. Пока он не поймал ту поломку, ради которой написан, он ничего не стоит.

Что нашли машины, а не глаза: 199 пикселей контента, недоступных на телефоне; контраст 2.96 в середине анимации; молча не долетевший деплой, при котором прод остался старым, а прогон был зелёным; пустая полоса в 206 пикселей между двумя светлыми блоками.

Сайт собран и работает: главная из тринадцати секций, три страницы пакетов, квиз, лид-магнит и приём заявок в Telegram. Все 174 проверки зелёные на живом сайте.

Правки текста заказчик присылает в того же бота, куда падают заявки, — сообщение утром, прод к вечеру.

Вместе с сайтом передан документ вёрстки: где какие грабли, что уже пробовали, какая проверка что стережёт. Проект можно отдать другому разработчику, не пересказывая историю голосом.