Первый экран для сайта студии дизайна интерьера

<section class="vbpsdz">
  <div class="vbpsdz-wrap">
    <div class="vbpsdz-main">
      <span class="vbpsdz-tag">Студия дизайна интерьера</span>
      <h1 class="vbpsdz-h1">Проект квартиры, по которому <span>бригада работает без вопросов</span></h1>
      <p class="vbpsdz-lead">Планировка, чертежи и ведомости собраны так, чтобы на площадке ничего не приходилось додумывать. Интерьер вы видите в визуализации до того, как куплен первый материал.</p>

      <div class="vbpsdz-acts">
        <a class="vbpsdz-btn" href="#raschet">Рассчитать дизайн-проект</a>
        <a class="vbpsdz-btn vbpsdz-btn--gh" href="#obekty">Посмотреть объекты</a>
      </div>

      <ul class="vbpsdz-nums">
        <li><b data-num="184">0</b><span>квартир и домов спроектировано</span></li>
        <li><b data-num="11">0</b><span>лет студия ведёт объекты</span></li>
        <li><b data-num="9">0</b><span>городов, где были наши объекты</span></li>
      </ul>
    </div>

    <aside class="vbpsdz-card">
      <svg class="vbpsdz-plan" viewBox="0 0 300 96" aria-hidden="true" focusable="false">
        <g fill="none" stroke="currentColor" stroke-width="1.2">
          <path d="M8 88V22h64V8h96v14h64v66"/>
          <path d="M72 88V52h44v36M168 22v30h64"/>
          <path d="M116 52h52" stroke-dasharray="4 4"/>
          <circle cx="204" cy="70" r="9"/>
        </g>
      </svg>

      <div class="vbpsdz-price">
        <span class="vbpsdz-price__lbl">Дизайн-проект под ключ</span>
        <strong class="vbpsdz-price__val">2 400 ₽<i>за м²</i></strong>
        <span class="vbpsdz-price__sub">Полный комплект чертежей, визуализация и ведомости покупок</span>
      </div>

      <ul class="vbpsdz-rows">
        <li><span>Срок работы над проектом</span><b>5-7 недель</b></li>
        <li><span>Выезд на замер</span><b>2 рабочих дня</b></li>
        <li><span>Варианты планировки</span><b>3 штуки</b></li>
        <li><span>Круги правок по планировке</span><b>без лимита</b></li>
      </ul>

      <p class="vbpsdz-note">Цена действует для квартир от 40 м². Дома, мансарды и помещения со сложной геометрией считаем по отдельной ставке.</p>
    </aside>
  </div>
</section>

<style>
.vbpsdz, .vbpsdz *, .vbpsdz *::before, .vbpsdz *::after { box-sizing: border-box; }
.vbpsdz {
  --acc: #9a7b53; --acc-dark: #816543; --ink: #26231e; --muted: #7a736a; --line: #e6e0d6; --soft: #f7f4ef;
  --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(38px, 5.4vw, 92px) 20px;
}
.vbpsdz-wrap { max-width: 1220px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 36px);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 60px); align-items: start; }

.vbpsdz-tag { display: inline-block; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--acc); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 20px; }
.vbpsdz-h1 { font-family: var(--fh); font-size: clamp(30px, 4.2vw, 54px); line-height: 1.08; font-weight: 600;
  letter-spacing: -.022em; margin: 0 0 18px; }
.vbpsdz-h1 span { color: var(--acc); }
.vbpsdz-lead { font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.62; color: var(--muted); margin: 0 0 28px; max-width: 32em; }

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

.vbpsdz-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(150px, 1fr)); gap: 22px; }
.vbpsdz-nums b { display: block; font-family: var(--fh); font-size: clamp(28px, 3vw, 38px); line-height: 1;
  font-weight: 600; letter-spacing: -.02em; }
.vbpsdz-nums span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 8px; max-width: 14em; }

.vbpsdz-card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: clamp(22px, 2.6vw, 32px); }
.vbpsdz-plan { display: block; width: 100%; height: auto; color: #d8d0c3; margin-bottom: 22px; }
.vbpsdz-price { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.vbpsdz-price__lbl { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.vbpsdz-price__val { display: flex; align-items: baseline; gap: 8px; font-family: var(--fh);
  font-size: clamp(30px, 3.4vw, 40px); line-height: 1; font-weight: 600; letter-spacing: -.02em; color: var(--acc); }
.vbpsdz-price__val i { font-style: normal; font-size: 14px; font-weight: 400; color: var(--muted); }
.vbpsdz-price__sub { display: block; font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-top: 10px; }

.vbpsdz-rows { list-style: none; margin: 0; padding: 6px 0 0; }
.vbpsdz-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 13px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.vbpsdz-rows span { color: var(--muted); }
.vbpsdz-rows b { font-weight: 600; text-align: right; white-space: nowrap; }
.vbpsdz-note { margin: 18px 0 0; font-size: 12px; line-height: 1.55; color: #9d968c; }

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

<script>
(function () {
  var roots = document.querySelectorAll('.vbpsdz');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var nums = root.querySelectorAll('.vbpsdz-nums b');
    var DUR = 1100;

    function run(el) {
      var to = parseInt(el.getAttribute('data-num'), 10) || 0;
      var start = 0;
      function frame(now) {
        if (!start) start = now;
        var k = Math.min(1, (now - start) / DUR);
        var e = 1 - Math.pow(1 - k, 3);
        el.textContent = String(Math.round(to * e));
        if (k < 1) requestAnimationFrame(frame);
      }
      if (window.requestAnimationFrame) requestAnimationFrame(frame);
      else el.textContent = String(to);
    }

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

    if (!('IntersectionObserver' in window) || !window.requestAnimationFrame) { 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(function () { if (nums.length && nums[0].textContent === '0') all(); }, 2600);
  }
})();
</script>

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