Karimov Studio
Премиальный сайт архитектурного бюро
Как мы освободили архитектурную студию от ограничений конструктора Vigbo: 9 страниц, 8 типов лид-магнитов, кастомная CMS, мгновенная загрузка.
Задача
Разработка современного многостраничного веб-приложения для архитектурного бюро и студии дизайна интерьеров. Создать премиальный digital-продукт, отражающий статус студии и обеспечивающий эффективную лидогенерацию.
Ограничения конструктора Vigbo
Karimov Studio использовала Vigbo — хорошо для старта, но растущий бизнес столкнулся с ограничениями
Регулярные платежи
Конструкторы работают по подписке — удобно на старте, но затраты накапливаются.
Зависимость от платформы
Сайт существует в экосистеме сервиса. Смена платформы = начать с нуля.
Ограничения шаблонов
Конструкторы дают быстрый старт, но сложные уникальные решения реализовать трудно.
Вопросы скорости
Универсальные решения не всегда оптимизированы для Core Web Vitals и SEO.
Кастомная платформа на Next.js
Полная независимость
Сайт принадлежит клиенту. Никаких ежемесячных платежей платформе, полный контроль кода.
Мгновенная загрузка
Next.js + оптимизация изображений = Lighthouse 94-100/100 и загрузка менее 1 секунды.
Защита от рисков
Нет зависимости от внешних сервисов. Сайт работает стабильно и предсказуемо.
Технологический стек
Next.js 15
App Router, SSR
TypeScript
Строгая типизация
Tailwind CSS v4
Utility-first CSS
Framer Motion
Анимации
shadcn/ui
UI компоненты
Payload CMS
Headless CMS
Telegram Bot API
Уведомления
Яндекс.Метрика
Аналитика
Структура страниц
9 страниц + динамические маршруты для проектов
/Главная
Hero-секция, портфолио, услуги
/projectsПроекты
Каталог с фильтрацией
/projects/[slug]Проект
Детальная страница с галереей
/interiorsИнтерьеры
Каталог дизайн-проектов
/interiors/[slug]Интерьер
Детальная страница
/featured/[slug]Избранное
Избранные проекты
/teamКоманда
О студии
/cooperationСотрудничество
Условия работы
/privacyПолитика
Конфиденциальность
8 типов лид-магнитов
Комплексная система захвата лидов: от калькуляторов до AI-генератора
Калькулятор
Расчёт стоимости проекта
Поля: площадь, тип, бюджет
Квиз
Подбор стиля (5 вопросов)
Поля: предпочтения клиента
AI-генератор
Визуализация интерьера
Поля: описание интерьера
Демо-проект
Скачивание PDF
Поля: email, телефон
Чек-лист
Скачивание PDF
Поля: email, телефон
Консультация
Заявка на звонок
Поля: имя, телефон, сообщение
Мгновенные уведомления в Telegram
Все заявки мгновенно приходят в Telegram с форматированием: тип заявки, контактные данные, детали запроса, timestamp.
Скриншоты сайта
Галерея интерьеров с фильтром по стилям
AI-генератор визуализации интерьера
Кастомная CMS на Payload
Разработали админ-панель, которая позволяет клиенту самостоятельно управлять портфолио: добавлять проекты, редактировать описания, отслеживать статистику.
Интерьеры, Проекты, Избранное
Период статистики
Автоматический контроль контента
Переход в Яндекс.Метрику из панели
SEO-оптимизация
Техническое SEO
- Metadata — уникальные title и description
- Open Graph — оптимизация для соцсетей
- Twitter Cards — summary_large_image
- robots.ts — правила индексации
- sitemap.ts — динамическая карта сайта
Schema.org (5 схем)
- Organization — Информация о компании
- WebSite — Поисковая строка сайта
- FAQ — 8 популярных вопросов
- HowTo — Этапы работы над проектом
- BreadcrumbList — Навигационные цепочки
Верификация поисковых систем
Решения интерфейса
Анимации
- Плавное появление при скролле
- Hover-эффекты на карточках
- Анимированные переходы слайдов
- Микроанимации кнопок
Мобильная версия
- Полноэкранное меню с анимацией
- Touch-элементы (min 44px)
- Адаптивные сетки (1→2→3 колонки)
- Упрощённые формы
Галереи
- Lightbox на детальных страницах
- Навигация стрелками и свайпами
- Счётчик изображений
- Клавиатурная навигация
Этапы разработки
Проектирование
- Анализ целевой аудитории (премиум-сегмент)
- Разработка информационной архитектуры
- Дизайн-система: минимализм и элегантность
- Цветовая палитра: тёмная тема с золотыми акцентами
Разработка ядра
- Настройка Next.js 15 с App Router
- Интеграция Tailwind CSS v4 и shadcn/ui
- Базовые компоненты: Header, Footer, Navigation
- Адаптивная сетка (mobile-first)
Контентные страницы
- Главная с hero, портфолио, услугами
- Каталоги проектов с фильтрацией
- Детальные страницы с lightbox-галереями
- Слайдеры архитектурных стилей
Лидогенерация
- Интерактивный калькулятор стоимости
- Квиз подбора стиля (5 вопросов)
- AI-генератор визуализации
- Формы скачивания демо и чек-листов
Интеграции
- Подключение Payload CMS для контента
- Настройка Telegram Bot для уведомлений
- Интеграция Яндекс.Метрики с целями
- Верификация в поисковых системах
Ключевые достижения
+ динамические маршруты
Формы, квизы, калькуляторы
Структурированные данные
Mobile-first подход
Стек одной строкой:
Next.js 15 • TypeScript • Tailwind CSS v4 • Framer Motion • shadcn/ui • Payload CMS • Telegram Bot API