Сбер.Среда

Формат участия

Номер телефона

Имя

Фамилия

Email

Telegram

Сфера деятельности

Место работы

Ваша роль

Ваш профессиональный опыт

Подтверждаю, что мне уже есть 18 лет

Согласие на получение обратной связи

Согласие на рекламную рассылку

Согласие на направление информации о подходящих по стажу и специализации вакансиях

Заявка на SberSreda

name

JS x AI meetup

<ResponsiveStyle
  common="
    .flex-cont{
      display: flex;
      justify-content: space-between;
    }
    .what-container{
      position: relative;
      margin: 0 0 50px;
    }
    .what-title-container{
      border-radius: 10px;
      background: #62ECFF;
      padding: 8px 32px 6px 48px;
      width: fit-content;
      position: relative;
      top: 0;
      left: -32px;
      margin: 0 0 50px;
    }
  .what-title-container-meetup{
      border-radius: 10px;
      background: #62ECFF;
      padding: 7px 14px;
      width: fit-content;
      position: static;
      top: 0;
      left: -32px;
      margin: 0 0 50px;
      height: fit-content;
    }
  .meetup{
      width: fit-content;
      font-family: SB Sans Display Extended;
      color: #000;
    }
    .what-title {
      width: fit-content;
      font-family: SB Sans Display Extended;
      font-weight: 600;
      font-size: 64px;
      line-height: 100%;
      color: #000;
      margin: 0;
    }
    .what-text{
      color: #000;
      font-size: 36px;
      line-height: 94%;
      letter-spacing: -0.88px;
      width: 62%;
    }
  .what-card{
    border-radius: 20px;
    padding: 32px;
    background: #62ECFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .what-card-title{
    margin: 0;
    font-weight: 600;
    font-family: SB Sans Display Extended;
    font-size: 64px;
    line-height: 100%;
    letter-spacing: 0;
    color: #000;
  }
  .what-card-text{
    margin: 0;
    color: #000;
    font-family: SB Sans Display;
    font-weight: 400;
    font-size: 32px;
    line-height: 94%;
    letter-spacing: -0.88px;
  }
  .what-card-icon{
    width: 100%;
    height: auto;
    max-width: 90px;
  }
  .what-image{
    display: block;
    width: 36%;
    height: auto;
    max-width: 513px;
    position: absolute;
    right: -48px;
    bottom: -36px;
  }
  .what-image-m{
    display: none;
  }
  .what-cards{
    gap: 28px;
  }
  "
  L="
   .flex-cont{
      flex-direction: column;
    }
   .what-title-container{
      padding: 8px 24px 4px 12px;
      margin: 0 0 30px;
      left: 0;
    }
  .what-title-container-meetup{
      margin: 0 0 30px;
    }
  "
  M="
  .what-card{
    border-radius: 16px;
    padding: 24px;
    gap: 12px;
    grid-column-end: span 2;
  }
  .what-cards{
    gap: 24px;
  }
    .what-title{
      font-size: 48px;
    }
    .what-text{
      width: 100%;
      font-size: 28px;
    }
    .what-title-container{
      margin: 0 0 16px;
    }
    .what-title-container-meetup{
      padding: 6px 10px;
    }
    .what-container{
      margin: 0 0 24px;
    }
   .what-image{
      display: none;
   }
  .what-image-m{
    display: block;
    margin: 0 0 24px;
    width: 100%;
    height: auto;
  }
  .what-card-title{
    font-size: 48px;
  }
  .what-card-text{
    font-size: 28px;
  }
  .what-card-icon{
    max-width: 65px;
  }
  "
  S="
  .what-cards{
    gap: 12px;
  }
  .what-card{
    border-radius: 10px;
    padding: 12px 16px;
    gap: 12px;
  }
  .what-card-title{
    font-size: 28px;
  }
  .what-card-text{
    font-size: 16px;
  }
  .what-card-icon{
    max-width: 45px;
  }
    .what-text{
      font-size: 16px;
    }
    .what-title{
      font-size: 20px;
    }
  "
/>
<div className="what-container">
  <div className="flex-cont">
  <div className="what-title-container">
    <DsplS className="what-title">
      JS x AI митап
    </DsplS>
  </div>
  <div className="what-title-container-meetup"><h3 className="meetup" style={{margin: '0'}}>офлайн/онлайн</h3></div>
  </div>
  <img
    src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/7cdf8732__.png"
    className="what-image-m"
  />
  <TextL className="what-text">
    16 июля встречаемся JS‑сообществом.<br/><br/>
    AI уже меняет JavaScript‑разработку. Вопрос не в том, заменит ли он инженеров, а в том, кто освоит его быстрее и качественнее.<br/><br/>
Обсудим изменения на реальных кейсах от Сбера, Cloud.ru и Mish. Очные участники увидят спецформат от блогеров и пообщаются с экспертами GigaCode и GitVerse.
  </TextL>
  <img
    src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/7cdf8732__.png"
    className="what-image"
  />
</div>
<Grid columns={12} className="what-cards">
  <Cell width={4} className="what-card">
    <h2 className="what-card-title">16.07</h2>
    <TextL className="what-card-text">дата</TextL>
  </Cell>
  <Cell width={4} className="what-card">
    <h2 className="what-card-title">17:00</h2>
    <TextL className="what-card-text">начало</TextL>
  </Cell>
  <Cell width={4} className="what-card">
    <h2 className="what-card-title">120</h2>
    {/*  */}
    <TextL className="what-card-text">мест</TextL>
  </Cell>
</Grid>

<ResponsiveStyle
  common="
  .why-sreda-grid{
    background: #fff;
    border-radius: 40px;
    padding: 68px 56px;
  }
  .why-sreda-title{
    color: #000;
    font-family: SB Sans Display Extended;
    font-weight: 600;
    font-style: Extended Semibold;
    font-size: 64px;
    line-height: 100%;
    letter-spacing: 0;
    margin: 0;
  }
  .why-sreda-text{
    color: #000;
    margin: 0;
    font-size: 36px;
    line-height: 94%;
    letter-spacing: -0.88px;
  }
"
  M="
  .why-sreda-grid{
    border-radius: 32px;
    padding: 32px;
  }
  .why-sreda-title{
    font-size: 48px;
  }
  .why-sreda-text{
    font-size: 28px;
    letter-spacing: -0.6px;
  }"
  S="
  .why-sreda-grid{
    border-radius: 10px;
    padding: 12px;
  }
  .why-sreda-title{
    font-size: 20px;
  }
  .why-sreda-text{
    font-size: 16px;
    letter-spacing: -0.3px;
  }"
/>

<Grid columns={13} className="why-sreda-grid">
  <Cell width={6}>
    <h1 className="why-sreda-title">Подробнее</h1>
  </Cell>
  <Cell width={7}>
    <TextL className="why-sreda-text">
      Когда: 5 июля, встречаемся в 10:00 в пространстве Оригинал, не проспи!
      (Трансляция с докладами с 11:00)
      <br />
      <br />
      Зарегистрируйся на нашем лендинге, чтобы принять участие. Количество очных
      мест ограниченно!
      <br />
      <br />
      Каждый подтверждённый участник сможет пригласить с собой +1 — члена семьи,
      друга или коллегу. Это повод классно провести воскресное утро и показать
      близким свою профессиональную среду.
      <br />
      <br />
      Адрес: ул. Земляной Вал, 9А, Москва
    </TextL>
  </Cell>
</Grid>


<ResponsiveStyle
  common="
  b {
    font-weight: 600;
  }
  .header1 {
    margin: 0;
    font-family: SB Sans Display Extended, sans-serif;
    font-size: 4em;
    font-weight: 600;
  }
  .header2 {
    margin: 0;
    font-family: SB Sans Display Extended, sans-serif;
    font-size: 2.25em;
    font-weight: 600;
  }
  .header3 {
    margin: 0;
    font-family: SB Sans Display Extended, sans-serif;
    font-size: 1.5em;
    font-weight: 600;
  }
  .main-text {
    margin: 0;
    font-family: SB Sans Text, Roboto;
    font-size: 2.25em;
    line-height: 0.94;
    letter-spacing: -0.055em;
  }
  .middle-text {
    margin: 0;
    font-family: SB Sans Text, Roboto;
    font-size: 2em;
    line-height: 0.94;
    letter-spacing: -0.055em;
  }
  .little-text {
    margin: 0;
    font-family: SB Sans Text, Roboto;
    font-size: 1.5em;
    line-height: 0.94;
    letter-spacing: -0.055em;
  }
  .semibold-text {
    margin: 0;
    font-family: SB Sans Text, Roboto;
    font-size: 1.5em;
    font-weight: 600;
    line-height: 0.94;
    letter-spacing: -0.023em;
  }
  .small-semibold-text {
    margin: 0;
    font-family: SB Sans Text, Roboto;
    font-size: 1em;
    font-weight: 600;
    line-height: 0.94;
    letter-spacing: -0.023em;
  }
  .small-text {
    margin: 0;
    font-family: SB Sans Text, Roboto;
    font-size: 1.125em;
    line-height: 0.94;
    letter-spacing: -0.055em;
  }
  .section-header {
    margin-left: -1.938em;
    padding: 0.75em 0.625em 0.625em 1.938em;
    border-radius: 0.625em;
  }
  .green-highlighted-text {
    background-color: #62ECFF;
  }
  .about-us {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
    margin: 0 auto;
    font-size: clamp(4.676px, calc(1.078507vw + 0.469498px), 16px) !important;
  }
  .about-us .bio {
    display: flex;
    flex-direction: row;
    gap: 1.125em;
  }
  .about-us .bio .avatar {
    margin: 0 0 -0.563em -0.813em;
    width: 22em;
    height: 23.375em;
  }
  .about-us .bio .text-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.625em;
    padding-top: 1.875em;
  }
  .about-us .bio .text-content .line {
    display: flex;
    flex-direction: column;
    gap: 0.625em;
    color: #000;
  }
  .slider-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 19.75em;
    overflow: hidden;
  }
  .slider-track {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 16.875em;
    height: 19.75em;
    border-radius: 1.25em;
    overflow: hidden;
    cursor: pointer;
    transform-origin: top left;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.5s ease,
                height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
  }
  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .slide.active {
    width: 17.75em;
    height: 13.5em;
    transform: translate(0, 0);
    opacity: 1;
  }
  .slide.right-1 {
    transform: translate(19.625em, 0);
    opacity: 1;
  }
  .slide.right-2 {
    transform: translate(38.375em, 0);
    opacity: 1;
  }
  .slide.right-3 {
    transform: translate(57.125em, 0);
    opacity: 1;
  }
  .slide.left-1 {
    height: 13.375em;
    transform: translate(-19.625em, 0);
    opacity: 0.6;
  }
  .slide.left-2 {
    height: 13.375em;
    transform: translate(-38.375em, 0);
    opacity: 0.3;
  }
  .slide.out-of-view {
    transform: translate(75.875em, 0);
    opacity: 0;
    pointer-events: none;
  }
  .slider-nav {
    position: absolute;
    left: 9.625em;
    top: 15.125em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5em;
  }
  .nav-arrows {
    display: flex;
    align-items: center;
    gap: 1em;
  }
  .nav-arrow {
    padding: 0;
    height: 2.5em;
    border: none;
    background: none;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: inherit;
    user-select: none;
    cursor: pointer;
  }
  .nav-arrow-next {
    width: 4.625em;
    background-image: url(https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/f88ca95a_arrow-next.png);
  }
  .nav-arrow-prev {
    width: 2.5em;
    background-image: url(https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/bc28a356_arrow-prev.png);
  }
  .nav-counter {
    color: #000;
  }
  "
  S="
  .header1 {
    font-size: 20px;
  }
  .section-subheader {
    font-size: 16px;
  }
  .about-us #aboutUsName {
    font-size: 14px;
  }
  .about-us #aboutUsRole {
    font-size: 10px;
  }
  .about-us #aboutUsSkillLabel {
    font-size: 10px;
  }
  .about-us #aboutUsSkill {
    font-size: 10px;
  }
  .about-us #navCounter {
    font-size: 10px;
  }
  .slider-wrapper .nav-arrows {
    display: none;
  }
  "
/>

<div className="about-us">
  <div style={{ color: "#000" }}>
    <div className="section-header green-highlighted-text">
      <div className="header1">Спикеры очно с трансляцией</div>
    </div>
    <div
      className="little-text section-subheader"
      style={{ marginTop: "0.25em" }}
    >
      Живые герои, а не корпоративные аватарки. У каждого — своя рабочая сторона
    </div>
  </div>
  <div className="bio">
    <img
      id="aboutUsAvatar"
      src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/01338851_About_Us-1.png"
      alt="Аватар"
      className="avatar"
    />
    <div className="text-content">
      <div className="line">
        <h3 id="aboutUsName" className="header3">
          Михаил Харитончик
        </h3>
        <div id="aboutUsRole" className="little-text">
          Лидер продукта GenUI в Цифровом ассистенте | Сбер
        </div>
      </div>
      <div className="line" style={{ maxWidth: "28.125em" }}>
        <div id="aboutUsSkillLabel" className="semibold-text">
          GenUI. Интерфейс без приложения
        </div>
        <div id="aboutUsSkill" className="small-text">
          Приложения служат лишь посредниками для достижения целей (такси, оплата, планирование), но агенты меняют эту логику, беря выполнение задач на себя. В новой парадигме интерфейс нужен не из экранов с навигацией. Доклад про будущее агентских OS и новую парадигму построения UI
        </div>
      </div>
    </div>
  </div>
  <div className="slider-wrapper">
    <div className="slider-track" id="sliderTrack"></div>
    <div className="slider-nav">
      <div className="nav-arrows">
        <button className="nav-arrow nav-arrow-prev" id="btnPrev"></button>
        <button className="nav-arrow nav-arrow-next" id="btnNext"></button>
      </div>
      <div className="nav-counter little-text" id="navCounter">
        01 / 04
      </div>
    </div>
  </div>
</div>

<Script>
  {`
(function () {
  const slidesData = [
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/01338851_About_Us-1.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/203362fc_haritonchik_slide.png',
      name: 'Михаил Харитончик',
      role: 'Лидер продукта GenUI в Цифровом ассистенте | Сбер',
      topic: 'GenUI. Интерфейс без приложения',
      skill: 'Приложения служат лишь посредниками для достижения целей (такси, оплата, планирование), но агенты меняют эту логику, беря выполнение задач на себя. В новой парадигме интерфейс нужен не из экранов с навигацией. Доклад про будущее агентских OS и новую парадигму построения UI',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/7479c855_avdeev_ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/bb7958f1_avdeev_slide.jpg',
      name: 'Алексей Авдеев',
      role: 'Технический директор | Mish',
      topic: 'Фронтендер нерентабелен: закат эпохи узких специалистов',
      skill: 'Расскажу, как ИИ-агенты меняют экономику веб-разработки. Обсудим наш опыт интеграции нейросетей, трансформацию написания кода и реальные цифры: как изменилась себестоимость проектов. Разберем, почему чистый фронтенд умирает и как адаптироваться к будущему.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/311c7c99_About_Us-2.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/cb00977a_starodubcev_slide.png',
      name: 'Алекcандр Стародубцев',
      role: 'Технический лидер | Cloud.ru',
      topic: '10 из 11 бэкендеров в команде вайбкодят фронт',
      skill: 'Во что трансформируются привычные нам роли? Конец привычной разработке? Всё не так просто, как кажется на первый взгляд...',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/d7ef8f79_troickiy_ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/770d91bf_DSC07218.jpg',
      name: 'Троицкий Роман',
      role: 'Руководитель направления по исследованию данных | Сбер',
      topic: 'Добро пожаловать в новый веб с MCP Apps',
      skill: 'Раньше на интерактив мы уводили пользователя по ссылке в отдельное приложение. Теперь — не нужно: с MCP Apps компонент рендерится прямо в чате, рядом с диалогом, который его вызвал. Разберём минимальный путь от ui://-ресурса до кнопки, которая дёргает тул на сервере.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/01338851_About_Us-1.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/203362fc_haritonchik_slide.png',
      name: 'Михаил Харитончик',
      role: 'Лидер продукта GenUI в Цифровом ассистенте | Сбер',
      topic: 'GenUI. Интерфейс без приложения',
      skill: 'Приложения служат лишь посредниками для достижения целей (такси, оплата, планирование), но агенты меняют эту логику, беря выполнение задач на себя. В новой парадигме интерфейс нужен не из экранов с навигацией. Доклад про будущее агентских OS и новую парадигму построения UI',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/7479c855_avdeev_ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/bb7958f1_avdeev_slide.jpg',
      name: 'Алексей Авдеев',
      role: 'Технический директор | Mish',
      topic: 'Фронтендер нерентабелен: закат эпохи узких специалистов',
      skill: 'Расскажу, как ИИ-агенты меняют экономику веб-разработки. Обсудим наш опыт интеграции нейросетей, трансформацию написания кода и реальные цифры: как изменилась себестоимость проектов. Разберем, почему чистый фронтенд умирает и как адаптироваться к будущему.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/311c7c99_About_Us-2.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/cb00977a_starodubcev_slide.png',
      name: 'Алекcандр Стародубцев',
      role: 'Технический лидер | Cloud.ru',
      topic: '10 из 11 бэкендеров в команде вайбкодят фронт',
      skill: 'Во что трансформируются привычные нам роли? Конец привычной разработке? Всё не так просто, как кажется на первый взгляд...',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/d7ef8f79_troickiy_ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/770d91bf_DSC07218.jpg',
      name: 'Троицкий Роман',
      role: 'Руководитель направления по исследованию данных | Сбер',
      topic: 'Добро пожаловать в новый веб с MCP Apps',
      skill: 'Раньше на интерактив мы уводили пользователя по ссылке в отдельное приложение. Теперь — не нужно: с MCP Apps компонент рендерится прямо в чате, рядом с диалогом, который его вызвал. Разберём минимальный путь от ui://-ресурса до кнопки, которая дёргает тул на сервере.',
    }
  ];

  const track = document.getElementById('sliderTrack');
  const btnPrev = document.getElementById('btnPrev');
  const btnNext = document.getElementById('btnNext');
  const navCounter = document.getElementById('navCounter');

  const totalSlides = slidesData.length;
  const realTotalSlides = 4;
  let currentIndex = 0;
  let slideElements = [];

  slidesData.forEach((data, i) => {
    const slide = document.createElement('div');
    slide.className = 'slide';
    const image = document.createElement('img');
    image.setAttribute('src', data.slide);
    slide.appendChild(image);
    slide.addEventListener('click', () => goToSlide(i));
    track.appendChild(slide);
    slideElements.push(slide);
  });

  function updateSlider() {
    const data = slidesData[currentIndex];
    document.getElementById('aboutUsAvatar').setAttribute('src', data.avatar);
    document.getElementById('aboutUsName').textContent = data.name;
    document.getElementById('aboutUsRole').textContent = data.role;
    document.getElementById('aboutUsSkillLabel').textContent = data.topic;
    document.getElementById('aboutUsSkill').textContent = data.skill;

    slideElements.forEach((slide, i) => {
      slide.classList.remove('active', 'right-1', 'right-2', 'right-3', 'left-1', 'left-2', 'out-of-view');
      let diff = (i - currentIndex + totalSlides) % totalSlides;
      let relativePos = diff > totalSlides / 2 ? diff - totalSlides : diff;

      if (relativePos === 0) slide.classList.add('active');
      else if (relativePos === 1) slide.classList.add('right-1');
      else if (relativePos === 2) slide.classList.add('right-2');
      else if (relativePos === 3) slide.classList.add('right-3');
      else if (relativePos === -1) slide.classList.add('left-1');
      else if (relativePos === -2) slide.classList.add('left-2');
      else slide.classList.add('out-of-view');
    });

    navCounter.textContent = 
      String((currentIndex % realTotalSlides) + 1).padStart(2, '0') + ' / ' + 
      String(realTotalSlides).padStart(2, '0');
  }

  function goToSlide(index) {
    currentIndex = index;
    updateSlider();
  }

  function nextSlide() {
    currentIndex = (currentIndex + 1) % totalSlides;
    updateSlider();
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
    updateSlider();
  }

  btnNext.addEventListener('click', nextSlide);
  btnPrev.addEventListener('click', prevSlide);

  updateSlider();
})();
`}
</Script>


<ResponsiveStyle
  common="
  b {
    font-weight: 600;
  }
  .header1 {
    margin: 0;
    font-family: SB Sans Display Extended, sans-serif;
    font-size: 4em;
    font-weight: 600;
  }
  .header2 {
    margin: 0;
    font-family: SB Sans Display Extended, sans-serif;
    font-size: 2.25em;
    font-weight: 600;
  }
  .header3 {
    margin: 0;
    font-family: SB Sans Display Extended, sans-serif;
    font-size: 1.5em;
    font-weight: 600;
  }
  .main-text {
    margin: 0;
    font-family: SB Sans Text, Roboto;
    font-size: 2.25em;
    line-height: 0.94;
    letter-spacing: -0.055em;
  }
  .middle-text {
    margin: 0;
    font-family: SB Sans Text, Roboto;
    font-size: 2em;
    line-height: 0.94;
    letter-spacing: -0.055em;
  }
  .little-text {
    margin: 0;
    font-family: SB Sans Text, Roboto;
    font-size: 1.5em;
    line-height: 0.94;
    letter-spacing: -0.055em;
  }
  .semibold-text {
    margin: 0;
    font-family: SB Sans Text, Roboto;
    font-size: 1.5em;
    font-weight: 600;
    line-height: 0.94;
    letter-spacing: -0.023em;
  }
  .small-semibold-text {
    margin: 0;
    font-family: SB Sans Text, Roboto;
    font-size: 1em;
    font-weight: 600;
    line-height: 0.94;
    letter-spacing: -0.023em;
  }
  .small-text {
    margin: 0;
    font-family: SB Sans Text, Roboto;
    font-size: 1.125em;
    line-height: 0.94;
    letter-spacing: -0.055em;
  }
  .section-header {
    margin-left: -1.938em;
    padding: 0.75em 0.625em 0.625em 1.938em;
    border-radius: 0.625em;
  }
  .green-highlighted-text {
    background-color: #62ECFF;
  }
  .about-us {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
    margin: 0 auto;
    font-size: clamp(4.676px, calc(1.078507vw + 0.469498px), 16px) !important;
  }
  .about-us .bio {
    display: flex;
    flex-direction: row;
    gap: 1.125em;
  }
  .about-us .bio .avatar {
    margin: 0 0 -0.563em -0.813em;
    width: 22em;
    height: 23.375em;
  }
  .about-us .bio .text-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.625em;
    padding-top: 1.875em;
  }
  .about-us .bio .text-content .line {
    display: flex;
    flex-direction: column;
    gap: 0.625em;
    color: #000;
  }
  .slider-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 19.75em;
    overflow: hidden;
  }
  .slider-track {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 16.875em;
    height: 19.75em;
    border-radius: 1.25em;
    overflow: hidden;
    cursor: pointer;
    transform-origin: top left;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.5s ease,
                height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
  }
  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .slide.active {
    width: 17.75em;
    height: 13.5em;
    transform: translate(0, 0);
    opacity: 1;
  }
  .slide.right-1 {
    transform: translate(19.625em, 0);
    opacity: 1;
  }
  .slide.right-2 {
    transform: translate(38.375em, 0);
    opacity: 1;
  }
  .slide.right-3 {
    transform: translate(57.125em, 0);
    opacity: 1;
  }
  .slide.left-1 {
    height: 13.375em;
    transform: translate(-19.625em, 0);
    opacity: 0.6;
  }
  .slide.left-2 {
    height: 13.375em;
    transform: translate(-38.375em, 0);
    opacity: 0.3;
  }
  .slide.out-of-view {
    transform: translate(75.875em, 0);
    opacity: 0;
    pointer-events: none;
  }
  .slider-nav {
    position: absolute;
    left: 9.625em;
    top: 15.125em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5em;
  }
  .nav-arrows {
    display: flex;
    align-items: center;
    gap: 1em;
  }
  .nav-arrow {
    padding: 0;
    height: 2.5em;
    border: none;
    background: none;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: inherit;
    user-select: none;
    cursor: pointer;
  }
  .nav-arrow-next {
    width: 4.625em;
    background-image: url(https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/f88ca95a_arrow-next.png);
  }
  .nav-arrow-prev {
    width: 2.5em;
    background-image: url(https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/bc28a356_arrow-prev.png);
  }
  .nav-counter {
    color: #000;
  }
  "
  S="
  .header1 {
    font-size: 20px;
  }
  .section-subheader {
    font-size: 16px;
  }
  .about-us #aboutUsName {
    font-size: 14px;
  }
  .about-us #aboutUsRole {
    font-size: 10px;
  }
  .about-us #aboutUsSkillLabel {
    font-size: 10px;
  }
  .about-us #aboutUsSkill {
    font-size: 10px;
  }
  .about-us #navCounter {
    font-size: 10px;
  }
  .slider-wrapper .nav-arrows {
    display: none;
  }
  "
/>

<div className="about-us">
  <div style={{ color: "#000" }}>
    <div className="section-header green-highlighted-text">
      <div className="header1">Спикеры очно</div>
    </div>
    <div
      className="little-text section-subheader"
      style={{ marginTop: "0.25em" }}
    >
      Живые герои, а не корпоративные аватарки. У каждого — своя рабочая сторона
    </div>
  </div>
  <div className="bio">
    <img
      id="aboutUsAvatar1"
      src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/f95295d8_nepsha_ava.png"
      alt="Аватар"
      className="avatar"
    />
    <div className="text-content">
      <div className="line">
        <h3 id="aboutUsName1" className="header3">
          Антон Непша
        </h3>
        <div id="aboutUsRole1" className="little-text">
          Staff Engineer | Сбер
        </div>
      </div>
      <div className="line" style={{ maxWidth: "28.125em" }}>
        <div id="aboutUsSkillLabel1" className="semibold-text">
          Я использую GigaChat API в production и мне есть что рассказать
        </div>
        <div id="aboutUsSkill1" className="small-text">
          Ругать инструмент за его недостатки может каждый. А вот выжать из имеющегося инструмента максимальное качество смогут далеко не все. Спустя 2,5 года разработки агентов на GigaChat API я могу и то, и другое
        </div>
      </div>
    </div>
  </div>
  <div className="slider-wrapper">
    <div className="slider-track" id="sliderTrack1"></div>
    <div className="slider-nav">
      <div className="nav-arrows">
        <button className="nav-arrow nav-arrow-prev" id="btnPrev1"></button>
        <button className="nav-arrow nav-arrow-next" id="btnNext1"></button>
      </div>
      <div className="nav-counter little-text" id="navCounter1">
        01 / 04
      </div>
    </div>
  </div>
</div>

<Script>
  {`
(function () {
  // Исправлен массив данных: добавлены все поля для 7-го слайда
  const slidesData = [
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/f95295d8_nepsha_ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/0616262b_nepsha_slide.png',
      name: 'Антон Непша',
      role: 'Staff Engineer | Сбер',
      topic: 'Я использую GigaChat API в production и мне есть что рассказать',
      skill: 'Ругать инструмент за его недостатки может каждый. А вот выжать из имеющегося инструмента максимальное качество смогут далеко не все. Спустя 2,5 года разработки агентов на GigaChat API я могу и то, и другое',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/33a7e505_arutunyan_ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/4e124d6b_arutunyan_slide.png',
      name: 'Артём Арутюнян',
      role: 'Ведущий разработчик | Сloud.ru',
      topic: 'WebMCP - хорошо для пользователей и разработчика',
      skill: 'Удивительным образом хорошая архитектура может не только помогать разработчику поддерживать свою кодовую базу, но и упрощать разработку агент-специфичных фич. Посмотрим демки управления веб приложениями через агента, разберем зачем и когда это нужно, а так же как это внедрить к себе проще всего.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/7ac1b70e_About_Us-3.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/6a78e61f_yashin_slide.png',
      name: 'Артём Яшин',
      role: 'Автор канала «Onigiri»',
      topic: 'Строим архитектуру проекта под ИИ-агента',
      skill: 'Мы привыкли проектировать архитектуру для людей. Но что изменится, если основным разработчиком станет AI-агент? Разберём принципы построения проектов, которые позволяют агентам работать значительно эффективнее',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/30065d41_miheev_ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/da54474d_39CF4C1E-CA6B-4EBE-82B9-5FD6CF7ED710..png',
      name: 'Глеб Михеев',
      role: 'Исполнительный директор ГигаЧат | Сбер',
      topic: 'AI диссиденты, динозавры и крокодилы',
      skill: 'Можно ли разработать продакшен приложение на миллионную аудиторию полностью агентами? Разберем: У меня агенты делают фигню; Они пишут не так как я хочу; Вообще я имел ввиду другое и другие сопротивления отрицателей агентного инжиниринга',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/f95295d8_nepsha_ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/0616262b_nepsha_slide.png',
      name: 'Антон Непша',
      role: 'Staff Engineer | Сбер',
      topic: 'Я использую GigaChat API в production и мне есть что рассказать',
      skill: 'Ругать инструмент за его недостатки может каждый. А вот выжать из имеющегося инструмента максимальное качество смогут далеко не все. Спустя 2,5 года разработки агентов на GigaChat API я могу и то, и другое',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/33a7e505_arutunyan_ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/4e124d6b_arutunyan_slide.png',
      name: 'Артём Арутюнян',
      role: 'Ведущий разработчик | Сloud.ru',
      topic: 'WebMCP - хорошо для пользователей и разработчика',
      skill: 'Удивительным образом хорошая архитектура может не только помогать разработчику поддерживать свою кодовую базу, но и упрощать разработку агент-специфичных фич. Посмотрим демки управления веб приложениями через агента, разберем зачем и когда это нужно, а так же как это внедрить к себе проще всего.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/7ac1b70e_About_Us-3.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/6a78e61f_yashin_slide.png',
      name: 'Артём Яшин',
      role: 'Автор канала «Onigiri»',
      topic: 'Строим архитектуру проекта под ИИ-агента',
      skill: 'Мы привыкли проектировать архитектуру для людей. Но что изменится, если основным разработчиком станет AI-агент? Разберём принципы построения проектов, которые позволяют агентам работать значительно эффективнее',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/30065d41_miheev_ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/da54474d_39CF4C1E-CA6B-4EBE-82B9-5FD6CF7ED710..png',
      name: 'Глеб Михеев',
      role: 'Исполнительный директор ГигаЧат | Сбер',
      topic: 'AI диссиденты, динозавры и крокодилы',
      skill: 'Можно ли разработать продакшен приложение на миллионную аудиторию полностью агентами? Разберем: У меня агенты делают фигню; Они пишут не так как я хочу; Вообще я имел ввиду другое и другие сопротивления отрицателей агентного инжиниринга',
    }
  ];

  const track = document.getElementById('sliderTrack1');
  const btnPrev = document.getElementById('btnPrev1');
  const btnNext = document.getElementById('btnNext1');
  const navCounter = document.getElementById('navCounter1');

  const totalSlides = slidesData.length;
  const realTotalSlides = 4;
  let currentIndex = 0;
  let slideElements = [];

  slidesData.forEach((data, i) => {
    const slide = document.createElement('div');
    slide.className = 'slide';
    const image = document.createElement('img');
    image.setAttribute('src', data.slide);
    slide.appendChild(image);
    slide.addEventListener('click', () => goToSlide(i));
    track.appendChild(slide);
    slideElements.push(slide);
  });

  function updateSlider() {
    const data = slidesData[currentIndex];
    document.getElementById('aboutUsAvatar1').setAttribute('src', data.avatar);
    document.getElementById('aboutUsName1').textContent = data.name;
    document.getElementById('aboutUsRole1').textContent = data.role;
    document.getElementById('aboutUsSkillLabel1').textContent = data.topic;
    document.getElementById('aboutUsSkill1').textContent = data.skill;

    slideElements.forEach((slide, i) => {
      slide.classList.remove('active', 'right-1', 'right-2', 'right-3', 'left-1', 'left-2', 'out-of-view');
      let diff = (i - currentIndex + totalSlides) % totalSlides;
      let relativePos = diff > totalSlides / 2 ? diff - totalSlides : diff;

      if (relativePos === 0) slide.classList.add('active');
      else if (relativePos === 1) slide.classList.add('right-1');
      else if (relativePos === 2) slide.classList.add('right-2');
      else if (relativePos === 3) slide.classList.add('right-3');
      else if (relativePos === -1) slide.classList.add('left-1');
      else if (relativePos === -2) slide.classList.add('left-2');
      else slide.classList.add('out-of-view');
    });

    navCounter.textContent = 
      String((currentIndex % realTotalSlides) + 1).padStart(2, '0') + ' / ' + 
      String(realTotalSlides).padStart(2, '0');
  }

  function goToSlide(index) {
    currentIndex = index;
    updateSlider();
  }

  function nextSlide() {
    currentIndex = (currentIndex + 1) % totalSlides;
    updateSlider();
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
    updateSlider();
  }

  btnNext.addEventListener('click', nextSlide);
  btnPrev.addEventListener('click', prevSlide);

  updateSlider();
})();
`}
</Script>

<ResponsiveStyle
  common={
    ".event-photos { --ep-green: #5cff8d; --ep-black: #080808; --ep-radius-card: 20px; --ep-radius-section: 40px; --ep-aspect-active: 255 / 313; --ep-slide-active-w: 90%; --ep-slide-inactive-w: 90%; --ep-slide-active-h: 313px; --ep-slide-inactive-h: 281px; box-sizing: border-box; width: 100%; margin: 0 auto; padding: 68px 57px 56px; background: #fff; border-radius: var(--ep-radius-section); text-align: center; } .event-photos__title { margin: 0 0 36px !important; font-family: 'SB Sans Display Extended', 'SB Sans Text', system-ui, sans-serif !important; font-weight: 600; color: var(--ep-black) !important; } .event-photos__source { display: none; } .event-photos__desktop { display: block; width: 100%; } .event-photos__mobile { display: none; } .event-photos__desktop-fit { width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: flex-end; min-height: 313px; box-sizing: border-box; } .event-photos__desktop-gallery { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 0 auto; box-sizing: border-box; } .event-photos__desktop-item { flex: 0 0 auto; border-radius: var(--ep-radius-card); overflow: hidden; background: #ececec; height: auto; box-sizing: border-box; } .event-photos__desktop-item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .event-photos__desktop-item[data-size='sm'] { width: 120px; aspect-ratio: 120 / 177; } .event-photos__desktop-item[data-size='md'] { width: 145px; aspect-ratio: 145 / 214; } .event-photos__desktop-item[data-size='lg'] { width: 175px; aspect-ratio: 175 / 259; } .event-photos__desktop-item[data-size='xl'] { width: 204px; aspect-ratio: 204 / 281; } .event-photos__desktop-item[data-size='xxl'] { width: 255px; aspect-ratio: var(--ep-aspect-active); } .event-photos__desktop-nav { display: none; align-items: center; justify-content: center; gap: 24px; margin-top: 20px; } .event-photos__desktop-nav.is-visible { display: flex; } .event-photos__nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 51px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; box-sizing: border-box; } .event-photos__nav-btn svg { display: block; width: 100%; height: 100%; } .event-photos__nav-btn--prev svg { transform: scaleX(-1); } .event-photos__footer { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 36px; max-width: 1066px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; } .event-photos__footer:hover { color: #080808 !important;} .event-photos__decor-arrow { display: none; } .event-photos__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 55px; padding: 16px 32px; border-radius: 10px; background: var(--ep-green); color: var(--ep-black); font-family: 'SB Sans Text', system-ui, sans-serif; font-size: 24px; line-height: 1; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; box-sizing: border-box; } .event-photos__cta:hover { filter: brightness(0.96); }"
  }
  M={
    ".event-photos { padding: 30px 0 24px; border-radius: 12px; } .event-photos__title { margin: 0 0 20px; padding: 0 20px; font-size: 24px; line-height: 1.1; } .event-photos__desktop { display: none; } .event-photos__mobile { display: block; } .event-photos__slider { overflow: hidden; min-height: var(--ep-slide-active-h); } .event-photos__slider-track { display: flex; align-items: flex-end; gap: 8px; min-height: var(--ep-slide-active-h); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 calc((100% - var(--ep-slide-active-w)) / 2); box-sizing: border-box; } .event-photos__slider-track.is-jumping .event-photos__slide { transition: none !important; } .event-photos__slider-track::-webkit-scrollbar { display: none; } .event-photos__slide { flex: 0 0 var(--ep-slide-inactive-w); scroll-snap-align: center; border-radius: var(--ep-radius-card); overflow: hidden; background: #ececec; height: var(--ep-slide-inactive-h); transition: height 0.25s ease; box-sizing: border-box; } .event-photos__slide.is-active { height: var(--ep-slide-active-h); } .event-photos__slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .event-photos__mobile-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 20px 0 16px; } .event-photos__footer { margin-top: 0; padding: 0 20px; } .event-photos__cta { display: flex; width: 100%; min-height: 47px; font-size: 16px; white-space: normal; }"
  }
/>

<section className="event-photos" id="event-photos-gallery">
  <H2 className="event-photos__title">Фотографии с мероприятия</H2>
  <div class="event-photos__source" data-event-photos-source aria-hidden="true">
    <figure className="event-photos__item">
      <img
        src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/38bce66a_Images-1.png"
        alt="Фото с мероприятия 1"
        loading="lazy"
      />
    </figure>
    <figure className="event-photos__item">
      <img
        src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/16d45b76_Images-2.png"
        alt="Фото с мероприятия 2"
        loading="lazy"
      />
    </figure>
    <figure className="event-photos__item">
      <img
        src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/a3da2c17_Images-3.png"
        alt="Фото с мероприятия 3"
        loading="lazy"
      />
    </figure>
    <figure className="event-photos__item">
      <img
        src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/cf5db2bc_Images-4.png"
        alt="Фото с мероприятия 4"
        loading="lazy"
      />
    </figure>
    <figure className="event-photos__item">
      <img
        src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/81f2ced6_Images.png"
        alt="Фото с мероприятия 5"
        loading="lazy"
      />
    </figure>
  </div>
  <div className="event-photos__desktop">
    <div className="event-photos__desktop-fit">
      <div
        className="event-photos__desktop-gallery"
        data-event-photos-desktop
      ></div>
    </div>
    <div className="event-photos__desktop-nav" data-event-photos-desktop-nav>
      <button
        type="button"
        className="event-photos__nav-btn event-photos__nav-btn--prev"
        data-event-photos-desktop-prev
        aria-label="Предыдущие фото"
      >
        <svg
          viewBox="0 0 51 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <path d="M0 10H45" stroke="#5CFF8D" stroke-width="3" />
          <path
            d="M36 2L45 10L36 18"
            stroke="#5CFF8D"
            stroke-width="3"
            stroke-linejoin="round"
          />
        </svg>
      </button>
      <button
        type="button"
        className="event-photos__nav-btn event-photos__nav-btn--next"
        data-event-photos-desktop-next
        aria-label="Следующие фото"
      >
        <svg
          viewBox="0 0 51 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <path d="M0 10H45" stroke="#5CFF8D" stroke-width="3" />
          <path
            d="M36 2L45 10L36 18"
            stroke="#5CFF8D"
            stroke-width="3"
            stroke-linejoin="round"
          />
        </svg>
      </button>
    </div>
  </div>
  <div className="event-photos__mobile">
    <div className="event-photos__slider">
      <div className="event-photos__slider-track" data-event-photos-track></div>
    </div>
    <div className="event-photos__mobile-nav">
      <button
        type="button"
        className="event-photos__nav-btn event-photos__nav-btn--prev"
        data-event-photos-prev
        aria-label="Предыдущее фото"
      >
        <svg
          viewBox="0 0 51 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <path d="M0 10H45" stroke="#5CFF8D" stroke-width="3" />
          <path
            d="M36 2L45 10L36 18"
            stroke="#5CFF8D"
            stroke-width="3"
            stroke-linejoin="round"
          />
        </svg>
      </button>
      <button
        type="button"
        className="event-photos__nav-btn event-photos__nav-btn--next"
        data-event-photos-next
        aria-label="Следующее фото"
      >
        <svg
          viewBox="0 0 51 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <path d="M0 10H45" stroke="#5CFF8D" stroke-width="3" />
          <path
            d="M36 2L45 10L36 18"
            stroke="#5CFF8D"
            stroke-width="3"
            stroke-linejoin="round"
          />
        </svg>
      </button>
    </div>
  </div>
  <div className="event-photos__footer">
    <a
      className="event-photos__cta"
      href="ALL_PHOTOS_URL"
      target="_blank"
      rel="noopener noreferrer"
    >
      Смотреть все фотографии
    </a>
  </div>
</section>

<Script id="event-photos-gallery-init" strategy="afterInteractive">
  {`
(function () {
  let root = document.getElementById('event-photos-gallery');
  if (!root || root.dataset.initialized === 'true') return;
  root.dataset.initialized = 'true';

  let source = root.querySelector('[data-event-photos-source]');
  let desktop = root.querySelector('[data-event-photos-desktop]');
  let desktopNav = root.querySelector('[data-event-photos-desktop-nav]');
  let desktopPrev = root.querySelector('[data-event-photos-desktop-prev]');
  let desktopNext = root.querySelector('[data-event-photos-desktop-next]');
  let track = root.querySelector('[data-event-photos-track]');
  let mobilePrev = root.querySelector('[data-event-photos-prev]');
  let mobileNext = root.querySelector('[data-event-photos-next]');

  if (!source || !desktop || !track) return;

  let items = Array.prototype.slice.call(source.querySelectorAll('.event-photos__item'));
  if (!items.length) return;

  let photos = items.map(function (item, index) {
    let img = item.querySelector('img');
    return {
      src: img ? img.getAttribute('src') : '',
      alt: img ? (img.getAttribute('alt') || ('Фото ' + (index + 1))) : ('Фото ' + (index + 1))
    };
  });

  let DESKTOP_WINDOW = 5;
  let desktopCenter = Math.min(Math.floor(DESKTOP_WINDOW / 2), photos.length - 1);
  let MOBILE_LOOP_LEADING = 2;
  let mobileRealIndex = 0;
  let mobileJumping = false;
  let mobileNavScrolling = false;
  let scrollTimer;

  function setTrackJumping(jumping) {
    track.classList.toggle('is-jumping', jumping);
  }

  function setActiveSlide(loopIndex) {
    getMobileSlides().forEach(function (item, i) {
      item.classList.toggle('is-active', i === loopIndex);
    });
  }

  function isDesktopLayout() {
    return window.matchMedia('(min-width: 1024px)').matches;
  }

  function getSlotSize(total, slotIndex) {
    let centerSlot = Math.floor(total / 2);
    let distance = Math.abs(slotIndex - centerSlot);

    if (total === 1) return 'xxl';
    if (total === 2) return distance === 0 ? 'xxl' : 'lg';
    if (total === 3) return distance === 0 ? 'xxl' : 'md';
    if (total === 4) {
      if (distance === 0) return 'xxl';
      if (distance === 1) return 'lg';
      return 'sm';
    }

    if (distance === 0) return 'xxl';
    if (distance === 1) return 'lg';
    if (distance === 2) return 'md';
    return 'sm';
  }

  function renderDesktop() {
    desktop.innerHTML = '';

    let total = photos.length;
    if (!total) return;

    let useWindow = total > DESKTOP_WINDOW;
    let visibleCount = useWindow ? DESKTOP_WINDOW : total;
    let half = Math.floor(visibleCount / 2);

    for (let i = 0; i < visibleCount; i += 1) {
      let photoIndex = useWindow ? (desktopCenter + i - half + total * 100) % total : i;
      let photo = photos[photoIndex];
      let figure = document.createElement('figure');
      figure.className = 'event-photos__desktop-item';
      figure.setAttribute('data-size', getSlotSize(visibleCount, i));

      let img = document.createElement('img');
      img.src = photo.src;
      img.alt = photo.alt;
      img.loading = 'lazy';

      figure.appendChild(img);
      desktop.appendChild(figure);
    }

    if (desktopNav) {
      desktopNav.classList.toggle('is-visible', total > DESKTOP_WINDOW);
    }
  }

  function createMobileSlide(photo) {
    let figure = document.createElement('figure');
    figure.className = 'event-photos__slide';

    let img = document.createElement('img');
    img.src = photo.src;
    img.alt = photo.alt;
    img.loading = 'lazy';

    figure.appendChild(img);
    return figure;
  }

  function getMobileSlides() {
    return track.querySelectorAll('.event-photos__slide');
  }

  function renderMobile() {
    track.innerHTML = '';

    if (!photos.length) return;

    if (photos.length === 1) {
      track.appendChild(createMobileSlide(photos[0]));
      return;
    }

    let n = photos.length;
    track.appendChild(createMobileSlide(photos[(n - 2 + n) % n]));
    track.appendChild(createMobileSlide(photos[n - 1]));
    photos.forEach(function (photo) {
      track.appendChild(createMobileSlide(photo));
    });
    track.appendChild(createMobileSlide(photos[0]));
    track.appendChild(createMobileSlide(photos[1 % n]));
  }

  function isMobileCloneIndex(loopIndex) {
    if (photos.length <= 1) return false;
    return loopIndex < MOBILE_LOOP_LEADING || loopIndex >= MOBILE_LOOP_LEADING + photos.length;
  }

  function loopIndexToReal(loopIndex) {
    if (photos.length <= 1) return 0;

    let n = photos.length;

    if (loopIndex < MOBILE_LOOP_LEADING) {
      return (n - MOBILE_LOOP_LEADING + loopIndex + n) % n;
    }

    if (loopIndex >= MOBILE_LOOP_LEADING + n) {
      return loopIndex - MOBILE_LOOP_LEADING - n;
    }

    return loopIndex - MOBILE_LOOP_LEADING;
  }

  function realToLoopIndex(realIndex) {
    if (photos.length <= 1) return 0;
    return MOBILE_LOOP_LEADING + realIndex;
  }

  function getMobileNormalizeTarget(loopIndex) {
    if (photos.length <= 1 || !isMobileCloneIndex(loopIndex)) return null;

    let n = photos.length;

    if (loopIndex === 0) {
      return { index: MOBILE_LOOP_LEADING + ((n - 2 + n) % n), real: (n - 2 + n) % n };
    }

    if (loopIndex === 1) {
      return { index: MOBILE_LOOP_LEADING + n - 1, real: n - 1 };
    }

    if (loopIndex === MOBILE_LOOP_LEADING + n) {
      return { index: MOBILE_LOOP_LEADING, real: 0 };
    }

    if (loopIndex === MOBILE_LOOP_LEADING + n + 1) {
      return { index: MOBILE_LOOP_LEADING + 1, real: 1 % n };
    }

    return null;
  }

  function scrollToMobileLoopIndex(loopIndex, smooth) {
    let slides = getMobileSlides();
    let slide = slides[loopIndex];
    if (!slide) return;

    let left = slide.offsetLeft - (track.clientWidth - slide.clientWidth) / 2;

    if (smooth) {
      mobileNavScrolling = true;
      track.style.scrollBehavior = 'smooth';
      track.scrollLeft = left;
      return;
    }

    track.style.scrollBehavior = 'auto';
    track.scrollLeft = left;
    track.style.scrollBehavior = '';
  }

  function getNearestLoopIndex() {
    let slides = getMobileSlides();
    if (!slides.length) return 0;

    let center = track.scrollLeft + track.clientWidth / 2;
    let nearest = 0;
    let minDistance = Infinity;

    slides.forEach(function (slide, i) {
      let slideCenter = slide.offsetLeft + slide.clientWidth / 2;
      let distance = Math.abs(center - slideCenter);

      if (distance < minDistance) {
        minDistance = distance;
        nearest = i;
      }
    });

    return nearest;
  }

  function updateMobileActiveSlide() {
    let slides = getMobileSlides();
    if (!slides.length) return;

    let nearest = getNearestLoopIndex();

    slides.forEach(function (slide, i) {
      slide.classList.toggle('is-active', i === nearest);
    });

    mobileRealIndex = loopIndexToReal(nearest);
  }

  function normalizeMobileLoop() {
    if (photos.length <= 1) return;

    let nearest = getNearestLoopIndex();
    let target = getMobileNormalizeTarget(nearest);
    if (!target) return;

    let slides = getMobileSlides();
    let slide = slides[target.index];
    if (!slide) return;

    mobileJumping = true;
    setTrackJumping(true);
    setActiveSlide(target.index);
    mobileRealIndex = target.real;

    track.style.scrollBehavior = 'auto';
    track.scrollLeft = slide.offsetLeft - (track.clientWidth - slide.clientWidth) / 2;

    requestAnimationFrame(function () {
      requestAnimationFrame(function () {
        setTrackJumping(false);
        mobileJumping = false;
      });
    });
  }

  function handleScrollEnd() {
    if (mobileJumping) return;

    if (mobileNavScrolling) {
      mobileNavScrolling = false;
      track.style.scrollBehavior = '';
    }

    updateMobileActiveSlide();
    normalizeMobileLoop();
  }

  function scheduleScrollEnd() {
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(handleScrollEnd, mobileNavScrolling ? 400 : 120);
  }

  function scrollMobileStep(delta) {
    if (photos.length <= 1) return;

    let nearest = getNearestLoopIndex();
    scrollToMobileLoopIndex(nearest + delta, true);
  }

  renderDesktop();
  renderMobile();

  if (desktopPrev) {
    desktopPrev.addEventListener('click', function () {
      if (!isDesktopLayout() || photos.length <= DESKTOP_WINDOW) return;
      desktopCenter = (desktopCenter - 1 + photos.length) % photos.length;
      renderDesktop();
    });
  }

  if (desktopNext) {
    desktopNext.addEventListener('click', function () {
      if (!isDesktopLayout() || photos.length <= DESKTOP_WINDOW) return;
      desktopCenter = (desktopCenter + 1) % photos.length;
      renderDesktop();
    });
  }

  if (mobilePrev) {
    mobilePrev.addEventListener('click', function () {
      scrollMobileStep(-1);
    });
  }

  if (mobileNext) {
    mobileNext.addEventListener('click', function () {
      scrollMobileStep(1);
    });
  }

  track.addEventListener('scroll', function () {
    if (mobileJumping) return;
    updateMobileActiveSlide();
    scheduleScrollEnd();
  });

  if ('onscrollend' in track) {
    track.addEventListener('scrollend', function () {
      if (mobileJumping) return;
      clearTimeout(scrollTimer);
      handleScrollEnd();
    });
  }

  requestAnimationFrame(function () {
    if (photos.length <= 1) {
      scrollToMobileLoopIndex(0, false);
    } else {
      scrollToMobileLoopIndex(MOBILE_LOOP_LEADING, false);
      mobileRealIndex = 0;
    }
    updateMobileActiveSlide();
  });
})();
`}
</Script>


<ResponsiveStyle
  common="
    .footer-image-container{
      padding: 48px 0;
    }
    .footer-grid {
      gap: 0;
    }
    .footer-block {
      padding: 18px 18px 24px;
      border-bottom: 1px solid #000;
    }
    .footer-grid .footer-block:not(:last-child) {
      border-right: 1px solid #000;
    }
    .footer-grid .footer-block:nth-child(1) {
    padding-left: 0;
    }
    .footer-grid .footer-block:nth-child(4) {
    padding-right: 0;
    }
    .footer-block-title {
      font-weight: 600;
      font-size: 24px;
      line-height: 94%;
      letter-spacing: -0.37px;
      margin: 0 0 16px;
      color: #000;
    }
    .footer-block-links{
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .footer-block-link {
      border: none;
      transition: opacity 0.2s ease;
    }
    .footer-block-link:hover {
      opacity: 0.8;
    }
    .footer-block-text {
      color: #000;
      margin: 0;
      font-size: 18px;
      line-height: 94%;
      letter-spacing: -0.88px;
    }
    .footer-image{
      display: block;
      margin: 0 auto;
      max-width: 800px;
      width: 100%;
      height: auto;
    }
  "
  M="
    .footer-block{
    grid-column-end: span 2;
    padding: 12px 12px 16px;
  }
    .footer-block-title {
      margin: 0 0 10px;
      font-size: 18px;
      letter-spacing: -0.3px;
    }
    .footer-block-text {
      font-size: 14px;
      letter-spacing: -0.24px;
    }
    .footer-block-links{
      gap: 8px;
    }
    .footer-grid .footer-block:nth-child(2) {
    border-right: none;
    padding-right: 0;
  }
    .footer-grid .footer-block:nth-child(1) {
    padding-left: 0;
  }
    .footer-grid .footer-block:nth-child(3) {
    padding-left: 0;
  }
    .footer-grid .footer-block:nth-child(4) {
    padding-right: 0;
  }
  "
  S="
    .footer-block-title {
      margin: 0 0 6px;
      font-size: 10px;
      letter-spacing: -0.24px;
    }
   .footer-block{
      padding: 6px;
   }
    .footer-block-text {
      font-size: 8px;
      letter-spacing: -0.24px;
    }
  "
/>
<Grid columns={12} className="footer-grid">
  <Cell width={3} className="footer-block">
    <TextL className="footer-block-title">Наши соцсети</TextL>
    <div className="footer-block-links">
      <a
        href="https://vk.com/careersber"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">ВКонтакте</TextM>
      </a>
      <a
        href="https://t.me/careersber"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">Telegram</TextM>
      </a>
      <a
        href="https://max.ru/careersber"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">МАX</TextM>
      </a>
      <a
        href="https://ru.linkedin.com/company/sberbank?trk=public_post_feed-actor-name"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">LinkedIn</TextM>
      </a>
    </div>
  </Cell>
  <Cell width={3} className="footer-block">
    <TextL className="footer-block-title">Контакты</TextL>
    <div className="footer-block-links">
      <a
        href="mailto:sber.sreda@info.sberbank.ru"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">
          Email для вопросов по мероприятиям sber.sreda@info.sberbank.ru
        </TextM>
      </a>
    </div>
  </Cell>
  <Cell width={3} className="footer-block">
    <TextL className="footer-block-title">Документы</TextL>
    <div className="footer-block-links">
      <a
        href="#"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">
          Политика в отношении обработки персональных данных
        </TextM>
      </a>
      <a
        href="#"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">
          Согласие на получение рекламных рассылок
        </TextM>
      </a>
    </div>
  </Cell>
  <Cell width={3} className="footer-block">
    <TextL className="footer-block-title">Адрес</TextL>
    <TextM className="footer-block-text">
      Москва, Земляной Вал 9А
      <br />
      <br />
      м. Курская, 5 минут пешком
    </TextM>
  </Cell>
</Grid>
<div className="footer-image-container">
  <img
    src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/dfc6b44e_sber-sreda-footer-image.png"
    className="footer-image"
  />
</div>


Сбер.Среда

Регистрация