Отзывы о кухне на заказ для сайта мебельного цеха

<section class="vbok">
  <div class="vbok-wrap">
    <div class="vbok-top">
      <div class="vbok-head">
        <h2 class="vbok-h2">Заказчики о сроках и смете</h2>
        <p class="vbok-lead">Отзыв просим написать через месяц после сборки, когда ящики уже походили, а фасады пережили первую готовку. В каждой плитке стоит срок из договора и итог по смете.</p>
      </div>
      <div class="vbok-tabs" id="vbok-tabs" role="group" aria-label="Что заказывали"></div>
    </div>

    <div class="vbok-grid" id="vbok-grid" aria-live="polite"></div>
    <p class="vbok-sum" id="vbok-sum"></p>
  </div>
</section>

<style>
.vbok, .vbok *, .vbok *::before, .vbok *::after { box-sizing: border-box; }
.vbok {
  --acc: #9d5f2b; --ink: #2a2017; --muted: #7c6b5a; --line: #e8dccc; --soft: #f8f2e8; --card: #fff; --ok: #4c7a44;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--card); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbok-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbok-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(20px, 3vw, 44px);
  align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.vbok-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbok-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 40em; }
.vbok-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.vbok-tab { border: 1.5px solid var(--line); margin: 0; padding: 10px 16px; -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 14px; cursor: pointer; border-radius: 999px;
  background: var(--card) !important; color: var(--muted) !important; transition: .18s ease; }
.vbok-tab:hover { border-color: var(--acc); color: var(--ink) !important; }
.vbok-tab[aria-pressed="true"] { background: var(--acc) !important; border-color: var(--acc); color: #fff !important; }

.vbok-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.vbok-card { background: var(--soft); border-radius: 20px; padding: clamp(20px, 2.3vw, 28px); display: flex; flex-direction: column; }
.vbok-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.vbok-ava { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; background: var(--card); display: flex; align-items: center;
  justify-content: center; font-family: var(--fh); font-size: 17px; font-weight: 700; color: var(--acc); }
.vbok-card h3 { font-size: 15.5px; font-weight: 600; line-height: 1.25; margin: 0; }
.vbok-card__c { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; font-weight: 400; }
.vbok-what { font-size: 14px; line-height: 1.45; font-weight: 600; margin: 0 0 12px; }
.vbok-marks { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.vbok-mark { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.3;
  background: var(--card); border-radius: 999px; padding: 7px 13px; color: var(--muted); }
.vbok-mark svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--acc); }
.vbok-mark--ok { color: var(--ok); }
.vbok-mark--ok svg { color: var(--ok); }
.vbok-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.vbok-sum { margin: clamp(20px, 2.4vw, 30px) 0 0; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.vbok-sum b { color: var(--ink); }

@media (max-width: 900px) { .vbok-top { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (prefers-reduced-motion: reduce) { .vbok * { transition: none !important; } }
</style>

<script>
(function () {
  /* ── ФИЛЬТРЫ ── */
  var TABS = [
    { id: 'all', n: 'Все работы' },
    { id: 'kitchen', n: 'Кухни' },
    { id: 'shkaf', n: 'Шкафы и гардеробные' },
    { id: 'other', n: 'Другая мебель' }
  ];

  /* ── ОТЗЫВЫ: what — заказ, days — срок из договора, cost — итог по смете ── */
  var REVIEWS = [
    { n: 'Марина К.', c: 'улица Гагарина, трёхкомнатная', t: 'kitchen',
      what: 'Кухня 4,2 погонных метра, фасады в эмали', days: '34 рабочих дня', cost: 'Сумма из договора осталась прежней', ok: 1,
      text: 'Выбирали цвет по вееру дома, замерщик оставил образцы на выходные. Собрали за день, вытяжку подключили сами. Через месяц один ящик стал цеплять, мастер приехал и отрегулировал за пятнадцать минут.' },
    { n: 'Дмитрий С.', c: 'посёлок Заречный, дом', t: 'shkaf',
      what: 'Шкаф-купе 2,4 метра в прихожую', days: '19 рабочих дней', cost: 'Добавили 7 800 ₽ за зеркальные двери', ok: 0,
      text: 'Зеркала попросили уже после утверждения проекта, разницу посчитали сразу и показали в новой смете. Двери ходят мягко, порог у пола ровный, пылесос под ним проходит.' },
    { n: 'Ольга В.', c: 'жилой комплекс на Северной', t: 'shkaf',
      what: 'Гардеробная 6 м² с наполнением', days: '26 рабочих дней', cost: 'Сумма из договора осталась прежней', ok: 1,
      text: 'Планировали вдвоём с проектировщиком: высоту штанг подбирали под мой рост, обувные полки под конкретное число пар. Сетчатые корзины поставили выдвижные, они оказались удобнее, чем я думала.' },
    { n: 'Сергей П.', c: 'улица Лесная, кухня-гостиная', t: 'kitchen',
      what: 'Кухня 5,4 погонных метра с островом', days: '41 рабочий день', cost: 'Добавили 12 000 ₽ за кварцевую столешницу', ok: 0,
      text: 'Изначально считали компакт-плиту, но после образцов взяли кварц. Срок из-за этого сдвинулся на неделю, предупредили заранее и написали новую дату в дополнительном соглашении. Остров вышел ровно по чертежу.' },
    { n: 'Екатерина Л.', c: 'улица Садовая, детская', t: 'other',
      what: 'Кровать-чердак со столом и лестницей', days: '23 рабочих дня', cost: 'Сумма из договора осталась прежней', ok: 1,
      text: 'Просила скруглить все углы и вывести розетку к столу. Сделали, ступени добавили противоскользящую накладку по своей инициативе. Сын живёт в этой кровати второй год, стыки держатся.' },
    { n: 'Ирина М.', c: 'улица Мира, съёмная квартира', t: 'kitchen',
      what: 'Кухня 2,8 погонного метра из плёнки', days: '21 рабочий день', cost: 'Сумма из договора осталась прежней', ok: 1,
      text: 'Бюджет был жёсткий, поэтому верхний ряд заменили открытыми полками. Мне подсказали, где можно сэкономить, и не уговаривали на более дорогие фасады. Для сдачи квартиры получилось ровно то, что нужно.' }
  ];

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var tabs = root.querySelector('#vbok-tabs');
    var grid = root.querySelector('#vbok-grid');
    var sum = root.querySelector('#vbok-sum');
    var cur = 'all';

    var ICO_T = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/><\/g><\/svg>';
    var ICO_M = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 6.5"/><\/g><\/svg>';

    tabs.innerHTML = TABS.map(function (t) {
      return '<button type="button" class="vbok-tab" data-id="' + t.id + '" aria-pressed="' + (t.id === cur) + '">' + t.n + '<\/button>';
    }).join('');

    function draw() {
      var list = [];
      for (var j = 0; j < REVIEWS.length; j++) if (cur === 'all' || REVIEWS[j].t === cur) list.push(REVIEWS[j]);
      grid.innerHTML = list.map(function (r) {
        return '<article class="vbok-card"><div class="vbok-card__top">' +
          '<span class="vbok-ava">' + r.n.charAt(0) + '<\/span>' +
          '<h3>' + r.n + '<span class="vbok-card__c">' + r.c + '<\/span><\/h3><\/div>' +
          '<p class="vbok-what">' + r.what + '<\/p>' +
          '<div class="vbok-marks"><span class="vbok-mark">' + ICO_T + r.days + '<\/span>' +
          '<span class="vbok-mark' + (r.ok ? ' vbok-mark--ok' : '') + '">' + ICO_M + r.cost + '<\/span><\/div>' +
          '<p>' + r.text + '<\/p><\/article>';
      }).join('');
      var keep = 0;
      for (var k = 0; k < list.length; k++) if (list[k].ok) keep++;
      sum.innerHTML = 'Показано отзывов: <b>' + list.length + '<\/b>. Из них сумма договора осталась прежней в <b>' + keep +
        '<\/b> случаях, в остальных заказчик сам менял наполнение уже после утверждения проекта.';
    }

    tabs.addEventListener('click', function (e) {
      var b = e.target.closest ? e.target.closest('.vbok-tab') : null;
      if (!b) return;
      cur = b.getAttribute('data-id');
      var bs = tabs.querySelectorAll('.vbok-tab');
      for (var j = 0; j < bs.length; j++) bs[j].setAttribute('aria-pressed', bs[j] === b ? 'true' : 'false');
      draw();
    });

    draw();
  }
})();
</script>

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