Окна Хаус

Описание

Компания по установке окон хотела сайт‑презентацию с заявками на замер, который:
- Показывает портфолио работ и повышает доверие.
- Позволяет быстро оставить заявку/обратный звонок.
- Даёт фильтрацию по типам работ/материалам.
- Корректно работает на мобильных и грузится быстро.
- Имеет интерактив: карта, слайдеры, отзывы.

Решение

Аналитика и структура:
- Собрал требования: ключевые услуги, типы окон, география работ, процесс замера/монтажа.
- Спроектировал флоу: главная → портфолио/кейсы → преимущества → отзывы → заявка.

Дизайн и UX:
- Адаптивные карточки работ, визуальные акценты на CTA «Заказать замер».
- Слайдеры и плавные анимации без перегруза, читаемая типографика.

Доступность: aria‑атрибуты, фокусы, контраст.
- Реализация (Frontend):
- Стек: Vue 3, Nuxt, TypeScript, TailwindCSS.
- Компоненты: каталог/галерея работ, карточки, слайдер, отзывы, форма заявки, модальные окна.
- Фильтры/сортировка: тип окна, материал, цена, свежие работы.

Формы и интеграции:
- Форма заявки на замер с валидацией (Vuelidate/Yup), статусы/спиннеры, тост‑уведомления.
- Интеграция карт (точки объектов/маршрутов) для визуализации географии.

Производительность и качество:
- Ленивые секции, оптимизированные изображения, мемоизация.
- Линтинг/форматирование, разбиение по смысловым блокам, ранние return.
- Тестирование сценариев: отправка формы, фильтры, слайдеры, карта, мобильный UX.

Результат

- Быстрый, адаптивный сайт с наглядным портфолио и удобной заявкой на замер.
- Повышенная конверсия за счёт понятных CTA и доверительных блоков (кейсы, отзывы).
- Интерактивные фильтры и карта помогают пользователю быстрее принять решение.

Применение на практике:
- Основной канал лидогенерации из SEO/рекламы: пользователь выбирает тип окон, смотрит примеры и оставляет заявку.
- Менеджеры оперативно обрабатывают лиды, снижая время до контакта.
- Простое масштабирование: добавление новых работ/категорий без изменений архитектуры.
- Готовность к A/B‑тестам (варианты CTA, формы, блоков преимуществ) и расширению функционала.

Презентация проекта