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

<section class="vbpzk">
  <div class="vbpzk-wrap">
    <div class="vbpzk-top">
      <div class="vbpzk-left">
        <h1 class="vbpzk-h1">ЖК «Северный квартал»</h1>
        <p class="vbpzk-lead">Восемь домов переменной этажности на берегу пруда. Школа и детский сад — внутри квартала, до центра 12 минут по новой развязке.</p>
        <div class="vbpzk-key">
          <div><span>Цена от</span><b>4,9 млн ₽</b></div>
          <div><span>Сдача</span><b>IV квартал 2027</b></div>
        </div>
        <div class="vbpzk-acts">
          <a class="vbpzk-btn" href="#podbor">Получить подборку квартир</a>
          <a class="vbpzk-btn vbpzk-btn--gh" href="#genplan">Смотреть генплан</a>
        </div>
      </div>

      <div class="vbpzk-art">
        <svg viewBox="0 0 460 340" role="img" aria-label="Схематичный вид жилого комплекса" focusable="false">
          <rect width="460" height="340" rx="20" fill="#eef1f4"/>
          <path d="M0 250h460v90H0z" fill="#dfe6ea"/>
          <path d="M0 262q80-16 150 4t150-6 160 8v72H0z" fill="#cfdbe1"/>
          <g fill="#b9c6ce">
            <rect x="44" y="128" width="66" height="130" rx="4"/>
            <rect x="122" y="86" width="74" height="172" rx="4"/>
            <rect x="208" y="146" width="60" height="112" rx="4"/>
            <rect x="280" y="60" width="80" height="198" rx="4"/>
            <rect x="372" y="120" width="52" height="138" rx="4"/>
          </g>
          <g fill="#f4f7f9">
            <rect x="54" y="142" width="12" height="14" rx="2"/><rect x="74" y="142" width="12" height="14" rx="2"/><rect x="94" y="142" width="12" height="14" rx="2"/>
            <rect x="54" y="168" width="12" height="14" rx="2"/><rect x="74" y="168" width="12" height="14" rx="2"/><rect x="94" y="168" width="12" height="14" rx="2"/>
            <rect x="54" y="194" width="12" height="14" rx="2"/><rect x="74" y="194" width="12" height="14" rx="2"/><rect x="94" y="194" width="12" height="14" rx="2"/>
            <rect x="134" y="100" width="12" height="14" rx="2"/><rect x="154" y="100" width="12" height="14" rx="2"/><rect x="174" y="100" width="12" height="14" rx="2"/>
            <rect x="134" y="126" width="12" height="14" rx="2"/><rect x="154" y="126" width="12" height="14" rx="2"/><rect x="174" y="126" width="12" height="14" rx="2"/>
            <rect x="134" y="152" width="12" height="14" rx="2"/><rect x="154" y="152" width="12" height="14" rx="2"/><rect x="174" y="152" width="12" height="14" rx="2"/>
            <rect x="292" y="76" width="14" height="16" rx="2"/><rect x="316" y="76" width="14" height="16" rx="2"/><rect x="340" y="76" width="14" height="16" rx="2"/>
            <rect x="292" y="106" width="14" height="16" rx="2"/><rect x="316" y="106" width="14" height="16" rx="2"/><rect x="340" y="106" width="14" height="16" rx="2"/>
            <rect x="292" y="136" width="14" height="16" rx="2"/><rect x="316" y="136" width="14" height="16" rx="2"/><rect x="340" y="136" width="14" height="16" rx="2"/>
          </g>
          <g fill="#9fb8a6">
            <circle cx="30" cy="242" r="18"/><circle cx="230" cy="252" r="14"/><circle cx="436" cy="246" r="16"/>
          </g>
        </svg>
      </div>
    </div>

    <ul class="vbpzk-params">
      <li><b>8 домов</b><span>переменная этажность 6–17</span></li>
      <li><b>Комфорт+</b><span>класс жилья</span></li>
      <li><b>Чистовая</b><span>с отделкой под ключ</span></li>
      <li><b>1 100 мест</b><span>подземный паркинг</span></li>
      <li><b>2,4 га</b><span>двор без машин</span></li>
    </ul>
  </div>
</section>

<style>
.vbpzk, .vbpzk *, .vbpzk *::before, .vbpzk *::after { box-sizing: border-box; }
.vbpzk {
  --acc: #1f6f5c; --acc-dark: #175646; --ink: #1a2320; --muted: #5c6c67; --line: #dfe6e3; --soft: #f3f7f5;
  --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;
}
.vbpzk-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbpzk-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.vbpzk-h1 { font-family: var(--fh); font-size: clamp(31px, 4.4vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -.025em; margin: 0 0 16px; }
.vbpzk-lead { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6; color: var(--muted); margin: 0 0 26px; max-width: 30em; }
.vbpzk-key { display: flex; gap: 32px; margin-bottom: 28px; }
.vbpzk-key span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.vbpzk-key b { font-family: var(--fh); font-size: clamp(21px, 2.2vw, 28px); font-weight: 700; color: var(--acc); }
.vbpzk-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.vbpzk-btn, .vbpzk-btn:link, .vbpzk-btn:visited, .vbpzk-btn:active, .vbpzk-btn:focus { display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px; border-radius: 10px; font-size: 16px; font-weight: 600;
  background: var(--acc); color: #fff !important; text-decoration: none !important; transition: background .2s ease; }
.vbpzk-btn:hover { background: var(--acc-dark); color: #fff !important; }
.vbpzk-btn--gh, .vbpzk-btn--gh:link, .vbpzk-btn--gh:visited, .vbpzk-btn--gh:active, .vbpzk-btn--gh:focus {
  background: transparent; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--line); }
.vbpzk-btn--gh:hover { background: #fff; color: var(--ink) !important; }

.vbpzk-art svg { display: block; width: 100%; height: auto; border-radius: 20px;
  opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.vbpzk-art.is-in svg { opacity: 1; transform: none; }

.vbpzk-params { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.vbpzk-params li { padding: 20px 22px; border-right: 1px solid var(--line); }
.vbpzk-params li:last-child { border-right: 0; }
.vbpzk-params b { display: block; font-family: var(--fh); font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; }
.vbpzk-params span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 5px; }

@media (max-width: 1000px) { .vbpzk-params { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vbpzk-params li:nth-child(3n) { border-right: 0; } }
@media (max-width: 860px) { .vbpzk-top { grid-template-columns: minmax(0, 1fr); } .vbpzk-art { order: -1; } }
@media (max-width: 560px) {
  .vbpzk-h1 { font-size: clamp(26px, 7.4vw, 34px); }
  .vbpzk-params { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vbpzk-params li { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .vbpzk-art svg { opacity: 1 !important; transform: none !important; transition: none !important; } }
</style>

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var art = root.querySelector('.vbpzk-art');
    if (!art) return;
    if (!('IntersectionObserver' in window)) { art.classList.add('is-in'); return; }
    var io = new IntersectionObserver(function (es) {
      es.forEach(function (e) { if (e.isIntersecting) { art.classList.add('is-in'); io.disconnect(); } });
    }, { rootMargin: '0px 0px -8% 0px' });
    io.observe(art);
    setTimeout(function () { art.classList.add('is-in'); }, 2000);
  }
})();
</script>

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