WEBCRAFT
Лендинг под ключ · чистый HTML/CSS/JS · 2026

Лендинг для производителя ангаров: дорогой «инженерный» сайт, который вызывает доверие с первого экрана

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

Обсудить похожий проект →

Дизайн Вёрстка Адаптив Чистый HTML/CSS JavaScript ИИ-изображения Лендинг под ключ
Сайт: Avgur — производство и строительство ангаров Ниша: быстровозводимые ангары из сэндвич-панелей CMS: нет — статичный HTML/CSS/JS Период: 2026
Первый экран сайта на большом экране
Первый экран сайта — так его видит посетитель (большой экран)
6
Экранов от производства до формы заявки
понятный путь клиента
0
Библиотек — страница грузится мгновенно
чистый код без сборки
3
Размера экрана: телефон, планшет, компьютер
нигде нет горизонтальной прокрутки
4
Изображения ангаров в едином стиле
сгенерированы ИИ, фотосессия не нужна

Что вы получите

Сайт, который вызывает доверие

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

Всю историю бизнеса на одной странице

Производство, технология, объекты, этапы работ и форма заявки — в одном понятном сценарии.

Форма заявки и полный адаптив

Заявка отправляется с телефона и компьютера; сайт не ломается ни на одном экране.

Задача

Бренд Avgur строит быстровозводимые ангары из сэндвич-панелей — собственное производство, монтаж в Москве и области, работа по всей России. Сайты в этой нише обычно выглядят одинаково шумно: агрессивные продающие блоки, всплывающие окна, пёстрая графика. Нужен был наоборот — спокойный, дорогой, «инженерный» сайт, который вызывает доверие с первого экрана.

Что было нужно

Что сделано

Лендинг собран с нуля: пять работ от дизайн-концепции до интерактива и графики.

1.1 · Дизайн
Выполнено

Индустриальный минимализм с красным акцентом

Замысел

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

Результат

Дизайн-система в переменных CSS: цвета, тени, скругления 4 px и одинаковая типографика на всех секциях. Иерархия читается сверху вниз: крупный hero-заголовок, метки разделов с красной чертой, карточки с лёгкими тенями.

1.2 · Вёрстка
Выполнено

Шесть секций и один смысловой поток

Задача

Провести посетителя по логике покупки: что за компания — почему эта технология — что построено — как проходит работа — куда написать.

Результат

Hero с фоновым фото и двумя кнопками → «Масштаб и надежность» (4 карточки производства) → «Почему сэндвич-панели?» (фото + 4 аргумента с цифрами: минус 40% на отоплении, монтаж в 3 раза быстрее) → «Реализованные объекты» (3 карточки) → 4 этапа работ на тёмной секции → форма заявки и контакты. Весь текст — живой HTML, не зашит в картинки.

1.3 · Адаптив
Выполнено

Три брейкпоинта и мобильное меню

Проверка

Адаптив нужен по-настоящему: в B2B-строительстве ссылки на сайт открывают в переписке с телефона.

Результат

Три контрольные точки — 1024, 768 и 480 px: сетки карточек схлопываются 4→2→1, колонки преимуществ и формы складываются в одну, меню прячется в бургер. Проверено рендером на 1440 и 390 px: горизонтального скролла нет в обеих ширинах.

1.4 · Интерактив и код
Выполнено

Чистый JS: 90 строк на всё поведение страницы

Подход

Без jQuery и фреймворков — только то, что реально нужно одностраничному сайту.

Результат

Фиксированная шапка, которая при скролле из прозрачной становится белой с тенью; плавный скролл по анкорам с поправкой на высоту шапки; появление блоков fade-in при прокрутке (IntersectionObserver); форма заявки с полями «имя» и «телефон» (required) и сценарием отправки с подтверждением на кнопке. Итог — main.js на 90 строк, вся логика читается с одного взгляда.

1.5 · Изображения
Выполнено

Генеративные фото ангаров в едином стиле

Ограничение

Объектов компании ещё нет в фотобанке: чужие фото со стоков выглядели бы фальшиво и не совпадали бы по стилю.

Результат

Четыре фотореалистичных изображения сгенерированы ИИ в единой стилистике «индустриальный минимализм»: hero с ангаром на фоне неба, крупный план сэндвич-панелей и два типа объектов для галереи — логистический комплекс и производственный цех. Честная пометка: все изображения на сайте — ИИ-генерация, а не фотографии реальных объектов.

Этапы и сроки

  1. Дизайн-концепция — палитра, типографика, логика экранов.
  2. Вёрстка — 6 экранов на чистом коде.
  3. Адаптив — телефон, планшет, компьютер, мобильное меню.
  4. Интерактив и изображения — появление блоков, форма, генерация фото ангаров.
  5. Проверка и запуск — рендер, исправления, публикация.

Сроки беру из реального проекта; по вашему сайту назову после бесплатного разбора.

Стало — результат

Лендинг собран полностью. Ниже — контрольный осмотр готовой сборки от 08.10.2026: состав страницы и результаты рендера, не обещания.

ПоказательЗамер (08.10.2026)
Секций на лендинге6 (hero + 5 смысловых) + футер
Элементов страницы196
Вес кода (HTML + CSS + JS)31 КБ (16,2 + 12,1 + 3,1 КБ)
Изображения4 PNG, суммарно ~2,6 МБ
Библиотек и фреймворковнет — чистый JS; шрифт и иконки подтягиваются с внешнего сервера
Брейкпоинты адаптива1024 / 768 / 480 px
Горизонтальный скролл на 1440 и 390 pxнет
Высота страницыdesktop 4947 px · mobile 8666 px
Sticky-шапка и плавный скроллработают
Появление блоков при прокруткеfade-in, работает
Форма заявкиимя + телефон (required) + описание проекта
lang / meta descriptionru / задан

Состав и проверки — локальный рендер исходных файлов лендинга (Playwright, Chromium, 08.10.2026). Точка роста по весу: конвертировать PNG в WebP — 2,6 МБ графики можно ужать в разы без потери качества.

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

Пруфы

Скриншоты — живой рендер готового лендинга от 08.10.2026 (Chromium, 1440 и 390 px). Кликните, чтобы открыть в полном размере.

Сколько стоит

Разбор и концепция

Бесплатно: обсуждаю нишу и задачу, показываю структуру будущего лендинга и вилку цены.

Лендинг под ключ

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

Цены не публикую: они зависят от задачи. Оставьте заявку — пришлю вилку под ваш случай в тот же день.

Частые вопросы

Будут ли фото реальных объектов?
Пока объектов нет в фотобанке, изображения сгенерированы в едином стиле и честно помечены как ИИ. Когда появятся реальные — заменим.

Сколько стоит такой лендинг?
Зависит от числа экранов, сложности дизайна и графики. Вилку называю после короткого разбора.

Сколько занимает?
Обычно 1–2 недели в зависимости от правок и готовности материалов.

Смогу ли править сам?
Да: это чистый код без сборки, для правок достаточно текстового редактора. Передам короткую инструкцию.