Search Results for header
Explore AI generated designs, images, art and prompts by top community artists and designers.
# Финальный промт для агента (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 отсутствует — весь текст по теме. ## КОНЕЦ ПРОМТА (копировать до этой строки) ,
{ "prompt": "Design a high-end corporate banner for a marine technology company called SERTEC Marine , based on the attached reference image. Elevate the existing design into a premium 'Fluid Tech Layers' concept. Maintain the idea of flowing wave shapes but transform them into precise , engineered , layered vector forms with clean edges and controlled geometry. The composition should feature multiple overlapping curved layers moving horizontally from left to right , representing data flow , ocean currents , and advanced systems.\n\nIncorporate subtle technical elements such as thin wireframe lines , navigation paths , or circuit-like details integrated along the curves. Add micro details like connection points and segmented lines to enhance the technological feel without cluttering the design.\n\nUse a sophisticated gradient palette: deep navy blue , indigo , and electric cyan accents. Apply smooth gradient transitions with depth and contrast. Include subtle glassmorphism effects (translucent layers with soft lighting) to create a sense of depth and modernity.\n\nThe background should feel clean , corporate , and high-tech — not decorative. Avoid excessive blur. Prioritize precision , clarity , and structure.\n\nPlace the SERTEC Marine logo on the right side , preserving its integrity , ensuring strong contrast and visibility. The design must feel balanced , with negative space and a refined layout suitable for corporate documents (headers , footers , presentations).\n\nOverall mood: premium , technological , controlled fluidity , marine engineering , data-driven environment." , "referenced_image_ids": ["file_000000008bc471f5ab046ab00fbdb553"] , "size": "1792x512" } ,
Create a layout for an elevator lobby navigation panel , similar to those found in luxury hotels or high-end residential complexes. Use the fonts , numbers , and text provided in the attachments. Use my drawing photo_2026-04-22 19.00.03 as the primary reference (hand-drawn mockup) for the overall panel structure. Use the image 67a0621f-56d3-4e59-b5f7-02471d790172 as a reference for the panel header. Place the text '9 этаж' (9th Floor) inside the decorative 'frame' instead of the original text 'дом на Минаева'. The layout will be printed on a sheet with a fixed width of 45 cm (the length is flexible). Please take this size constraint into account and provide a detailed marking of margins and spacing between elements. ,
A luxurious and formal cover page design. The background features the sophisticated Orange and yellow wavy patterns and traditional Indian style kites in illustrations. Header: At the top , the event title "Rising higher together" in white color , is rendered in a significantly large , bold , dark charcoal traditional serif font (Mahjong style). Centerpiece: In the middle , a large and elegant flowing script of "HAPPY UTTARAYAN" in a premium rose gold foil texture , serves as the main visual focal point. Overall Style: The color palette is professional and toned-down , using deep sky blue tones with subtle warm gold/yellow accents on the wave edges. High-end official stationery feel , 4k resolution , clean and premium aesthetic. ,
"A modern , professional digital banner for a tech recruitment company. The left side features clean , bold text: 'Hire Software Developers in India'. The right side shows a diverse , collaborative team of Indian software developers smiling and working together in a bright , modern office with laptops and code on screens. The vibe is trustworthy , efficient , and high-tech. Use a color scheme of dark blue , white , and a vibrant accent color like orange or teal. Style: corporate flat design , vector illustration , clean and professional." Good for: Social media , website headers. - size 1440 X 600 ,
Whole body of a beautiful woman action figure. 9:16 ratio. Woman , slim , beautiful , large eyes , brown eyes , Whole body , mid-wide face , big nose , thick lips , hair , chestnut , seeds , , hair largo , staring straight into the camera , with tight red sports shorts , white bra top , , white tennis shoes , de Whole body , standing , with hands on waist , happy soft smile.She is a premium collectible toy style. The woman doll should be standing and face forward. The package should have a header with the phrase 'Olivian' in large print. The accessories in the next compartment to the figure are a cream knit bra top , a vintage handbag , and a luxurious mobile phone. ,
A detailed gift certificate for a woman , offering free psychiatric care. The design is a satirical and slightly surreal take on psychiatry , but the certificate itself feels serious and valuable. The style is a mix of vintage medical illustration and modern minimalism. Visual Details: - Layout & Frame: An ornate border with patterns reminiscent of vintage medical diagrams (e.g. , labeled brain cross-sections , tiny neurons , schematic couches). The central area is clean for text. - Color Palette: Muted , noble tones. Dusty rose , deep sapphire blue , medical sage green , cream , with gold foil accents. The paper has a subtle aged parchment texture. - Central Satirical Image: A cute , slightly worried woman in a vintage cartoon style is sitting in an oversized , throne-like psychiatrist's couch. A giant brain , drawn in an anatomical style but with a cartoonish friendly face , floats above her like a balloon she is trying to hold onto. A classic psychiatrist's lamp on a side table shines light not on her , but on a tiny cozy house , symbolizing safety. In one corner , a clock's face is replaced by a calendar page showing "December 2025". - Serious Elements: An official-looking embossed seal with text that says "LICENSE" and "APPROVED". A signature line for a doctor. A serial number. !! CRUCIAL TEXT INSTRUCTIONS !! - All text must be in the Russian language (Cyrillic script). - Large header at the top: ПОДАРОЧНЫЙ СЕРТИФИКАТ - Sub-header: На оказание высококачественных психиатрических услуг - Main body text: Предъявительнице сего сертификата предоставляется право на один сеанс профессиональной разборки полетов. Гарантия: ваши тараканы в голове будут приручены , а внутренний ребенок найден и успокоен. - Expiry date (bold): Действителен до 31 декабря 2025 года - Footer: С любовью и заботой о вашем психическом здоровье Technical Specifications: - Aspect Ratio: 3:4 (vertical layout). - Style: Digital painting , vintage medical illustration , satirical art , high detail. - Mood: Ironic visual metaphors combined with the solemnity of an official document. ,
Create a visual concept for a shawarma restaurant menu in a retro-futurism style. The design should combine the aesthetics of the 60s-80s with futuristic elements inspired by vintage sci-fi , retro advertising , and cyberpunk vibes. Design Details: Background: Soft vintage gradients , pastel neon shades (turquoise , coral , purple , orange) , textured elements (paper , VHS effects , scanlines). Fonts: Styled like 70s sci-fi , inspired by retro posters , magazines , and vintage video games. Graphics: High-quality 3D renders of appetizing shawarma with warm lighting , overlaid on vintage frames and futuristic interfaces resembling spaceship control panels. Decorative Elements: Chrome details , pixelated and holographic effects , stylish ingredient icons in a retro aesthetic. Menu Structure: Header: A stylized vintage advertisement with the phrase "Shawarma from the Future – Try It Today!". Menu Section: Six shawarma cards , each including: A unique name (e.g. , "Cosmic Classic , " "Nebula Spicy , " "Gravity BBQ"). A vibrant , realistic image on a futuristic background. Price and ingredient description in a retro font with dynamic backdrops. Additional Elements: Icons representing ingredients (spicy , meat-based , vegetarian). Graphic elements resembling vintage computer interfaces or retro movie ads. Decorative arrows , frames , holographic stickers. Footer: Contact details , social media links , a QR code for ordering , styled as a VHS sticker or vintage ticket stub. The style should evoke retro-futuristic food advertising , sci-fi aesthetics , and 80s space adventures. ,
Create a WordPress website design theme called "Barzak Zen" that combines bohemian and modernist Art Nouveau styles. Use a color palette with earthy tones: browns , ochers and greens , with touches of deep blue for an elegant and mysterious touch , and gold details. Typography: Titles with Art Nouveau fonts such as 'Pinyon Script' or 'Great Vibes' , and body text with legible , classic fonts such as 'Roboto' or 'Merriweather'. Header: Centered or left-aligned logo , navigation menu below the logo with elegant design , background with subtle pattern or solid color palette. Home Page: Large hero image in the background with welcome message , featured section with three columns showing latest articles , AI generated image gallery and poetry showcase. Footer: contact information , links to social networks and small subscription form. Blog page: list of articles with featured images , sidebar with categories , search bar and social media links. Gallery Page: Grid layout of AI-generated images and photos , lightbox functionality to zoom in on images. Poetry Page: List of poems with short introductions and links to read more. Contact page: simple contact form , additional information (email , social networks). Decorative elements: backgrounds with subtle Art Nouveau patterns , borders and margins with decorative graphics such as wavy lines and floral motifs , Art Nouveau style icons for social networks and other visual elements. Warm , welcoming and creatively expressive design , reflecting a mix of bohemian freedom and Art Nouveau elegance , --ar 16:9 --v 5. ,
