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

<section class="vbptb">
  <div class="vbptb-wrap">
    <div class="vbptb-main">
      <span class="vbptb-tag">Свой цех в Туле, отгружаем с 2016 года</span>
      <h1 class="vbptb-h1">Посуда для кухни, которую мы <span>делаем и отправляем сами</span></h1>
      <p class="vbptb-lead">Формуем и обжигаем керамику на собственном участке, там же шлифуем деревянные подставки и доски. Заказ собираем со своего склада в день оплаты, поэтому срок в пути зависит только от перевозчика.</p>

      <div class="vbptb-acts">
        <a class="vbptb-btn" href="#katalog">Перейти в каталог</a>
        <a class="vbptb-link" href="#proizvodstvo">Как устроен цех</a>
      </div>

      <ul class="vbptb-nums">
        <li><b data-num="214">0</b><span>позиций в каталоге: посуда, хранение, кухонные мелочи</span></li>
        <li><b data-num="38400">0</b><span>заказов собрали и отправили за девять лет</span></li>
        <li><b data-num="3" data-pre="за ">0</b><span>дня заказ доезжает до городов-миллионников</span></li>
      </ul>
    </div>

    <aside class="vbptb-card">
      <svg class="vbptb-art" viewBox="0 0 320 172" role="img" aria-label="Кружки, тарелки и банки для хранения">
        <g class="vbptb-g vbptb-on" data-k="kruzhki" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
          <path d="M40 62h56v56a10 10 0 0 1-10 10H50a10 10 0 0 1-10-10z"/>
          <path d="M96 76h13a13 13 0 0 1 0 26H96"/>
          <path d="M56 46c0-6 6-6 6-12M74 46c0-6 6-6 6-12" stroke-width="2.4"/>
        </g>
        <g class="vbptb-g" data-k="tarelki" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
          <ellipse cx="176" cy="122" rx="48" ry="14"/>
          <ellipse cx="176" cy="120" rx="28" ry="8" stroke-width="2.2"/>
          <path d="M136 100a40 40 0 0 1 80 0"/>
          <path d="M154 98a22 22 0 0 1 44 0" stroke-width="2.2"/>
        </g>
        <g class="vbptb-g" data-k="hranenie" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
          <rect x="240" y="72" width="32" height="56" rx="7"/>
          <rect x="236" y="60" width="40" height="11" rx="4"/>
          <rect x="282" y="90" width="26" height="38" rx="6"/>
          <rect x="278" y="80" width="34" height="9" rx="4"/>
        </g>
        <path d="M24 148h280" stroke="currentColor" stroke-width="2" opacity=".2"/>
      </svg>

      <div class="vbptb-rows" id="vbptb-rows" role="group" aria-label="Разделы каталога">
        <button type="button" class="vbptb-row vbptb-row--on" data-k="kruzhki">
          <span>Кружки и чашки</span><b>от 690 ₽</b>
        </button>
        <button type="button" class="vbptb-row" data-k="tarelki">
          <span>Тарелки и блюда</span><b>от 940 ₽</b>
        </button>
        <button type="button" class="vbptb-row" data-k="hranenie">
          <span>Банки для хранения</span><b>от 1 150 ₽</b>
        </button>
      </div>

      <p class="vbptb-note" id="vbptb-note"></p>
    </aside>
  </div>
</section>

<style>
.vbptb, .vbptb *, .vbptb *::before, .vbptb *::after { box-sizing: border-box; }
.vbptb {
  --acc: #9c2b45; --acc-dark: #7d2036; --ink: #1e1c1b; --muted: #6b6561; --line: #e4e0dc; --soft: #f7f5f2;
  --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, 84px) 20px;
}
.vbptb-wrap { max-width: 1220px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 38px);
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(26px, 4vw, 56px); align-items: center; }
.vbptb-tag { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--acc);
  background: var(--soft); border-radius: 999px; padding: 8px 15px; margin-bottom: 18px; }
.vbptb-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 16px; }
.vbptb-h1 span { color: var(--acc); }
.vbptb-lead { font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.62; color: var(--muted); margin: 0 0 28px; max-width: 32em; }

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

.vbptb-nums { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px 24px; }
.vbptb-nums li { border-top: 2px solid var(--line); padding-top: 14px; }
.vbptb-nums b { display: block; font-family: var(--fh); font-size: clamp(26px, 3vw, 34px); line-height: 1.05;
  font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.vbptb-nums span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.vbptb-card { background: var(--soft); border-radius: 26px; padding: clamp(22px, 2.6vw, 32px); }
.vbptb-art { display: block; width: 100%; height: auto; color: var(--ink); margin-bottom: 6px; }
.vbptb-g { transition: opacity .3s ease, color .3s ease; }
.vbptb-g[data-k] { opacity: .22; }
.vbptb-g.vbptb-on { opacity: 1; color: var(--acc); }

.vbptb-rows { display: grid; gap: 8px; margin-bottom: 16px; }
.vbptb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  border: 1.5px solid transparent; margin: 0; padding: 14px 18px; -webkit-appearance: none; appearance: none;
  font: inherit; cursor: pointer; text-align: left; border-radius: 13px; background: #fff !important; color: var(--ink) !important;
  transition: border-color .2s ease; }
.vbptb-row:hover { border-color: var(--line); }
.vbptb-row span { font-size: 15px; }
.vbptb-row b { font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.vbptb-row--on { border-color: var(--acc); }
.vbptb-row--on b { color: var(--acc); }
.vbptb-note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); min-height: 3.2em; }

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

<script>
(function () {
  /* ── РАЗДЕЛЫ ВИТРИНЫ: подпись под списком ── */
  var NOTES = {
    kruzhki: 'Кружки формуем вручную, оттенок глазури внутри партии слегка расходится. Если нужен ровный набор, отметьте это в комментарии, соберём из одной поставки.',
    tarelki: 'Тарелки идут двух диаметров, 21 и 27 сантиметров. Обе линии переносят посудомоечную машину и духовку до 220 градусов.',
    hranenie: 'Банки закрываются силиконовым кольцом, крышка из бука. Кольца продаём отдельно, если со временем потребуется замена.'
  };

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var rows = root.querySelectorAll('.vbptb-row');
    var groups = root.querySelectorAll('.vbptb-g');
    var note = root.querySelector('#vbptb-note');
    var nums = root.querySelectorAll('.vbptb-nums b');
    var calm = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

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

    function pick(key) {
      for (var a = 0; a < rows.length; a++) {
        var on = rows[a].getAttribute('data-k') === key;
        rows[a].className = on ? 'vbptb-row vbptb-row--on' : 'vbptb-row';
      }
      for (var b = 0; b < groups.length; b++) {
        var g = groups[b];
        g.setAttribute('class', g.getAttribute('data-k') === key ? 'vbptb-g vbptb-on' : 'vbptb-g');
      }
      note.textContent = NOTES[key] || '';
    }

    for (var r = 0; r < rows.length; r++) {
      rows[r].addEventListener('click', function () { pick(this.getAttribute('data-k')); });
    }
    pick('kruzhki');

    function run(el) {
      var to = parseInt(el.getAttribute('data-num'), 10) || 0;
      var pre = el.getAttribute('data-pre') || '';
      if (calm) { el.textContent = pre + fmt(to); return; }
      var start = 0, dur = 1100;
      function step(ts) {
        if (!start) start = ts;
        var p = Math.min(1, (ts - start) / dur);
        el.textContent = pre + fmt(Math.round(to * (1 - Math.pow(1 - p, 3))));
        if (p < 1) requestAnimationFrame(step);
      }
      requestAnimationFrame(step);
    }

    function all() { for (var k = 0; k < nums.length; k++) run(nums[k]); }

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

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