Лендинг для «ГПК Гранит».

Вводные

ГПК «Гранит» - горнодобывающая промышленная компания из Петрозаводска: два собственных завода полного цикла, изделия из натурального камня оптом. Памятники, мемориальные комплексы, вазы, шары и заготовки - от отбора блоков на карьере до отгрузки готовой партии. К нам пришли за лендингом, который работает на лояльность оптовых заказчиков производства.

Что было на входе:

• действующее производство: два завода в Петрозаводске, более 150 м³ продукции в месяц, отгрузка в 58 городов России, Беларуси и Абхазии;
• старый сайт, который уже не отражал масштаб компании;
• много собственного контента - фотографии производства, характеристики пород камня, критерии контроля качества, прайс-размеры. Всё это предстояло сильно переработать, адаптировать и перерисовать.

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

Компания работает на международный рынок, поэтому у проекта появилось продолжение: к русской версии добавились английская и китайская. Их аудитория - зарубежные оптовые покупатели и китайские импортёры камня.

Как работали

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

Два дня - это возможно потому, что клиент дал готовый фактаж, а мы не тратили время на его сбор. Основная работа была не «придумать с нуля», а навести порядок: разложить материал по логике, переписать тексты под спокойный деловой тон и перерисовать графику под единый стиль.

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

Дизайн: графит, синий и крупная типографика

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

Из чего собран визуальный язык:

• Чередование светлых и тёмно-графитовых секций задаёт ритм длинной страницы и делит её на смысловые главы.
• Один акцентный цвет - насыщенный синий. Он на кнопках, номерах секций и тонких линиях, больше нигде.
• Крупная дисплейная типографика: заголовки набраны широким гротеском и работают как навигация по экрану.
• Живые счётчики в цифрах компании - два завода, 150 м³, 6 000 м², 58 городов - набегают при прокрутке и читаются как доказательства.
• Кадры производства приведены к единой гамме чёрного габбро - так, как камень выглядит на самом деле, и так, чтобы снимки не выбивались из графитового фона.

Отдельная деталь по цвету: первую версию лендинга собрали в оранжевой гамме, а затем по согласованию с клиентом полностью перевели в синюю - она точнее попадает в характер каменного производства и спокойнее читается.

Продукция и контент

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

Что вошло в наполнение:

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

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

Производство, качество и логистика

Чтобы лендинг работал на доверие, мы показали производство изнутри - так, как это важно оптовому заказчику.

• Два завода полного цикла с адресами, координатами и ссылками на 2ГИС и Яндекс.Карты - по каждой площадке видно, что там делают.
• Раздел контроля качества: критерии отдела технического контроля по геометрии, цвету, полировке и упаковке - с возможностью скачать полные критерии отдельным файлом.
• Собственная логистика с доставкой «от двери до двери» и география поставок.

Критерии ОТК - не общие слова, а конкретные допуски: отклонение по геометрии ±3 мм на 1 м², блеск стелы от 100 GU на лицевой стороне, вес поддона до 2000 кг. Такие цифры закрывают половину вопросов оптовика ещё до разговора с менеджером.

Разработка и интерактив

Под капотом - не типовой конструктор, а собственная вёрстка и скрипты. Тяжёлых библиотек нет, поэтому страница быстро грузится даже при большом объёме контента.

Что сделано в разработке:

• интерактивная карта географии поставок: из Петрозаводска расходятся маршруты в 58 городов трёх стран;
• переключаемый каталог пород камня и карусель продукции на собственном коде;
• формы заявки с загрузкой файла до 10 МБ - чертёж, спецификация или фото прикрепляются прямо к обращению;
• анимации появления секций при прокрутке, счётчики и всплывающее окно запроса прайса;
• cookie-баннер только для технически необходимых файлов, ссылки на политику и согласие на обработку данных.

Кнопки «узнать цену» в карточках продукции не открывают поп-ап, а прокручивают к отделу продаж, подсвечивают менеджера и подставляют тему в форму - меньше модальных окон, короче путь до разговора.

Три языка: английский и китайский

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

Как устроено:

• Адреса - «/en/» и «/zh/» в той же структуре, что русская версия. Китайский - упрощённый (zh-Hans).
• Шаблон один, языков три. Тексты всех версий лежат в файлах одинаковой структуры, а 135 подписей интерфейса - кнопки, подсказки форм, сообщения об ошибках - вынесены из вёрстки и скриптов в словари. Правка в одном месте расходится по трём языкам.
• Переключатель «RU · EN · 中文» стоит в шапке и в подвале, без флагов: флаг - это страна, а не язык. На телефоне сегменты увеличены до комфортного нажатия.
• Переключатель сохраняет раздел: с английской «Продукции» посетитель попадает на китайскую «Продукцию», а не на верх страницы.
• Автоматического перехода по языку браузера нет - язык выбирает посетитель. Для поисковых систем проставлены hreflang на четыре значения (ru, en, zh-Hans и x-default на русскую версию), canonical и карта сайта с альтернативами; служебные страницы закрыты в robots.

Китайская версия потребовала отдельной типографики. Иероглифы рисуются системными шрифтами - PingFang SC на технике Apple, Microsoft YaHei на Windows, Noto Sans SC на остальных: посетитель не тянет лишние мегабайты китайского веб-шрифта. Разрядку букв, которая держит ритм в русских и английских заголовках, в китайской версии мы сняли - у иероглифов нет регистра, и разрядка их просто рассыпает.

Логотип собрали в латинице. В исходном знаке буквы набраны гарнитурой Lato, поэтому «GPK GRANIT» сложилось тем же кеглем и по той же базовой линии, а ширину надписи подогнали под ширину гор в знаке - английская и китайская версии получили свой логотип, а не русские буквы рядом с иероглифами.

Перевод делали на своей стороне, со словарём терминов и отдельным списком спорных мест для клиента: стела - stele - 碑身, подставка - base - 底座, цветник - flower bed - 花池, столбики - posts - 立柱. Цифры, размеры, координаты и телефоны не переводятся вовсе - они общие для трёх языков, и правятся один раз.

Названия 58 городов на карте поставок переведены отдельно: на английской версии - латиницей, на китайской - иероглифами. Карта, маршруты и счётчик «58 городов · 3 страны» остались теми же.

Отдельно разобрались с тем, что отличается не словами, а сутью:

• Мессенджеры. На русской версии у менеджеров звонок, Telegram и MAX; на английской и китайской MAX убран - зарубежному покупателю он бесполезен, остались телефон, почта и Telegram.
• Доставка за рубеж в этапе «Отгрузка» описана честно: обсуждается индивидуально. Обещать зарубежную логистику, которой нет в тарифах, мы не стали.
• Реквизиты. ИНН, КПП и ОГРН на английской и китайской версии расшифрованы - иностранец видит, что это налоговый и регистрационный номера; юридический адрес переписан в привычном для него порядке, а в китайской версии продублирован латиницей.
• Юридические страницы переведены целиком, с пометкой, что юридическую силу имеет русская версия. В английскую и китайскую добавили пункты про e-mail и про файл, который посетитель прикладывает к заявке.
• Кнопку выбора файла в форме пришлось сделать свою. Стандартную надпись «Файл не выбран» рисует браузер на языке системы: у российского посетителя английская версия показывала бы русскую подпись посреди английской формы.
• Заявки со всех трёх версий уходят тем же менеджерам отдела продаж - с пометкой, на каком языке пришёл запрос.

Отдельного продвижения за рубежом не запускали - заложена техническая база: hreflang, canonical, карта сайта с альтернативами. Полезный побочный эффект прежних решений: шрифты, стили и скрипты лежат на своём домене, внешних CDN и Google Fonts на странице нет - сайт одинаково открывается из любой страны, включая Китай, где часть внешних сервисов недоступна.

Мобильная версия

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

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

Итог

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

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

Посмотреть страницу: https://gpkgranit.ru/, английская версия - https://gpkgranit.ru/en/, китайская - https://gpkgranit.ru/zh/.