Первый экран для лендинга онлайн-курса

<section class="vbpok">
  <div class="vbpok-wrap">
    <div class="vbpok-left">
      <h1 class="vbpok-h1">Профессия <span>аналитик данных</span> за 8 месяцев</h1>
      <p class="vbpok-lead">С нуля до первого оффера. Без высшей математики на входе — но с реальными задачами из компаний уже на третьем месяце.</p>

      <ul class="vbpok-params">
        <li><b>8 месяцев</b><span>по 8–10 часов в неделю</span></li>
        <li><b>Онлайн</b><span>записи плюс живые разборы</span></li>
        <li><b>4 проекта</b><span>в портфолио к выпуску</span></li>
      </ul>

      <div class="vbpok-acts">
        <a class="vbpok-btn" href="#zapis">Записаться на поток</a>
        <a class="vbpok-btn vbpok-btn--gh" href="#programma">Смотреть программу</a>
      </div>
    </div>

    <aside class="vbpok-card">
      <div class="vbpok-timer" id="vbpok-timer">
        <span class="vbpok-timer__lbl">До конца набора на поток</span>
        <div class="vbpok-timer__row" id="vbpok-row"></div>
      </div>
      <div class="vbpok-price">
        <span class="vbpok-price__old">148 000 ₽</span>
        <b class="vbpok-price__new">109 000 ₽</b>
        <span class="vbpok-price__mo">или 4 542 ₽ в месяц в рассрочку на 24 месяца</span>
      </div>
      <ul class="vbpok-bonus">
        <li>Доступ к материалам навсегда</li>
        <li>Помощь с резюме и подготовка к собеседованиям</li>
        <li>Возврат денег в первые две недели без вопросов</li>
      </ul>
      <a class="vbpok-cta" href="#zapis">Занять место со скидкой</a>
      <p class="vbpok-left-n">Осталось 7 мест из 40</p>
    </aside>
  </div>
</section>

<style>
.vbpok, .vbpok *, .vbpok *::before, .vbpok *::after { box-sizing: border-box; }
.vbpok {
  --acc: #4b56d2; --acc-dark: #3d47b5; --ink: #191b2e; --muted: #5f6280; --line: #e3e4ef; --soft: #f4f4fb;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--soft); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 84px) 20px;
}
.vbpok-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(26px, 4vw, 56px); align-items: center; }
.vbpok-h1 { font-family: var(--fh); font-size: clamp(31px, 4.5vw, 56px); line-height: 1.06; font-weight: 700; letter-spacing: -.025em; margin: 0 0 18px; }
.vbpok-h1 span { color: var(--acc); }
.vbpok-lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: var(--muted); margin: 0 0 30px; max-width: 30em; }

.vbpok-params { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vbpok-params b { display: block; font-family: var(--fh); font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; }
.vbpok-params span { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

.vbpok-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.vbpok-btn, .vbpok-btn:link, .vbpok-btn:visited, .vbpok-btn:active, .vbpok-btn:focus { display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px; border-radius: 12px; font-size: 16px; font-weight: 600;
  background: var(--acc); color: #fff !important; text-decoration: none !important; transition: background .2s ease; }
.vbpok-btn:hover { background: var(--acc-dark); color: #fff !important; }
.vbpok-btn--gh, .vbpok-btn--gh:link, .vbpok-btn--gh:visited, .vbpok-btn--gh:active, .vbpok-btn--gh:focus {
  background: transparent; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--line); }
.vbpok-btn--gh:hover { background: #fff; color: var(--ink) !important; }

.vbpok-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 2.6vw, 30px); }
.vbpok-timer__lbl { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.vbpok-timer__row { display: flex; gap: 8px; }
.vbpok-tick { flex: 1; background: var(--soft); border-radius: 12px; padding: 12px 6px; text-align: center; }
.vbpok-tick b { display: block; font-family: var(--fh); font-size: clamp(20px, 2.2vw, 27px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.vbpok-tick span { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }
.vbpok-after { padding: 16px 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

.vbpok-price { padding: 20px 0 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.vbpok-price__old { font-size: 15px; color: var(--muted); text-decoration: line-through; }
.vbpok-price__new { display: block; font-family: var(--fh); font-size: clamp(28px, 3vw, 36px); line-height: 1.1; font-weight: 700; margin: 4px 0 6px; }
.vbpok-price__mo { display: block; font-size: 13px; color: var(--muted); }

.vbpok-bonus { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.vbpok-bonus li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; }
.vbpok-bonus li::before { content: ''; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%;
  background: var(--acc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

.vbpok-cta, .vbpok-cta:link, .vbpok-cta:visited, .vbpok-cta:active, .vbpok-cta:focus { display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; border-radius: 12px; font-size: 16px; font-weight: 600;
  background: var(--acc); color: #fff !important; text-decoration: none !important; transition: background .2s ease; }
.vbpok-cta:hover { background: var(--acc-dark); color: #fff !important; }
.vbpok-left-n { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }

@media (max-width: 900px) { .vbpok-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .vbpok-h1 { font-size: clamp(26px, 7.4vw, 34px); } .vbpok-params { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .vbpok * { transition: none !important; } }
</style>

<script>
(function () {
  /* ── ДЕДЛАЙН НАБОРА: реальная дата, часовой пояс указан смещением ── */
  var DEADLINE = '2026-12-01T23:59:59+03:00';
  var AFTER_TEXT = 'Набор на этот поток закрыт. Оставьте заявку — сообщим о старте следующего и сохраним цену.';

  var roots = document.querySelectorAll('.vbpok');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var box = root.querySelector('#vbpok-timer'), row = root.querySelector('#vbpok-row');
    var end = new Date(DEADLINE).getTime();
    var UNITS = [['дн', 86400000], ['ч', 3600000], ['мин', 60000], ['сек', 1000]];

    function word(n, forms) {
      var m = n % 100, k = n % 10;
      return m > 10 && m < 20 ? forms[2] : k === 1 ? forms[0] : k > 1 && k < 5 ? forms[1] : forms[2];
    }
    var LABELS = [['день', 'дня', 'дней'], ['час', 'часа', 'часов'], ['минута', 'минуты', 'минут'], ['секунда', 'секунды', 'секунд']];

    function tick() {
      var left = end - Date.now();
      if (left <= 0) {
        box.innerHTML = '<p class="vbpok-after">' + AFTER_TEXT + '<\/p>';
        clearInterval(timer);
        return;
      }
      var html = '';
      UNITS.forEach(function (u, i) {
        var v = Math.floor(left / u[1]);
        left -= v * u[1];
        html += '<div class="vbpok-tick"><b>' + (v < 10 ? '0' + v : v) + '<\/b><span>' + word(v, LABELS[i]) + '<\/span><\/div>';
      });
      row.innerHTML = html;
    }
    tick();
    var timer = setInterval(tick, 1000);
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.