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

<section class="vbpad">
  <div class="vbpad-wrap">
    <div class="vbpad-left">
      <span class="vbpad-tag">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l4 6h-3l4 6h-4l3 5H8l3-5H7l4-6H8z"/><path d="M12 20v2"/></g></svg>
        База отдыха «Сосновый берег», 40 км от города
      </span>

      <h1 class="vbpad-h1">Дом с баней в сосновом бору, <span>посуточно</span></h1>
      <p class="vbpad-lead">Шесть отдельных домов на огороженной территории у воды. Дрова наколоты, мангал стоит под навесом, соседей за забором нет.</p>

      <ul class="vbpad-nums">
        <li><b>6</b><span>домов вместимостью от 2 до 12 гостей</span></li>
        <li><b>2 300</b><span>гостей приняли за прошлый год</span></li>
        <li><b>4,9</b><span>средняя оценка после выезда</span></li>
      </ul>

      <div class="vbpad-acts">
        <a class="vbpad-btn" href="#bronirovanie">Забронировать даты</a>
        <a class="vbpad-btn vbpad-btn--gh" href="#doma">Посмотреть дома</a>
      </div>
    </div>

    <aside class="vbpad-card">
      <div class="vbpad-card__top">
        <div class="vbpad-price">
          <span class="vbpad-lbl">Дом «Кедровый», за сутки</span>
          <b id="vbpad-sum">7 900 ₽</b>
          <i id="vbpad-kind">будний день</i>
        </div>
        <div class="vbpad-cap">
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/><path d="M10 20v-6h4v6"/></g></svg>
          <b>до 8 гостей</b>
          <span>3 спальни, баня, беседка с мангалом</span>
        </div>
      </div>

      <p class="vbpad-when" id="vbpad-when">Выберите день заезда</p>
      <div class="vbpad-days" id="vbpad-days" role="group" aria-label="Свободные даты на ближайшие две недели"></div>

      <div class="vbpad-legend">
        <span><i class="vbpad-dot"></i>свободно</span>
        <span><i class="vbpad-dot vbpad-dot--busy"></i>занято</span>
        <span><i class="vbpad-dot vbpad-dot--we"></i>выходные</span>
      </div>

      <p class="vbpad-note">Заезд с 15:00, выезд до 12:00. Постельное бельё, полотенца и дрова для бани входят в стоимость суток.</p>
    </aside>
  </div>
</section>

<style>
.vbpad, .vbpad *, .vbpad *::before, .vbpad *::after { box-sizing: border-box; }
.vbpad {
  --acc: #9dc36a; --acc-dark: #86ad55; --bg: #17251d; --deep: #121c16; --ink: #f1f5ec; --muted: #a3b6a2;
  --card: #fff; --card-ink: #1c2a21; --card-muted: #66796a; --line: #e2e9db;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--bg); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 84px) 20px;
}
.vbpad-wrap { max-width: 1220px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(26px, 4vw, 58px); align-items: center; }

.vbpad-tag { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.35; color: var(--acc);
  border: 1px solid rgba(157, 195, 106, .38); border-radius: 999px; padding: 8px 16px 8px 12px; margin-bottom: 20px; }
.vbpad-tag svg { flex: 0 0 18px; width: 18px; height: 18px; }
.vbpad-h1 { font-family: var(--fh); font-size: clamp(31px, 4.4vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -.024em; margin: 0 0 18px; }
.vbpad-h1 span { color: var(--acc); }
.vbpad-lead { font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.6; color: var(--muted); margin: 0 0 28px; max-width: 30em; }

.vbpad-nums { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; }
.vbpad-nums li { border-top: 1px solid rgba(241, 245, 236, .16); padding-top: 12px; }
.vbpad-nums b { display: block; font-family: var(--fh); font-size: clamp(26px, 2.9vw, 34px); line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.vbpad-nums span { display: block; font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 7px; }

.vbpad-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.vbpad-btn, .vbpad-btn:link, .vbpad-btn:visited, .vbpad-btn:active, .vbpad-btn:focus { display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 30px; border-radius: 14px; font-size: 16px; font-weight: 600;
  background: var(--acc); color: var(--deep) !important; text-decoration: none !important; transition: background .2s ease; }
.vbpad-btn:hover { background: var(--acc-dark); color: var(--deep) !important; }
.vbpad-btn--gh, .vbpad-btn--gh:link, .vbpad-btn--gh:visited { background: transparent; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px rgba(241, 245, 236, .26); }
.vbpad-btn--gh:hover { background: rgba(241, 245, 236, .08); color: var(--ink) !important; }

.vbpad-card { background: var(--card); color: var(--card-ink); border-radius: 24px; padding: clamp(22px, 2.6vw, 30px); }
.vbpad-card__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.vbpad-lbl { display: block; font-size: 12.5px; color: var(--card-muted); margin-bottom: 6px; }
.vbpad-price b { display: block; font-family: var(--fh); font-size: clamp(28px, 3vw, 36px); line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.vbpad-price i { display: block; font-style: normal; font-size: 12.5px; color: var(--card-muted); margin-top: 7px; }
.vbpad-cap { border-left: 1px solid var(--line); padding-left: 16px; }
.vbpad-cap svg { width: 22px; height: 22px; color: #4d7a45; margin-bottom: 6px; }
.vbpad-cap b { display: block; font-size: 15px; font-weight: 600; }
.vbpad-cap span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--card-muted); margin-top: 4px; }

.vbpad-when { font-size: 13px; color: var(--card-muted); margin: 18px 0 12px; }
.vbpad-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.vbpad-day { -webkit-appearance: none; appearance: none; font: inherit; margin: 0; padding: 8px 2px 9px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 11px; background: #fff !important; color: var(--card-ink) !important; text-align: center; transition: .18s ease; }
.vbpad-day em { display: block; font-style: normal; font-size: 10.5px; color: var(--card-muted); }
.vbpad-day b { display: block; font-family: var(--fh); font-size: 15px; font-weight: 600; margin-top: 2px; }
.vbpad-day:hover { border-color: #4d7a45; }
.vbpad-day--we { background: #f3f7ec !important; }
.vbpad-day--on, .vbpad-day--on:hover { background: #2f4c33 !important; border-color: #2f4c33; color: #fff !important; }
.vbpad-day--on em { color: #b9cfb2; }
.vbpad-day--off { cursor: default; opacity: .42; text-decoration: line-through; }
.vbpad-day--off:hover { border-color: var(--line); }

.vbpad-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 11.5px; color: var(--card-muted); }
.vbpad-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vbpad-dot { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--line); background: #fff; }
.vbpad-dot--busy { background: #e5e9e0; border-color: #d6ddcf; }
.vbpad-dot--we { background: #f3f7ec; border-color: #d8e5c5; }
.vbpad-note { margin: 16px 0 0; font-size: 12px; line-height: 1.55; color: #8b9c8d; }

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

<script>
(function () {
  /* ── ЦЕНЫ ЗА СУТКИ И ГОРИЗОНТ КАЛЕНДАРЯ ── */
  var PRICE = { week: 7900, weekend: 11400 };
  var DAYS_AHEAD = 14;
  var WD = ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'];
  var MONTH = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];

  var roots = document.querySelectorAll('.vbpad');
  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('#vbpad-days');
    var sum = root.querySelector('#vbpad-sum');
    var kind = root.querySelector('#vbpad-kind');
    var when = root.querySelector('#vbpad-when');
    if (!box) return;

    function fmt(n) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ' '); }

    var list = [], base = new Date(), first = -1;
    base.setHours(12, 0, 0, 0);
    for (var d = 0; d < DAYS_AHEAD; d++) {
      var dt = new Date(base.getTime() + d * 86400000);
      var wd = dt.getDay();
      var busy = d > 0 && (dt.getDate() % 7 === 3 || dt.getDate() % 9 === 5);
      list.push({ dt: dt, wd: wd, we: wd === 0 || wd === 6, busy: busy });
      if (!busy && first < 0) first = d;
    }
    if (first < 0) first = 0;

    box.innerHTML = list.map(function (it, n) {
      var cls = 'vbpad-day';
      if (it.busy) cls += ' vbpad-day--off';
      else if (it.we) cls += ' vbpad-day--we';
      return '<button type="button" class="' + cls + '" data-n="' + n + '"' + (it.busy ? ' disabled aria-disabled="true"' : '') +
        '><em>' + WD[it.wd] + '<\/em><b>' + it.dt.getDate() + '<\/b><\/button>';
    }).join('');

    var btns = box.querySelectorAll('.vbpad-day');

    function pick(n) {
      var it = list[n];
      if (!it || it.busy) return;
      for (var k = 0; k < btns.length; k++) {
        if (+btns[k].getAttribute('data-n') === n) btns[k].className += ' vbpad-day--on';
        else btns[k].className = btns[k].className.replace(' vbpad-day--on', '');
      }
      var p = it.we ? PRICE.weekend : PRICE.week;
      sum.textContent = fmt(p) + ' ₽';
      kind.textContent = it.we ? 'выходной день' : 'будний день';
      when.textContent = 'Заезд ' + it.dt.getDate() + ' ' + MONTH[it.dt.getMonth()] + ', ' + WD[it.wd] + ', с 15:00';
    }

    for (var j = 0; j < btns.length; j++) {
      btns[j].addEventListener('click', function () { pick(+this.getAttribute('data-n')); });
    }
    pick(first);
  }
})();
</script>

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