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

<section class="vbpep">
  <div class="vbpep-wrap">
    <div class="vbpep-main">
      <span class="vbpep-tag">Транспортная компания, возим по России с 2009 года</span>
      <h1 class="vbpep-h1">Заберём груз сегодня, <span>выдадим по документам</span> в пункте назначения</h1>
      <p class="vbpep-lead">Сборные отправки от 20 килограммов, отдельная машина до 20 тонн, склад ответственного хранения. Забор груза с адреса по Москве и области в день обращения, если заявка пришла до 15:00.</p>

      <div class="vbpep-acts">
        <a class="vbpep-btn" href="#raschet">Рассчитать перевозку</a>
        <a class="vbpep-link" href="#geografiya">Терминалы и география</a>
      </div>

      <ul class="vbpep-stats">
        <li><b data-num="128" data-suf="">0</b><span>машин в собственном парке: фургоны, тенты, рефрижераторы</span></li>
        <li><b data-num="340" data-suf="">0</b><span>городов в маршрутной сети, 46 своих терминалов</span></li>
        <li><b data-num="97" data-suf="%">0</b><span>отправок пришло в срок за прошлый квартал</span></li>
      </ul>
    </div>

    <aside class="vbpep-card">
      <h2 class="vbpep-card__ttl">Сколько идёт груз</h2>
      <p class="vbpep-card__sub">Выберите город отправки, посмотрите срок по основным направлениям.</p>

      <div class="vbpep-tabs" id="vbpep-tabs"></div>
      <ul class="vbpep-routes" id="vbpep-routes"></ul>

      <div class="vbpep-foot">
        <span class="vbpep-foot__n" id="vbpep-hub">46 терминалов</span>
        <span class="vbpep-foot__t">Срок считается в рабочих днях от приёма груза на терминале. Для отдалённых районов добавляется день на подвоз.</span>
      </div>
    </aside>
  </div>
</section>

<style>
.vbpep, .vbpep *, .vbpep *::before, .vbpep *::after { box-sizing: border-box; }
.vbpep {
  --acc: #1f63b8; --acc-dark: #174d90; --ink: #131b26; --muted: #5c6b7c; --line: #dde4ec; --soft: #f2f6fa; --dark: #16202e;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: #fff; color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 82px) 20px;
}
.vbpep-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(26px, 4vw, 58px); align-items: start; }
.vbpep-tag { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--acc);
  background: var(--soft); border-radius: 999px; padding: 8px 16px; margin-bottom: 18px; }
.vbpep-h1 { font-family: var(--fh); font-size: clamp(30px, 4.2vw, 53px); line-height: 1.06; font-weight: 700; letter-spacing: -.024em; margin: 0 0 16px; }
.vbpep-h1 span { color: var(--acc); }
.vbpep-lead { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.62; color: var(--muted); margin: 0 0 28px; max-width: 32em; }

.vbpep-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-bottom: clamp(26px, 3.4vw, 40px); }
.vbpep-btn, .vbpep-btn:link, .vbpep-btn:visited, .vbpep-btn:active, .vbpep-btn: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; }
.vbpep-btn:hover { background: var(--acc-dark); color: #fff !important; }
.vbpep-link, .vbpep-link:link, .vbpep-link:visited, .vbpep-link:active, .vbpep-link:focus { font-size: 15px; font-weight: 500;
  color: var(--ink) !important; text-decoration: underline !important; text-underline-offset: 4px; }
.vbpep-link:hover { color: var(--acc) !important; }

.vbpep-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.vbpep-stats li { border-top: 3px solid var(--line); padding-top: 14px; }
.vbpep-stats b { display: block; font-family: var(--fh); font-size: clamp(28px, 3.2vw, 38px); line-height: 1; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.vbpep-stats span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.vbpep-card { background: var(--dark); color: #fff; border-radius: 24px; padding: clamp(22px, 2.6vw, 32px); }
.vbpep-card__ttl { font-family: var(--fh); font-size: 22px; line-height: 1.25; font-weight: 700; margin: 0 0 8px; color: #fff; }
.vbpep-card__sub { font-size: 13.5px; line-height: 1.55; color: #9fb0c4; margin: 0 0 18px; }
.vbpep-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: rgba(255,255,255,.07); border-radius: 12px; padding: 5px; margin-bottom: 18px; }
.vbpep-tab { border: 0; margin: 0; padding: 11px 6px; -webkit-appearance: none; appearance: none; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; border-radius: 9px; background: transparent !important; color: #b7c6d8 !important; transition: .18s ease; }
.vbpep-tab:hover { color: #fff !important; }
.vbpep-tab--on, .vbpep-tab--on:hover { background: var(--acc) !important; color: #fff !important; }

.vbpep-routes { list-style: none; margin: 0 0 20px; padding: 0; }
.vbpep-routes li { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.vbpep-routes li:last-child { border-bottom: 0; }
.vbpep-routes i { flex: 1 1 auto; font-style: normal; font-size: 15px; }
.vbpep-routes u { flex: 0 0 auto; text-decoration: none; font-size: 12px; color: #7e91a7; }
.vbpep-routes b { flex: 0 0 auto; font-family: var(--fh); font-size: 16px; font-weight: 700; color: #6fb0ff; white-space: nowrap; }

.vbpep-foot { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; }
.vbpep-foot__n { display: block; font-family: var(--fh); font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.vbpep-foot__t { display: block; font-size: 12px; line-height: 1.5; color: #8a9cb1; }

@media (max-width: 940px) { .vbpep-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .vbpep-h1 { font-size: clamp(25px, 7.2vw, 34px); }
  .vbpep-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vbpep * { transition: none !important; } }
</style>

<script>
(function () {
  /* НАПРАВЛЕНИЯ: город отправки, список городов назначения, срок в рабочих днях */
  var FROM = [
    { k: 'msk', n: 'Москва', hub: '46 терминалов в сети', rows: [
      ['Санкт-Петербург', 'ежедневно', '1-2 дня'],
      ['Казань', 'ежедневно', '2 дня'],
      ['Екатеринбург', 'пн, ср, пт', '3 дня'],
      ['Новосибирск', 'вт, чт', '5-6 дней'],
      ['Краснодар', 'ежедневно', '2-3 дня']
    ]},
    { k: 'spb', n: 'Петербург', hub: '11 терминалов на северо-западе', rows: [
      ['Москва', 'ежедневно', '1-2 дня'],
      ['Нижний Новгород', 'пн, чт', '3 дня'],
      ['Воронеж', 'вт, пт', '3 дня'],
      ['Пермь', 'ср', '5 дней'],
      ['Ростов-на-Дону', 'пн, пт', '4 дня']
    ]},
    { k: 'ekb', n: 'Екатеринбург', hub: '9 терминалов на Урале', rows: [
      ['Москва', 'пн, ср, пт', '3 дня'],
      ['Тюмень', 'ежедневно', '1 день'],
      ['Челябинск', 'ежедневно', '1 день'],
      ['Омск', 'вт, сб', '2-3 дня'],
      ['Красноярск', 'чт', '4-5 дней']
    ]}
  ];

  var roots = document.querySelectorAll('.vbpep');
  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('#vbpep-tabs');
    var list = root.querySelector('#vbpep-routes');
    var hub = root.querySelector('#vbpep-hub');
    var cur = 0;

    tabs.innerHTML = FROM.map(function (c, i) {
      return '<button type="button" class="vbpep-tab' + (i === 0 ? ' vbpep-tab--on' : '') + '" data-i="' + i + '">' + c.n + '<\/button>';
    }).join('');

    function draw() {
      var c = FROM[cur];
      hub.textContent = c.hub;
      list.innerHTML = c.rows.map(function (r) {
        return '<li><i>' + r[0] + '<\/i><u>' + r[1] + '<\/u><b>' + r[2] + '<\/b><\/li>';
      }).join('');
    }

    tabs.addEventListener('click', function (e) {
      var b = e.target.closest ? e.target.closest('.vbpep-tab') : null;
      if (!b) return;
      cur = +b.getAttribute('data-i');
      var btns = tabs.querySelectorAll('.vbpep-tab');
      for (var j = 0; j < btns.length; j++) btns[j].className = 'vbpep-tab' + (j === cur ? ' vbpep-tab--on' : '');
      draw();
    });
    draw();

    var nums = root.querySelectorAll('.vbpep-stats b');
    function run(el) {
      var to = +el.getAttribute('data-num') || 0, suf = el.getAttribute('data-suf') || '';
      var slow = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      if (slow) { el.textContent = to + suf; return; }
      var t0 = 0;
      function step(ts) {
        if (!t0) t0 = ts;
        var p = Math.min(1, (ts - t0) / 1100);
        el.textContent = Math.round(to * (1 - Math.pow(1 - p, 3))) + suf;
        if (p < 1) requestAnimationFrame(step);
      }
      requestAnimationFrame(step);
    }
    var done = 0;
    function runAll() { if (done) return; done = 1; for (var j = 0; j < nums.length; j++) run(nums[j]); }
    if (!('IntersectionObserver' in window)) { runAll(); return; }
    var io = new IntersectionObserver(function (es) {
      for (var j = 0; j < es.length; j++) if (es[j].isIntersecting) { runAll(); io.disconnect(); return; }
    }, { rootMargin: '0px 0px -12% 0px' });
    io.observe(root);
    setTimeout(runAll, 2600);
  }
})();
</script>

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