ЗАДАНИЕ: Создать 3 варианта дизайна сайта для мебельной компании "Кожа Мебель"

КОНТЕКСТ БРЕНДА

Компания: Кожа Мебель (kozha-mebel) Что делаем: Кухни и мебель на заказ, премиум-сегмент География: Крым (Симферополь), работаем по всей России Опыт: 10 лет на рынке Средний чек: 2-4 млн рублей за кухню

Философия бренда:

• "Сказал — сделал" (слово = дело)
• Делаем качественно и молча (клиенты говорят за нас)
• Если косяк — исправляем без вопросов
• Страх разочаровать клиента = двигатель качества
• Клиенты возвращаются и приводят друзей

Целевой клиент:

• Ценит время больше денег
• Способен доверять профессионалам
• Устал от "как получится"
• Готов платить за результат
• Часто предприниматели 35-45 лет

Визуальный стиль из бренд-стратегии:

• Современный скандинавский минимализм
• Много воздуха, светлый, чистый
• Цвета: белый, off-white (#F8F6F3), тёплые акценты (беж, песочный, натуральное дерево)
• Акцентный цвет: teal (#218D8D)
• Референсы: Apple, Nike (простота, узнаваемость)

Tone of Voice:

• Тёплый, но сдержанный
• На "вы", уважительно
• Без кричащих обещаний ("лучшие", "премиум", "только у нас")
• Показываем результат, а не хвастаемся

---

ТРЕБОВАНИЯ К САЙТУ

Структура главной страницы (обязательные блоки):

1. Hero section (первый экран)
2. Как мы работаем (8 этапов: Заявка → Замер → Встреча → Договор → Контрольный замер → Производство 45 дней → Установка → Цветы и чай)
3. Портфолио работ (избранные кейсы)
4. Отзывы клиентов (реальные цитаты)
5. О нас (Александр Кожа + команда)
6. ТехПроект (отдельная услуга)
7. Блог (последние статьи)
8. Контакты (форма + телефон)

Дополнительные страницы:

• Страница детального кейса (с историей проекта)
• Страница блога (magazine-style)
• Шаблон блог-поста

Обязательные элементы:

• Калькулятор стоимости (квалифицирует лиды)
• FAQ секция
• Формы с интеграцией в AmoCRM
• Мобильная версия

---

ЗАДАНИЕ: СОЗДАТЬ 3 ВАРИАНТА

ВАРИАНТ 1: "СКАНДИНАВСКАЯ ЧИСТОТА"

Концепция: Максимум воздуха, минимум слов. Мебель = главный герой.

Визуальные характеристики:

• Полноэкранные hero-секции с крупными фото работ
• Off-white фон (#F8F6F3), много whitespace
• Тонкий serif для заголовков (элегантный), sans-serif для текста
• Минималистичные иконки (line art)
• Masonry grid для портфолио (Pinterest-style)
• Простой timeline для процесса работы
• Цитаты клиентов крупным шрифтом (по одной на экран)

Tone:

• Сдержанный, уверенный
• "Мебель, которая не требует представлений"
• Минимум текста, работы говорят сами

Референсы для вдохновения:

• Nordiska Kök (nordiskakok.com)
• Nordic Nest (nordicnest.com)
• Case Furniture (casefurniture.co.uk)

---

ВАРИАНТ 2: "ПРЕМИУМ С ЧЕЛОВЕЧЕСКИМ ЛИЦОМ"

Концепция: Роскошь через детали. Личность через истории. Craft через процесс.

Визуальные характеристики:

• Cinematic hero с видео-loop или крупным фото
• Кремовый фон (#FCFCF9), тёмное дерево, графит (#262828)
• Serif заголовки с характером (Playfair Display-style)
• Split-screen секции (чередующиеся лево-право)
• Subtle анимации при скролле (fade-in, parallax)
• Storytelling кейсы (не просто фото, а истории с контекстом)
• Личность основателя Александра + команда
• Overlapping elements (лёгкое наслоение)

Tone:

• Эмоциональный, личный
• "Сказал — сделал" как манифест
• Истории клиентов (не отзывы)

Референсы для вдохновения:

• Ligne Roset (ligne-roset.com)
• Angel City Woodshop
• BenchMade Modern (benchmademodern.com)

---

ВАРИАНТ 3: "КОНВЕРСИОННАЯ МАШИНА"

Концепция: Функциональность > красота. Каждый элемент работает на конверсию.

Визуальные характеристики:

• Чистый белый (#FFFFFF), светло-серый (#F5F5F5)
• Sans-serif везде (читаемость)
• Boxed layout, чёткие секции
• Hero с split 60/40 (текст слева, фото справа)
• Trust indicators banner (10 лет опыта, 500+ клиентов)
• Проблема → Решение секции (конкуренты vs мы)
• Множественные CTA (но не агрессивные)
• Интерактивный калькулятор стоимости
• FAQ accordion
• До/после слайдеры в портфолио

Tone:

• Прямой, конкретный
• "Почему клиенты приезжают к нам из Краснодара?"
• Цифры, факты, гарантии

Референсы для вдохновения:

• Branch Furniture
• High-converting landing pages
• Croft House (crofthouse.com)

---

ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ

Платформа: HTML/CSS/JavaScript (single-page или multi-page) Адаптивность: Desktop (1920px), Tablet (768px), Mobile (375px) Производительность: Быстрая загрузка, оптимизированные изображения SEO: Чистая структура H1-H6, semantic HTML

Формы должны включать:

• Имя (обязательно)
• Телефон (обязательно)
• Email (опционально)
• Комментарий/тип запроса
• Кнопка отправки

Калькулятор стоимости:

• Шаг 1: Тип (Кухня / Шкаф / Вся квартира / ТехПроект)
• Шаг 2: Размер (слайдер 5-50 м²)
• Шаг 3: Уровень (Базовый / Стандартный / Премиум)
• Шаг 4: Материалы (ЛДСП / МДФ / Массив / Комбо)
• Результат: "Примерная стоимость: от X до Y ₽"

---

КОНТЕНТ ДЛЯ ИСПОЛЬЗОВАНИЯ

Реальные цитаты клиентов:

• "Это произведение искусства"
• "Блин, как я вас давно искал"
• "Вы не представляете, как я жду"
• "Я горжусь вами"
• "Вы что, реально будете менять столешницу?!" (после ремонта)

Кейсы для портфолио (примеры названий):

• "Кухня на 3 миллиона для Краснодара"
• "Кухня для трейдера в новом ЖК Симферополя"
• "История про столешницу, которую меняли"
• "Полная меблировка квартиры для семьи из 5 человек"

USP (уникальные преимущества):

• 10 лет на рынке
• Команда работает вместе 3-5 лет
• Клиенты приезжают из других регионов
• Если косяк — исправляем бесплатно
• Производство 45 рабочих дней
• Постгарантийное обслуживание
• ТехПроект в подарок при заказе мебели

---

ФОРМАТ ВЫДАЧИ

Для каждого из 3 вариантов создай:

1. Главную страницу (index.html) - полностью рабочий код
2. Страницу кейса (case.html) - детальная страница проекта
3. Страницу блога (blog.html) - список постов + шаблон одного поста

Каждый вариант должен включать:

• Полный HTML код (semantic, чистый)
• Встроенный CSS (в <style>)
• Базовый JavaScript для интерактивности (формы, калькулятор, анимации)
• Комментарии в коде (что за что отвечает)
• Placeholder изображения (с описанием, какое фото должно быть)

Важно:

• Код должен быть production-ready (работать из коробки)
• Мобильная адаптивность обязательна
• Формы с валидацией
• Никаких TODO или заглушек

---

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

Контакты компании (для форм и футера):

• Телефон: +7 (XXX) XXX-XX-XX
• Email: info@kozha-mebel.ru
• Адрес: Симферополь, Крым
• WhatsApp, Telegram (иконки)
• Instagram, VK (соцсети)

Часы работы: Пн-Пт: 9:00 - 18:00 Сб: 10:00 - 16:00 Вс: выходной

---

ОЖИДАЕМЫЙ РЕЗУЛЬТАТ

3 папки:

• variant-1-scandinavian/ (index.html, case.html, blog.html)
• variant-2-premium-storytelling/ (index.html, case.html, blog.html)
• variant-3-conversion/ (index.html, case.html, blog.html)

Каждый вариант должен быть уникальным по дизайну, но сохранять фирменный стиль бренда (светлый, современный, премиум без крика).

Начинай с Варианта 1. Жду код! 🚀