UI-компоненты
Интерактивный выбор специалиста
Блок для сайтов услуг, клиник и центров. Посетитель выбирает направление, а карточка справа сразу показывает подходящего специалиста, формат работы, стоимость и кнопку записи.
Выбор специалиста
Посетитель быстрее понимает, к кому обратиться
Вместо длинного списка специалистов пользователь выбирает направление, а сайт сразу показывает подходящую карточку.
Л
Подходит при запросе
Логопед
Помогает при нарушениях речи, трудностях звукопроизношения, задержке речевого развития и подготовке к школе.
<section class="specialist-picker">
<div class="specialist-picker__intro">
<span class="specialist-picker__badge">Выбор специалиста</span>
<h2>Посетитель быстрее понимает, к кому обратиться</h2>
<p>
Вместо длинного списка специалистов пользователь выбирает направление,
а сайт сразу показывает подходящую карточку.
</p>
</div>
<div class="specialist-picker__grid">
<div class="specialist-picker__nav">
<button class="specialist-picker__tab active" type="button" data-specialist="speech">
<span>01</span>
<strong>Логопед</strong>
<small>речь, звукопроизношение</small>
</button>
<button class="specialist-picker__tab" type="button" data-specialist="neuro">
<span>02</span>
<strong>Нейропсихолог</strong>
<small>внимание, память, поведение</small>
</button>
<button class="specialist-picker__tab" type="button" data-specialist="ergo">
<span>03</span>
<strong>Эрготерапевт</strong>
<small>бытовые навыки, сенсорика</small>
</button>
<button class="specialist-picker__tab" type="button" data-specialist="psy">
<span>04</span>
<strong>Психолог</strong>
<small>эмоции, адаптация, семья</small>
</button>
</div>
<article class="specialist-picker__card">
<div class="specialist-picker__photo">
<span class="specialist-picker__initial">Л</span>
</div>
<div class="specialist-picker__content">
<span class="specialist-picker__tag">Подходит при запросе</span>
<h3 class="specialist-picker__name">Логопед</h3>
<p class="specialist-picker__text">
Помогает при нарушениях речи, трудностях звукопроизношения,
задержке речевого развития и подготовке к школе.
</p>
<div class="specialist-picker__meta">
<span class="specialist-picker__format">Очно / онлайн</span>
<strong class="specialist-picker__price">от 2 000 ₽</strong>
</div>
<button class="specialist-picker__button" type="button">
Записаться на консультацию
</button>
</div>
</article>
</div>
</section>.specialist-picker {
padding: 46px;
border-radius: 28px;
overflow: hidden;
background:
radial-gradient(circle at 12% 18%, rgba(59, 130, 246, 0.30), transparent 32%),
radial-gradient(circle at 88% 82%, rgba(236, 72, 153, 0.18), transparent 34%),
linear-gradient(135deg, #020617, #0f172a);
}
.specialist-picker__intro {
max-width: 850px;
margin-bottom: 34px;
}
.specialist-picker__badge {
display: inline-flex;
margin-bottom: 16px;
padding: 8px 13px;
border-radius: 999px;
color: #bfdbfe;
background: rgba(59, 130, 246, 0.16);
border: 1px solid rgba(96, 165, 250, 0.45);
font-size: 13px;
}
.specialist-picker__intro h2 {
margin: 0 0 16px;
color: #ffffff;
font-size: clamp(32px, 5vw, 56px);
line-height: 1.02;
letter-spacing: -0.05em;
}
.specialist-picker__intro p {
color: #cbd5e1;
font-size: 17px;
line-height: 1.7;
}
.specialist-picker__grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 26px;
align-items: stretch;
}
.specialist-picker__nav,
.specialist-picker__card {
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 26px;
background: rgba(15, 23, 42, 0.78);
box-shadow: 0 28px 80px rgba(2, 6, 23, 0.5);
}
.specialist-picker__nav {
display: grid;
gap: 12px;
padding: 18px;
}
.specialist-picker__tab {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 14px;
row-gap: 4px;
align-items: center;
border: 1px solid #334155;
border-radius: 18px;
padding: 16px;
text-align: left;
color: #cbd5e1;
background: #020617;
cursor: pointer;
transition: 0.25s;
}
.specialist-picker__tab span {
grid-row: span 2;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 14px;
color: #bfdbfe;
background: rgba(59, 130, 246, 0.16);
}
.specialist-picker__tab strong {
color: #ffffff;
}
.specialist-picker__tab small {
color: #94a3b8;
}
.specialist-picker__tab:hover,
.specialist-picker__tab.active {
border-color: #3b82f6;
background: rgba(59, 130, 246, 0.14);
transform: translateY(-2px);
}
.specialist-picker__card {
display: grid;
grid-template-columns: 0.75fr 1.25fr;
overflow: hidden;
}
.specialist-picker__photo {
position: relative;
display: grid;
place-items: center;
min-height: 360px;
background:
radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.22), transparent 24%),
linear-gradient(135deg, #1d4ed8, #9333ea);
}
.specialist-picker__photo::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 50%;
}
.specialist-picker__initial {
position: relative;
z-index: 2;
width: 110px;
height: 110px;
display: grid;
place-items: center;
border-radius: 32px;
color: #ffffff;
background: rgba(15, 23, 42, 0.62);
font-size: 54px;
font-weight: 800;
box-shadow: 0 24px 70px rgba(2, 6, 23, 0.45);
}
.specialist-picker__content {
display: flex;
flex-direction: column;
padding: 30px;
}
.specialist-picker__tag {
width: fit-content;
margin-bottom: 18px;
padding: 8px 13px;
border: 1px solid rgba(96, 165, 250, 0.45);
border-radius: 999px;
color: #bfdbfe;
background: rgba(59, 130, 246, 0.16);
font-size: 13px;
}
.specialist-picker__name {
margin: 0 0 16px;
color: #ffffff;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.05;
}
.specialist-picker__text {
color: #cbd5e1;
font-size: 17px;
line-height: 1.7;
}
.specialist-picker__meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 14px;
margin-top: auto;
padding-top: 28px;
}
.specialist-picker__format,
.specialist-picker__price {
border: 1px solid #334155;
border-radius: 999px;
padding: 9px 13px;
color: #dbeafe;
background: #020617;
}
.specialist-picker__button {
margin-top: 18px;
border: 0;
border-radius: 16px;
padding: 15px 18px;
color: #ffffff;
background: linear-gradient(135deg, #2563eb, #9333ea);
cursor: pointer;
transition: 0.25s;
}
.specialist-picker__button:hover {
transform: translateY(-2px);
}
.specialist-picker__card.is-changing {
animation: specialistChange 0.28s ease;
}
@keyframes specialistChange {
from {
opacity: 0.72;
transform: scale(0.985);
}
to {
opacity: 1;
transform: scale(1);
}
}
@media (max-width: 850px) {
.specialist-picker {
padding: 26px 18px;
}
.specialist-picker__grid,
.specialist-picker__card {
grid-template-columns: 1fr;
}
.specialist-picker__photo {
min-height: 220px;
}
}const specialistData = {
speech: {
initial: "Л",
name: "Логопед",
text: "Помогает при нарушениях речи, трудностях звукопроизношения, задержке речевого развития и подготовке к школе.",
format: "Очно / онлайн",
price: "от 2 000 ₽",
gradient: "linear-gradient(135deg, #1d4ed8, #9333ea)"
},
neuro: {
initial: "Н",
name: "Нейропсихолог",
text: "Работает с вниманием, памятью, мышлением, поведением и трудностями обучения у детей и подростков.",
format: "Диагностика / занятия",
price: "от 2 500 ₽",
gradient: "linear-gradient(135deg, #0f766e, #2563eb)"
},
ergo: {
initial: "Э",
name: "Эрготерапевт",
text: "Помогает развивать бытовые навыки, самостоятельность, сенсорную интеграцию и адаптацию в повседневной жизни.",
format: "Индивидуально",
price: "от 2 300 ₽",
gradient: "linear-gradient(135deg, #7c2d12, #be123c)"
},
psy: {
initial: "П",
name: "Психолог",
text: "Помогает разобраться с эмоциями, поведением, адаптацией, семейными вопросами и трудностями общения.",
format: "Очно / онлайн",
price: "от 2 200 ₽",
gradient: "linear-gradient(135deg, #7c3aed, #db2777)"
}
};
const specialistTabs = document.querySelectorAll(".specialist-picker__tab");
const specialistCard = document.querySelector(".specialist-picker__card");
const specialistPhoto = document.querySelector(".specialist-picker__photo");
const specialistInitial = document.querySelector(".specialist-picker__initial");
const specialistName = document.querySelector(".specialist-picker__name");
const specialistText = document.querySelector(".specialist-picker__text");
const specialistFormat = document.querySelector(".specialist-picker__format");
const specialistPrice = document.querySelector(".specialist-picker__price");
function updateSpecialist(key) {
const data = specialistData[key];
specialistCard.classList.remove("is-changing");
void specialistCard.offsetWidth;
specialistCard.classList.add("is-changing");
specialistInitial.textContent = data.initial;
specialistName.textContent = data.name;
specialistText.textContent = data.text;
specialistFormat.textContent = data.format;
specialistPrice.textContent = data.price;
specialistPhoto.style.background = data.gradient;
}
specialistTabs.forEach(function (tab) {
tab.addEventListener("click", function () {
specialistTabs.forEach(item => item.classList.remove("active"));
tab.classList.add("active");
updateSpecialist(tab.dataset.specialist);
});
});