Интерфейсные решения

Компоненты интерфейсов

Библиотека frontend-компонентов: шапки, меню, карточки, формы, кнопки и таблицы. Компоненты показаны живыми — их можно посмотреть в работе, а не только на скриншоте.

Этапы работы

Информационные блоки

предпросмотр компонента

Вы описываете проблему

По телефону или через заявку уточняем технику и симптомы неисправности.

Мастер проводит диагностику

Проверяем технику и определяем, какой узел действительно требует ремонта.

Согласуем работу

До начала ремонта объясняем объём работ и согласуем стоимость.

Проверяем результат

После ремонта проверяем работу техники и передаём её клиенту.

Четыре шага с нумерацией: от обращения до проверки результата. Восстановлен по блоку «Понятный порядок без лишних работ».

Показать HTML

<section class="bg-paper p-5">
    <div class="mx-auto grid max-w-6xl gap-4 sm:grid-cols-2">

        <article class="card p-5">
            <span class="text-xs font-medium text-faint">01</span>
            <h3 class="mt-2 text-base font-semibold text-ink">Вы описываете проблему</h3>
            <p class="mt-2 text-sm text-muted">По телефону или через заявку уточняем технику и симптомы неисправности.</p>
        </article>

        <article class="card p-5">
            <span class="text-xs font-medium text-faint">02</span>
            <h3 class="mt-2 text-base font-semibold text-ink">Мастер проводит диагностику</h3>
            <p class="mt-2 text-sm text-muted">Проверяем технику и определяем, какой узел действительно требует ремонта.</p>
        </article>

        <article class="card p-5">
            <span class="text-xs font-medium text-faint">03</span>
            <h3 class="mt-2 text-base font-semibold text-ink">Согласуем работу</h3>
            <p class="mt-2 text-sm text-muted">До начала ремонта объясняем объём работ и согласуем стоимость.</p>
        </article>

        <article class="card p-5">
            <span class="text-xs font-medium text-faint">04</span>
            <h3 class="mt-2 text-base font-semibold text-ink">Проверяем результат</h3>
            <p class="mt-2 text-sm text-muted">После ремонта проверяем работу техники и передаём её клиенту.</p>
        </article>

    </div>
</section>

Вопросы и ответы

Информационные блоки интерактивный

предпросмотр компонента

Сколько стоит выезд мастера?

Стоимость зависит от узла и сложности работ. Итоговую сумму согласуем до начала ремонта.

Даёте ли гарантию на работы?

Да, на выполненные работы и установленные детали даётся гарантия. Условия обсуждаются при согласовании.

Можно ли отремонтировать на месте?

Большинство работ выполняется на месте. Если нужна деталь под заказ, срок согласуем отдельно.

Раскрывающийся список вопросов на элементе details — работает без JavaScript и доступен с клавиатуры.

Показать HTML

<section class="bg-paper p-5">
    <div class="mx-auto max-w-3xl divide-y divide-line-soft overflow-hidden rounded-lg border border-line-soft bg-card">

        <details class="group">
            <summary class="flex cursor-pointer items-center justify-between gap-4 px-5 py-4">
                <span class="text-sm font-medium text-ink">Сколько стоит выезд мастера?</span>
                <svg class="h-4 w-4 shrink-0 text-faint transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
                    <path d="M5 8l5 5 5-5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </summary>
            <p class="px-5 pb-4 text-sm text-muted">Стоимость зависит от узла и сложности работ. Итоговую сумму согласуем до начала ремонта.</p>
        </details>

        <details class="group">
            <summary class="flex cursor-pointer items-center justify-between gap-4 px-5 py-4">
                <span class="text-sm font-medium text-ink">Даёте ли гарантию на работы?</span>
                <svg class="h-4 w-4 shrink-0 text-faint transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
                    <path d="M5 8l5 5 5-5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </summary>
            <p class="px-5 pb-4 text-sm text-muted">Да, на выполненные работы и установленные детали даётся гарантия. Условия обсуждаются при согласовании.</p>
        </details>

        <details class="group">
            <summary class="flex cursor-pointer items-center justify-between gap-4 px-5 py-4">
                <span class="text-sm font-medium text-ink">Можно ли отремонтировать на месте?</span>
                <svg class="h-4 w-4 shrink-0 text-faint transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
                    <path d="M5 8l5 5 5-5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </summary>
            <p class="px-5 pb-4 text-sm text-muted">Большинство работ выполняется на месте. Если нужна деталь под заказ, срок согласуем отдельно.</p>
        </details>

    </div>
</section>

Связь

Нужен свой компонент?

Опишите элемент интерфейса — соберу его отдельно и покажу в работе.

Обсудить проект Посмотреть услуги