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

<header class="w-full border-b border-line bg-card">
    <div class="mx-auto flex max-w-6xl items-center justify-between gap-4 px-5 py-3">
        <a href="#" class="flex items-center gap-2 text-base font-semibold tracking-tight text-ink">
            <span class="inline-block h-6 w-6 rounded-md bg-ink"></span>
            Студия
        </a>
        <nav class="hidden items-center gap-6 md:flex">
            <a href="#" class="text-sm text-muted transition-colors hover:text-ink">Проекты</a>
            <a href="#" class="text-sm text-muted transition-colors hover:text-ink">Компоненты</a>
            <a href="#" class="text-sm text-muted transition-colors hover:text-ink">Графика</a>
            <a href="#" class="text-sm text-muted transition-colors hover:text-ink">Услуги</a>
        </nav>
        <div class="flex shrink-0 items-center gap-2">
            <a href="#" class="btn btn-primary btn-sm">Обсудить проект</a>
            <details class="relative md:hidden">
                <summary class="btn btn-outline btn-sm cursor-pointer" aria-label="Открыть меню">Меню</summary>
                <div class="absolute right-0 top-full z-20 mt-2 w-[min(16rem,calc(100vw-2.5rem))] rounded-lg border border-line bg-card p-2 shadow-none">
                    <a href="#" class="block rounded-md px-3 py-2 text-sm text-muted hover:bg-sand hover:text-ink">Проекты</a>
                    <a href="#" class="block rounded-md px-3 py-2 text-sm text-muted hover:bg-sand hover:text-ink">Компоненты</a>
                    <a href="#" class="block rounded-md px-3 py-2 text-sm text-muted hover:bg-sand hover:text-ink">Графика</a>
                    <a href="#" class="block rounded-md px-3 py-2 text-sm text-muted hover:bg-sand hover:text-ink">Услуги</a>
                </div>
            </details>
        </div>
    </div>
</header>

<nav class="w-full bg-card">
    <div class="mx-auto max-w-6xl px-5 py-3">
        <details class="group">
            <summary class="btn btn-outline w-full justify-between cursor-pointer">
                <span>Навигация</span>
                <span class="flex items-center gap-1 text-faint">
                    <svg class="h-4 w-4 group-open:hidden" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
                        <path d="M4 6h12M4 10h12M4 14h12" stroke-linecap="round"/>
                    </svg>
                    <svg class="hidden h-4 w-4 group-open:block" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
                        <path d="M6 6l8 8M14 6l-8 8" stroke-linecap="round"/>
                    </svg>
                </span>
            </summary>
            <ul class="mt-2 max-h-[60vh] space-y-1 overflow-y-auto rounded-lg border border-line-soft bg-paper p-2">
                <li><a href="#" class="block rounded-md px-3 py-2 text-sm text-ink hover:bg-sand">Главная</a></li>
                <li><a href="#" class="block rounded-md px-3 py-2 text-sm text-ink hover:bg-sand">Проекты</a></li>
                <li><a href="#" class="block rounded-md px-3 py-2 text-sm text-ink hover:bg-sand">Компоненты</a></li>
                <li><a href="#" class="block rounded-md px-3 py-2 text-sm text-ink hover:bg-sand">Графика</a></li>
                <li><a href="#" class="block rounded-md px-3 py-2 text-sm text-ink hover:bg-sand">Услуги</a></li>
                <li><a href="#" class="block rounded-md px-3 py-2 text-sm text-ink hover:bg-sand">Обо мне</a></li>
                <li><a href="#" class="block rounded-md px-3 py-2 text-sm text-ink hover:bg-sand">Контакты</a></li>
            </ul>
        </details>
    </div>
</nav>

<section class="bg-paper p-5">
    <div class="mx-auto grid max-w-6xl gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <article class="card card-hover p-5">
            <span class="chip">Карточка</span>
            <h3 class="mt-3 text-base font-semibold text-ink">Заголовок карточки</h3>
            <p class="mt-2 text-sm text-muted">Короткое описание в две-три строки. Достаточно длинное, чтобы показать ритм текста в карточке.</p>
            <a href="#" class="link-quiet mt-4 inline-block text-sm">Подробнее</a>
        </article>
        <article class="card card-hover p-5">
            <span class="chip">Карточка</span>
            <h3 class="mt-3 text-base font-semibold text-ink">Заголовок карточки</h3>
            <p class="mt-2 text-sm text-muted">Короткое описание в две-три строки. Достаточно длинное, чтобы показать ритм текста в карточке.</p>
            <a href="#" class="link-quiet mt-4 inline-block text-sm">Подробнее</a>
        </article>
        <article class="card card-hover p-5">
            <span class="chip">Карточка</span>
            <h3 class="mt-3 text-base font-semibold text-ink">Заголовок карточки</h3>
            <p class="mt-2 text-sm text-muted">Короткое описание в две-три строки. Достаточно длинное, чтобы показать ритм текста в карточке.</p>
            <a href="#" class="link-quiet mt-4 inline-block text-sm">Подробнее</a>
        </article>
    </div>
</section>

<section class="bg-paper p-5">
    <form class="mx-auto max-w-xl space-y-4 rounded-xl border border-line-soft bg-card p-5" action="#" method="post" novalidate>
        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <label class="label" for="demo-name">Имя</label>
                <input class="field" type="text" id="demo-name" name="name" placeholder="Как к вам обращаться" autocomplete="name">
            </div>
            <div>
                <label class="label" for="demo-contact">Контакт для ответа</label>
                <input class="field" type="text" id="demo-contact" name="contact" placeholder="Почта, телефон или мессенджер" autocomplete="email">
            </div>
        </div>
        <div>
            <label class="label" for="demo-subject">Тема</label>
            <input class="field" type="text" id="demo-subject" name="subject" placeholder="Коротко о задаче">
        </div>
        <div>
            <label class="label" for="demo-message">Сообщение</label>
            <textarea class="field" id="demo-message" name="message" rows="4" placeholder="Опишите задачу, сроки и пожелания"></textarea>
            <p class="hint mt-1">Обязательные поля отмечены. Остальное можно заполнить позже.</p>
        </div>
        <div class="flex items-center gap-3">
            <button class="btn btn-primary" type="submit">Отправить</button>
            <span class="hint">Ответ обычно в течение рабочего дня</span>
        </div>
    </form>
</section>

<section class="bg-paper p-5">
    <div class="mx-auto flex max-w-3xl flex-wrap items-center gap-3">
        <button class="btn btn-primary" type="button">Основное действие</button>
        <button class="btn btn-outline" type="button">Второстепенное</button>
        <button class="btn btn-quiet" type="button">Тихое действие</button>
        <button class="btn btn-primary btn-sm" type="button">Маленькая</button>
        <button class="btn btn-outline btn-sm" type="button">Маленькая</button>
        <button class="btn btn-primary" type="button" disabled>Недоступно</button>
    </div>
</section>

<section class="bg-paper p-5">
    <div class="mx-auto max-w-3xl">
        <div class="overflow-x-auto rounded-lg border border-line-soft bg-card">
            <table class="w-full border-collapse text-sm">
                <caption class="sr-only">Сравнение вариантов исполнения</caption>
                <thead>
                    <tr class="border-b border-line bg-sand text-left">
                        <th scope="col" class="px-4 py-3 font-medium text-ink">Параметр</th>
                        <th scope="col" class="px-4 py-3 font-medium text-ink">Базовый</th>
                        <th scope="col" class="px-4 py-3 font-medium text-ink">Расширенный</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="border-b border-line-soft">
                        <th scope="row" class="px-4 py-3 text-left font-normal text-muted">Адаптивность</th>
                        <td class="px-4 py-3 text-ink">Да</td>
                        <td class="px-4 py-3 text-ink">Да</td>
                    </tr>
                    <tr class="border-b border-line-soft">
                        <th scope="row" class="px-4 py-3 text-left font-normal text-muted">Компоненты</th>
                        <td class="px-4 py-3 text-ink">Базовые</td>
                        <td class="px-4 py-3 text-ink">Полный набор</td>
                    </tr>
                    <tr>
                        <th scope="row" class="px-4 py-3 text-left font-normal text-muted">Срок</th>
                        <td class="px-4 py-3 text-ink">Короче</td>
                        <td class="px-4 py-3 text-ink">Дольше</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <p class="hint mt-2">На узких экранах таблица прокручивается внутри своего контейнера и не ломает страницу.</p>
    </div>
</section>

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

        <article class="card card-hover flex flex-col p-5">
            <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-sand text-muted" aria-hidden="true">
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
                    <rect x="6" y="3" width="12" height="18" rx="2"/>
                    <path d="M6 10h12M10 6.5h1M10 13.5h1"/>
                </svg>
            </span>
            <h3 class="mt-4 text-base font-semibold text-ink">Холодильники</h3>
            <p class="mt-2 text-sm text-muted">Не холодит, не выключается, течёт, сильно морозит.</p>
            <a href="#" class="link-quiet mt-auto inline-block pt-4 text-sm">Открыть направление</a>
        </article>

        <article class="card card-hover flex flex-col p-5">
            <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-sand text-muted" aria-hidden="true">
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
                    <rect x="4" y="3" width="16" height="18" rx="2"/>
                    <circle cx="12" cy="13" r="4"/>
                </svg>
            </span>
            <h3 class="mt-4 text-base font-semibold text-ink">Стиральные машины</h3>
            <p class="mt-2 text-sm text-muted">Не сливает воду, не отжимает, течёт, шумит при отжиме.</p>
            <a href="#" class="link-quiet mt-auto inline-block pt-4 text-sm">Открыть направление</a>
        </article>

        <article class="card card-hover flex flex-col p-5">
            <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-sand text-muted" aria-hidden="true">
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
                    <rect x="3" y="5" width="18" height="14" rx="2"/>
                    <path d="M3 10h18M7 7.5h2"/>
                </svg>
            </span>
            <h3 class="mt-4 text-base font-semibold text-ink">Посудомоечные машины</h3>
            <p class="mt-2 text-sm text-muted">Не набирает воду, не сливает, оставляет налёт, выдаёт ошибку.</p>
            <a href="#" class="link-quiet mt-auto inline-block pt-4 text-sm">Открыть направление</a>
        </article>

    </div>
</section>

<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>

<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>

<section class="bg-paper p-5">
    <div class="mx-auto max-w-4xl">
        <ul class="grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-line-soft bg-line-soft sm:grid-cols-3 lg:grid-cols-4">
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">Bosch</li>
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">LG</li>
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">Samsung</li>
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">Indesit</li>
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">Electrolux</li>
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">Whirlpool</li>
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">Atlant</li>
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">Beko</li>
        </ul>
        <p class="hint mt-3">Сетка на границах-разделителях: линии не дублируются, ряды выравниваются автоматически.</p>
    </div>
</section>