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

<section class="vbpmp">
  <div class="vbpmp-wrap">
    <div class="vbpmp-main">
      <span class="vbpmp-tag">Мебельное производство полного цикла</span>
      <h1 class="vbpmp-h1">Кухня по вашим размерам <span>из собственного цеха</span></h1>
      <p class="vbpmp-lead">Замер, проект, распил, кромка и сборка идут внутри одной компании. Сумму фиксируем в договоре в день утверждения проекта, дальше она не растёт.</p>

      <div class="vbpmp-acts">
        <a class="vbpmp-btn" href="#raschet">Рассчитать кухню</a>
        <a class="vbpmp-btn vbpmp-btn--gh" href="#raboty">Посмотреть работы цеха</a>
      </div>

      <ul class="vbpmp-nums">
        <li><b data-num="1240">0</b><span>кухонь собрано с 2011 года</span></li>
        <li><b data-num="14">0</b><span>лет цех работает на одном месте</span></li>
        <li><b data-num="5">0</b><span>лет гарантии на корпус и фурнитуру</span></li>
      </ul>
    </div>

    <aside class="vbpmp-card">
      <svg class="vbpmp-plan" viewBox="0 0 320 152" aria-hidden="true" focusable="false">
        <g fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" stroke-linecap="round">
          <rect x="10" y="12" width="58" height="46" rx="3"/>
          <rect x="72" y="12" width="58" height="46" rx="3"/>
          <path d="M138 58h44l10-24h-64z"/>
          <rect x="200" y="12" width="52" height="46" rx="3"/>
          <rect x="256" y="12" width="54" height="46" rx="3"/>
          <path d="M10 84h300M10 88h300"/>
          <rect x="10" y="92" width="70" height="52" rx="3"/>
          <rect x="84" y="92" width="54" height="52" rx="3"/>
          <rect x="142" y="92" width="76" height="52" rx="3"/>
          <rect x="222" y="92" width="88" height="52" rx="3"/>
          <path d="M30 40h18M92 40h18M216 40h18M272 40h18" stroke-width="2.4"/>
          <path d="M32 104h26M100 104h22M168 104h24M252 104h28" stroke-width="2.4"/>
          <circle cx="180" cy="122" r="13"/>
          <path d="M180 109v-6"/>
        </g>
      </svg>

      <div class="vbpmp-tabs" id="vbpmp-tabs" role="group" aria-label="Материал фасадов"></div>

      <div class="vbpmp-price">
        <span class="vbpmp-price__lbl">Цена за погонный метр</span>
        <strong class="vbpmp-price__val" id="vbpmp-val">от 32 000 ₽</strong>
        <span class="vbpmp-price__sub" id="vbpmp-sub">Корпус, фасады, столешница и фурнитура с доводчиками</span>
      </div>

      <ul class="vbpmp-rows">
        <li><span>Срок изготовления</span><b id="vbpmp-term">30 рабочих дней</b></li>
        <li><span>Замер и проект в трёх видах</span><b>без оплаты</b></li>
        <li><span>Доставка по городу и сборка</span><b>входят в цену</b></li>
      </ul>

      <p class="vbpmp-note">Цена приведена для прямой кухни длиной от 3 погонных метров. Остров, радиусные фасады и техника считаются отдельными позициями в смете.</p>
    </aside>
  </div>
</section>

<style>
.vbpmp, .vbpmp *, .vbpmp *::before, .vbpmp *::after { box-sizing: border-box; }
.vbpmp {
  --acc: #b06a2c; --acc-dark: #8e5320; --ink: #2a2118; --muted: #7b6a59; --line: #e8dccb; --soft: #f9f3ea; --card: #fff;
  --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;
}
.vbpmp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(26px, 4vw, 56px); align-items: start; }
.vbpmp-tag { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--acc); border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 7px 15px; margin-bottom: 18px; }
.vbpmp-h1 { font-family: var(--fh); font-size: clamp(29px, 4.2vw, 53px); line-height: 1.06; font-weight: 700; letter-spacing: -.022em; margin: 0 0 16px; }
.vbpmp-h1 span { color: var(--acc); }
.vbpmp-lead { font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.6; color: var(--muted); margin: 0 0 28px; max-width: 32em; }

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

.vbpmp-nums { list-style: none; margin: 0; padding: 26px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; }
.vbpmp-nums b { display: block; font-family: var(--fh); font-size: clamp(28px, 3.2vw, 40px); line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--acc); }
.vbpmp-nums span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

.vbpmp-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 2.6vw, 30px); }
.vbpmp-plan { display: block; width: 100%; height: auto; color: #cdb99f; margin-bottom: 18px; }
.vbpmp-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; background: var(--soft); border-radius: 12px; padding: 5px; margin-bottom: 20px; }
.vbpmp-tab { border: 0; margin: 0; padding: 11px 6px; -webkit-appearance: none; appearance: none; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; border-radius: 9px; background: transparent !important; color: var(--muted) !important; transition: .18s ease; }
.vbpmp-tab:hover { color: var(--ink) !important; }
.vbpmp-tab[aria-pressed="true"] { background: var(--card) !important; color: var(--ink) !important; box-shadow: 0 1px 4px rgba(72,48,24,.13); }

.vbpmp-price { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 4px; }
.vbpmp-price__lbl { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.vbpmp-price__val { display: block; font-family: var(--fh); font-size: clamp(28px, 3vw, 36px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.vbpmp-price__sub { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }

.vbpmp-rows { list-style: none; margin: 0; padding: 0; }
.vbpmp-rows li { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.vbpmp-rows li:last-child { border-bottom: 0; }
.vbpmp-rows span { color: var(--muted); }
.vbpmp-rows b { margin-left: auto; text-align: right; font-weight: 600; }
.vbpmp-note { margin: 14px 0 0; font-size: 12px; line-height: 1.55; color: #a2917e; }

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

<script>
(function () {
  /* ── МАТЕРИАЛЫ ФАСАДА: цена за погонный метр и срок ── */
  var MATERIALS = [
    { k: 'ЛДСП',  val: 'от 24 000 ₽', term: '25 рабочих дней', sub: 'Плита 18 мм, кромка 2 мм по периметру, фурнитура с доводчиками' },
    { k: 'Плёнка', val: 'от 32 000 ₽', term: '30 рабочих дней', sub: 'Фасады из плиты средней плотности в плёнке, фрезеровка на выбор' },
    { k: 'Эмаль',  val: 'от 46 000 ₽', term: '35 рабочих дней', sub: 'Покраска в своей камере, любой цвет по вееру, матовый лак' },
    { k: 'Шпон',   val: 'от 58 000 ₽', term: '42 рабочих дня',  sub: 'Дубовый шпон с подбором рисунка, тонировка и масло по выбору' }
  ];

  var roots = document.querySelectorAll('.vbpmp');
  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('#vbpmp-tabs');
    var val = root.querySelector('#vbpmp-val');
    var sub = root.querySelector('#vbpmp-sub');
    var term = root.querySelector('#vbpmp-term');
    var cur = 1;

    tabs.innerHTML = MATERIALS.map(function (m, i) {
      return '<button type="button" class="vbpmp-tab" data-i="' + i + '" aria-pressed="' + (i === cur) + '">' + m.k + '<\/button>';
    }).join('');

    function show(i) {
      cur = i;
      var m = MATERIALS[i];
      val.textContent = m.val; sub.textContent = m.sub; term.textContent = m.term;
      var bs = tabs.querySelectorAll('.vbpmp-tab');
      for (var j = 0; j < bs.length; j++) bs[j].setAttribute('aria-pressed', j === i ? 'true' : 'false');
    }
    tabs.addEventListener('click', function (e) {
      var b = e.target.closest ? e.target.closest('.vbpmp-tab') : null;
      if (b) show(+b.getAttribute('data-i'));
    });
    show(cur);

    var nums = root.querySelectorAll('.vbpmp-nums b');
    function fmt(n) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ' '); }
    function grow(el) {
      var to = +el.getAttribute('data-num') || 0, t0 = 0;
      var slow = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      if (slow) { el.textContent = fmt(to); return; }
      var step = function (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(step);
      };
      requestAnimationFrame(step);
    }
    function all() { for (var j = 0; j < nums.length; j++) grow(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-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.