Перейти к содержимому
Антон ГончаровРазработчик ИИ-систем
RUEN

Сайт на Next.js · B2B, многостраничный

Сайт производственной компании

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

Сценарий: Завод «Опора» в Челябинске — вымышленный: четыре направления (склады, цеха, агрокомплексы, спорт и ритейл), восемь кейсов, пять вакансий, статьи блога, реквизиты и снеговые районы двенадцати городов.

Скриншот демо: Сайт производственной компании

Открыть демо

Открыть сайт

Нажмите Ctrl+K на любой странице — откроется поиск по сайту.

Заявки с демо-сайта видны только вам, в «Панели владельца»: сервер проверяет форму и ничего не хранит.

Что показывает демо

  • Калькулятор здания: тип, пролёт, длина, высота, город (снеговой район и доставка), стены, кран-балка, ворота, фундамент и монтаж — цена, металлоёмкость, сроки и разбивка по статьям сразу

  • Изометрический чертёж здания меняется вместе с параметрами; режимы «Обшивка» и «Каркас» — с рамами, связями и кран-балкой

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

  • Конструктор ТЗ в четыре шага: документ собирается справа, его можно скачать в Markdown, распечатать в PDF или отправить; сайт подсказывает, чего не хватает для фиксированной цены

  • Поиск по сайту по Ctrl+K: «ангар» находит склады и цеха, «хоккейная коробка» — ледовую арену, «работа сварщиком» — вакансию

  • Кейсы с фильтром по отрасли и направлению, сортировкой и итогами по площади и металлу; фильтр сохраняется в ссылке

  • Вакансии с откликом и загрузкой резюме: сервер проверяет формат, размер и сигнатуру файла — переименованный .exe не пройдёт

  • Блог с оглавлением и временем чтения, реквизиты с копированием и карточкой предприятия, частые вопросы

  • Микроразметка Organization, Service, JobPosting, Article, FAQPage и хлебные крошки на каждой странице

  • Панель владельца: заявки всех форм с UTM и статусами, выгрузка в Excel, цели аналитики, Core Web Vitals и SEO-проверка

Как попробовать

  1. Посчитайте здание

    «Калькулятор» в меню: выберите «Цех», пролёт 30 м, кран 10 т и город Пермь. Цена и металлоёмкость вырастут из-за снега и крана; переключите чертёж на «Каркас».

  2. Превратите расчёт в ТЗ

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

  3. Найдите по смыслу

    Нажмите Ctrl+K и напишите «хоккейная коробка» или «ангар для техники в Перми». Поиск найдёт кейс, направление или калькулятор, хотя таких слов на страницах нет.

  4. Откликнитесь на вакансию

    В «Вакансиях» раскройте «Сварщик НАКС» и нажмите «Откликнуться». Приложите PDF-резюме — а потом попробуйте подсунуть картинку с расширением .pdf.

  5. Откройте панель владельца

    Кнопка в верхней полосе: расчёт, ТЗ и отклик лежат во вкладке «Заявки» с текстом расчёта, а каждый шаг — в «Целях».

Без платных нейросетей

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

Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.

Что будет в рабочем проекте

  • Заявки с расчётом и ТЗ — в amoCRM или Битрикс24 с ответственным инженером, уведомление в Telegram, резюме — в Хантфлоу или Поток
  • Калькулятор на реальных коэффициентах завода: цена металла и панелей из 1С, нормы металлоёмкости от конструкторов
  • Векторный поиск по сайту и базе знаний на эмбеддингах (YandexGPT или GigaChat), ответы с источниками
  • Контент в админке (Payload или Strapi): кейсы, вакансии и статьи без разработчика, вакансии выгружаются на hh.ru
  • Яндекс Метрика с целями, коллтрекинг, отчёт: сколько заявок принёс калькулятор и конструктор ТЗ

Стек

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Server Actions

Комментарий от разработчика

Антон Гончаров

Разработчик ИИ-систем · Python

Для бизнеса

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

Для разработчиков

  • Next.js 16 App Router: страницы направлений, кейсов и статей собираются статикой через generateStaticParams, калькулятор и фильтры читают параметры из ссылки внутри Suspense.
  • Чертёж — чистая функция изометрической геометрии (пролёты, рамы, ворота, кран), отрисованная SVG без библиотек; расчёт, ТЗ и поиск покрыты юнит-тестами.
  • Отклик с файлом — Server Action с FormData: сервер проверяет расширение, размер и сигнатуру первых байтов файла.

Советы

  • Совет 01

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

  • Совет 02

    Храните состояние калькулятора в ссылке — менеджер клиента перешлёт расчёт директору, и тот откроет ровно то же.

Нужен такой же для вашего бизнеса?

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

Написать в TelegramОставить заявку

Другие демо в этом разделе

Все демо

  • Сайт на Next.js · лендинг услуги

    работает

    Лендинг стоматологии

    Одностраничный сайт клиники, который приводит пациентов: квиз подбирает лечение, калькулятор считает план с рассрочкой, онлайн-запись показывает свободное время врачей, ИИ-консультант отвечает по прайсу. Заголовок проверяется A/B-тестом, заявки и цели видны в панели владельца.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · каталог, карта, сравнение

    работает

    Каталог недвижимости с умным поиском

    Каталог квартир агентства недвижимости: напишите «двушка у метро до 12 млн» — поиск сам выставит фильтры, покажет квартиры на карте города, сравнит до четырёх и пришлёт новые в Telegram.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · ИИ-перевод, SEO по языкам

    работает

    Экспортный сайт на четырёх языках

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

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · кабинет, ИИ-помощник, Telegram

    работает

    Личный кабинет клиента

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

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · Python в браузере, ИИ-наставник

    работает

    Онлайн-школа с кабинетом ученика

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

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · запись по госномеру, фотоотчёт, согласование

    работает

    Автосервис с записью и статусом ремонта

    Сайт автосервиса: запись по госномеру или VIN в свободные окна постов, разбор «что стучит?» с вероятными причинами и вилкой цены, статус ремонта с фотоотчётом, согласованием доп. работ и оплатой по ссылке, гараж с историей обслуживания и прогнозом следующего ТО.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · разбор ситуации, претензии, калькуляторы

    работает

    Юридическая компания с ИИ-разбором

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

    • Next.js
    • React
    • TypeScript

  • Сайт SaaS на Next.js · песочница, кабинет, API

    работает

    SaaS: ИИ-ответы на отзывы WB и Ozon

    Сайт и кабинет SaaS-сервиса, который отвечает на отзывы Wildberries и Ozon: песочница с разбором отзыва и проверками, автопилот по рейтингу, очередь с согласованием, аналитика тем, тарифы с калькулятором окупаемости, подключение магазина по ключу, счёт по ИНН и документация API с живой консолью.

    • Next.js
    • React
    • TypeScript

  • Сайт ресторана на Next.js · меню, бронь, доставка

    работает

    Ресторан с доставкой

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

    • Next.js
    • React
    • TypeScript

  • Сайт фитнес-студии на Next.js · запись, абонементы, кабинет

    работает

    Фитнес-студия

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

    • Next.js
    • React
    • TypeScript

  • Сайт IT-конференции на Next.js · программа, билеты, нетворкинг

    работает

    Сайт конференции

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

    • Next.js
    • React
    • TypeScript

  • Корпоративный сайт логистики на Next.js · калькулятор, трекинг, ИИ-заявка

    работает

    Сайт транспортной компании

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

    • Next.js
    • React
    • TypeScript