Сбер.Среда

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

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

Имя

Фамилия

Email

Telegram

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

Место работы

Ваша роль

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

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

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

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

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

Заявка на SberSreda

name

Android 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: 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">
      Android Meetup
    </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/6e2b7209_Group_2136139908.png"
    className="what-image-m"
  />
  <TextL className="what-text">
    14 июля ждём всех в Сбер-Среде на камерный Android Meetup.
        <br />
    <br />
Встреча будет интересна Android-разработчикам, мобильным инженерам и всем, кто следит за развитием Android-разработки: поговорим о собственной библиотеке для графиков, переходе на Compose в большой компании и контроле производительности до релиза.
        <br />
    <br />
В программе — практические доклады, вопросы спикерам и нетворкинг после выступлений.
  </TextL>
  <img
    src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/6e2b7209_Group_2136139908.png"
    className="what-image"
  />
</div>
<Grid columns={12} className="what-cards">
  <Cell width={4} className="what-card">
    <h2 className="what-card-title">14.07</h2>
    <TextL className="what-card-text">дата</TextL>
  </Cell>
  <Cell width={4} className="what-card">
    <h2 className="what-card-title">18:00</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">
      Александр Митрополький, Senior Android разработчик, Сбер
      <br />
      <br />
      Александр Королев, Android-разработчик, Авито
      <br />
      <br />
      Дмитрий Лимаренко, Project Manager, СберДевайсы
    </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/220284a1_mitropolskiy-ava.png"
      alt="Аватар"
      className="avatar"
    />
    <div className="text-content">
      <div className="line">
        <h3 id="aboutUsName" className="header3">
          Александр Митрополький
        </h3>
        <div id="aboutUsRole" className="little-text">
         Senior Android разработчик Android-платвормы «СберИнвестор» | Сбер
        </div>
      </div>
      <div className="line" style={{ maxWidth: "28.125em" }}>
        <div id="aboutUsSkillLabel" className="semibold-text">
          Roll Your Own Charts
        </div>
        <div id="aboutUsSkill" className="small-text">
          За сложными opinionated библиотеками для графиков прячется простая идея: перевод данных в пиксели через px = value * scale + translate. Разберём, как на одном этом преобразовании работают скролл, зум и инерционная прокрутка — и почему тот же код с Android запускается даже в браузере.
        </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 / 03
      </div>
    </div>
  </div>
</div>

<Script>
  {`
(function () {
  const slidesData = [
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/220284a1_mitropolskiy-ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/17544c20_mitropolskiy-slide.png',
      name: 'Александр Митрополький',
      role: 'Senior Android разработчик Android-платвормы «СберИнвестор» | Сбер',
      topic: 'Roll Your Own Charts',
      skill: 'За сложными opinionated библиотеками для графиков прячется простая идея: перевод данных в пиксели через px = value * scale + translate. Разберём, как на одном этом преобразовании работают скролл, зум и инерционная прокрутка — и почему тот же код с Android запускается даже в браузере.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/b42dd0f5_About_Us_4_.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/a8a15f8a_photo.png',
      name: 'Александр Королев',
      role: 'Android-разработчик | Авито',
      topic: 'Как мы организовали переезд на Compose в Android-приложении',
      skill: 'Переход на новую технологию в большом продукте — это не только про код, но и про инфраструктуру, процессы и командные договорённости. В докладе расскажем, как команда готовила переезд с View на Compose: что пришлось изменить в проекте, как выстроить плавную миграцию и как постепенно переводить старый UI-стек в legacy.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/b6ba401f_limarenko-ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/6058f9b5_limarenko-slide.JPG',
      name: 'Дмитрий Лимаренко',
      role: 'Project Manager | СберДевайсы',
      topic: 'Как мы ловим деградацию производительности до продакшена',
      skill: 'В докладе расскажем, как команда построила систему мониторинга Android-приложения: собирает CrashFree, ColdStart и FPS, настраивает алертинг, анализирует динамику и прогнозирует деградации. Покажем, как эта система помогла поднять CrashFree до 99+% и стала инструментом для принятия инженерных решений перед релизом.',
    },    
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/220284a1_mitropolskiy-ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/17544c20_mitropolskiy-slide.png',
      name: 'Александр Митрополький',
      role: 'Senior Android разработчик Android-платвормы «СберИнвестор» | Сбер',
      topic: 'Roll Your Own Charts',
      skill: 'За сложными opinionated библиотеками для графиков прячется простая идея: перевод данных в пиксели через px = value * scale + translate. Разберём, как на одном этом преобразовании работают скролл, зум и инерционная прокрутка — и почему тот же код с Android запускается даже в браузере.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/b42dd0f5_About_Us_4_.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/a8a15f8a_photo.png',
      name: 'Александр Королев',
      role: 'Android-разработчик | Авито',
      topic: 'Как мы организовали переезд на Compose в Android-приложении',
      skill: 'Переход на новую технологию в большом продукте — это не только про код, но и про инфраструктуру, процессы и командные договорённости. В докладе расскажем, как команда готовила переезд с View на Compose: что пришлось изменить в проекте, как выстроить плавную миграцию и как постепенно переводить старый UI-стек в legacy.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/b6ba401f_limarenko-ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/6058f9b5_limarenko-slide.JPG',
      name: 'Дмитрий Лимаренко',
      role: 'Project Manager | СберДевайсы',
      topic: 'Как мы ловим деградацию производительности до продакшена',
      skill: 'В докладе расскажем, как команда построила систему мониторинга Android-приложения: собирает CrashFree, ColdStart и FPS, настраивает алертинг, анализирует динамику и прогнозирует деградации. Покажем, как эта система помогла поднять CrashFree до 99+% и стала инструментом для принятия инженерных решений перед релизом.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/220284a1_mitropolskiy-ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/17544c20_mitropolskiy-slide.png',
      name: 'Александр Митрополький',
      role: 'Senior Android разработчик Android-платвормы «СберИнвестор» | Сбер',
      topic: 'Roll Your Own Charts',
      skill: 'За сложными opinionated библиотеками для графиков прячется простая идея: перевод данных в пиксели через px = value * scale + translate. Разберём, как на одном этом преобразовании работают скролл, зум и инерционная прокрутка — и почему тот же код с Android запускается даже в браузере.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/b42dd0f5_About_Us_4_.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/a8a15f8a_photo.png',
      name: 'Александр Королев',
      role: 'Android-разработчик | Авито',
      topic: 'Как мы организовали переезд на Compose в Android-приложении',
      skill: 'Переход на новую технологию в большом продукте — это не только про код, но и про инфраструктуру, процессы и командные договорённости. В докладе расскажем, как команда готовила переезд с View на Compose: что пришлось изменить в проекте, как выстроить плавную миграцию и как постепенно переводить старый UI-стек в legacy.',
    },
    {
      avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/b6ba401f_limarenko-ava.png',
      slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/6058f9b5_limarenko-slide.JPG',
      name: 'Дмитрий Лимаренко',
      role: 'Project Manager | СберДевайсы',
      topic: 'Как мы ловим деградацию производительности до продакшена',
      skill: 'В докладе расскажем, как команда построила систему мониторинга Android-приложения: собирает CrashFree, ColdStart и FPS, настраивает алертинг, анализирует динамику и прогнозирует деградации. Покажем, как эта система помогла поднять CrashFree до 99+% и стала инструментом для принятия инженерных решений перед релизом.',
    }
  ];

  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 = 3;
  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>


Сбер.Среда

Регистрация