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

<section class="vbprs">
  <div class="vbprs-wrap">
    <div class="vbprs-art" aria-hidden="true">
      <span class="vbprs-float vbprs-float--1">
        <svg viewBox="0 0 120 120" focusable="false"><circle cx="60" cy="60" r="52" fill="#f2e3cd"/><circle cx="60" cy="60" r="38" fill="#e3cba7"/>
          <path d="M40 58q20-14 40 0" fill="none" stroke="#b78e57" stroke-width="3" stroke-linecap="round"/>
          <circle cx="48" cy="70" r="4" fill="#b78e57"/><circle cx="62" cy="74" r="4" fill="#b78e57"/><circle cx="74" cy="68" r="4" fill="#b78e57"/></svg>
      </span>
      <span class="vbprs-float vbprs-float--2">
        <svg viewBox="0 0 120 120" focusable="false"><path d="M34 26h52l-8 44a18 18 0 0 1-36 0z" fill="#e8d3b6"/>
          <path d="M60 70v26M46 96h28" stroke="#b78e57" stroke-width="4" stroke-linecap="round" fill="none"/>
          <path d="M42 38h36" stroke="#c9a877" stroke-width="3" stroke-linecap="round"/></svg>
      </span>
      <span class="vbprs-float vbprs-float--3">
        <svg viewBox="0 0 120 120" focusable="false"><rect x="26" y="34" width="68" height="52" rx="8" fill="#efe0cb"/>
          <path d="M38 60h44M38 72h30" stroke="#b78e57" stroke-width="3" stroke-linecap="round"/>
          <circle cx="46" cy="48" r="5" fill="#c9a877"/></svg>
      </span>
    </div>

    <div class="vbprs-body">
      <h1 class="vbprs-h1">Кухня без <span>понтов</span><br>и белых перчаток</h1>
      <p class="vbprs-lead">Сезонное меню на восемь позиций. Всё, что можем приготовить хорошо, — готовим. Остального в меню просто нет.</p>

      <ul class="vbprs-info">
        <li><b>12:00 — 23:00</b><span>ежедневно, кухня до 22:30</span></li>
        <li><b>2 200 ₽</b><span>средний чек без алкоголя</span></li>
        <li><b>34 места</b><span>плюс 16 на террасе летом</span></li>
      </ul>

      <div class="vbprs-acts">
        <a class="vbprs-btn" href="#bron">Забронировать стол</a>
        <a class="vbprs-btn vbprs-btn--gh" href="/menyu">Посмотреть меню</a>
      </div>
    </div>
  </div>
</section>

<style>
.vbprs, .vbprs *, .vbprs *::before, .vbprs *::after { box-sizing: border-box; }
.vbprs {
  --acc: #8a5a2b; --acc-dark: #6f4720; --ink: #24201b; --muted: #6d645a; --line: #e5ddd1; --soft: #faf6ef;
  --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(40px, 6vw, 96px) 20px;
  position: relative; overflow: hidden;
}
.vbprs-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); position: relative; }
.vbprs-art { position: absolute; inset: -40px 0 0; pointer-events: none; }
.vbprs-float { position: absolute; display: block; }
.vbprs-float svg { display: block; width: 100%; height: auto; }
.vbprs-float--1 { width: clamp(70px, 9vw, 128px); right: 4%; top: 2%; animation: vbprs-f1 11s ease-in-out infinite; }
.vbprs-float--2 { width: clamp(56px, 7vw, 100px); right: 22%; top: 46%; animation: vbprs-f2 13s ease-in-out infinite; }
.vbprs-float--3 { width: clamp(60px, 7.5vw, 108px); right: 8%; bottom: 2%; animation: vbprs-f3 15s ease-in-out infinite; }
@keyframes vbprs-f1 { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes vbprs-f2 { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(12px) rotate(-5deg); } }
@keyframes vbprs-f3 { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(3deg); } }

.vbprs-body { position: relative; max-width: 62%; }
.vbprs-h1 { font-family: var(--fh); font-size: clamp(32px, 5.4vw, 70px); line-height: 1.02; font-weight: 700; letter-spacing: -.03em; margin: 0 0 20px; }
.vbprs-h1 span { color: var(--acc); font-style: italic; }
.vbprs-lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--muted); margin: 0 0 32px; max-width: 26em; }

.vbprs-info { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; gap: 32px; }
.vbprs-info b { display: block; font-family: var(--fh); font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; }
.vbprs-info span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }

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

@media (max-width: 900px) {
  .vbprs-body { max-width: 100%; }
  .vbprs-float--1 { top: auto; bottom: -20px; right: 2%; opacity: .55; }
  .vbprs-float--2, .vbprs-float--3 { display: none; }
}
@media (max-width: 560px) { .vbprs-h1 { font-size: clamp(27px, 8vw, 38px); } .vbprs-info { gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .vbprs-float { animation: none !important; } }
</style>

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    /* Движение отключаем, если система просит меньше анимации */
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      root.querySelectorAll('.vbprs-float').forEach(function (f) { f.style.animation = 'none'; });
    }
  }
})();
</script>

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