От разработчика
Что это за прототип, как устроен оригинальный сайт Saalasti и какие варианты реализации мы предлагаем.
Этот раздел не входит в публичный сайт. Он предназначен для заказчика: здесь мы объясняем, что сделано, как устроен оригинал и между какими вариантами предстоит выбрать. Текст можно свободно править в файле
src/content/pages/ru/dev.md.
Что перед вами
Кликабельный прототип русскоязычного сайта, который повторяет структуру и характер оригинала saalastirails.com: тёмно-зелёная шапка, крупные обложки, карточки продукции и услуг, оранжевые акценты. Контент собран из презентации «Локо-робот», сертификата представителя и открытых материалов Saalasti.
Что уже работает:
- 15 страниц: главная, продукция (3), сервис (5), о компании, новости (3), контакты, политика конфиденциальности;
- таблица характеристик пяти моделей OTSO-Robot;
- форма заявки (в демо-режиме, отправка настраивается при запуске);
- адаптивная вёрстка под телефоны и планшеты;
- дизайн-система сверена с CSS оригинала: цвета, размеры, кнопки, радиусы (таблица ниже);
- структура под три языка: русский заполнен, казахский и английский подключаются добавлением переводов без переделки сайта;
- базовое SEO: заголовки, описания, канонические адреса, hreflang, Open Graph для соцсетей.
Чего пока нет: реальных контактов и email, финального логотипа бренда, утверждённых текстов, аналитики, подключённой отправки формы.
Как устроен оригинал
| Параметр | saalastirails.com |
|---|---|
| Платформа | WordPress 6.9 на nginx с кэшем LiteSpeed |
| Разработчик | JCO Digital, Хельсинки |
| Тема | Собственная закрытая тема jcore2 «Grasshopper» (Twig-шаблоны) и дочерняя тема saalasti |
| Редактор | Стандартный Gutenberg плюс плагин wp-bootstrap-blocks, без Elementor |
| Фронтенд | Bootstrap 5, Alpine.js, Swiper, FontAwesome Pro (платная лицензия) |
| Плагины | Polylang (языки), Yoast SEO, Cookiebot, Gravity Forms (формы), Google Tag Manager |
| Интерактив | Только поиск, форма обратной связи и подписка на рассылку. Личных кабинетов нет |
| Контент | 20 страниц, 41 новость, 4 референса, 5 событий, 16 карточек сотрудников |
Вывод: скопировать тему напрямую нельзя, она закрытая и завязана на платные лицензии. Дизайн и структуру можно воспроизвести полностью, что и сделано в прототипе. Тексты и фото Saalasti используются по лицензии, договор требует предварительного согласования рекламных материалов с производителем.
Варианты реализации
| Статический сайт (Astro) | WordPress | Веб-приложение (Next.js, React) | |
|---|---|---|---|
| Что это | Готовые HTML-страницы, собираются из текстовых файлов | Классическая CMS с админкой и базой данных | Программа на JavaScript, работает как приложение |
| Хостинг | Бесплатно (Vercel, Cloudflare Pages) | Виртуальный хостинг с PHP и MySQL, 2–5 тыс. ₸/мес | Сервер или облако, от 5 тыс. ₸/мес |
| Скорость | Максимальная | Средняя, зависит от хостинга и плагинов | Высокая при правильной настройке |
| Безопасность | Взламывать нечего: нет базы и кода на сервере | Нужны регулярные обновления ядра и плагинов | Нужно следить за зависимостями |
| Редактирование текста | Через файлы или подключаемую панель (Decap CMS, Keystatic) | Удобная админка, любой сотрудник | Требует отдельной админки |
| Мультиязычность | Встроена, добавляется папкой переводов | Плагин Polylang или WPML | Реализуется отдельно |
| Срок | 2–3 недели | 3–4 недели | 4–6 недель |
| Кому подходит | Витрина, редкие обновления, важна скорость и надёжность | Сотрудники сами часто публикуют новости | Есть личные кабинеты, калькуляторы, интеграции |
Наша рекомендация
Для сайта-витрины с редкими новостями и планами на несколько языков оптимален статический сайт на Astro, то есть этот прототип, доведённый до готовности. Он бесплатен в размещении, не требует обслуживания и открывается быстрее оригинала.
Если сотрудники SRS будут сами регулярно публиковать новости, есть два пути: подключить к статическому сайту лёгкую панель редактирования (Decap CMS или Keystatic, бесплатно) или перенести макет на WordPress. Макет и тексты в обоих случаях сохраняются.
Что такое Astro: бесплатный инструмент с открытым кодом для сборки сайтов, существует с 2021 года. Им пользуются Porsche, IKEA, Firebase от Google, The Guardian и Cloudflare. Регистрация в Astro не требуется. Аккаунты нужны только для хостинга (Vercel или Cloudflare, бесплатно) и хранения кода (GitHub, бесплатно).
Дизайн-система: сверка с оригиналом
Стили прототипа сверены с файлом theme.css оригинальной темы.
| Параметр | Оригинал saalastirails.com | Прототип |
|---|---|---|
| Шрифт | Rouben (Regular и SemiBold), дизайнер Роман Мелихов, коммерческая лицензия | Play (Google Fonts, бесплатный, кириллица). Из семи проверенных свободных шрифтов ближе всего по квадратным формам и ширине. При желании можно купить лицензию Rouben и подключить его одной строкой |
| Размер текста | 18px, межстрочный 1.5 | То же |
| Заголовки | H1 48px, H2 36px, H3 28px, H4 22px, межстрочный 1.2 | Те же значения, плавно уменьшаются на мобильных |
| Цвета | Зелёный #1B4533, тёмно-зелёный #133024, мятный #21CF85, оранжевый #FC6327, жёлтый #FFC41F, фон #F3F0E8 | Те же |
| Кнопки | 14px, капс, разрядка 1.6px, радиус 10px, мятная заливка с чёрным текстом; белая с зелёной рамкой | Те же |
| Карточки и фото | Радиус 20px | Тот же |
| Шапка | Фон #1B4533, подменю #133024, логотип высотой 54px, ширина контента 1320px | То же |
| Подписи в подвале | Капс 14px, серый #ADB5BD, разрядка 1.4px | Те же |
| Иконки | FontAwesome Pro (платная) | Не используются, при необходимости бесплатный набор |
Хостинг Vercel: что проверено
- Регион. Сайт статический, Vercel раздаёт его со всех точек своей сети автоматически. Проверка показала, что запросы из Казахстана обслуживает узел во Франкфурте. Настройка региона в Vercel относится только к серверным функциям, которых на сайте нет, поэтому менять ничего не нужно.
- Переменные окружения. Не требуются. Все настройки (бренд, контакты, адрес формы) лежат в коде в файле
src/site.config.ts. Секретов на сайте нет. - База данных. Не нужна. Страницы собираются заранее, форма заявки отправляется во внешний сервис (Formspree или аналог), письма приходят на почту. Если позже понадобятся личные кабинеты или каталог с фильтрами, тогда добавится база, но для витрины это лишнее.
- Что добавлено в репозиторий. Файл
vercel.json: мгновенный редирект с корня на/ru/, кэширование картинок и стилей, базовые заголовки безопасности. - Настройки проекта в Vercel. Framework Preset: Astro, Node.js 22, Build Command
astro build, Outputdist. Всё определяется автоматически.
Что нужно от заказчика для запуска
- Доменное имя или поддомен и доступ к настройкам DNS.
- Логотип бренда Rock Robot / Локо-робот в векторе, если он отличается от логотипа SRS.
- Письменное подтверждение Saalasti Rails на использование текстов и фотографий (пункт 8.4 договора).
- Реальные контакты: email, телефоны, адрес офиса, ссылки на соцсети.
- Решение по разделам: что убрать, что добавить относительно прототипа.
- Решение по языкам: только русский на старте или сразу казахский и английский.
- Кто будет редактировать сайт после запуска: сотрудники SRS или разработчик.
Как устроен код прототипа
src/site.config.ts— название бренда, контакты, включённые языки, адрес для формы;src/content/products|services|news|pages/ru/— все тексты в формате Markdown, по одному файлу на страницу;src/i18n/ui.ts— подписи кнопок и меню для каждого языка;src/pages/[lang]/— шаблоны страниц, общие для всех языков;public/images/— фотографии и логотипы.
Чтобы добавить казахский язык: создать папки kk рядом с ru, положить переводы с теми же именами файлов, добавить kk в список включённых языков в конфиге. Страницы, переключатель и hreflang появятся автоматически.