Сбер.Среда

Продуктовая лаборатория

<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: 32%;
    height: auto;
    max-width: 513px;
    position: absolute;
    right: -48px;
    bottom: -35px;
  }
  .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">
        Продуктовая
        <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/misc/0.0.0/assets/common/71a93849_sreda-event-image.png"
    className="what-image-m"
  />
  <TextL className="what-text">
    На продуктовой лаборатории будем не просто слушать, а сами попробовать себя
    в роли продуктовой команды. Разработчики, дизайнеры, аналитики, финансисты
    и ребята из других направлений объединятся в команды и получат общий кейс. Перед стартом участники разделятся на команды по 5 человек.
    Задача — за ограниченное время придумать концепцию продукта и подготовить
    её к защите.
    <br />
    <br />
    Помогать командам будут эксперты из ИТ-направлений Сбера: сначала они расскажут
    о своих командах и реальных задачах, а во время хакатона к ним можно будет обратиться
    за советом. В конце участники представят свои решения жюри, а три лучшие команды
    получат мерч Сбера.
    <br />
    <br />
    А после — еда, музыка и нетворкинг!
    <br />
    <br />
    В программе:
    <ul style={{ listStyle: "none", marginTop: "8px" }}>
      <li style={{ margin: "0 0 8px" }}>
        — знакомство с экспертами из ИТ-команд Сбера;
      </li>
      <li style={{ margin: "0 0 8px" }}>
        — продуктовый мини-хакатон в командах;
      </li>
      <li style={{ margin: "0 0 8px" }}>— общение с экспертами Сбера;</li>
      <li style={{ margin: "0 0 8px" }}>— защита проектов перед жюри;</li>
      <li style={{ margin: "0 0 8px" }}>
        — подарки трём командам-победителям;
      </li>
      <li style={{ margin: "0" }}>— диджей-сет, еда и общение.</li>
    </ul>
  </TextL>
  <img
    src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/71a93849_sreda-event-image.png"
    className="what-image"
  />
</div>
<Grid columns={12} className="what-cards">
  <Cell width={4} className="what-card">
    <h2 className="what-card-title">19.09</h2>
    <TextL className="what-card-text">дата</TextL>
  </Cell>
  <Cell width={4} className="what-card">
    <h2 className="what-card-title">11: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="
  .padding-cell-2 {
    padding: 20px 0 0 30px;
  }
  .header1 {
    margin: 0;
    font-family: SB Sans Display Extended, sans-serif;
    font-size: 4em;
    font-weight: 600;
  }
  .header3 {
    margin: 0;
    font-family: SB Sans Display Extended, sans-serif;
    font-size: 1.5em;
    font-weight: 600;
  }
  .little-text {
    margin: 0;
    font-family: SB Sans Text, Roboto;
    font-size: 1.5em;
    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;
  }
  .schedule-item {
    display: flex;
    gap: 2em;
    padding: 0.5em 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .schedule-item:last-child {
    border-bottom: none;
  }
  .schedule-time {
    min-width: 5em;
    font-family: SB Sans Display Extended, sans-serif;
    font-size: 1.5em;
    font-weight: 600;
    color: #000;
  }
  .schedule-content {
    flex: 1;
  }
  .schedule-title {
    font-family: SB Sans Display Extended, sans-serif;
    font-size: 1.5em;
    font-weight: 600;
    color: #000;
    margin: 0 0 0.25em 0;
  }
  .schedule-speaker {
    font-family: SB Sans Text, Roboto;
    font-size: 1.125em;
    color: rgba(0, 0, 0, 0.6);
    margin: 0 0 5px 0;
  }
  "
  S="
  .padding-cell-2 {
    padding: 26px 0 0 5px;
  }
  .header1 {
    font-size: 20px;
  }
  .schedule-item {
    flex-direction: column;
    gap: 1.25em;
    padding: 0.75em 0;
  }
  .schedule-time {
    font-size: 2.5em;
  }
  .schedule-title {
    font-size: 2.5em;
    margin: 0 0 0.5em 0;
  }
  .schedule-speaker {
    font-size: 2.125em;
  }
  "
/>
<Grid>
  <Cell width={12} className="padding-cell-2">
    <div className="about-us">
      <div style={{ color: "#000" }}>
        <div className="section-header green-highlighted-text">
          <div className="header1">Расписание</div>
        </div>
      </div>
      <div className="schedule-item">
        <div className="schedule-time">11:00</div>
        <div className="schedule-content">
          <div className="schedule-title">
            Сбор гостей, музыка, знакомство и деление на команды.
          </div>
          <div className="schedule-item">
            <div className="schedule-speaker"></div>
          </div>
        </div>
      </div>
      <div className="schedule-item">
        <div className="schedule-time">12:00</div>
        <div className="schedule-content">
          <div className="schedule-title">
            Знакомство с экспертами и командами Сбера
          </div>
          <div className="schedule-speaker"></div>
        </div>
      </div>
      <div className="schedule-item">
        <div className="schedule-time">12:50</div>
        <div className="schedule-content">
          <div className="schedule-title">
            Презентация кейса и правил мини-хакатона
          </div>
          <div className="schedule-speaker"></div>
        </div>
      </div>
      <div className="schedule-item">
        <div className="schedule-time">13:00</div>
        <div className="schedule-content">
          <div className="schedule-title">Работа команд над продуктом</div>
          <div className="schedule-speaker"></div>
        </div>
      </div>
      <div className="schedule-item">
        <div className="schedule-time">14:00</div>
        <div className="schedule-content">
          <div className="schedule-title">Защита проектов перед жюри</div>
          <div className="schedule-speaker">
            Голдабина Анастасия Андреевна, Эксперт по работе с учебными
            институциями, Центр иммерсивных решений/Sber Studios
          </div>
        </div>
      </div>
      <div className="schedule-item">
        <div className="schedule-time">14:30</div>
        <div className="schedule-content">
          <div className="schedule-title">Выбор победителей и награждение</div>
          <div className="schedule-speaker"></div>
        </div>
      </div>
      <div className="schedule-item">
        <div className="schedule-time">14:45</div>
        <div className="schedule-content">
          <div className="schedule-title">Еда, музыка и общение</div>
          <div className="schedule-speaker"></div>
        </div>
      </div>
    </div>
  </Cell>
</Grid>


<ResponsiveStyle
  common="
  b {
    font-weight: 600;
  }
  .thin-text {
    font-weight: 400;
    font-family: SB Sans Text, Roboto;
  }
  .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;
  }
  .max-width-text {
   max-width: 28.125em;
  }
  .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;
    z-index: 1;
  }
  .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;
    z-index: 9;
  }
  .slide.right-1 {
    transform: translate(19.625em, 0);
    opacity: 1;
    z-index: 9;
  }
  .slide.right-2 {
    transform: translate(38.375em, 0);
    opacity: 1;
    z-index: 8;
  }
  .slide.right-3 {
    transform: translate(57.125em, 0);
    opacity: 1;
    z-index: 7;
  }
  .slide.left-1 {
    height: 13.375em;
    transform: translate(-19.625em, 0);
    opacity: 0.6;
    z-index: 6;
  }
  .slide.left-2 {
    height: 13.375em;
    transform: translate(-38.375em, 0);
    opacity: 0.3;
    z-index: 5;
  }
  .slide.out-of-view {
    transform: translate(113.375em, 0);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }
  .slider-nav {
    position: absolute;
    left: 9.625em;
    top: 15.125em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5em;
    z-index: 9;
  }
  .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;
  }
  "
  M="
  .max-width-text {
   max-width: 100%;
  }
  "
  S="
  .padding-cell-2 {
    padding: 26px 0 0 5px;
  }
  .header1 {
    font-size: 20px;
  }
  .about-us #aboutUsName {
    font-size: 14px;
  }
  .about-us #aboutUsRole {
    font-size: 10px;
  }
  .slider-wrapper .nav-arrows {
    display: none;
  }
  .schedule-item {
    flex-direction: column;
    gap: 1.25em;
    padding: 0.75em 0;
  }
  .schedule-time {
    font-size: 2.2em;
  }
  .schedule-title {
    font-size: 2em;
    margin: 0 0 0.5em 0;
  }
  .schedule-speaker {
    font-size: 2em;
  }
  .speakers-label {
    font-size: 1.5em;
  }
  "
/>

<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/5d553171__.png"
      alt="Аватар"
      className="avatar"
    />
    <div className="text-content">
      <div className="line">
        <h3 id="aboutUsName" className="header3">
          Никита Куликов
        </h3>
        <div id="aboutUsRole" className="little-text">
          Руководитель направления по исследованию данных | Recsys
        </div>
      </div>
      <div className="line max-width-text">
        <div id="aboutUsSkillLabel" className="semibold-text">
        </div>
        <div id="aboutUsSkill" className="small-text"></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 / 02
      </div>
    </div>
  </div>
</div>

<Script>
  {`
(function () {
  function initSlider() {
    const slidesData = [
      {
        avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/5d553171__.png',
        slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/ce7e9b62__1_.png',
        name: 'Никита Куликов',
        role: 'Руководитель направления по исследованию данных | Recsys',
        topic: '',
        skill: ''
      },
      {
        avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/e5e23a6e_3_.png',
        slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/d7c107b7_file_00000000bb7081f59577d4a22c51e1d0.png',
        name: 'Александра Лабунская',
        role: 'Инженер систем компьютерного зрения | Sber Studios',
        topic: '',
        skill: ''
      },
      {
        avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/5d553171__.png',
        slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/ce7e9b62__1_.png',
        name: 'Никита Куликов',
        role: 'Руководитель направления по исследованию данных | Recsys',
        topic: '',
        skill: ''
      },
      {
        avatar: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/e5e23a6e_3_.png',
        slide: 'https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/d7c107b7_file_00000000bb7081f59577d4a22c51e1d0.png',
        name: 'Александра Лабунская',
        role: 'Инженер систем компьютерного зрения | Sber Studios',
        topic: '',
        skill: ''
      }
    ];

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

    if (!track) return;

    const REAL_SLIDES_COUNT = 2;
    let currentIndex = 0;
    let slideElements = [];

    slidesData.forEach(function(data, i) {
      const slide = document.createElement('div');
      slide.className = 'slide';
      const image = document.createElement('img');
      image.src = data.slide;
      image.alt = data.name;
      slide.appendChild(image);
      slide.dataset.index = i;
      slide.addEventListener('click', function() {
        currentIndex = i;
        updateSlider();
      });
      track.appendChild(slide);
      slideElements.push(slide);
    });

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

      if (avatar) avatar.src = data.avatar;
      if (name) name.textContent = data.name;
      if (role) role.textContent = data.role;
      if (skillLabel) skillLabel.textContent = data.topic;
      if (skill) skill.textContent = data.skill || '';

      slideElements.forEach(function(slide, i) {
        slide.classList.remove('active', 'right-1', 'right-2', 'right-3', 'left-1', 'left-2', 'out-of-view');

        let diff = (i - currentIndex + slidesData.length) % slidesData.length;

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

      if (navCounter) {
        const displayNumber = (currentIndex % REAL_SLIDES_COUNT) + 1;
        navCounter.textContent = 
          String(displayNumber).padStart(2, '0') + ' / ' + 
          String(REAL_SLIDES_COUNT).padStart(2, '0');
      }
    }

    function nextSlide() {
      currentIndex = (currentIndex + 1) % slidesData.length;
      updateSlider();
    }

    function prevSlide() {
      currentIndex = (currentIndex - 1 + slidesData.length) % slidesData.length;
      updateSlider();
    }

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

    updateSlider();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initSlider);
  } else {
    initSlider();
  }
})();
  `}
</Script>

name

<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="https://developers.sber.ru/docs/ru/policies/consent-to-personal-data-processing"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">
          Согласие на обработку персональных данных
        </TextM>
      </a>
      <a
        href="https://developers.sber.ru/docs/ru/policies/marketing-career-consent"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">
          Согласие на рассылку на получение вакансий
        </TextM>
      </a>
      <a
        href="https://developers.sber.ru/docs/ru/policies/mailing-agreement"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">
          Согласие на получение рекламных рассылок
        </TextM>
      </a>
      <a
        href="https://developers.sber.ru/docs/ru/policies/participation-rules"
        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>
