Сбер.Среда

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

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

Имя

Фамилия

Email

Telegram

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

Место работы

Ваша роль

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

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

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

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

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

Заявка на SberSreda

name

Робо Драйв Пати

<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: 40%;
    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">Робо Драйв Пати</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/2f130fb3_robot-greem-m.png"
    className="what-image-m"
  />
  <TextL className="what-text">
    Робо Драйв Пати — закрытая встреча команды робототехники Сбера. Здесь можно
    познакомиться с инженерами и руководителями команд, которые создают
    современные продукты в робототехнике. <br />
    <br />
    В программе — короткие выступления о реальных задачах в области Physical AI,
    ML, RL и робототехники, а также возможность лично пообщаться с командами,
    задать вопросы и узнать о проектах, над которыми они работают сегодня.
  </TextL>
  <img
    src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/981ee557_robot-green.png"
    className="what-image"
  />
</div>
<Grid columns={12} className="what-cards">
  <Cell width={4} className="what-card">
    <h2 className="what-card-title">10.07</h2>
    <TextL className="what-card-text">дата</TextL>
  </Cell>
  <Cell width={4} className="what-card">
    <h2 className="what-card-title">18:30</h2>
    <TextL className="what-card-text">начало</TextL>
  </Cell>
  <Cell width={4} className="what-card">
    <h2 className="what-card-title">100</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/90e6efa9_About_Us.png"
      alt="Аватар"
      className="avatar"
    />
    <div className="text-content">
      <div className="line">
        <h3 id="aboutUsName" className="header3">
          Роман Чеботарев
        </h3>
      </div>
      <div className="line" style={{ maxWidth: "28.125em" }}>
        <div id="aboutUsSkill" className="small-text">
          Обсудим, как замкнуть повторяющиеся задачи и рутину продакта на OpenClaw. Ускорим работу и превратим действия по шаблону в агентские сценарии. Вы унесёте готовую настройку, упрощающую вашу работу и экномящую время, которую можно переиспользовать в своём продукте.
        </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/90e6efa9_About_Us.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/a850faa4_1F1B893E-ECCA-4D80-84DE-9FCE01304A4C..png',
      name: 'Роман Чеботарев',
      skill: 'Как строится программная архитектура роботов, почему стабильность программного обеспечения важна для робототехнических систем и как развивается направление Physical AI Factory.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/d29fc0d6_About_Us_1_.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/35ec59bc_0F184774-4520-43B2-923D-F0819CD5CAE4..png',
      name: 'Алексей Постников',
      skill: 'О разработке Green-VLA, мобильных манипуляторах и обучении с подкреплением, которое помогает роботам взаимодействовать с окружающим миром.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/9e0c4d11_dmitriev_ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/ec83a192_dmitriev_slide.png',
      name: 'Денис Дмитриев',
      skill: 'Как создаётся физическая платформа роботов, разрабатываются системы управления движением и применяются нейросетевые алгоритмы.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/b10378b6_golovin_ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/e9a2afb7_golovin_slide.png',
      name: 'Андрей Головин',
      skill: 'Как формируется продуктовая стратегия Центра робототехники и какие робототехнические решения команда развивает сегодня.',
    },    
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/90e6efa9_About_Us.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/a850faa4_1F1B893E-ECCA-4D80-84DE-9FCE01304A4C..png',
      name: 'Роман Чеботарев',
      skill: 'Как строится программная архитектура роботов, почему стабильность программного обеспечения важна для робототехнических систем и как развивается направление Physical AI Factory.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/d29fc0d6_About_Us_1_.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/35ec59bc_0F184774-4520-43B2-923D-F0819CD5CAE4..png',
      name: 'Алексей Постников',
      skill: 'О разработке Green-VLA, мобильных манипуляторах и обучении с подкреплением, которое помогает роботам взаимодействовать с окружающим миром.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/9e0c4d11_dmitriev_ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/ec83a192_dmitriev_slide.png',
      name: 'Денис Дмитриев',
      skill: 'Как создаётся физическая платформа роботов, разрабатываются системы управления движением и применяются нейросетевые алгоритмы.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/b10378b6_golovin_ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/e9a2afb7_golovin_slide.png',
      name: 'Андрей Головин',
      skill: 'Как формируется продуктовая стратегия Центра робототехники и какие робототехнические решения команда развивает сегодня.',
    }
  ];

  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('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={
    ".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>


Сбер.Среда

Регистрация