Наш сайт: ROI-калькулятор по задачам и настоящий HTML
Двуязычный сайт, который считает одну задачу двумя способами: человек по минутам и модель по токенам, а каждый роут отдаётся как настоящий пререндеренный HTML.
1Выбор задачи: ответ в саппорт, IT-заявка, ресёрч лида и другие
2Экономия за первый год, посчитанная из разницы по задаче
ROI-калькулятор: человек против модели, цена за задачу и экономия за первый год.
1Выбор задачи: ответ в саппорт, IT-заявка, ресёрч лида и другие
2Экономия за первый год, посчитанная из разницы по задаче
Что работает автоматически
01 / PRERENDER
Пререндер, потом гидрация
Продакшен-сборка рендерит каждый роут на обоих языках в статический HTML, переписывая title, description, canonical и hreflang под каждую страницу, а браузер гидрирует этот HTML вместо рендера с нуля.
02 / ROI
ROI-калькулятор по задачам
Одна задача считается двумя способами: человек по минутам при полной часовой ставке и модель по токенам при опубликованных ценах плюс проход человеческой проверки, а результат сворачивается в экономию за первый год.
03 / LEADS
Приём заявки в четыре шага
Отправленная форма проходит hCaptcha, записывается в Supabase, уходит обязательным письмом через Gmail SMTP и дублируется в Telegram как необязательное дополнение; чат-виджет Ami на этом же сайте отвечает на вопросы вживую.
Собрано с Claude Code за 6 месяцев
Было
Сайт агентства доказывал пользу AI одной страницей питча и формой обратной связи.
Стало
Посетители сами считают стоимость своей задачи против модели и читают двенадцать статей, в продакшене на anmflow.com.
[→]/Ещё экраны
Главная: питч и панель статуса на первом экране.
Learn: одна из двенадцати статей, пререндерена как любой другой роут.
Как устроено
01Контекст
Сайт агентства, который обязан доказывать питч
У сайта агентства, продающего AI-системы, одна задача: выглядеть как компания, которая следует своим же советам, а не шаблон с формой обратной связи наверху. Нужна реальная модель стоимости вместо расплывчатого обещания. Нужен контент, который ранжируется, а не одна страница «О нас». И нужна сборка, которая ведёт себя одинаково для поискового робота и для живого посетителя. Главная открывается питчем и панелью статуса в реальном времени, дальше ведёт в каталог услуг, библиотеку Learn и сам калькулятор.
02Как работает
Каждый роут пререндерится, потом гидрируется
Сайт – одностраничное приложение на Vite и React 18, но ни посетители, ни поисковые роботы никогда не видят пустую оболочку. Продакшен-сборка запускает клиентскую сборку, SSR-сборку того же дерева компонентов и скрипт пререндера, который рендерит каждый роут на обоих языках в статический HTML, переписывая теги head под каждую страницу. Дальше браузер гидрирует этот HTML вместо рендера с нуля, поэтому реальный заголовок уже на экране до запуска любого JavaScript; последняя сборка записала 97 HTML-файлов по числу роутов.
03Результат
Работает на anmflow.com на двух языках
В продакшене на anmflow.com на английском и русском, с локалью по URL для каждой страницы. Двенадцать статей Learn покрывают темы окупаемости AI, стоимости внедрения и адаптации, каждая зарегистрирована со своим EN и RU контентом и пререндерена как любой другой роут. Аналитика загружается через GA4 в режиме Consent Mode v2, поэтому сигналы трекинга остаются запрещёнными, пока посетитель не примет баннер cookie; калькулятор и библиотека Learn – две вещи, которые реально продают.
ANM SOLUTIONS / СВЯЗАТЬСЯ
Хотите похожее?
Первый 30-минутный звонок бесплатный. Мы описываем объём, вы решаете.
