Сбер.Среда

Участник/спикер

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

Имя

Фамилия

Email

Telegram

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

Место работы

Ваша роль

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

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

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

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

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

Заявка на SberSreda

name

AI-Native подход к продукту

<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;
  }
  "
  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{
      padding: 8px 24px 4px 12px;
      margin: 0 0 16px;
      left: 0;
    }
    .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">
      AI-Native подход
      <br />
      к продукту
    </DsplS>
  </div>
    <div className="what-title-container-meetup"><h3 className="meetup" style={{margin: '0'}}>митап</h3></div>
  </div>
  <img
    src="https://cdn-app.sberdevices.ru/asset/sites_720/aHR0cHM6Ly9jZG4tYXBwLnNiZXJkZXZpY2VzLnJ1L21pc2MvMC4wLjAvYXNzZXRzL2NvbW1vbi85ZWJmODNkY19Hcm91cF8yMTM2MTM5OTA3XygxKS5wbmc="
    className="what-image-m"
  />
  <TextL className="what-text">
    Собираемся утром 19 июля на продуктовом кофе-рейве — самом энергичном мероприятии Продуктового сообщества SberProfi.<br/><br/>
Четыре коротких доклада от экспертов Сбера, Т-Банка и Magnit Tech раскроют тему AI-native подхода к продукту с разных ракурсов. <br/><br/>
А ещё кофе, приятная компания, DJ-сеты и нетворкинг и трансляция для тех, кто решит подключиться к нам онлайн.  </TextL>
  <img
    src="https://cdn-app.sberdevices.ru/asset/sites_1280/aHR0cHM6Ly9jZG4tYXBwLnNiZXJkZXZpY2VzLnJ1L21pc2MvMC4wLjAvYXNzZXRzL2NvbW1vbi84ZTUyMzg4YV9Hcm91cF8yMTM2MTM5OTA3XygyKS5wbmc="
    className="what-image"
  />
</div>
<Grid columns={12} className="what-cards">
  <Cell width={4} className="what-card">
    <h2 className="what-card-title">19.07</h2>
    <TextL className="what-card-text">дата</TextL>
  </Cell>
  <Cell width={4} className="what-card">
    <h2 className="what-card-title">10: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: space-between;
    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/54dd91a4__.png"
      alt="Аватар"
      className="avatar"
    />
    <div className="text-content">
      <div className="line">
        <h3 id="aboutUsName" className="header3">
          Дмитрий Борисов
        </h3>
        <div id="aboutUsRole" className="little-text">
          CPO SberOS
        </div>
      </div>
      <div className="line" style={{ maxWidth: "28.125em" }}>
        <div id="aboutUsSkillLabel" className="semibold-text">
          Слишком дорого для человека: как отдать рутину OpenClaw
        </div>
        <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/54dd91a4__.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/72f41451_Images.png',
      name: 'Дмитрий Борисов',
      role: 'CPO SberOS | Сбер',
      topic: 'Слишком дорого для человека: как отдать рутину OpenClaw',
      skill: 'Обсудим, как замкнуть повторяющиеся задачи и рутину продакта на OpenClaw. Ускорим работу и превратим действия по шаблону в агентские сценарии. Вы унесёте готовую настройку, упрощающую вашу работу и экномящую время, которую можно переиспользовать в своём продукте.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/e43bf2ac_About_Us_1_.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/ea552b7c_Images_2_.png',
      name: 'Альбина Мунирова',
      role: 'PL AI-интерфейсы B2C | Т-Банк',
      topic: 'Discovery со скоростью ИИ: как ускориться и не перепутать галлюцинацию с инсайтом',
      skill: 'Доклад будет про практическую границу: где ИИ действительно экономит недели в discovery, а где делегировать ему решение пока рискованно. Как использовать модель как усилитель продакта, но не отдавать ей право самой решать, что является пользовательской болью, приоритетом или продуктовой возможностью, оставляя за собой стратегические решения.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/96cac6e1_About_Us_3_.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/8c35c4ff_Images_3_.png',
      name: 'Михаил Скринник',
      role: 'PO Каталога Магнит ОМНИ | Magnit Tech',
      topic: 'Review first: как перестать делать руками и начать направлять',
      skill: 'Расскажу, почему сдвиг от LLM к агентам — это стратегический выбор продакта: как собрать из «двигателя» целую машину с памятью и процессом, где контекст становится важнее модели. Помогу понять, какие задачи отдать агенту в первую очередь и как выстроить систему агентов, чтобы действительно перестать делать руками и начать направлять',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/55f1fd65_About_Us_2_.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/35b0c044_Images_1_.png',
      name: 'Леонид Шашков',
      role: 'Начальник дирекции | Сбер',
      topic: 'Команда, работающая с ИИ: система непрерывного развития навыков для достижения бизнес-целей',
      skill: 'Поделюсь, как мы заменили разовые ИИ-тренинги системой непрерывного развития по фреймворку AI READY — напрямую привязанной к бизнес-целям. Унесете мой подход к ИИ-менторингу: от выбора кейса и оценки рисков до запуска пилота и масштабирования практик, которые уже работают в реальных продуктах и командах.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/54dd91a4__.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/72f41451_Images.png',
      name: 'Дмитрий Борисов',
      role: 'CPO SberOS | Сбер',
      topic: 'Слишком дорого для человека: как отдать рутину OpenClaw',
      skill: 'Обсудим, как замкнуть повторяющиеся задачи и рутину продакта на OpenClaw. Ускорим работу и превратим действия по шаблону в агентские сценарии. Вы унесёте готовую настройку, упрощающую вашу работу и экномящую время, которую можно переиспользовать в своём продукте.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/e43bf2ac_About_Us_1_.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/ea552b7c_Images_2_.png',
      name: 'Альбина Мунирова',
      role: 'PL AI-интерфейсы B2C | Т-Банк',
      topic: 'Discovery со скоростью ИИ: как ускориться и не перепутать галлюцинацию с инсайтом',
      skill: 'Доклад будет про практическую границу: где ИИ действительно экономит недели в discovery, а где делегировать ему решение пока рискованно. Как использовать модель как усилитель продакта, но не отдавать ей право самой решать, что является пользовательской болью, приоритетом или продуктовой возможностью, оставляя за собой стратегические решения.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/96cac6e1_About_Us_3_.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/8c35c4ff_Images_3_.png',
      name: 'Михаил Скринник',
      role: 'PO Каталога Магнит ОМНИ | Magnit Tech',
      topic: 'Review first: как перестать делать руками и начать направлять',
      skill: 'Расскажу, почему сдвиг от LLM к агентам — это стратегический выбор продакта: как собрать из «двигателя» целую машину с памятью и процессом, где контекст становится важнее модели. Помогу понять, какие задачи отдать агенту в первую очередь и как выстроить систему агентов, чтобы действительно перестать делать руками и начать направлять',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/55f1fd65_About_Us_2_.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/35b0c044_Images_1_.png',
      name: 'Леонид Шашков',
      role: 'Начальник дирекции | Сбер',
      topic: 'Команда, работающая с ИИ: система непрерывного развития навыков для достижения бизнес-целей',
      skill: 'Поделюсь, как мы заменили разовые ИИ-тренинги системой непрерывного развития по фреймворку AI READY — напрямую привязанной к бизнес-целям. Унесете мой подход к ИИ-менторингу: от выбора кейса и оценки рисков до запуска пилота и масштабирования практик, которые уже работают в реальных продуктах и командах.',
    }
  ];

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


Сбер.Среда

Регистрация