Блок «Команда» для сайта digital-агентства

<section class="vbkda">
  <div class="vbkda-wrap">
    <div class="vbkda-head">
      <h2 class="vbkda-h2">Команда</h2>
      <p class="vbkda-lead">Те же люди, что придут на созвон и будут делать вашу задачу. Не отдел продаж и не стоковые фотографии.</p>
    </div>
    <div class="vbkda-grid" id="vbkda-grid"></div>
  </div>
</section>

<style>
.vbkda, .vbkda *, .vbkda *::before, .vbkda *::after { box-sizing: border-box; }
.vbkda {
  --acc: #6ee787; --bg: #0f1116; --panel: #171a21; --ink: #e9edf2; --muted: #8b95a5; --line: #262b34;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  background: var(--bg); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 84px) 20px;
}
.vbkda-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbkda-head { max-width: 42em; margin-bottom: clamp(26px, 3vw, 42px); }
.vbkda-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; margin: 0 0 12px; }
.vbkda-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbkda-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.vbkda-card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.vbkda-card.is-in { opacity: 1; transform: none; }
.vbkda-card svg.vbkda-ph { display: block; width: 100%; height: auto; }
.vbkda-body { padding: 18px 20px 20px; }
.vbkda-name { font-family: var(--fh); font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.vbkda-role { font-size: 13.5px; font-weight: 600; color: var(--acc); margin: 0 0 12px; }
.vbkda-stack { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vbkda-stack li { font-family: var(--mono); font-size: 11.5px; color: var(--muted); background: rgba(255,255,255,.04);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.vbkda-links { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.vbkda-links a, .vbkda-links a:link, .vbkda-links a:visited, .vbkda-links a:active, .vbkda-links a:focus {
  display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,.05); color: var(--muted) !important;
  text-decoration: none !important; transition: .18s ease; }
.vbkda-links a:hover { background: var(--acc); color: #0f1116 !important; }

@media (prefers-reduced-motion: reduce) { .vbkda-card { opacity: 1 !important; transform: none !important; transition: none !important; } }
</style>

<script>
(function () {
  /* ── КОМАНДА: пустая ссылка — кнопка не отрисуется ── */
  var TEAM = [
    { name: 'Дмитрий Косарев', role: 'Технический директор', stack: ['Go', 'PostgreSQL', 'K8s'],
      links: [['GitHub', '#'], ['Telegram', '#']], c1: '#1d2a24', c2: '#6ee787' },
    { name: 'Анна Верещагина', role: 'Продуктовый дизайнер', stack: ['Figma', 'CJM', 'Дизайн-система'],
      links: [['Behance', '#'], ['Telegram', '#']], c1: '#241d2a', c2: '#b98ce7' },
    { name: 'Павел Соловьёв', role: 'Frontend-разработчик', stack: ['TypeScript', 'React', 'Vite'],
      links: [['GitHub', '#']], c1: '#1d232a', c2: '#7cc4e7' },
    { name: 'Марина Литвинова', role: 'Менеджер проектов', stack: ['Scrum', 'Jira', 'Аналитика'],
      links: [['Telegram', '#']], c1: '#2a251d', c2: '#e7c67c' },
    { name: 'Рустам Хайруллин', role: 'Backend-разработчик', stack: ['Python', 'FastAPI', 'Redis'],
      links: [['GitHub', '#'], ['Telegram', '#']], c1: '#1d2a29', c2: '#7ce7d4' },
    { name: 'Ольга Пименова', role: 'QA-инженер', stack: ['Playwright', 'Postman', 'Нагрузка'],
      links: [['Telegram', '#']], c1: '#2a1d22', c2: '#e78ca0' }
  ];

  var roots = document.querySelectorAll('.vbkda');
  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('#vbkda-grid');

    /* SVG-заглушка портрета: замените на <img src="..." alt="Имя, роль"> */
    function portrait(c1, c2, ini) {
      return '<svg class="vbkda-ph" viewBox="0 0 240 180" role="img" aria-label="Портрет сотрудника" focusable="false">' +
        '<rect width="240" height="180" fill="' + c1 + '"/>' +
        '<circle cx="120" cy="76" r="30" fill="' + c2 + '" opacity=".22"/>' +
        '<path d="M72 180c0-27 21-46 48-46s48 19 48 46z" fill="' + c2 + '" opacity=".22"/>' +
        '<text x="120" y="85" text-anchor="middle" font-family="inherit" font-size="24" font-weight="700" fill="' + c2 + '">' + ini + '<\/text><\/svg>';
    }

    grid.innerHTML = TEAM.map(function (t) {
      var ini = t.name.split(' ').map(function (p) { return p.charAt(0); }).join('');
      var links = (t.links || []).filter(function (l) { return l[1]; })
        .map(function (l) { return '<a href="' + l[1] + '" rel="noopener">' + l[0] + '<\/a>'; }).join('');
      return '<article class="vbkda-card">' + portrait(t.c1, t.c2, ini) +
        '<div class="vbkda-body"><h3 class="vbkda-name">' + t.name + '<\/h3>' +
        '<p class="vbkda-role">' + t.role + '<\/p>' +
        '<ul class="vbkda-stack">' + t.stack.map(function (s) { return '<li>' + s + '<\/li>'; }).join('') + '<\/ul>' +
        (links ? '<div class="vbkda-links">' + links + '<\/div>' : '') +
        '<\/div><\/article>';
    }).join('');

    var cards = grid.querySelectorAll('.vbkda-card');
    if (!('IntersectionObserver' in window)) { cards.forEach(function (c) { c.classList.add('is-in'); }); return; }
    var io = new IntersectionObserver(function (es) {
      es.forEach(function (e) {
        if (!e.isIntersecting) return;
        var i = Array.prototype.indexOf.call(cards, e.target);
        e.target.style.transitionDelay = (i % 3) * 65 + 'ms';
        e.target.classList.add('is-in');
        io.unobserve(e.target);
      });
    }, { rootMargin: '0px 0px -10% 0px' });
    cards.forEach(function (c) { io.observe(c); });
    setTimeout(function () { cards.forEach(function (c) { c.classList.add('is-in'); }); }, 2500);
  }
})();
</script>

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