Блок отзывов учеников для сайта онлайн-школы

<section class="vbouc">
  <div class="vbouc-wrap">
    <div class="vbouc-head">
      <div class="vbouc-head__txt">
        <h2 class="vbouc-h2">Кем приходят и кем уходят</h2>
        <p class="vbouc-lead">Мы спрашиваем выпускников через полгода после защиты, когда уже видно, закрепился человек в профессии или нет. Ниже несколько ответов целиком.</p>
      </div>
      <ul class="vbouc-figs" id="vbouc-figs"></ul>
    </div>

    <div class="vbouc-grid" id="vbouc-grid"></div>
  </div>
</section>

<style>
.vbouc, .vbouc *, .vbouc *::before, .vbouc *::after { box-sizing: border-box; }
.vbouc {
  --acc: #4b56d2; --ink: #191b2e; --muted: #5f6280; --line: #e3e4ef; --soft: #f4f4fb;
  --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, 80px) 20px;
}
.vbouc-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbouc-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(20px, 3vw, 48px);
  align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.vbouc-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbouc-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }
.vbouc-figs { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; }
.vbouc-figs li { background: var(--soft); border-radius: 14px; padding: 16px 14px; }
.vbouc-figs b { display: block; font-family: var(--fh); font-size: clamp(20px, 2.2vw, 26px); line-height: 1; font-weight: 700; color: var(--acc); }
.vbouc-figs span { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 7px; }

.vbouc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.vbouc-card { border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 2.2vw, 28px);
  display: flex; flex-direction: column; opacity: 1; }
.vbouc-card.is-hid { opacity: 0; transform: translateY(14px); }
.vbouc-card.is-on { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.vbouc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.vbouc-ava { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-family: var(--fh); font-size: 14px; font-weight: 700; color: #fff; }
.vbouc-name { display: block; font-size: 15.5px; font-weight: 600; }
.vbouc-flow { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.vbouc-path { display: grid; grid-template-columns: 1fr 20px 1fr; align-items: center; gap: 10px; margin-bottom: 16px; }
.vbouc-cell { border-radius: 12px; padding: 11px 13px; background: var(--soft); min-height: 100%; }
.vbouc-cell span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.vbouc-cell b { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.vbouc-cell--now { background: rgba(75, 86, 210, .1); }
.vbouc-cell--now b { color: var(--acc); }
.vbouc-arr { width: 20px; height: 20px; color: #b6bad4; }

.vbouc-txt { margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: var(--muted); flex: 1; }
.vbouc-res { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding-top: 15px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.45; font-weight: 600; }
.vbouc-res svg { flex: 0 0 17px; width: 17px; height: 17px; color: var(--acc); margin-top: 1px; }

@media (max-width: 900px) { .vbouc-head { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 420px) { .vbouc-path { grid-template-columns: minmax(0, 1fr); } .vbouc-arr { transform: rotate(90deg); margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .vbouc-card, .vbouc-card.is-on { transition: none !important; transform: none !important; opacity: 1 !important; } }
</style>

<script>
(function () {
  /* ── ЦИФРЫ НАД ПЛИТКАМИ ── */
  var FIGS = [
    ['3,5 месяца', 'средний срок до первой работы'],
    ['71%', 'выпускников работают по профессии'],
    ['418', 'человек закончили программу']
  ];

  /* ── ОТЗЫВЫ ВЫПУСКНИКОВ ── */
  var GRADS = [
    { name: 'Ирина Малышева', flow: 'Поток 12, осень 2023', c: '#4b56d2',
      was: 'Администратор в салоне', now: 'Младший аналитик', res: 'Первая работа через 2 месяца после защиты',
      text: 'Училась вечерами после смены и первый месяц была уверена, что брошу. Помогло правило куратора сдавать задание в тот же день, когда посмотрел урок, даже если решение кривое. К четвёртому модулю я перестала бояться таблиц на сто тысяч строк, а на собеседовании меня спросили ровно про тот отчёт, который делала в учебном проекте.' },
    { name: 'Павел Коротков', flow: 'Поток 9, весна 2023', c: '#2f8f6f',
      was: 'Инженер-теплотехник', now: 'Разработчик интерфейсов', res: 'Первая работа через 4 месяца после защиты',
      text: 'Мне было 38, и главный вопрос звучал так: возьмут ли вообще. Резюме переписывали трижды, пока в нём не осталось только то, что проверяется ссылкой на работу. Отклики пошли после того, как я выложил три проекта с описанием задачи и решения. Вышел в небольшую студию, через год перешёл в продуктовую команду.' },
    { name: 'Дарья Сорокина', flow: 'Поток 15, зима 2024', c: '#c2694a',
      was: 'Учитель географии', now: 'Инженер по тестированию', res: 'Первая работа через 3 месяца после защиты',
      text: 'Выбрала тестирование, потому что там ценят въедливость, а её у меня за девять лет школы накопилось много. Тяжелее всего дались автотесты, я пересматривала блок дважды и сидела на разборах с другими потоками. Куратор вместо готовых ответов показывал, где искать, и это оказалось полезнее.' },
    { name: 'Антон Веретенников', flow: 'Поток 11, лето 2023', c: '#8a5cd1',
      was: 'Менеджер по продажам', now: 'Аналитик в банке', res: 'Первая работа через 6 недель после защиты',
      text: 'Пришёл за конкретным навыком: перестать просить выгрузки у соседнего отдела и делать их самому. Через полгода это переросло в смену должности внутри той же компании, с прибавкой к окладу. Учебные проекты я делал на своих рабочих данных, поэтому защита выглядела как обычный отчёт руководителю.' },
    { name: 'Мария Тарасова', flow: 'Поток 16, весна 2024', c: '#3f7fb8',
      was: 'Бухгалтер в торговой компании', now: 'Аналитик отчётности', res: 'Первая работа через 5 месяцев после защиты',
      text: 'Училась в декрете, по часу днём и по два вечером. Расписание сдвигала дважды, потери доступа к урокам при этом не было, и догоняла я вместе со следующим потоком. Самым полезным оказался чат: там разбирали ошибки, которые стыдно нести куратору.' },
    { name: 'Сергей Лапин', flow: 'Поток 10, лето 2023', c: '#5f6280',
      was: 'Водитель-экспедитор', now: 'Специалист поддержки продукта', res: 'Первая работа через 3 месяца после защиты',
      text: 'До курса компьютер у меня был для музыки и навигатора. Первые два месяца шли медленно, я разбирал одну тему по три раза. Итог такой: работаю удалённо, зарплата чуть выше прежней, и я перестал проводить в дороге двенадцать часов в сутки.' }
  ];

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var figs = root.querySelector('#vbouc-figs'), grid = root.querySelector('#vbouc-grid');
    var ARR = '<svg class="vbouc-arr" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 12h15m-6-6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><\/svg>';
    var CLK = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 7v5.4l3.2 2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><\/svg>';

    figs.innerHTML = FIGS.map(function (f) {
      return '<li><b>' + f[0] + '<\/b><span>' + f[1] + '<\/span><\/li>';
    }).join('');

    function initials(n) {
      var p = n.split(' ');
      return (p[0] || '').charAt(0) + (p[1] || '').charAt(0);
    }

    grid.innerHTML = GRADS.map(function (g) {
      return '<article class="vbouc-card is-hid">' +
        '<div class="vbouc-top"><span class="vbouc-ava" style="background:' + g.c + '">' + initials(g.name) + '<\/span>' +
        '<span><b class="vbouc-name">' + g.name + '<\/b><span class="vbouc-flow">' + g.flow + '<\/span><\/span><\/div>' +
        '<div class="vbouc-path"><div class="vbouc-cell"><span>Работал до<\/span><b>' + g.was + '<\/b><\/div>' + ARR +
        '<div class="vbouc-cell vbouc-cell--now"><span>Работает сейчас<\/span><b>' + g.now + '<\/b><\/div><\/div>' +
        '<p class="vbouc-txt">' + g.text + '<\/p>' +
        '<p class="vbouc-res">' + CLK + '<span>' + g.res + '<\/span><\/p><\/article>';
    }).join('');

    var cards = grid.querySelectorAll('.vbouc-card');

    function show() {
      for (var i = 0; i < cards.length; i++) {
        (function (c, n) { setTimeout(function () { c.className = 'vbouc-card is-on'; }, n * 90); })(cards[i], i);
      }
    }

    if (!('IntersectionObserver' in window)) { show(); return; }
    var io = new IntersectionObserver(function (es) {
      for (var i = 0; i < es.length; i++) {
        if (es[i].isIntersecting) { show(); io.disconnect(); return; }
      }
    }, { rootMargin: '0px 0px -8% 0px' });
    io.observe(grid);
    setTimeout(show, 2600);
  }
})();
</script>

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