onoot

1. Продукт и задача B2B-сайт оптового поставщика сантехнического оборудования , труб и комплектующих. Барнаул , Павловский тракт 311. Собственный склад , отгрузка от 1 короба , работа с НДС , отсрочка до 30 дней. Клиенты: застройщики , подрядчики , УК в Алтайском крае , Новосибирской области и других регионах Сибири. На рынке с 1997 года. Задача дизайна: за 5 секунд передать «серьёзный , надёжный , современный поставщик» и привести посетителя к запросу цены или заявке. Тон: инженерная сдержанность , без пафоса и сленга. Доверие строится на цифрах и фактах. Ключевые цифры: 18 лет на рынке · 1948 позиций в каталоге · 93+ реализованных объекта · смета за 24 часа. Важно: 3D-моделей , WebGL и трёхмерных эффектов на сайте нет. Ощущение дорогого , живого продукта создаётся типографикой , светом , стеклом , реальной фотографией и тонкой анимацией. 2. Визуальный язык Палитра (значения не менять): brand #00649A · brand-bright #0086C9 · brand-ink #00547F accent #E5661A — только для акцентов , цифр и одной линии на экране , не для заливок Светлая тема: bg #F2F5FA , bg-soft #E7ECF5 , text #0C1526 , text-dim #5A6A85 Тёмная тема: bg #05070F , bg-soft #0A0F1E Логотип: синий скруглённый квадрат , белая «П» контуром , оранжевая линия ЭКГ внизу. Три версии: основная , светлая (для тёмного фона) , тёмная (для светлого фона). Логика в навбаре: на тёмном hero используется версия для тёмного фона , после прокрутки (светлая плашка навбара) версия для светлого фона. Типографика: только два шрифта , без засечек. Outfit 800 для заголовков и цифр , трекинг −0.03em на крупных размерах Manrope 400–700 для интерфейса и текста Сетка и ритм: Контейнер 1220px , поля 15px (на узких экранах 20px) , 12 колонок Шаг отступов 4px; секции 96–128px по вертикали , плотные блоки 48px Радиусы: карточки 16px , кнопки и поля 12px , чипы 999px 3. Чем заменяем 3D (фирменный приём сайта) Один сквозной мотив: линия пульса (ЭКГ) как тонкая оранжевая SVG-линия. В hero она рисуется за 700ms по кривой от левого края к правому , проходя под заголовком В навбаре и подвале присутствует как тонкий разделитель В блоке «Цифры» линия соединяет три карточки В остальных секциях не повторяется. Один раз на экран Дополнительные приёмы «лоска» без 3D: Hero: тёмный фон с мягким радиальным свечением brand (8–12% непрозрачности) , очень тонкая сетка-чертёж 1px при 4% непрозрачности. Справа крупное студийное фото ключевого товара (водомер , шаровой кран , фитинг) с вырезанным фоном , лёгкая тень под ним. При скролле фото смещается параллаксом на 20–40px , а заголовок остаётся на месте Стеклянные карточки поверх тёмного hero: backdrop-blur 16px , граница 1px rgba(255 , 255 , 255 , 0.12). В них живые факты («Склад: в наличии 1948 позиций» , «Смета за 24 часа») Тонкий «чертёжный» акцент: размерные линии и выноски в стиле технического чертежа вокруг фото товара , нарисованные тонким SVG Фото наклона нет. Hover на карточках: подъём на 4px , тень мягче и шире , изображение увеличивается на 1.03 4. Паттерны Apple (обязательны) Иерархия вместо декора. Один акцент на экран. Размер и вес , а не цвет и тени. Не более двух насыщенных цветов на экране: brand и accent. Крупная типографика. Заголовок секции 40–56px на десктопе , 28–32px на мобиле. line-height 1.05–1.1 у заголовков , 1.6 у текста. Короткие строки , не заполнять экран текстом. Воздух. Пустое место — элемент дизайна. Выравнивание по базовой линии. Материалы , а не рамки. Стекло (blur 12–20px) , мягкие тени 0 2px 12px rgba(0 , 0 , 0 , 0.06) , границы 1px rgba(13 , 27 , 51 , 0.1). Без двойных рамок и пунктиров. Плавность. 120–180ms hover , 200–300ms появление , 600–800ms hero-анимация. Кривая cubic-bezier(0.22 , 1 , 0.36 , 1). Без пружин и отскоков. Появление секций при скролле: fade + сдвиг на 16px. Отклик на действие. Нажатие: scale 0.98 или opacity. Состояния hover / focus / active / disabled на каждом интерактивном элементе. Focus-visible. 2px accent , без обводки при клике мышью , полная клавиатурная навигация. Мгновенный первый экран. Статичный hero с осмысленным h1 , без «загрузки» и скелетонов. Учитывать prefers-reduced-motion: анимации отключаются. 5. Композиционные паттерны Единый ритм секции: eyebrow → заголовок → контент. Чередование фонов: светлый bg и bg-soft , секции читаются как страницы. Тёмный блок на главной один — hero. Асимметрия 60/40: hero и «О компании» — текст слева , визуал справа. Остальные секции не зеркалить. Один акцентный объект на экран: не смешивать иллюстрацию , цифры и фото в одной секции. Зацикленные ленты: бренды , отзывы , проекты. Бесконечная лента , пауза при наведении , без кнопок прокрутки. Bento-сетка для блока преимуществ и «Ассортимента»: карточки разного размера в одной сетке , крупная карточка задаёт главное. Мобильный первый: на 375px одна колонка , кнопка на всю ширину , sticky-CTA внизу на карточке товара. 6. Страницы и секции Главная Hero. Тёмный фон , eyebrow , h1 , подзаголовок , две кнопки (синяя основная «Запросить смету» , стеклянная вторичная «Открыть каталог»). Справа фото товара с чертёжными выносками , стеклянные карточки с фактами , линия ЭКГ. Слайдер из трёх баннеров (акции , новинки , условия) , переключение плавным кроссфейдом. Цифры. «Проверено объёмами». Три карточки по центру (макс. 1000px) , цифры градиентом brand → accent , подпись под ними. Эта секция задаёт ритм всей страницы. О компании. 60/40: текст и чек-лист из 6 пунктов слева , фото склада или объекта справа. Бренды. Бесконечная лента логотипов на подложке bg-soft , логотипы монохромные , при наведении цветные. Наши работы. 3–4 карточки проектов: крупное фото реального объекта , название , город , тип. Hover: подъём и увеличение фото. Ссылка «Все проекты». Каталог. Карусель превью товаров , кнопка «В каталог». Отзывы и блог. Компактная лента отзывов и 2–3 свежие статьи. Финальный CTA. Один крупный призыв и форма обратной связи. Подвал. Контакты , реквизиты , режим работы , карта 2ГИС. Каталог Хлебные крошки , фильтры (категория , цена , наличие) , поиск , сортировка , сетка товаров. Карточка: фото , название , ключевые характеристики , наличие , «цена по запросу». Счётчик найденного , пагинация или бесконечная лента. На мобиле фильтры в нижней шторке. Карточка товара Галерея с зумом , характеристики таблицей , CTA «Запросить цену» и «Добавить в заявку» , блок наличия на складе. На мобиле sticky-панель с остатком и кнопкой. О компании Hero-блок , текст о компании , «Ключевые показатели» , «Ассортимент продукции» (bento-сетка) , благодарственные письма в галерее с просмотром. Наши проекты Фильтр по категории , крупные кейсы по схеме «задача → решение → результат» , галерея объекта. Доставка и оплата Три шага заказа , таблица тарифов по городам , условия отсрочки до 30 дней , блок частых вопросов (аккордеон). Контакты Карточки: телефон , email , адрес , режим работы. Встроенная карта 2ГИС. Форма общего запроса. 404 Спокойный экран с логотипом , ссылкой на каталог и контактом поддержки. Админка / кабинет Плотная сетка , таблицы , формы загрузки медиа , предпросмотр изменений. Тёмная тема допустима. Здесь плотность важнее воздуха. 7. Функции , которые должны быть видны в дизайне Корзина заявок и список отправленных запросов Авторизация в кабинет дилера , смена роли Каталог с фильтрами и поиском Загрузка и автоматическое сжатие фото товаров Лента новостей и блог Отзывы с модерацией Статистика для менеджера Печатная версия счёта и КП (отдельный макет: логотип , реквизиты , таблица позиций , итог) Подготовка к мультиязычности (RU обязателен): переключатель языка в навбаре и подвале 8. Ограничения Никаких 3D , WebGL , вращающихся и наклоняющихся элементов Никаких смайлов в интерфейсе Никаких градиентов от розового к фиолетовому Никаких drop-shadow текста и бликов Никакого автоплея со звуком Без stock-фото людей в деловых костюмах , только кадры с реальных объектов и склада Анимации не дольше 800ms и не мешают чтению 9. Что отдать на выходе Дизайн-система в Figma: цвета , типографическая шкала , сетка , компоненты (кнопка , карточка , поле , чип , таблица , стеклянная карточка , аккордеон) , состояния компонентов. По одному фрейму каждой страницы: светлая тема , тёмная тема , мобильная версия 375px , плюс макет печатного КП. Что я поправил в исходнике: Логотип в навбаре: в двух местах было написано противоположное. Теперь логика одна: на тёмном фоне светлая версия логотипа , на светлой плашке тёмная. «Личный кабинет и персональные данные не собираем» противоречило авторизации дилера и формам заявок. Я убрал эту строку. Если у вас действительно есть такое ограничение , уточните , какие именно поля допустимы. Ритм «одной линии accent на экран» теперь реализован через линию ЭКГ. ,

onoot

1. Продукт и задача B2B-сайт оптового поставщика сантехнического оборудования , труб и комплектующих. Барнаул , Павловский тракт 311. Собственный склад , отгрузка от 1 короба , работа с НДС , отсрочка до 30 дней. Клиенты: застройщики , подрядчики , УК в Алтайском крае , Новосибирской области и других регионах Сибири. На рынке с 1997 года. Задача дизайна: за 5 секунд передать «серьёзный , надёжный , современный поставщик» и привести посетителя к запросу цены или заявке. Тон: инженерная сдержанность , без пафоса и сленга. Доверие строится на цифрах и фактах. Ключевые цифры: 18 лет на рынке · 1948 позиций в каталоге · 93+ реализованных объекта · смета за 24 часа. Важно: 3D-моделей , WebGL и трёхмерных эффектов на сайте нет. Ощущение дорогого , живого продукта создаётся типографикой , светом , стеклом , реальной фотографией и тонкой анимацией. 2. Визуальный язык Палитра (значения не менять): brand #00649A · brand-bright #0086C9 · brand-ink #00547F accent #E5661A — только для акцентов , цифр и одной линии на экране , не для заливок Светлая тема: bg #F2F5FA , bg-soft #E7ECF5 , text #0C1526 , text-dim #5A6A85 Тёмная тема: bg #05070F , bg-soft #0A0F1E Логотип: синий скруглённый квадрат , белая «П» контуром , оранжевая линия ЭКГ внизу. Три версии: основная , светлая (для тёмного фона) , тёмная (для светлого фона). Логика в навбаре: на тёмном hero используется версия для тёмного фона , после прокрутки (светлая плашка навбара) версия для светлого фона. Типографика: только два шрифта , без засечек. Outfit 800 для заголовков и цифр , трекинг −0.03em на крупных размерах Manrope 400–700 для интерфейса и текста Сетка и ритм: Контейнер 1220px , поля 15px (на узких экранах 20px) , 12 колонок Шаг отступов 4px; секции 96–128px по вертикали , плотные блоки 48px Радиусы: карточки 16px , кнопки и поля 12px , чипы 999px 3. Чем заменяем 3D (фирменный приём сайта) Один сквозной мотив: линия пульса (ЭКГ) как тонкая оранжевая SVG-линия. В hero она рисуется за 700ms по кривой от левого края к правому , проходя под заголовком В навбаре и подвале присутствует как тонкий разделитель В блоке «Цифры» линия соединяет три карточки В остальных секциях не повторяется. Один раз на экран Дополнительные приёмы «лоска» без 3D: Hero: тёмный фон с мягким радиальным свечением brand (8–12% непрозрачности) , очень тонкая сетка-чертёж 1px при 4% непрозрачности. Справа крупное студийное фото ключевого товара (водомер , шаровой кран , фитинг) с вырезанным фоном , лёгкая тень под ним. При скролле фото смещается параллаксом на 20–40px , а заголовок остаётся на месте Стеклянные карточки поверх тёмного hero: backdrop-blur 16px , граница 1px rgba(255 , 255 , 255 , 0.12). В них живые факты («Склад: в наличии 1948 позиций» , «Смета за 24 часа») Тонкий «чертёжный» акцент: размерные линии и выноски в стиле технического чертежа вокруг фото товара , нарисованные тонким SVG Фото наклона нет. Hover на карточках: подъём на 4px , тень мягче и шире , изображение увеличивается на 1.03 4. Паттерны Apple (обязательны) Иерархия вместо декора. Один акцент на экран. Размер и вес , а не цвет и тени. Не более двух насыщенных цветов на экране: brand и accent. Крупная типографика. Заголовок секции 40–56px на десктопе , 28–32px на мобиле. line-height 1.05–1.1 у заголовков , 1.6 у текста. Короткие строки , не заполнять экран текстом. Воздух. Пустое место — элемент дизайна. Выравнивание по базовой линии. Материалы , а не рамки. Стекло (blur 12–20px) , мягкие тени 0 2px 12px rgba(0 , 0 , 0 , 0.06) , границы 1px rgba(13 , 27 , 51 , 0.1). Без двойных рамок и пунктиров. Плавность. 120–180ms hover , 200–300ms появление , 600–800ms hero-анимация. Кривая cubic-bezier(0.22 , 1 , 0.36 , 1). Без пружин и отскоков. Появление секций при скролле: fade + сдвиг на 16px. Отклик на действие. Нажатие: scale 0.98 или opacity. Состояния hover / focus / active / disabled на каждом интерактивном элементе. Focus-visible. 2px accent , без обводки при клике мышью , полная клавиатурная навигация. Мгновенный первый экран. Статичный hero с осмысленным h1 , без «загрузки» и скелетонов. Учитывать prefers-reduced-motion: анимации отключаются. 5. Композиционные паттерны Единый ритм секции: eyebrow → заголовок → контент. Чередование фонов: светлый bg и bg-soft , секции читаются как страницы. Тёмный блок на главной один — hero. Асимметрия 60/40: hero и «О компании» — текст слева , визуал справа. Остальные секции не зеркалить. Один акцентный объект на экран: не смешивать иллюстрацию , цифры и фото в одной секции. Зацикленные ленты: бренды , отзывы , проекты. Бесконечная лента , пауза при наведении , без кнопок прокрутки. Bento-сетка для блока преимуществ и «Ассортимента»: карточки разного размера в одной сетке , крупная карточка задаёт главное. Мобильный первый: на 375px одна колонка , кнопка на всю ширину , sticky-CTA внизу на карточке товара. 6. Страницы и секции Главная Hero. Тёмный фон , eyebrow , h1 , подзаголовок , две кнопки (синяя основная «Запросить смету» , стеклянная вторичная «Открыть каталог»). Справа фото товара с чертёжными выносками , стеклянные карточки с фактами , линия ЭКГ. Слайдер из трёх баннеров (акции , новинки , условия) , переключение плавным кроссфейдом. Цифры. «Проверено объёмами». Три карточки по центру (макс. 1000px) , цифры градиентом brand → accent , подпись под ними. Эта секция задаёт ритм всей страницы. О компании. 60/40: текст и чек-лист из 6 пунктов слева , фото склада или объекта справа. Бренды. Бесконечная лента логотипов на подложке bg-soft , логотипы монохромные , при наведении цветные. Наши работы. 3–4 карточки проектов: крупное фото реального объекта , название , город , тип. Hover: подъём и увеличение фото. Ссылка «Все проекты». Каталог. Карусель превью товаров , кнопка «В каталог». Отзывы и блог. Компактная лента отзывов и 2–3 свежие статьи. Финальный CTA. Один крупный призыв и форма обратной связи. Подвал. Контакты , реквизиты , режим работы , карта 2ГИС. Каталог Хлебные крошки , фильтры (категория , цена , наличие) , поиск , сортировка , сетка товаров. Карточка: фото , название , ключевые характеристики , наличие , «цена по запросу». Счётчик найденного , пагинация или бесконечная лента. На мобиле фильтры в нижней шторке. Карточка товара Галерея с зумом , характеристики таблицей , CTA «Запросить цену» и «Добавить в заявку» , блок наличия на складе. На мобиле sticky-панель с остатком и кнопкой. О компании Hero-блок , текст о компании , «Ключевые показатели» , «Ассортимент продукции» (bento-сетка) , благодарственные письма в галерее с просмотром. Наши проекты Фильтр по категории , крупные кейсы по схеме «задача → решение → результат» , галерея объекта. Доставка и оплата Три шага заказа , таблица тарифов по городам , условия отсрочки до 30 дней , блок частых вопросов (аккордеон). Контакты Карточки: телефон , email , адрес , режим работы. Встроенная карта 2ГИС. Форма общего запроса. 404 Спокойный экран с логотипом , ссылкой на каталог и контактом поддержки. Админка / кабинет Плотная сетка , таблицы , формы загрузки медиа , предпросмотр изменений. Тёмная тема допустима. Здесь плотность важнее воздуха. 7. Функции , которые должны быть видны в дизайне Корзина заявок и список отправленных запросов Авторизация в кабинет дилера , смена роли Каталог с фильтрами и поиском Загрузка и автоматическое сжатие фото товаров Лента новостей и блог Отзывы с модерацией Статистика для менеджера Печатная версия счёта и КП (отдельный макет: логотип , реквизиты , таблица позиций , итог) Подготовка к мультиязычности (RU обязателен): переключатель языка в навбаре и подвале 8. Ограничения Никаких 3D , WebGL , вращающихся и наклоняющихся элементов Никаких смайлов в интерфейсе Никаких градиентов от розового к фиолетовому Никаких drop-shadow текста и бликов Никакого автоплея со звуком Без stock-фото людей в деловых костюмах , только кадры с реальных объектов и склада Анимации не дольше 800ms и не мешают чтению 9. Что отдать на выходе Дизайн-система в Figma: цвета , типографическая шкала , сетка , компоненты (кнопка , карточка , поле , чип , таблица , стеклянная карточка , аккордеон) , состояния компонентов. По одному фрейму каждой страницы: светлая тема , тёмная тема , мобильная версия 375px , плюс макет печатного КП. Что я поправил в исходнике: Логотип в навбаре: в двух местах было написано противоположное. Теперь логика одна: на тёмном фоне светлая версия логотипа , на светлой плашке тёмная. «Личный кабинет и персональные данные не собираем» противоречило авторизации дилера и формам заявок. Я убрал эту строку. Если у вас действительно есть такое ограничение , уточните , какие именно поля допустимы. Ритм «одной линии accent на экран» теперь реализован через линию ЭКГ. ,

Da0ss

# Финальный промт для агента (Antigravity + Stitch MCP) ## Сайт-визитка: продажа и установка весов для погрузчиков Скопируй весь блок ниже целиком в чат задач агента как первое сообщение проекта. --- ## ПРОМТ ДЛЯ АГЕНТА (копировать с этой строки) Ты — фронтенд-разработчик и веб-дизайнер. Твоя задача: построить одностраничный сайт-визитку (лендинг) компании , которая продаёт и устанавливает весовое оборудование на вилочные погрузчики (весоизмерительные вилы , крановые весы , встраиваемые системы взвешивания , индикаторы , поверка/калибровка). Работай пошагово , по фазам ниже. После каждой фазы показывай результат (код + краткое описание) и жди подтверждения , прежде чем переходить к следующей фазе. Не используй lorem ipsum — весь текст должен быть по теме; если данные неизвестны , помечай их `[ЗАПОЛНИТЬ: ...]` явным образом прямо в коде и в комментарии. ### 0. Вводные данные проекта - Название компании: `[ЗАПОЛНИТЬ]` (если не указано — использовать нейтральное «ВесПром» как рабочее название и пометить как временное) - Номер WhatsApp: `[ЗАПОЛНИТЬ: +7XXXXXXXXXX]` - Регион работы: `[ЗАПОЛНИТЬ: город/страна]` - Ассортимент (минимум для карточек каталога , если не дано — использовать этот дефолтный список): 1. Весоизмерительные вилы (грузоподъёмность 1–5 т , точность ±0.5%) 2. Крановые/подвесные весы для интеграции с погрузчиком 3. Встраиваемые весовые системы (монтаж в раму погрузчика) 4. Индикаторы веса и дисплеи (проводные/беспроводные) 5. Поверка и калибровка весового оборудования 6. Сервисное обслуживание и ремонт - Логотип/фото/сертификаты: отсутствуют → генерировать текстовые/иконочные плейсхолдеры , фото заменять описательными alt-текстами и SVG-иллюстрациями/иконками вместо реальных фотографий. - Сайт: **одна страница** , без отдельных подстраниц. - Тип сборки: чистый HTML/CSS/JS , без бэкенда. Все заявки идут через кнопки WhatsApp (`wa.me`) , формы обратной связи не делать. ### 1. Дизайн-система — строгий индустриальный стиль (тёмный , техничный) Зафиксировать как CSS-переменные в начале `styles.css`: ```css :root { /* Фон и поверхности */ --bg-primary: #0E1116; --bg-surface: #171B21; --bg-surface-2: #1F252D; --border-color: #2A313B; /* Акцент — индустриальный оранжевый (сигнальный цвет техники) */ --accent: #FF7A1A; --accent-hover: #FF9142; --accent-muted: rgba(255 , 122 , 26 , 0.12); /* Текст */ --text-primary: #F5F6F7; --text-secondary: #9AA3AD; --text-on-accent: #0E1116; /* Статусы/бейджи */ --success: #3DDC84; /* Радиусы — небольшие , без "мягкого" UI */ --radius-sm: 4px; --radius-md: 8px; /* Шкала отступов */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; } ``` - Шрифт: `Inter` (или `Manrope`) через Google Fonts. Заголовки — 700 , текст — 400/500. - Масштаб типографики: H1 — 48px / mobile 32px; H2 — 32px / mobile 24px; H3 — 22px; body — 16px; small — 14px. Line-height заголовков 1.1–1.2 , текста — 1.5. - Иконки: line-style (обводка , без заливки) , тема — вес/точность/погрузчик/сертификат. Использовать инлайн SVG. - Кнопки: primary — заливка `--accent` , текст `--text-on-accent` , radius `--radius-sm` , без теней , чёткая обводка при hover. Secondary — прозрачная с обводкой `--border-color`. - Общее ощущение: контраст , чёткие линии-разделители секций (border-top 1px `--border-color`) , минимум скруглений , минимум декоративных теней. Сгенерировать через Stitch MCP референс hero-блока по промпту: > "Industrial B2B landing page hero , dark navy/graphite background #0E1116 , orange accent #FF7A1A , bold condensed sans-serif headline , forklift with weighing attachment illustration , minimal rounded corners , trust badges row" Выбрать один вариант , зафиксировать композицию (расположение заголовка/кнопки/иллюстрации) как референс для вёрстки. ### 2. Структура страницы (порядок секций и содержимое) 1. **Header** (sticky , `--bg-surface` с нижней обводкой) - Слева: логотип-плейсхолдер (текст названия компании , шрифт 700). - Справа: пункты меню-якоря (Услуги , Каталог , Как работаем , Кейсы , Контакты) — скрыть в бургер на мобильных. - Кнопка WhatsApp (primary) — крайняя справа. 2. **Hero** - H1: «Весы для погрузчиков под ключ: подбор , монтаж , поверка» - Подзаголовок: 1–2 предложения про скорость и точность монтажа , гарантию. - Кнопка WhatsApp (крупная , primary) — текст «Написать в WhatsApp» + иконка. - Строка доверия под кнопкой: 3 коротких пункта в столбик/строку («Гарантия N лет» , «Выезд по региону `[ЗАПОЛНИТЬ]`» , «Поверка включена»). - Иллюстрация/SVG погрузчика с весами справа (или фон-паттерн , если иллюстрации нет). 3. **Услуги** (4 карточки в сетке , `--bg-surface` фон карточки , border `--border-color`) - Продажа весового оборудования - Монтаж на погрузчик - Поверка и калибровка - Сервис и ремонт - На каждой карточке: иконка , заголовок , 1–2 строки описания. 4. **Каталог** (сетка карточек товаров , 4–6 позиций из списка в п.0) - На карточке: иконка/плейсхолдер-изображение , название , 2–3 ключевые характеристики (грузоподъёмность , точность , IP-класс) , кнопка WhatsApp с текстом `«Интересует {название товара}»` (urlencoded). 5. **Как мы работаем** (степпер/таймлайн , 5 шагов) - Заявка в WhatsApp → Консультация и подбор → Выезд/монтаж → Поверка → Гарантийная поддержка. - Каждый шаг: номер , короткий заголовок , 1 строка описания. 6. **Преимущества** (4–6 пунктов , иконка + короткий текст) - Например: «Гарантия на монтаж» , «Сертифицированное оборудование» , «Опыт работы `[ЗАПОЛНИТЬ]` лет» , «Выезд по региону» , «Поверка включена в стоимость» , «Сервис 24/7» — оставить как варианты , отметить реальные цифры как `[ЗАПОЛНИТЬ]`. 7. **Кейсы** (сетка/карусель из 3 карточек) - Плейсхолдер-описание объекта (склад/производство/логистика) , тип установленного оборудования , результат в 1 фразе. 8. **Сертификаты и документы** (ряд бейджей) - Плейсхолдер-иконки «Сертификат соответствия» , «Свидетельство о поверке» — с пометкой `[ЗАПОЛНИТЬ: реальные документы]`. 9. **Отзывы** (2–3 карточки) - Плейсхолдер-тексты , помечены как черновые. 10. **Финальный CTA-блок** - Крупный заголовок-призыв , крупная кнопка WhatsApp по центру. - Контакты: телефон , email (плейсхолдеры) , адрес/регион. - Карта — встроенный статичный блок-плейсхолдер (реальный embed добавить , когда будет адрес). 11. **Footer** - Название компании , копирайт , повтор кнопки WhatsApp (маленькая) , ссылки на мессенджеры при наличии. **Плавающая кнопка WhatsApp** — fixed , правый нижний угол , видна на всех секциях при скролле , иконка WhatsApp в зелёном кружке (`#25D366`) , лёгкая пульсация (анимация раз в 3–4 сек , без резких эффектов). ### 3. WhatsApp-интеграция (техническая часть) - Формат ссылки: `https://wa.me/<номер_без_плюса_и_пробелов>?text=<urlencoded_текст>` - Номер и дефолтный текст вынести в константы в начале `main.js`: ```js const WHATSAPP_NUMBER = "ЗАПОЛНИТЬ"; // международный формат без + const WHATSAPP_DEFAULT_TEXT = "Здравствуйте! Интересуют весы для погрузчика , хочу проконсультироваться"; ``` - Все ссылки — `target="_blank" rel="noopener noreferrer"`. - Для карточек каталога текст сообщения формируется динамически: `Здравствуйте! Интересует ${имя_товара} , хочу проконсультироваться`. ### 4. Технические требования - Адаптив mobile-first , брейкпоинты: 375 / 768 / 1024 / 1440. - Изображения — webp , `loading="lazy"` (кроме hero-изображения). - Контраст текста — проверить на соответствие WCAG AA (особенно `--text-secondary` на `--bg-primary`). - Кросс-браузерность: Chrome , Safari , Firefox. - Favicon , `sitemap.xml` , `robots.txt`. ### 5. SEO и метаданные - `<title>`: «Весы для погрузчиков — продажа , монтаж , поверка [Регион]» - `meta description`: 1–2 предложения с УТП и регионом. - OG-теги (og:title , og:description , og:image — hero-изображение). - H1 — один на странице (см. Hero). - Alt-тексты у всех изображений/иконок. - Микроразметка `schema.org`: `LocalBusiness` (общие данные компании) + `Product` для каждой карточки каталога. ### 6. Порядок выполнения (для модели Flash 3.6 Medium — дробить по шагам) Выполнять и показывать результат по одному пункту за раз , не объединяя несколько секций в один ответ: 1. Скелет HTML + подключение CSS-переменных из раздела 1. 2. Header + мобильное меню + плавающая кнопка WhatsApp. 3. Hero-секция. 4. Секция «Услуги». 5. Секция «Каталог». 6. Секция «Как мы работаем». 7. Секция «Преимущества». 8. Секция «Кейсы». 9. Секция «Сертификаты». 10. Секция «Отзывы». 11. Финальный CTA-блок + Footer. 12. SEO-метатеги , favicon , sitemap.xml , robots.txt. 13. Финальная проверка: адаптив на 4 брейкпоинтах , контраст , все wa.me-ссылки , lazy-loading изображений. ### 7. Чек-лист приёмки (сверить перед сдачей) - [ ] Все `[ЗАПОЛНИТЬ]`-плейсхолдеры собраны в единый список в комментарии наверху `index.html` для удобной правки. - [ ] Все кнопки/ссылки ведут на корректный `wa.me` с правильным текстом. - [ ] Плавающая кнопка WhatsApp не перекрывает контент на мобильных (проверить над footer). - [ ] Ни одной формы обратной связи в коде нет. - [ ] Адаптив проверен на 375/768/1024/1440. - [ ] Цветовая схема соответствует разделу 1 (никаких случайных цветов вне палитры). - [ ] Lorem ipsum отсутствует — весь текст по теме. ## КОНЕЦ ПРОМТА (копировать до этой строки) ,

toshakartosha22-coder

Детская карточка формата 12×18 см , портретная , прямоугольная с закруглёнными углами , 2–3 мм плотного ламинированного картона. Лицевая сторона: крупное мультяшное или фольклорно-стилизованное животное (медведь в динамичной позе , передающей характер движения — скорость , силу , грацию. Цветовая гамма яркая и контрастная (красный , жёлтый , зелёный , синий) с пастельным фоном. Текст крупный , читаемый , без засечек , 1–2 коротких вопроса: 'Как двигается животное?' , 'Изобрази его характер'. Эстетика: радостная , гармоничная , безопасная , без острых углов , легко мыть. Оборотная сторона: практическая часть с 2–3 пиктограммами упражнений (движения , ритм , повороты , взаимодействие с партнёром) , короткие активные инструкции ('покажи' , 'изобрази' , 'сделай') , светлый фон , тёмный текст для удобочитаемости. Дополнительно: уголок карточки с цветовой маркировкой уровня сложности (зелёный — простой , жёлтый — средний , красный — сложный) ,

toshakartosha22-coder

Детская карточка формата 12×18 см , портретная , прямоугольная с закруглёнными углами , 2–3 мм плотного ламинированного картона. Лицевая сторона: крупное мультяшное или фольклорно-стилизованное животное (медведь в динамичной позе , передающей характер движения — скорость , силу , грацию. Цветовая гамма яркая и контрастная (красный , жёлтый , зелёный , синий) с пастельным фоном. Текст крупный , читаемый , без засечек , 1–2 коротких вопроса: 'Как двигается животное?' , 'Изобрази его характер'. Эстетика: радостная , гармоничная , безопасная , без острых углов , легко мыть. Оборотная сторона: практическая часть с 2–3 пиктограммами упражнений (движения , ритм , повороты , взаимодействие с партнёром) , короткие активные инструкции ('покажи' , 'изобрази' , 'сделай') , светлый фон , тёмный текст для удобочитаемости. Дополнительно: уголок карточки с цветовой маркировкой уровня сложности (зелёный — простой , жёлтый — средний , красный — сложный) ,

phoenik.s

Вот обновлённое профессиональное ТЗ/промт с добавлением четвёртого формата — тёмный горизонтальный. Можете копировать целиком в другой ИИ/генератор дизайна. PROMPT (ТЗ для ИИ‑дизайнера) Создай комплект рекламных листовок/баннеров для бренда «Panda MicroGreen». Задача — аккуратные и читаемые макеты для мессенджеров/соцсетей с осенне‑зимним акцентом и точным ценообразованием. Язык — русский. Обязательные версии (4 макета) - Вертикальная светлая: 1440×2560 px (и 1080×1920 для вторичного экспорта). - Горизонтальная светлая: 2560×1440 px (и 1920×1080). - Вертикальная тёмная: 1440×2560 px (и 1080×1920). - Горизонтальная тёмная: 2560×1440 px (и 1920×1080). Цель и позиционирование - Сезонный месседж: Когда за окном холода — витамины в каждый дом. - Допустимые альтернативы подзаголовка: «Зимние витамины • Свежая микрозелень»; «Витаминный заряд этой зимой». - Тон: забота , польза , натуральность; без агрессивных призывов. Бренд и логотип - Использовать предоставленный логотип Panda MicroGreen без изменений и переработок. Сохранять пропорции. - Свободное поле вокруг лого: минимум 4–6% высоты макета сверху. - В тёмных версиях допускается аккуратная светлая обводка/свечение для читаемости , без изменения фирменных цветов. Структура макета (единая логика) 1) Верх/шапка: логотип + сезонный заголовок. 2) Панель «Культуры» — сетка карточек с фото каждой культуры (вид сбоку). 3) Панель «Миксы» — только текстовые карточки (без изображений). 4) Контакты: внизу (вертикали) или в шапке справа (горизонтали). Контакты (строго) - Telegram/Viber: +375 29 323 11 16 - Не выводить строку «Розничные цены…». Контент — Культуры (ровно 8 позиций , у каждой 3 строки) Формат карточки: Название Срез 50 г — [цена] BYN Срез 100 г — [цена] BYN Контейнер 11×18 — [цена] BYN Цены (десятичная запятая , валюта BYN): - Редиска Санго — 7 , 5 • 11 , 5 • 7 , 5 - Редиска РедКорал — 7 , 5 • 11 , 5 • 7 , 5 - Горох — 6 , 0 • 9 , 0 • 7 , 0 - Базилик фиолетовый — 13 , 0 • 20 , 0 • 9 , 5 - Базилик лимонный — 12 , 5 • 19 , 0 • 9 , 0 - Подсолнечник — 6 , 5 • 10 , 0 • 7 , 0 - Руккола — 7 , 5 • 11 , 5 • 7 , 5 - Мелисса — 12 , 0 • 18 , 0 • 9 , 5 Контент — Миксы (только текст , без фото) Формат карточки: Название — [общий вес] • [цена] BYN Состав: [компонент — граммы] - Домашний салатный старт — 120 г • 12 , 5 BYN Горох 30 г , Подсолнечник 30 г , Редиска Санго 30 г , Руккола 30 г - Ароматный топпинг — 80 г • 13 , 9 BYN Базилик фиолетовый 20 г , Базилик лимонный 20 г , Мелисса 20 г , Горчица белая 20 г - Хруст и цвет — 160 г • 15 , 9 BYN Горох 60 г , Подсолнечник 60 г , Редиска РедКорал 40 г - Всё в одном — 150 г • 17 , 9 BYN Редиска Санго 20 г , Редиска РедКорал 20 г , Горох 50 г , Базилик фиолетовый 10 г , Базилик лимонный 10 г , Подсолнечник 30 г , Руккола 10 г Фотостиль культур (обязательно) - Превью есть только у «Культур». У «Миксов» — нет изображений. - Ракурс: вид сбоку , одинаковая высота среза , без «вида сверху». - Свет: мягкий нейтральный , фон светлый однотонный. Круглая маска. - Визуальная консистентность: единые тени , масштаб и ракурс. - Диаметр превью: 16–18% ширины карточки на мобильной вертикали. Сетка и композиция - Вертикальная: - Культуры: сетка 2×4. Миксы: 2×2. - Внутренний отступ панелей 24–28 px; межкарточный 16–20 px. - Горизонтальная (для светлой и тёмной версий одинаково): - Культуры слева сеткой 4×2; справа столбец из 4 карточек «Миксы». - Контакты в шапке справа от логотипа. - Безопасные поля: ≥48 px (вертикаль) , ≥56 px (горизонталь). - Разделы визуально отделять (фон панели , деликатная тень/контур). Типографика и форматирование - Язык: русский , без англицизмов. - Заголовки разделов: «Культуры» и «Миксы». - Числа: десятичная запятая; единицы «г» и «BYN». - Длинное тире с пробелами « — ». - Неразрывные пробелы между числом и единицей (50 г , 11 , 5 BYN). - Рекомендованные размеры (ориентир для 1440×2560): - H1: 56–64 px; H2: 34–38 px - Название культуры: 22–24 px - Текст цен/составов: 18–20 px - Бейджи «вес • цена»: 16–18 px - Минимум: 16 px для мелкого текста. - Гарнитуры (open‑source): Inter , Manrope , Montserrat или Noto Sans (единый набор во всех версиях). Бейджи и акценты - Для миксов — компактный бейдж «вес • цена» справа от названия или в строке заголовка. - Радиус 12–16 px; внутренние отступы 8–10 px по вертикали и 12–16 px по горизонтали. - Контраст к фону ≥ 4.5:1. Цвет и контраст - Светлая тема: - Фон: #F7F9F6; Карточки: #FFFFFF - Текст: #0E2A1D; Акцент: #3CB45C; Вторичный: #55645D - Тёмная тема (для вертикали и горизонтали): - Фон: #0F1211; Карточки: #161A18 - Текст: #E8F1EB; Акцент: #76D354; Вторичный: #A5B1AB - В тёмных горизонталях следить за контрастом шапки и бейджей (≥ 4.5:1). Запрещено - Не выводить строку «Розничные цены…». - Не использовать изображения в «Миксах». - Не изменять/искажать логотип. - Не смешивать RU/EN. - Не показывать «вид сверху» у культур. Доступность - Межстрочный интервал: 120–130% для списков; 110–115% для бейджей. - Избегать висячих предлогов в заголовках. - Проверить читабельность на экранах смартфонов (зум не обязателен). Экспорт и выдача - PNG (sRGB). Дополнительно квадрат 1080×1080 для постов. - Имена файлов: - panda-microgreen_vert-light_1440x2560.png - panda-microgreen_horiz-light_2560x1440.png - panda-microgreen_vert-dark_1440x2560.png - panda-microgreen_horiz-dark_2560x1440.png - Версии без артефактов; по возможности исходник (FIG/PSD/XD/SVG) со слоями. Чек‑лист качества - [ ] Ровно 8 культур , фото вид сбоку , единый стиль. - [ ] У каждой культуры три строки с корректными ценами и форматами. - [ ] 4 микса , корректные веса/цены/составы , без изображений. - [ ] Длинное тире , запятые в ценах , BYN , неразрывные пробелы. - [ ] Нет англицизмов , опечаток , дублей. - [ ] Логотип исходный , не деформирован. - [ ] Контакты: Telegram/Viber: +375 29 323 11 16. - [ ] Контраст и размеры шрифтов соответствуют; безопасные поля соблюдены. - [ ] Светлые и тёмные версии (включая тёмный горизонтальный) идентичны по структуре и иерархии. ,

Lanreii

Сгенерируй тёмный фон в древнеяпонском стиле ,

kabach228

Попробуй сгенерировать карточку-ценник в минималистичном стиле , для лавки , продающей собачьи лакомства. Атмосфера у лавки минимализма и экологичности , поэтому ценник должен быть с похожей атмосфреой. Формат горизонтальный прямоугольник со скруглёнными углами , тёмный фон и светлые символы. ,

NilSeN1982

Тёмный , мрачный коридор , Я на цыпочках , как вор , Пробираюсь , чуть дыша , Чтобы не спугнуть ,

NilSeN1982

Тёмный , мрачный коридор , Я на цыпочках , как вор , ,

NilSeN1982

Тёмный , мрачный коридор , Я на цыпочках , как вор , Пробираюсь , чуть дыша , Чтобы не спугнуть Тех , кто спит уже давно , Тех , кому не всё равно , В чью я комнату тайком Желаю заглянуть , Чтобы увидеть… Как бессонница в час ночной Меняет , нелюдимая , облик твой , Чьих невольница ты идей? Зачем тебе охотиться на людей? Крестик на моей груди , На него ты погляди , Что в тебе способен он Резко изменить? Много книжек я читал , Много фокусов видал , Свою тайну от меня Ты не пытайся скрыть! Я это видел! Как бессонница в час ночной Меняет , нелюдимая , облик твой , Чьих невольница ты идей? Зачем тебе охотиться на людей? Очень жаль , что ты тогда Мне поверить не смогла , В то , что новый твой приятель Не такой , как все! Ты осталась с ним вдвоём , Не зная ничего о нём. Что для всех опасен он , Наплевать тебе! И ты попала! К настоящему колдуну , Он загубил таких , как ты , не одну! Словно куклой в час ночной Теперь он может управлять тобой! Всё происходит будто в страшном сне. И находиться здесь опасно мне! ,

NilSeN1982

Тёмный , мрачный коридор , Я на цыпочках , как вор , Пробираюсь , чуть дыша , Чтобы не спугнуть Тех , кто спит уже давно , Тех , кому не всё равно , В чью я комнату тайком Желаю заглянуть , Чтобы увидеть… ,