Отзывы участников бизнес-клуба

<section class="vbouk">
  <div class="vbouk-wrap">
    <div class="vbouk-head">
      <div class="vbouk-head__t">
        <h2 class="vbouk-h2">Что изменилось у участников</h2>
        <p class="vbouk-lead">Отзывы собраны при продлении участия. Каждый рассказывает, с чем пришёл и что стало через срок, который указан в карточке.</p>
      </div>
      <ul class="vbouk-figs" id="vbouk-figs"></ul>
    </div>

    <div class="vbouk-grid" id="vbouk-grid"></div>

    <div class="vbouk-more"><button type="button" class="vbouk-btn" id="vbouk-btn">Показать остальные отзывы</button></div>

    <p class="vbouk-warn">Это опыт конкретных людей в их рынке и их условиях. Результат зависит от того, сколько вы вкладываете в работу и что происходит вокруг вашего бизнеса, поэтому повторение чужих цифр я не обещаю.</p>
  </div>
</section>

<style>
.vbouk, .vbouk *, .vbouk *::before, .vbouk *::after { box-sizing: border-box; }
.vbouk { --acc: #8a6a2e; --acc-l: #f0e8d6; --ink: #1a1d23; --muted: #616874; --line: #e4e1d9; --soft: #f6f3ec; --deep: #23272f;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: #fff; color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 82px) 20px; }
.vbouk-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 36px); }
.vbouk-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(20px, 3vw, 44px); align-items: end; margin-bottom: clamp(24px, 3.2vw, 42px); }
.vbouk-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -.022em; margin: 0 0 12px; }
.vbouk-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; max-width: 40em; }
.vbouk-figs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.vbouk-figs li { background: var(--soft); border-radius: 14px; padding: 15px 16px; }
.vbouk-figs b { display: block; font-family: var(--fh); font-size: clamp(19px, 2.1vw, 25px); line-height: 1; font-weight: 700; color: var(--acc); }
.vbouk-figs span { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 7px; }
.vbouk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.vbouk-card { border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; }
.vbouk-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.vbouk-ava { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; background: var(--soft); display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-size: 16px; font-weight: 700; color: var(--acc); }
.vbouk-n { display: block; font-size: 15.5px; font-weight: 600; }
.vbouk-s { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.vbouk-term { margin-left: auto; align-self: flex-start; font-size: 11.5px; font-weight: 600; color: var(--acc); background: var(--acc-l); border-radius: 999px; padding: 6px 11px; white-space: nowrap; }
.vbouk-was { display: grid; gap: 1px; background: var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.vbouk-was div { background: var(--soft); padding: 12px 15px; }
.vbouk-was div:last-child { background: var(--deep); }
.vbouk-was i { display: block; font-style: normal; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #9a9382; margin-bottom: 5px; }
.vbouk-was div:last-child i { color: #8d95a2; }
.vbouk-was em { font-style: normal; font-size: 13.5px; line-height: 1.5; }
.vbouk-was div:last-child em { color: #eef0f3; }
.vbouk-card p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.vbouk-hide { display: none; }
.vbouk-more { display: flex; justify-content: center; margin-top: clamp(16px, 2vw, 24px); }
.vbouk-btn { min-height: 54px; padding: 0 30px; border: 1.5px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; border-radius: 12px; background: #fff !important; color: var(--ink) !important; transition: .18s ease; }
.vbouk-btn:hover { border-color: var(--acc); color: var(--acc) !important; }
.vbouk-warn { margin: clamp(22px, 3vw, 34px) 0 0; padding-top: clamp(18px, 2.4vw, 26px); border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.65; color: #8d8676; max-width: 64em; }
@media (max-width: 900px) { .vbouk-head { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 480px) { .vbouk-figs { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .vbouk * { transition: none !important; } }
</style>

<script>
(function () {
  var REVIEWS = [
    { n: 'Андрей К.', b: 'Мебельное производство', m: 9,
      was: 'Выручка 4,2 млн в месяц, сам стоял в цехе и сам вёл клиентов',
      now: 'Нанял руководителя производства, выручка 6,1 млн, в цехе бываю раз в неделю',
      t: 'Пришёл с запросом «нужны продажи», а на разборе выяснилось, что продажи упираются в сроки сборки. Полгода занимались планированием загрузки и наймом, только потом взялись за рекламу. Порядок оказался важнее самих действий.' },
    { n: 'Марина В.', b: 'Сеть студий маникюра', m: 12,
      was: 'Три студии, кассовый разрыв почти каждый месяц',
      now: 'Финмодель по каждой точке, разрывов нет седьмой месяц',
      t: 'Я думала, что проблема в выручке, и открывала четвёртую студию. На клубном разборе мне показали расчёт по точкам: одна из трёх работала в минус два года. Закрыли её, деньги перестали пропадать.' },
    { n: 'Сергей Т.', b: 'Строительство домов', m: 6,
      was: 'Все сделки закрывал лично, в сезон работал без выходных',
      now: 'Отдел из трёх менеджеров, лично веду только крупные проекты',
      t: 'Тяжелее всего было отдать переговоры. Первые два месяца я забирал заявки обратно, и это обсуждали на каждой встрече. Помогло то, что рядом сидели люди, которые прошли то же самое и говорили прямо.' },
    { n: 'Ольга Р.', b: 'Онлайн-школа', m: 8,
      was: 'Оборот рос третий год, прибыль стояла на месте',
      now: 'Убрали два направления из пяти, прибыль выросла на 38%',
      t: 'Разбор юнит-экономики занял три встречи и был неприятным: два продукта, которыми я гордилась, приносили убыток. Решение закрыть их я откладывала месяц. Сейчас считаю его главным за год.' },
    { n: 'Дмитрий Л.', b: 'Оптовые поставки', m: 14,
      was: 'Рабочий день по 12 часов, отпуск последний раз в 2019 году',
      now: 'Неделя укладывается в 40 часов, две недели отпуска без звонков',
      t: 'Мне важно было выбраться из операционки, за новыми стратегиями я не приходил. Собрали регламенты, поставили двух руководителей и договорились о планёрках. Выручка за это время выросла умеренно, зато бизнес перестал держаться на моём графике.' },
    { n: 'Ирина С.', b: 'Кадровое агентство', m: 11,
      was: 'Команда из четырёх человек, каждое решение через меня',
      now: 'Два направления с руководителями, занимаюсь развитием и партнёрами',
      t: 'Клуб для меня прежде всего среда. Когда вокруг предприниматели с оборотами больше моего, планы на год перестают казаться дерзкими. Половину идей за год я взяла из чужих разборов.' }
  ];
  var SHOW = 3;

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var grid = root.querySelector('#vbouk-grid'), btn = root.querySelector('#vbouk-btn'), figs = root.querySelector('#vbouk-figs');
    var sum = 0;
    for (var n = 0; n < REVIEWS.length; n++) sum += REVIEWS[n].m;
    var avg = Math.round(sum / REVIEWS.length);

    figs.innerHTML = [
      ['240', 'участников прошли программу с 2016 года'],
      ['78%', 'продлевают участие в клубе на второй год'],
      [avg + ' мес.', 'средний срок участия в этой подборке']
    ].map(function (f) { return '<li><b>' + f[0] + '<\/b><span>' + f[1] + '<\/span><\/li>'; }).join('');

    grid.innerHTML = REVIEWS.map(function (r, k) {
      return '<article class="vbouk-card' + (k < SHOW ? '' : ' vbouk-hide') + '"><div class="vbouk-top">' +
        '<span class="vbouk-ava">' + r.n.charAt(0) + '<\/span>' +
        '<span><b class="vbouk-n">' + r.n + '<\/b><span class="vbouk-s">' + r.b + '<\/span><\/span>' +
        '<span class="vbouk-term">' + r.m + ' мес. в клубе<\/span><\/div>' +
        '<div class="vbouk-was"><div><i>На входе<\/i><em>' + r.was + '<\/em><\/div>' +
        '<div><i>Сейчас<\/i><em>' + r.now + '<\/em><\/div><\/div><p>' + r.t + '<\/p><\/article>';
    }).join('');

    if (REVIEWS.length <= SHOW) { btn.parentNode.hidden = true; return; }
    btn.addEventListener('click', function () {
      var hidden = grid.querySelectorAll('.vbouk-hide');
      for (var h = 0; h < hidden.length; h++) hidden[h].className = 'vbouk-card';
      btn.parentNode.hidden = true;
    });
  }
})();
</script>

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