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

<section class="vbpes">
  <div class="vbpes-wrap">
    <div class="vbpes-left">
      <h1 class="vbpes-h1">Салон, где <span>не торопят</span></h1>
      <p class="vbpes-lead">Один мастер — один клиент. Полтора часа только на вас, без пересечений и очереди в коридоре.</p>

      <div class="vbpes-slots">
        <span class="vbpes-slots__ttl">Ближайшие свободные окна</span>
        <div class="vbpes-slots__row" id="vbpes-slots"></div>
      </div>

      <form class="vbpes-form t-form js-form-proccess" role="form" action="#" method="POST"
            data-vibeblock-form="true" data-formactiontype="2" data-error-popup="y" data-success-popup="y"
            data-success-callback="vbpesSuccess" data-inputbox=".vbpes-inp, .vbpes-consent-inp" novalidate>
        <input type="hidden" name="formservices[]" value="HASH_EMAIL" class="js-formaction-services">
        <input type="hidden" name="form_source" value="Первый экран — салон красоты">
        <input type="hidden" name="Vremya" id="vbpes-time" value="">
        <div class="vbpes-row">
          <select name="Usluga" class="vbpes-inp vbpes-sel" aria-label="Услуга">
            <option>Маникюр с покрытием</option>
            <option>Педикюр</option>
            <option>Стрижка и укладка</option>
            <option>Окрашивание</option>
            <option>Брови и ресницы</option>
            <option>Уход за лицом</option>
          </select>
          <input type="tel" name="Phone" class="vbpes-inp js-tilda-rule js-tilda-mask" data-tilda-req="1"
                 data-tilda-rule="phone" data-tilda-mask="+7 (999) 999-99-99" inputmode="tel" placeholder="+7 (___) ___-__-__">
          <button type="submit" class="vbpes-btn t-submit">Записаться</button>
        </div>
        <label class="vbpes-consent">
          <input type="checkbox" name="Privacy" value="Da" class="vbpes-consent-inp js-tilda-rule" data-tilda-req="1">
          <span class="vbpes-consent__box"></span>
          <span>Записываясь, вы соглашаетесь с <a href="/policy" target="_blank" rel="noopener">политикой конфиденциальности</a></span>
        </label>
      </form>
    </div>

    <div class="vbpes-art" aria-hidden="true">
      <svg viewBox="0 0 340 400" focusable="false">
        <defs><clipPath id="vbpes-clip"><rect x="0" y="0" width="340" height="400" rx="28"/></clipPath></defs>
        <g clip-path="url(#vbpes-clip)">
          <rect width="340" height="400" fill="#f3e7e4"/>
          <circle cx="170" cy="150" r="86" fill="#e4cfc9"/>
          <path d="M84 400c0-52 38-92 86-92s86 40 86 92z" fill="#d9bdb5"/>
          <circle cx="170" cy="146" r="62" fill="#efdcd6"/>
          <path d="M132 130c6-22 22-34 38-34s32 12 38 34c4 14 2 30-6 42" fill="none" stroke="#b98d81" stroke-width="3" stroke-linecap="round"/>
          <circle cx="150" cy="150" r="4" fill="#8a6156"/><circle cx="190" cy="150" r="4" fill="#8a6156"/>
          <path d="M160 172q10 8 20 0" fill="none" stroke="#c07a6c" stroke-width="3" stroke-linecap="round"/>
          <g stroke="#c9a79e" stroke-width="2" fill="none">
            <circle cx="52" cy="60" r="16"/><circle cx="292" cy="330" r="22"/><path d="M280 70l18 18M298 70l-18 18"/>
          </g>
        </g>
      </svg>
    </div>
  </div>
</section>

<style>
.vbpes, .vbpes *, .vbpes *::before, .vbpes *::after { box-sizing: border-box; }
.vbpes {
  --acc: #b9705f; --acc-dark: #a25e4e; --ink: #33272a; --muted: #7a6a6c; --line: #e8dcd8; --soft: #faf3f1;
  --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;
}
.vbpes-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.vbpes-h1 { font-family: var(--fh); font-size: clamp(32px, 5vw, 62px); line-height: 1.04; font-weight: 700; letter-spacing: -.025em; margin: 0 0 18px; }
.vbpes-h1 span { color: var(--acc); font-style: italic; }
.vbpes-lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--muted); margin: 0 0 32px; max-width: 28em; }

.vbpes-slots { margin-bottom: 28px; }
.vbpes-slots__ttl { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.vbpes-slots__row { display: flex; flex-wrap: wrap; gap: 8px; }
.vbpes-slot { border: 1.5px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer;
  background: #fff !important; color: var(--ink) !important; border-radius: 999px; padding: 9px 16px; font-size: 14px; transition: .18s ease; }
.vbpes-slot:hover { border-color: var(--acc); }
.vbpes-slot[aria-pressed="true"] { background: var(--acc) !important; border-color: var(--acc); color: #fff !important; }
.vbpes-slot b { font-weight: 600; }
.vbpes-slot i { font-style: normal; opacity: .7; margin-left: 6px; }

.vbpes-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 8px; }
.vbpes-inp { width: 100%; height: 56px; padding: 0 16px; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.vbpes-inp:focus { outline: 2px solid var(--acc); outline-offset: -2px; }
.vbpes-sel { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 25px, calc(100% - 14px) 25px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.vbpes-btn { min-height: 56px; padding: 0 30px; border: 0; margin: 0; -webkit-appearance: none; appearance: none; font: inherit; font-size: 16px;
  font-weight: 600; cursor: pointer; border-radius: 12px; background: var(--acc) !important; color: #fff !important; transition: background .2s ease; white-space: nowrap; }
.vbpes-btn:hover { background: var(--acc-dark) !important; }
.vbpes-consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; cursor: pointer; font-size: 12px; line-height: 1.45; color: var(--muted); }
.vbpes-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.vbpes-consent__box { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid #cbbab6; border-radius: 5px; background: #fff; position: relative; }
.vbpes-consent input:checked + .vbpes-consent__box { background: var(--acc); border-color: var(--acc); }
.vbpes-consent input:checked + .vbpes-consent__box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vbpes-consent a, .vbpes-consent a:link, .vbpes-consent a:visited, .vbpes-consent a:hover, .vbpes-consent a:active, .vbpes-consent a:focus { color: var(--ink) !important; text-decoration: underline !important; }

.vbpes-art svg { display: block; width: 100%; height: auto; border-radius: 28px; }
.vbpes-done { padding: 22px 0; }
.vbpes-done b { display: block; font-family: var(--fh); font-size: 20px; margin-bottom: 6px; }
.vbpes-done span { font-size: 14px; color: var(--muted); }

@media (max-width: 900px) { .vbpes-wrap { grid-template-columns: minmax(0, 1fr); } .vbpes-art { order: -1; max-width: 320px; } }
@media (max-width: 640px) { .vbpes-row { grid-template-columns: minmax(0, 1fr); } .vbpes-h1 { font-size: clamp(27px, 8vw, 38px); } }
@media (prefers-reduced-motion: reduce) { .vbpes * { transition: none !important; } }
</style>

<script>
(function () {
  /* ── БЛИЖАЙШИЕ ОКНА: обновляйте раз в неделю ── */
  var SLOTS = [
    { day: 'Сегодня', time: '18:30' },
    { day: 'Завтра',  time: '11:00' },
    { day: 'Завтра',  time: '16:15' },
    { day: 'Суббота', time: '10:00' }
  ];

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var box = root.querySelector('#vbpes-slots'), hid = root.querySelector('#vbpes-time');

    SLOTS.forEach(function (s, i) {
      var b = document.createElement('button');
      b.type = 'button'; b.className = 'vbpes-slot';
      b.setAttribute('aria-pressed', i === 0 ? 'true' : 'false');
      b.innerHTML = '<b>' + s.day + '<\/b><i>' + s.time + '<\/i>';
      b.addEventListener('click', function () {
        box.querySelectorAll('.vbpes-slot').forEach(function (x) { x.setAttribute('aria-pressed', 'false'); });
        b.setAttribute('aria-pressed', 'true');
        if (hid) hid.value = s.day + ', ' + s.time;
      });
      box.appendChild(b);
    });
    if (hid && SLOTS.length) hid.value = SLOTS[0].day + ', ' + SLOTS[0].time;

    var form = root.querySelector('.vbpes-form');
    if (form && !form.__b) {
      form.__b = 1;
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        var btn = form.querySelector('button[type="submit"], .t-submit');
        if (btn && typeof window.t_forms__initBtnClick === 'function') {
          try { window.t_forms__initBtnClick({ target: btn, srcElement: btn, preventDefault: function () {} }); } catch (_) {}
        }
      });
    }
    if (!window.vbpesSuccess) {
      window.vbpesSuccess = function (f) {
        try { f.innerHTML = '<div class="vbpes-done"><b>Записали<\/b><span>Администратор подтвердит время в мессенджере в ближайшие минуты.<\/span><\/div>'; } catch (e) {}
      };
    }
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно. В форме замените HASH_EMAIL на хеш приёмника из Tilda → Site Settings → Forms.