Более выраженный hero
Главный экран крупнее и убедительнее: метрики, плотный оффер и заметные CTA-кнопки дают ощущение полноценной посадочной страницы.
.sherpa-meetup-v2 {
position: relative;
margin: 0;
padding: 18px 0 72px;
color: #eaf2ff;
font-family: Inter, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, sans-serif;
}
.sherpa-meetup-v2 * { box-sizing: border-box; }
.sherpa-meetup-v2 .mv-shell {
position: relative;
overflow: hidden;
border-radius: 34px;
background:
radial-gradient(circle at 12% 12%, rgba(59,130,246,.24), transparent 24%),
radial-gradient(circle at 82% 16%, rgba(34,211,238,.14), transparent 20%),
radial-gradient(circle at 50% 110%, rgba(14,165,233,.10), transparent 38%),
linear-gradient(180deg, #07111f 0%, #091523 45%, #0a1020 100%);
border: 1px solid rgba(96,165,250,.16);
box-shadow: 0 34px 100px rgba(6,11,24,.34);
}
.sherpa-meetup-v2 .mv-shell::before,
.sherpa-meetup-v2 .mv-shell::after,
.sherpa-meetup-v2 .mv-orb {
content: »;
position: absolute;
border-radius: 999px;
pointer-events: none;
filter: blur(46px);
}
.sherpa-meetup-v2 .mv-shell::before {
width: 280px;
height: 280px;
right: -56px;
top: -82px;
background: rgba(37,99,235,.26);
animation: mvFloatA 9s ease-in-out infinite;
}
.sherpa-meetup-v2 .mv-shell::after {
width: 240px;
height: 240px;
left: -58px;
bottom: 120px;
background: rgba(34,211,238,.14);
animation: mvFloatB 11s ease-in-out infinite;
}
.sherpa-meetup-v2 .mv-orb {
width: 160px;
height: 160px;
left: 46%;
top: 240px;
background: rgba(125,211,252,.08);
animation: mvPulse 8s ease-in-out infinite;
}
.sherpa-meetup-v2 .mv-inner {
position: relative;
z-index: 2;
width: min(1140px, calc(100% — 48px));
margin: 0 auto;
}
.sherpa-meetup-v2 .mv-hero {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
gap: 28px;
align-items: center;
padding: 56px 0 22px;
}
.sherpa-meetup-v2 .mv-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid rgba(125,211,252,.22);
background: rgba(15,23,42,.62);
color: #b7d6ff;
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.sherpa-meetup-v2 .mv-badge::before {
content: »;
width: 8px;
height: 8px;
border-radius: 999px;
background: linear-gradient(135deg, #22d3ee, #3b82f6);
box-shadow: 0 0 18px rgba(34,211,238,.8);
}
.sherpa-meetup-v2 h1 {
margin: 20px 0 18px;
font-size: clamp(36px, 4.5vw, 66px);
line-height: 1.02;
letter-spacing: -.05em;
color: #f8fbff;
}
.sherpa-meetup-v2 .mv-gradient {
background: linear-gradient(135deg, #93c5fd, #38bdf8 42%, #60a5fa 88%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.sherpa-meetup-v2 .mv-lead {
max-width: 640px;
margin: 0 0 28px;
color: rgba(226,232,240,.84);
font-size: 18px;
line-height: 1.72;
}
.sherpa-meetup-v2 .mv-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 14px;
margin: 0 0 28px;
}
.sherpa-meetup-v2 .mv-metric {
padding: 16px 18px;
border-radius: 20px;
background: rgba(9,15,30,.68);
border: 1px solid rgba(96,165,250,.12);
backdrop-filter: blur(8px);
}
.sherpa-meetup-v2 .mv-metric strong {
display: block;
margin-bottom: 4px;
font-size: 28px;
color: #f8fbff;
line-height: 1;
}
.sherpa-meetup-v2 .mv-metric span {
color: rgba(191,219,254,.74);
font-size: 13px;
}
.sherpa-meetup-v2 .mv-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.sherpa-meetup-v2 .mv-btn,
.sherpa-meetup-v2 .mv-btn-alt {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 16px 24px;
border-radius: 18px;
font-weight: 800;
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sherpa-meetup-v2 .mv-btn {
background: linear-gradient(135deg, #2563eb, #38bdf8);
color: #fff;
box-shadow: 0 22px 54px rgba(37,99,235,.30);
}
.sherpa-meetup-v2 .mv-btn:hover,
.sherpa-meetup-v2 .mv-btn-alt:hover { transform: translateY(-2px); }
.sherpa-meetup-v2 .mv-btn-alt {
background: rgba(15,23,42,.56);
color: #dceafe;
border: 1px solid rgba(125,211,252,.16);
}
.sherpa-meetup-v2 .mv-side {
position: relative;
padding: 28px;
border-radius: 30px;
background: linear-gradient(180deg, rgba(11,18,34,.96), rgba(9,15,28,.84));
border: 1px solid rgba(96,165,250,.16);
box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.sherpa-meetup-v2 .mv-side::before {
content: »;
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(145deg, rgba(125,211,252,.30), rgba(59,130,246,0), rgba(34,211,238,.14));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.sherpa-meetup-v2 .mv-side > * { position: relative; z-index: 1; }
.sherpa-meetup-v2 .mv-mini-kicker {
margin: 0 0 8px;
color: #7dd3fc;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .12em;
}
.sherpa-meetup-v2 .mv-side h3 {
margin: 0 0 14px;
font-size: 30px;
line-height: 1.1;
color: #f8fbff;
}
.sherpa-meetup-v2 .mv-side p,
.sherpa-meetup-v2 .mv-copy,
.sherpa-meetup-v2 .mv-faq details p {
margin: 0;
color: rgba(226,232,240,.80);
font-size: 15px;
line-height: 1.68;
}
.sherpa-meetup-v2 .mv-chiplist {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0 0;
}
.sherpa-meetup-v2 .mv-chip {
padding: 10px 12px;
border-radius: 999px;
background: rgba(37,99,235,.10);
border: 1px solid rgba(96,165,250,.14);
color: #dbeafe;
font-size: 13px;
}
.sherpa-meetup-v2 .mv-flow {
display: grid;
gap: 12px;
margin-top: 18px;
}
.sherpa-meetup-v2 .mv-flow div {
padding: 14px 16px;
border-radius: 18px;
background: rgba(8,14,28,.68);
border: 1px solid rgba(148,163,184,.10);
}
.sherpa-meetup-v2 .mv-flow strong {
display: block;
margin-bottom: 4px;
color: #f8fbff;
}
.sherpa-meetup-v2 .mv-section {
padding: 22px 0 0;
}
.sherpa-meetup-v2 .mv-head {
max-width: 760px;
margin: 0 0 22px;
}
.sherpa-meetup-v2 .mv-head h2 {
margin: 0 0 12px;
font-size: clamp(30px, 3vw, 48px);
line-height: 1.06;
letter-spacing: -.04em;
color: #f8fbff;
}
.sherpa-meetup-v2 .mv-head p {
margin: 0;
color: rgba(226,232,240,.78);
font-size: 18px;
line-height: 1.7;
}
.sherpa-meetup-v2 .mv-grid-3,
.sherpa-meetup-v2 .mv-grid-2,
.sherpa-meetup-v2 .mv-steps {
display: grid;
gap: 18px;
}
.sherpa-meetup-v2 .mv-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.sherpa-meetup-v2 .mv-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.sherpa-meetup-v2 .mv-card,
.sherpa-meetup-v2 .mv-stage,
.sherpa-meetup-v2 .mv-focus,
.sherpa-meetup-v2 .mv-proof {
position: relative;
overflow: hidden;
padding: 24px;
border-radius: 24px;
background: rgba(9,15,30,.76);
border: 1px solid rgba(148,163,184,.12);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sherpa-meetup-v2 .mv-card:hover,
.sherpa-meetup-v2 .mv-stage:hover,
.sherpa-meetup-v2 .mv-focus:hover,
.sherpa-meetup-v2 .mv-proof:hover {
transform: translateY(-4px);
border-color: rgba(96,165,250,.24);
box-shadow: 0 20px 48px rgba(12,18,34,.24);
}
.sherpa-meetup-v2 .mv-card::before,
.sherpa-meetup-v2 .mv-stage::before,
.sherpa-meetup-v2 .mv-focus::before,
.sherpa-meetup-v2 .mv-proof::before {
content: »;
position: absolute;
top: -28px;
right: -16px;
width: 126px;
height: 126px;
border-radius: 999px;
background: radial-gradient(circle, rgba(59,130,246,.18), rgba(59,130,246,0) 68%);
}
.sherpa-meetup-v2 .mv-card h3,
.sherpa-meetup-v2 .mv-stage h3,
.sherpa-meetup-v2 .mv-focus h3,
.sherpa-meetup-v2 .mv-proof h3 {
position: relative;
margin: 0 0 10px;
font-size: 21px;
color: #f8fbff;
}
.sherpa-meetup-v2 .mv-card p,
.sherpa-meetup-v2 .mv-stage p,
.sherpa-meetup-v2 .mv-focus p,
.sherpa-meetup-v2 .mv-proof p {
position: relative;
margin: 0;
color: rgba(226,232,240,.78);
font-size: 15px;
line-height: 1.7;
}
.sherpa-meetup-v2 .mv-steps { grid-template-columns: repeat(3, minmax(0,1fr)); }
.sherpa-meetup-v2 .mv-step-no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
margin-bottom: 16px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(34,211,238,.12));
border: 1px solid rgba(125,211,252,.14);
color: #dbeafe;
font-size: 22px;
font-weight: 800;
}
.sherpa-meetup-v2 .mv-quote {
padding: 24px 26px;
border-radius: 26px;
background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(8,15,35,.88), rgba(34,211,238,.07));
border: 1px solid rgba(96,165,250,.16);
}
.sherpa-meetup-v2 .mv-quote p {
margin: 0;
color: #eff6ff;
font-size: 22px;
line-height: 1.55;
letter-spacing: -.01em;
}
.sherpa-meetup-v2 .mv-faq { display: grid; gap: 14px; }
.sherpa-meetup-v2 .mv-faq details {
border-radius: 20px;
background: rgba(9,15,30,.80);
border: 1px solid rgba(148,163,184,.12);
padding: 18px 20px;
}
.sherpa-meetup-v2 .mv-faq summary {
position: relative;
cursor: pointer;
list-style: none;
padding-right: 28px;
color: #eff6ff;
font-weight: 700;
}
.sherpa-meetup-v2 .mv-faq summary::-webkit-details-marker { display: none; }
.sherpa-meetup-v2 .mv-faq summary::after {
content: ‘+’;
position: absolute;
top: -1px;
right: 0;
font-size: 24px;
color: #7dd3fc;
}
.sherpa-meetup-v2 .mv-faq details[open] summary::after { content: ‘−’; }
.sherpa-meetup-v2 .mv-faq details p { padding-top: 12px; }
.sherpa-meetup-v2 .mv-cta {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,420px);
gap: 24px;
align-items: start;
padding: 30px;
border-radius: 30px;
background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(9,15,30,.90) 42%, rgba(34,211,238,.08));
border: 1px solid rgba(96,165,250,.18);
}
.sherpa-meetup-v2 .mv-cta h2 {
margin: 0 0 14px;
font-size: clamp(30px, 3vw, 50px);
line-height: 1.06;
letter-spacing: -.04em;
color: #f8fbff;
}
.sherpa-meetup-v2 .mv-points {
display: grid;
gap: 12px;
margin-top: 24px;
}
.sherpa-meetup-v2 .mv-points span {
display: inline-flex;
align-items: flex-start;
gap: 12px;
color: rgba(226,232,240,.82);
}
.sherpa-meetup-v2 .mv-points span::before {
content: ‘•’;
color: #7dd3fc;
font-size: 24px;
line-height: 1;
margin-top: -3px;
}
.sherpa-meetup-v2 .mv-form {
padding: 22px;
border-radius: 24px;
background: rgba(6,11,23,.74);
border: 1px solid rgba(125,211,252,.14);
}
.sherpa-meetup-v2 .mv-form .wpforms-container,
.sherpa-meetup-v2 .mv-form .wpforms-container-full { margin: 0; }
.sherpa-meetup-v2 .mv-form .wpforms-field input,
.sherpa-meetup-v2 .mv-form .wpforms-field textarea,
.sherpa-meetup-v2 .mv-form .wpforms-field select { border-radius: 14px !important; }
.sherpa-meetup-v2 .mv-form .wpforms-submit {
width: 100%;
border-radius: 14px !important;
background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
border: 0 !important;
font-weight: 800 !important;
box-shadow: 0 18px 44px rgba(37,99,235,.28);
}
.sherpa-meetup-v2 .mv-foot {
margin-top: 12px;
color: rgba(191,219,254,.72);
font-size: 12px;
line-height: 1.5;
}
@keyframes mvFloatA {
0%,100% { transform: translate3d(0,0,0); }
50% { transform: translate3d(-16px, 14px, 0); }
}
@keyframes mvFloatB {
0%,100% { transform: translate3d(0,0,0); }
50% { transform: translate3d(18px, -12px, 0); }
}
@keyframes mvPulse {
0%,100% { transform: scale(1); opacity: .65; }
50% { transform: scale(1.12); opacity: .32; }
}
@media (max-width: 980px) {
.sherpa-meetup-v2 .mv-hero,
.sherpa-meetup-v2 .mv-grid-3,
.sherpa-meetup-v2 .mv-grid-2,
.sherpa-meetup-v2 .mv-steps,
.sherpa-meetup-v2 .mv-cta,
.sherpa-meetup-v2 .mv-metrics {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.sherpa-meetup-v2 { padding: 8px 0 48px; }
.sherpa-meetup-v2 .mv-inner { width: min(100% — 24px, 1140px); }
.sherpa-meetup-v2 .mv-shell { border-radius: 24px; }
.sherpa-meetup-v2 .mv-hero { padding-top: 28px; }
.sherpa-meetup-v2 .mv-side,
.sherpa-meetup-v2 .mv-card,
.sherpa-meetup-v2 .mv-stage,
.sherpa-meetup-v2 .mv-focus,
.sherpa-meetup-v2 .mv-proof,
.sherpa-meetup-v2 .mv-cta,
.sherpa-meetup-v2 .mv-form,
.sherpa-meetup-v2 .mv-quote { padding: 20px; border-radius: 20px; }
}
Вариант 2. Тестовый лендинг вебинара
Практический вебинар о том, как запускать RPA быстро, наглядно и без тяжёлого входа
Это отдельная версия страницы на новом URL. Она ближе к внешнему референсу по композиции и атмосфере: больше воздуха, ярче световые акценты, заметнее карточки, глубже CTA-блок и сильнее ощущение промо-лендинга, а не обычной контентной страницы.
1 вечерчтобы понять механику сценария и увидеть демонстрацию
1 кейсс обработкой документов и маршрутизацией данных
1 формадля записи прямо внутри страницы без новой сборки
Что здесь стало сильнее
Эта версия не просто повторяет первый тест. Она уже работает как отдельный вариант промостраницы: более собранная подача, четче воронка и визуально ближе к лендингу, сделанному в внешнем конструкторе.
Фон и движение
Добавлены мягкие анимированные световые пятна, чтобы страница воспринималась живее без подключения отдельного JavaScript и без правок темы.
Конверсионный ритм
Секции выстроены по промо-логике: интерес, выгода, сценарий, аудитория, доверие, вопросы и только потом финальный блок записи.
Как посетитель читает этот экран
Это уже почти тот темп восприятия, который был у референса: крупные тезисы, короткие абзацы и карточки с разной ролью в воронке.
01
Сначала цепляем смыслом
Пользователь за несколько секунд понимает, про что вебинар, кому он полезен и что именно покажут в эфире.
02
Потом даем уверенность
Следующие блоки снимают тревогу: не нужен сложный вход, будет живой кейс, а дальнейший путь после вебинара понятен.
03
И переводим к действию
К финалу страницы пользователь уже видит знакомую форму, оформленную в стиле лендинга, и воспринимает ее как естественное продолжение страницы.
Этот тест важен не только как демонстрация дизайна. Он показывает, что с текущим доступом можно собирать отдельные посадочные страницы с собственной визуальной атмосферой прямо в WordPress, не заходя в файлы темы.
Кому подходит такой формат
Внешний референс хорошо работал на стыке обучения, вебинара и карьерной истории. Здесь я адаптировал этот принцип под реальные сценарии сайта.
Маркетингу и event-команде
Можно быстро запускать отдельные URL под вебинары, интенсивы, демо-дни и партнерские события без ожидания отдельной разработки.
Пресейлу и продукту
Такая страница хорошо подходит для проверки оффера, структуры CTA и реакции аудитории до того, как делать постоянный раздел или глобальную переделку сайта.
Обучающим программам
Лендинг можно использовать как быстрый промо-слой над уже существующими формами записи и затем клонировать под новые потоки и темы.
Что это доказывает про доступ
Не только создание страниц, но и достаточно сложная визуальная сборка уже доступны через текущий канал работы.
Можно делать автономные лендинги
Собственные секции, сложные карточки, градиенты, локальные анимации, FAQ и CTA-блоки уже работают без доступа к файловой системе сайта.
Можно быстро тестировать идеи
Если нужна новая версия страницы под другую механику, проще сделать отдельный URL, чем трогать глобальные шаблоны и рисковать общей структурой сайта.
Частые вопросы
Этот блок снова собран на нативных элементах, чтобы не зависеть от дополнительных скриптов и не ухудшать управляемость страницы.
Можно ли использовать такой URL как отдельный второй экран для тестов?
Да. Это как раз правильный способ: новый URL изолирует эксперимент, не ломает существующий тест и позволяет сравнивать варианты страницы независимо.
Насколько близко это уже к референсу?
По атмосфере, контрасту и логике секций заметно ближе, чем первый вариант. Самые большие отличия остаются в шрифтах, точных иллюстративных элементах и фирменных микроэффектах конструктора Lovable.
Что потребуется, если захотим довести это до почти полного совпадения по ощущению?
Тогда лучше будет либо добавить собственные медиа-акценты и точные декоративные элементы, либо перейти к работе с кодом темы, чтобы вынести повторно используемые стили из контента в нормальный CSS.
Второй тестовый URL
Оставьте контакт и используйте эту страницу как новый вариант лендинга
Форма ниже та же самая, что уже используется на сайте. Здесь она оформлена в более глубокий, промо-ориентированный контейнер, чтобы страница воспринималась как самостоятельный лендинг, а не просто контент с вставленным shortcode.
Отдельный URL позволяет безопасно сравнивать несколько версий одной идеи.
Визуальный стиль задан локально и не затрагивает остальные страницы сайта.
Эту заготовку можно дальше адаптировать под конкретный вебинар, интенсив или демонстрацию продукта.
Визуальный стиль задан локально и не затрагивает остальные страницы сайта.
Эту заготовку можно дальше адаптировать под конкретный вебинар, интенсив или демонстрацию продукта.
Это тестовая страница, созданная как второй вариант экрана на отдельном адресе. После проверки ее можно удалить или использовать как основу для реального промо-лендинга.