Первый экран для сайта поставщика промышленного оборудования

<section class="vbpp">
  <div class="vbpp-wrap">
    <div class="vbpp-main">
      <span class="vbpp-tag">Поставки промышленного оборудования с 2011 года</span>
      <h1 class="vbpp-h1">Подберём оборудование под задачу и <span>отгрузим со склада в день оплаты</span></h1>
      <p class="vbpp-lead">Компрессорное, насосное, подъёмное и складское оборудование, запасные части и расходные материалы. Работаем по договору и счёту, собираем партию с одного склада и передаём перевозчику в тот же день.</p>

      <div class="vbpp-acts">
        <a class="vbpp-btn" href="#podbor">Подобрать по параметрам</a>
        <a class="vbpp-link" href="#usloviya">Условия отгрузки и оплаты</a>
      </div>

      <ul class="vbpp-nums">
        <li><b data-num="12400">0</b><span>позиций на складе: оборудование, запчасти, расходные материалы</span></li>
        <li><b data-num="860">0</b><span>отгрузок в месяц по России и Казахстану</span></li>
        <li><b data-num="14">0</b><span>лет поставляем оборудование для производств и складов</span></li>
      </ul>
    </div>

    <aside class="vbpp-board">
      <div class="vbpp-board__top">
        <h2 class="vbpp-board__ttl">Отгрузки за сегодня</h2>
        <span class="vbpp-board__live"><i aria-hidden="true"></i>склад на связи</span>
      </div>

      <div class="vbpp-cols"><span>Позиция</span><span>Партия</span><span>Куда</span></div>
      <ul class="vbpp-feed" id="vbpp-feed"></ul>

      <p class="vbpp-note">Счёт закрыт до 15:00 по московскому времени, партия уезжает в этот же день. Оплата позже - отгрузка утром следующего рабочего дня.</p>
    </aside>
  </div>
</section>

<style>
.vbpp, .vbpp *, .vbpp *::before, .vbpp *::after { box-sizing: border-box; }
.vbpp {
  --acc: #e0721f; --acc-dark: #bd5c13; --bg: #12171c; --panel: #1a2128; --line: #2b343d;
  --ink: #eef2f5; --muted: #93a1ad; --ok: #6fbf73;
  --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;
}
.vbpp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(26px, 4vw, 54px); align-items: start; }
.vbpp-tag { display: inline-block; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--acc); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; margin-bottom: 20px; }
.vbpp-h1 { font-family: var(--fh); font-size: clamp(29px, 4.1vw, 52px); line-height: 1.08; font-weight: 700; letter-spacing: -.022em; margin: 0 0 18px; }
.vbpp-h1 span { color: var(--acc); }
.vbpp-lead { font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.62; color: var(--muted); margin: 0 0 28px; max-width: 33em; }

.vbpp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-bottom: 34px; }
.vbpp-btn, .vbpp-btn:link, .vbpp-btn:visited, .vbpp-btn:active, .vbpp-btn:focus { display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 30px; border-radius: 10px; font-size: 16px; font-weight: 600;
  background: var(--acc); color: #14181c !important; text-decoration: none !important; transition: background .2s ease; }
.vbpp-btn:hover { background: var(--acc-dark); color: #fff !important; }
.vbpp-link, .vbpp-link:link, .vbpp-link:visited, .vbpp-link:active, .vbpp-link:focus { font-size: 15px; color: var(--ink) !important;
  text-decoration: none !important; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.vbpp-link:hover { border-bottom-color: var(--acc); }

.vbpp-nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; }
.vbpp-nums li { border-top: 2px solid var(--acc); padding-top: 14px; }
.vbpp-nums b { display: block; font-family: var(--fh); font-size: clamp(27px, 3.2vw, 38px); line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.vbpp-nums span { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 8px; }

.vbpp-board { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 2.4vw, 28px); }
.vbpp-board__top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.vbpp-board__ttl { font-family: var(--fh); font-size: 19px; line-height: 1.25; font-weight: 700; margin: 0; }
.vbpp-board__live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.vbpp-board__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: vbpp-blink 2.2s ease-in-out infinite; }
@keyframes vbpp-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.vbpp-cols, .vbpp-row { display: grid; grid-template-columns: minmax(0, 1fr) 74px 96px; gap: 10px; align-items: center; }
.vbpp-cols { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #6d7b88; padding: 0 0 9px; border-bottom: 1px solid var(--line); }
.vbpp-cols span:nth-child(2), .vbpp-cols span:nth-child(3) { text-align: right; }
.vbpp-feed { list-style: none; margin: 0; padding: 0; min-height: 244px; }
.vbpp-row { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; animation: vbpp-in .4s cubic-bezier(.22,1,.36,1); }
.vbpp-row__d { display: block; font-size: 11.5px; color: #6d7b88; margin-top: 3px; }
.vbpp-row__q, .vbpp-row__c { text-align: right; font-size: 13px; color: var(--muted); }
.vbpp-row__s { display: block; font-weight: 600; font-size: 11px; letter-spacing: .03em; color: var(--acc); margin-top: 3px; }
.vbpp-row--done .vbpp-row__s { color: var(--ok); }
@keyframes vbpp-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.vbpp-note { margin: 16px 0 0; font-size: 12px; line-height: 1.55; color: #6d7b88; }

@media (max-width: 940px) { .vbpp-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .vbpp-h1 { font-size: clamp(25px, 7vw, 33px); }
  .vbpp-cols, .vbpp-row { grid-template-columns: minmax(0, 1fr) 62px 84px; }
}
@media (prefers-reduced-motion: reduce) { .vbpp *, .vbpp *::before { animation: none !important; transition: none !important; } }
</style>

<script>
(function () {
  /* ЛЕНТА ОТГРУЗОК: наименование, партия, город, состояние */
  var FEED = [
    { n: 'Компрессор винтовой 7,5 кВт', d: 'с ресивером 500 л', q: '2 шт', c: 'Казань', s: 'отгружено' },
    { n: 'Насос консольный 45 куб. м/ч', d: 'с рамой и муфтой', q: '4 шт', c: 'Пермь', s: 'в сборке' },
    { n: 'Стеллаж паллетный', d: 'секция 3 яруса', q: '40 сек', c: 'Тверь', s: 'отгружено' },
    { n: 'Полуавтомат сварочный 350 А', d: 'с горелкой 3 м', q: '6 шт', c: 'Ростов', s: 'отгружено' },
    { n: 'Подшипники по каталогу', d: 'сборная партия', q: '320 шт', c: 'Липецк', s: 'в сборке' },
    { n: 'Таль электрическая 3 т', d: 'высота подъёма 12 м', q: '1 шт', c: 'Омск', s: 'отгружено' },
    { n: 'Тележка гидравлическая 2,5 т', d: 'вилы 1150 мм', q: '12 шт', c: 'Иваново', s: 'отгружено' },
    { n: 'Фильтроэлементы к компрессорам', d: 'годовой запас', q: '96 шт', c: 'Уфа', s: 'в сборке' }
  ];
  var VISIBLE = 5, PAUSE = 2800;

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var feed = root.querySelector('#vbpp-feed');
    var nums = root.querySelectorAll('.vbpp-nums b');
    var pos = 0, timer = null;
    var calm = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    function fmt(n) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ' '); }

    function rowHtml(it) {
      var done = it.s === 'отгружено';
      return '<li class="vbpp-row' + (done ? ' vbpp-row--done' : '') + '">' +
        '<span class="vbpp-row__n">' + it.n + '<span class="vbpp-row__d">' + it.d + '<\/span><\/span>' +
        '<span class="vbpp-row__q">' + it.q + '<\/span>' +
        '<span class="vbpp-row__c">' + it.c + '<span class="vbpp-row__s">' + it.s + '<\/span><\/span><\/li>';
    }

    function paint() {
      var html = '';
      for (var k = 0; k < VISIBLE; k++) html += rowHtml(FEED[(pos + k) % FEED.length]);
      feed.innerHTML = html;
    }

    function step() { pos = (pos + 1) % FEED.length; paint(); }
    function start() { if (!timer && !calm) timer = setInterval(step, PAUSE); }
    function stop() { if (timer) { clearInterval(timer); timer = null; } }

    paint();
    feed.addEventListener('mouseenter', stop);
    feed.addEventListener('mouseleave', start);
    start();

    function count(el) {
      var to = +el.getAttribute('data-num') || 0, t0 = 0;
      if (calm) { el.textContent = fmt(to); return; }
      function tick(ts) {
        if (!t0) t0 = ts;
        var p = Math.min(1, (ts - t0) / 1100);
        el.textContent = fmt(Math.round(to * (1 - Math.pow(1 - p, 3))));
        if (p < 1) requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
    }

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

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