Корпоративный сайт Арасака: редизайн, ребрендинг и инженерия с нуля
Полный цикл создания корпоративного сайта — от дизайн-системы и визуальной идентичности до архитектуры, разработки и оптимизации. 16 страниц, 40+ подстраниц, 99% сокращение бойлерплейта, загрузка менее 1.5 секунды.
Корпорация Арасака
99% сокращение бойлерплейта
Проект в цифрах

Задача
Корпорация Арасака
Консалтинговая компания
Арасака — российская консалтинговая компания с 9 направлениями практики, от стратегического консалтинга до цифровой трансформации и развития территорий. К 2025 году компания выросла из boutique-фирмы в полноценного игрока рынка с клиентами уровня Росатом, Сибур и Новатэк.
Существующий сайт не отражал масштаб экспертизы: типовой шаблон, серые hero-секции, отсутствие единой дизайн-системы, дублирующийся код (2800 строк на одной странице), противоречивая статистика между разделами, мёртвые маршруты и отсутствие адаптивности для мобильных устройств.
Требовалось создать с нуля корпоративный сайт, который транслирует профессионализм и масштаб консалтинговой компании, обеспечивает удобную навигацию по 40+ услугам и 22 отраслям, и при этом легко масштабируется при добавлении новых направлений.
До и после





Типовой шаблон
- Серые hero-секции без характера
- Дублирующийся код (2800 строк на странице)
- Противоречивая статистика между страницами
- Мёртвые маршруты и сиротские директории
- Отсутствие дизайн-системы и токенов
- Неоптимизированный мобильный опыт
Кастомная дизайн-система
- Тёмные hero с диагональными паттернами и glassmorphism
- Модульная архитектура (23 строки вместо 2800)
- Единый источник статистики (companyStats.ts)
- Чистая структура с 301-редиректами
- 20 design-токенов (C.*) и шаблоны страниц
- Mobile-first responsive, Lighthouse 100
Как мы решали
6 этапов, нацеленных на измеримый результат
Исследование и стратегия
Аудит существующего сайта, анализ конкурентов (Big 4, McKinsey, BCG), интервью с заказчиком. Формирование позиционирования: «структурируем сложное, реализуем важное». Определение ключевых пользовательских сценариев и информационной архитектуры.
Дизайн-система и визуальная идентичность
Создание единой системы design-токенов (C.*) — 20 цветовых переменных, покрывающих все состояния. Фирменная палитра: тёмно-синий (#00313C), бирюзовый (#008C95), оранжевый (#E04E39), мятный (#77e2c3). Типографика: Manrope для текста, Russo One для заголовков и чисел. Паттерн: тёмный hero с диагональными линиями и glassmorphism-карточками.
Информационная архитектура
Редукция структуры: удаление 5 сиротских директорий, объединение /media → /press-center, настройка 301-редиректов. Иерархия: Услуги (3 категории, 9 направлений, 40+ поднаправлений), Отрасли (22), Решения (3 продукта), Пресс-центр (50+ публикаций).
Разработка и инженерия
Next.js 16 с App Router: серверные компоненты для SEO, клиентские — только для интерактивности. Модульная архитектура: Homepage 2806 → 23 строки (99.2% сокращение), данные вынесены в отдельные файлы. Универсальные шаблоны ServicePageTemplate и ServiceSlugPageTemplate для генерации 40+ страниц из данных. Сервисный реестр servicesData.ts — единый источник истины для навигации и контента.
Оптимизация и качество
Удалено 7000+ строк дублирующегося и мёртвого кода. 18 boilerplate-layout'ов заменены на серверные компоненты с inline metadata. Иконки через строковый реестр (iconRegistry.tsx) для проброса через server/client boundary. Статистика компании (companyStats.ts) — единый источник, устраняющий противоречия между страницами.
Адаптивность и доступность
Mobile-first responsive: все 16 страниц оптимизированы для мобильных, планшетов и десктопа. Семантическая HTML-разметка (main, nav, section, article). ARIA-атрибуты, keyboard navigation, alt-text для всех изображений. Кастомные scrollbar-стили, touch-friendly targets ≥ 44px.
Каждая страница — на уровне





Стек и архитектура
Next.js 16
App Router, Server Components, Streaming
TypeScript 5
Строгая типизация, интерфейсы, generics
Tailwind CSS 4
Utility-first, кастомные токены, responsive
Framer Motion
fadeUp, scaleIn, viewport-анимации
shadcn/ui
New York style, Lucide icons, доступность
Prisma ORM
SQLite, type-safe queries, migrations
Как устроен код
Design-токены, сервисный реестр и шаблоны — ядро масштабируемой архитектуры
// Design Tokens — единый источник цвета
export const C = {
dna: "#008C95", // Фирменный бирюзовый
dark: "#00313C", // Тёмный hero-фон
orange: "#E04E39", // CTA, акценты
mint: "#77e2c3", // Мятный на тёмном
muted: "#f1f2f4", // Нейтральный фон
} as const;
// Сервисный реестр — один источник истины
export const serviceSubDirectionsMap = {
consulting: { title: "Консалтинг", subDirections: [...] },
analytics: { title: "Аналитика", subDirections: [...] },
technologies: { title: "Технологии", subDirections: [...] },
};
// Шаблон генерирует 40+ страниц из данных
export default function ServiceSlugPageTemplate(
config: ServiceSlugPageConfig
) {
const direction = subDirections
.find(d => d.slug === slug);
// → Hero + Accordion + Carousel + QuickLinks
}Design Tokens
20 цветовых переменных в одном файле. Никакого хардкода hex-значений.
Сервисный реестр
Единый источник данных об услугах — и для навигации, и для контента страниц.
Шаблоны страниц
2 шаблона генерируют 40+ страниц из данных. Новая услуга — 5 строк в data-файле.
Модульность
Homepage: 2806 → 23 строки. Данные в отдельных файлах, секции — независимые компоненты.
На всех устройствах





Mobile-first
Все 16 страниц оптимизированы для мобильных, начиная с 320px
Touch-friendly
Минимум 44px для интерактивных элементов, жесты прокрутки
3 breakpoint'а
sm:640px, md:768px, lg:1024px — полная адаптация
Результат
Создан с нуля корпоративный сайт консалтинговой компании Арасака — 16 полноценных страниц, 40+ подстраниц услуг, пресс-центр с 50+ публикациями, единая дизайн-система из 20 токенов и 2 универсальных шаблона.
Проведён масштабный рефакторинг: удалено 7000+ строк бойлерплейта и дублирующегося кода, Homepage сокращён с 2806 до 23 строк (99.2%), 9 дублирующихся интерфейсов объединены в единый сервисный реестр, Header сокращён на 96 строк хардкода.
Сайт загружается менее чем за 1.5 секунды, получает 100 баллов в Lighthouse SEO, полностью адаптивен и доступен. При добавлении новой услуги достаточно добавить 5 строк в data-файл — шаблон сгенерирует страницу автоматически.
Структура и навигация
Полезные ссылки
Быстрый доступ к разделам
и ключевым возможностям компании
Хотите такой же сайт?
Обсудим ваш проект — подготовим предложение с дизайн-системой, архитектурой и сроками.