Шапка сайта
Шапка агентства с телефоном
Шапка агентства недвижимости: имя серифом с подписью, ссылки с акцентным подчёркиванием, телефон крупно и кнопка «Оценить квартиру». Липнет к верху, на узком экране всё прячется в меню.
Что можно поменять
- brand, caption, links: имя, подпись и пункты меню
- phone, phoneHref, actionLabel, actionHref, menuLabel
- accent и background, tone, sticky
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/navbar-020?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, «use client» ради кнопки меню. <header> с position:sticky и полупрозрачным фоном с blur, нижняя линия 1px. Ссылки — подчёркивание transform:scaleX по hover и у aria-current. Телефон — <a href="tel:"> серифом. Ссылки и кнопка появляются от 64rem ширины (container query), телефон — от 72rem, подпись под именем прячется на 48–72rem, чтобы шапка всегда была в одну строку; уже 64rem — кнопка «Меню» с aria-expanded и список под шапкой. Палитра --vibeui-navbar-020-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; шрифты Cormorant Garamond и Manrope подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.
Теги
- real estate
- realty
- property
- apartment
- agency
- listing
- realty
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…