Библиотека элементов и компонентов

Шапка с разделами Вход, Проекты, Бриф, Контент и Контакты.

Используется: TheHeader, HamburgerMenu

<nav class="main-nav"><a href="/login">Вход</a><a href="/projects">Проекты</a><a href="/analytics">Бриф</a><a href="/content">Контент</a><a href="/contact">Контакты</a></nav>

Первый экран с оффером и конверсионной кнопкой.

Используется: pages/index.vue

<section class="hero"><h1>Разработка сайтов под задачи бизнеса</h1><button class="cta">Получить разбор проекта</button></section>

Карточка пакета услуг с ценой, сроком и списком фич.

Используется: pages/index.vue

<article class="price-card"><h3>Бизнес</h3><p class="price">от 95 000 ₽</p><ul><li>До 10 страниц</li><li>CRM интеграции</li></ul></article>

Показывает задачу, решение, результат и теги проекта.

Используется: pages/index.vue, pages/projects.vue

<article class="case-card"><img src="/img/case.jpg" alt="Кейс" /><h3>Сайт для сервиса</h3><p><strong>Результат:</strong> рост лидов 47%</p></article>

Этапы процесса работы: бриф, проектирование, разработка, запуск.

Используется: pages/index.vue

<article class="step-card"><span>1</span><h3>Бриф</h3><p>Фиксируем задачи и цели проекта.</p></article>

Форма с именем, контактом, email, задачей и бюджетом.

Используется: pages/index.vue

<form class="lead-form"><input type="text" placeholder="Имя" /><input type="email" placeholder="Email" /><textarea placeholder="Что нужно сделать"></textarea></form>

Универсальный блок одного вопроса анкеты брифа.

Используется: pages/analytics.vue

<div class="question"><label>Какая цель сайта?</label><textarea rows="4"></textarea></div>

Карточка урока с уровнем сложности и временем.

Используется: pages/content.vue, pages/tutorials.vue

<article class="tutorial-card"><h4>Nuxt SSR</h4><span class="difficulty">Средний</span><p>Разбор SSR и SSG в Nuxt 3.</p></article>

Карточка полезного материала из базы знаний.

Используется: pages/content.vue, pages/materials.vue

<article class="material-card"><h4>Чек-лист оптимизации</h4><p>50+ пунктов для ускорения Vue-приложений.</p></article>

Карточка пользовательского UI-компонента с live preview.

Используется: pages/content.vue, pages/ui-components.vue

<article class="component-card"><iframe sandbox="allow-scripts"></iframe><button>Копировать HTML</button></article>

Универсальная кнопка копирования snippet кода.

Используется: CodeModal, pages/content.vue, pages/ui-components.vue

<button class="copy-btn" @click="copyToClipboard(code)">Копировать код</button>

Контактная карточка Telegram/GitHub/VK.

Используется: pages/contact.vue

<a class="social-card telegram" href="https://t.me/kiruhak11"><h3>Telegram</h3><p>@kiruhak11</p></a>

Базовая оболочка для всех модальных окон проекта.

Используется: GlobalModal, CodeModal, pages/ui-components.vue

<div class="modal-overlay"><div class="modal"><button class="close">×</button><slot /></div></div>

Метка тега для фильтрации и визуальных подсказок.

Используется: pages/projects.vue, pages/ui-components.vue, pages/content.vue

<span class="tag">#seo</span>

Мини-профиль в шапке после авторизации.

Используется: TheHeader, UserProfile

<button class="user-chip"><img src="avatar.png" alt="avatar" /><span>Профиль</span></button>