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

<section class="vbpit">
  <div class="vbpit-wrap">
    <div class="vbpit-left">
      <h1 class="vbpit-h1">Делаем продукты,<br>которые <span>доживают</span> до второго релиза</h1>
      <p class="vbpit-type" id="vbpit-type" aria-live="off"><span id="vbpit-txt"></span><i class="vbpit-cur" aria-hidden="true"></i></p>
      <p class="vbpit-sr">Веб-сервисы, внутренние системы и мобильные приложения под ключ.</p>

      <div class="vbpit-acts">
        <a class="vbpit-btn" href="#brief">Обсудить задачу</a>
        <a class="vbpit-btn vbpit-btn--gh" href="/keysy">Смотреть кейсы</a>
      </div>

      <ul class="vbpit-stack" id="vbpit-stack">
        <li>TypeScript</li><li>React</li><li>Node.js</li><li>PostgreSQL</li><li>Go</li><li>Kubernetes</li><li>Swift</li><li>Kotlin</li>
      </ul>
    </div>

    <div class="vbpit-side">
      <div class="vbpit-metric"><b>7 лет</b><span>средний срок жизни наших проектов в проде</span></div>
      <div class="vbpit-metric"><b>14</b><span>инженеров в штате, без подряда на аутсорс</span></div>
      <div class="vbpit-metric"><b>2 недели</b><span>от брифа до работающего прототипа</span></div>
    </div>
  </div>
</section>

<style>
.vbpit, .vbpit *, .vbpit *::before, .vbpit *::after { box-sizing: border-box; }
.vbpit {
  /* Светлая тема: поменяйте --bg на #fff, --ink на #16181d, --muted на #5c6470 */
  --acc: #6ee787; --acc-dark: #52cf6c; --bg: #0f1116; --panel: #171a21; --ink: #e9edf2; --muted: #8b95a5; --line: #262b34;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  background: var(--bg); color: var(--ink); font-family: var(--f); padding: clamp(40px, 6vw, 96px) 20px;
}
.vbpit-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.vbpit-h1 { font-family: var(--fh); font-size: clamp(30px, 4.4vw, 56px); line-height: 1.06; font-weight: 700; letter-spacing: -.03em; margin: 0 0 20px; }
.vbpit-h1 span { color: var(--acc); }
.vbpit-type { font-family: var(--mono); font-size: clamp(13px, 1.2vw, 16px); line-height: 1.7; color: var(--muted);
  margin: 0 0 30px; min-height: 5.1em; white-space: pre-line; }
.vbpit-cur { display: inline-block; width: 8px; height: 1em; margin-left: 2px; background: var(--acc); vertical-align: text-bottom; animation: vbpit-blink 1.05s steps(1) infinite; }
@keyframes vbpit-blink { 50% { opacity: 0; } }
.vbpit-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vbpit-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.vbpit-btn, .vbpit-btn:link, .vbpit-btn:visited, .vbpit-btn:active, .vbpit-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: #0f1116 !important; text-decoration: none !important; transition: background .2s ease; }
.vbpit-btn:hover { background: var(--acc-dark); color: #0f1116 !important; }
.vbpit-btn--gh, .vbpit-btn--gh:link, .vbpit-btn--gh:visited, .vbpit-btn--gh:active, .vbpit-btn--gh:focus {
  background: transparent; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--line); }
.vbpit-btn--gh:hover { background: var(--panel); color: var(--ink) !important; }

.vbpit-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.vbpit-stack li { font-family: var(--mono); font-size: 12.5px; color: var(--muted); background: var(--panel);
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 11px; }

.vbpit-side { display: grid; gap: 12px; }
.vbpit-metric { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.vbpit-metric b { display: block; font-family: var(--fh); font-size: clamp(24px, 2.6vw, 32px); line-height: 1; font-weight: 700; color: var(--acc); margin-bottom: 8px; }
.vbpit-metric span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

@media (max-width: 900px) { .vbpit-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .vbpit-h1 { font-size: clamp(25px, 7vw, 33px); } .vbpit-type { min-height: 7em; } }
@media (prefers-reduced-motion: reduce) { .vbpit-cur { animation: none; } }
</style>

<script>
(function () {
  /* ── СТРОКИ, которые печатаются под заголовком ── */
  var LINES = [
    'Не гоняемся за модным стеком.',
    'Пишем документацию, пока помним, зачем так сделали.',
    'Передаём проект с тестами, а не с обещанием их написать.',
    'Если задача решается настройкой — говорим об этом, а не продаём разработку.'
  ];
  var SPEED = 22;        /* миллисекунд на символ */
  var PAUSE = 420;       /* пауза между строками */

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var out = root.querySelector('#vbpit-txt');
    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    if (reduce) { out.textContent = LINES.join('\n'); return; }

    var li = 0, ci = 0, acc = '';
    function tick() {
      if (li >= LINES.length) return;
      var line = LINES[li];
      if (ci < line.length) {
        acc += line.charAt(ci++);
        out.textContent = acc;
        setTimeout(tick, SPEED);
      } else {
        acc += '\n'; li++; ci = 0;
        out.textContent = acc;
        setTimeout(tick, PAUSE);
      }
    }
    setTimeout(tick, 250);
  }
})();
</script>

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