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

<section class="vbpka">
  <div class="vbpka-wrap">
    <div class="vbpka-top">
      <div class="vbpka-intro">
        <span class="vbpka-badge">Кадровое агентство</span>
        <h1 class="vbpka-h1">Находим людей, которые <span>выходят и остаются</span></h1>
        <p class="vbpka-lead">Массовый набор, точечный поиск специалистов, руководители и аутстаффинг. Первые кандидаты приходят на седьмой день, оплата наступает после выхода человека на работу.</p>

        <div class="vbpka-acts">
          <a class="vbpka-cta" href="#raschet">Рассчитать стоимость подбора</a>
          <a class="vbpka-more" href="#kak-idet">Как устроен подбор</a>
        </div>

        <ul class="vbpka-marks">
          <li>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16v13H4z"/><path d="M9 7V4h6v3"/><path d="M4 12h16"/></g></svg>
            Договор с закреплённым сроком закрытия
          </li>
          <li>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v6c0 4.4-2.9 7.5-7 9-4.1-1.5-7-4.6-7-9V6z"/><path d="M9 12l2 2 4-4"/></g></svg>
            Бесплатная замена, если кандидат ушёл в гарантийный срок
          </li>
          <li>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></g></svg>
            Отчёт по воронке кандидатов каждую пятницу
          </li>
        </ul>
      </div>

      <div class="vbpka-panel">
        <h2 class="vbpka-panel__ttl">Сроки и гарантия по форматам</h2>
        <p class="vbpka-panel__sub">Выберите задачу, чтобы увидеть срок первых кандидатов и условия замены.</p>
        <div class="vbpka-tabs" id="vbpka-tabs"></div>
        <div class="vbpka-body" id="vbpka-body" aria-live="polite"></div>
      </div>
    </div>

    <ul class="vbpka-nums" id="vbpka-nums">
      <li><b data-num="1240" data-suf="">0</b><span>вакансий закрыто с 2019 года</span></li>
      <li><b data-num="14" data-suf=" дней">0</b><span>средний срок от заявки до выхода</span></li>
      <li><b data-num="92" data-suf="%">0</b><span>кандидатов проходят испытательный срок</span></li>
    </ul>
  </div>
</section>

<style>
.vbpka, .vbpka *, .vbpka *::before, .vbpka *::after { box-sizing: border-box; }
.vbpka {
  --acc: #5b8def; --acc-dark: #4372d6; --bg: #101827; --panel: #182238; --ink: #eef2f9; --muted: #94a3bd; --line: #27324b;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--bg); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 84px) 20px;
}
.vbpka-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbpka-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
.vbpka-badge { display: inline-block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--acc);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; margin-bottom: 18px; }
.vbpka-h1 { font-family: var(--fh); font-size: clamp(30px, 4.4vw, 56px); line-height: 1.06; font-weight: 700; letter-spacing: -.024em; margin: 0 0 18px; }
.vbpka-h1 span { color: var(--acc); }
.vbpka-lead { font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.62; color: var(--muted); margin: 0 0 28px; max-width: 32em; }

.vbpka-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 30px; }
.vbpka-cta, .vbpka-cta:link, .vbpka-cta:visited, .vbpka-cta:active, .vbpka-cta:focus { display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 30px; border-radius: 12px; font-size: 16px; font-weight: 600;
  background: var(--acc); color: #fff !important; text-decoration: none !important; transition: background .2s ease; }
.vbpka-cta:hover { background: var(--acc-dark); color: #fff !important; }
.vbpka-more, .vbpka-more:link, .vbpka-more:visited, .vbpka-more:active, .vbpka-more:focus { font-size: 15px; color: var(--ink) !important; text-decoration: underline !important; text-underline-offset: 4px; }
.vbpka-more:hover { color: var(--acc) !important; }

.vbpka-marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vbpka-marks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.vbpka-marks svg { width: 22px; height: 22px; color: var(--acc); }

.vbpka-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 2.6vw, 32px); }
.vbpka-panel__ttl { font-family: var(--fh); font-size: 21px; line-height: 1.25; font-weight: 700; margin: 0 0 8px; }
.vbpka-panel__sub { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0 0 20px; }
.vbpka-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 7px; margin-bottom: 20px; }
.vbpka-tab { border: 1px solid var(--line); margin: 0; padding: 11px 8px; -webkit-appearance: none; appearance: none; font: inherit; font-size: 13px;
  cursor: pointer; border-radius: 10px; background: transparent !important; color: var(--muted) !important; transition: .18s ease; }
.vbpka-tab:hover { color: var(--ink) !important; border-color: var(--acc); }
.vbpka-tab[aria-pressed="true"] { background: var(--acc) !important; color: #fff !important; border-color: var(--acc); }

.vbpka-when { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.vbpka-when b { font-family: var(--fh); font-size: clamp(30px, 3.6vw, 42px); line-height: 1; font-weight: 700; color: var(--acc); letter-spacing: -.02em; }
.vbpka-when span { font-size: 13.5px; color: var(--muted); }
.vbpka-txt { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.vbpka-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.vbpka-rows li { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; border-top: 1px solid var(--line); padding-top: 9px; }
.vbpka-rows li span { color: var(--muted); }
.vbpka-rows li b { font-weight: 600; text-align: right; }

.vbpka-nums { list-style: none; margin: clamp(30px, 4vw, 56px) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.vbpka-nums li { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.vbpka-nums b { display: block; font-family: var(--fh); font-size: clamp(28px, 3.6vw, 40px); line-height: 1.05; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.vbpka-nums span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

@media (max-width: 900px) { .vbpka-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .vbpka-h1 { font-size: clamp(26px, 7.4vw, 34px); } .vbpka-rows li { flex-direction: column; gap: 2px; } .vbpka-rows li b { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .vbpka * { transition: none !important; } }
</style>

<script>
(function () {
  /* ── ФОРМАТЫ ПОДБОРА: срок первых кандидатов, гарантия, условия ── */
  var FORMATS = [
    { k: 'Массовый', n: '7', u: 'дней до первых выходов',
      t: 'Продавцы, комплектовщики, курьеры, операторы линии. Держим поток кандидатов и закрываем сразу группу позиций.',
      rows: [['Гарантия замены', '30 дней'], ['Оплата', 'за каждого вышедшего'], ['Объём', 'от 5 позиций в месяц']] },
    { k: 'Специалисты', n: '14', u: 'дней до трёх финалистов',
      t: 'Инженеры, бухгалтеры, менеджеры по продажам, снабженцы. Проверяем задачи по профилю и собираем рекомендации.',
      rows: [['Гарантия замены', '90 дней'], ['Оплата', 'после выхода на работу'], ['Кандидатов на выбор', 'от 3 до 5']] },
    { k: 'Руководители', n: '35', u: 'дней до выхода директора',
      t: 'Директора направлений, главные инженеры, коммерческие руководители. Ищем прямым поиском по рынку и закрытым спискам.',
      rows: [['Гарантия замены', '180 дней'], ['Оплата', 'тремя частями по этапам'], ['Оценка', 'кейсы и интервью по опыту']] },
    { k: 'Аутстаффинг', n: '3', u: 'дня до выхода смены',
      t: 'Люди работают на вашей площадке, в штате у нас. Кадровый учёт, выплаты и замены на нашей стороне.',
      rows: [['Гарантия замены', 'в тот же день'], ['Оплата', 'по фактическим часам'], ['Смена', 'от 8 человек']] }
  ];

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var tabs = root.querySelector('#vbpka-tabs'), body = root.querySelector('#vbpka-body');
    var cur = 0;

    tabs.innerHTML = FORMATS.map(function (f, i) {
      return '<button type="button" class="vbpka-tab" data-i="' + i + '" aria-pressed="' + (i === 0) + '">' + f.k + '<\/button>';
    }).join('');

    function draw() {
      var f = FORMATS[cur];
      body.innerHTML = '<div class="vbpka-when"><b>' + f.n + '<\/b><span>' + f.u + '<\/span><\/div>' +
        '<p class="vbpka-txt">' + f.t + '<\/p><ul class="vbpka-rows">' +
        f.rows.map(function (r) { return '<li><span>' + r[0] + '<\/span><b>' + r[1] + '<\/b><\/li>'; }).join('') + '<\/ul>';
      var bs = tabs.querySelectorAll('.vbpka-tab');
      for (var i = 0; i < bs.length; i++) bs[i].setAttribute('aria-pressed', i === cur ? 'true' : 'false');
    }

    tabs.addEventListener('click', function (e) {
      var b = e.target.closest ? e.target.closest('.vbpka-tab') : null;
      if (!b) return;
      cur = +b.getAttribute('data-i');
      draw();
    });
    draw();

    var nums = root.querySelectorAll('#vbpka-nums b');
    function fmt(n) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ' '); }
    var slow = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    function run() {
      for (var i = 0; i < nums.length; i++) count(nums[i]);
    }
    function count(el) {
      var to = +el.getAttribute('data-num') || 0, suf = el.getAttribute('data-suf') || '';
      if (slow) { el.textContent = fmt(to) + suf; return; }
      var t0 = 0, dur = 1100;
      function step(ts) {
        if (!t0) t0 = ts;
        var p = Math.min(1, (ts - t0) / dur);
        el.textContent = fmt(Math.round(to * (1 - Math.pow(1 - p, 3)))) + suf;
        if (p < 1) requestAnimationFrame(step);
      }
      requestAnimationFrame(step);
    }

    var box = root.querySelector('#vbpka-nums');
    if (!('IntersectionObserver' in window)) { run(); return; }
    var io = new IntersectionObserver(function (es) {
      for (var i = 0; i < es.length; i++) if (es[i].isIntersecting) { run(); io.disconnect(); }
    }, { rootMargin: '0px 0px -12% 0px' });
    io.observe(box);
    setTimeout(run, 2600);
  }
})();
</script>

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