GigaNetwork

<ResponsiveStyle
  common="
  :root {
    --container-sides-padding: 0 !important;
  }
  .spief {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    height: 100dvh;
  }
  .spief a {
    text-decoration: none;
  }
  .spief ul li::marker {
    color: #42E3B4;
  }
  .content-wrapper {
    flex-grow: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    min-height: 0;
  }
  .video-wrapper {
    display: flex;
    flex-direction: column;
  }
  .header-with-logo {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    margin: 0;
  }
  .header-with-logo .logo {
    flex-shrink: 0;
    max-width: 20%;
    height: auto;
    object-fit: contain;
    object-position: top;
  }
  .header-with-logo .header {
    flex-grow: 1;
    margin: 0 7.375rem 0 0;
    font-weight: 600;
    text-align: center;
    text-wrap: wrap;
  }
  .header-with-logo .side-header {
    margin: 0 0 0 auto;
    font-size: 1.125rem;
    line-height: 1.375rem;
    text-align: right;
    text-wrap: wrap;
  }
  .layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    grid-auto-flow: row;
    gap: 1rem;
  }
  .layout.cards-2 > * {
    grid-column-end: span 6;
  }
  .layout.cards-3 > * {
    grid-column-end: span 4;
  }
  .layout.cards-4 > * {
    grid-column-end: span 6;
  }
  .layout.cards-5 > *:nth-child(1),
  .layout.cards-5 > *:nth-child(2) {
    grid-column-end: span 6;
  }
  .layout.cards-5 > *:nth-child(3),
  .layout.cards-5 > *:nth-child(4),
  .layout.cards-5 > *:nth-child(5) {
    grid-column-end: span 4;
  }
  .layout.cards-6 > * {
    grid-column-end: span 4;
  }
  .card {
    border: 1px solid #ffffff;
    border-radius: 1.5rem;
    background-color: rgba(255, 255, 255, 0.56);
    backdrop-filter: blur(24px);
  }
  .navigation-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0 0.25rem;
  }
  .navigation-footer .button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    padding: 0 1.25rem;
    height: 3rem;
    border: none;
    border-radius: 1000px;
    outline: none;
    background: none;
    cursor: pointer;
  }
  .navigation-footer .button.icon-button {
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
  }
  .button .icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .home-icon {
    background-image: url(https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/f9b7a42b_home-icon.png);
  }
  .arrow-left-icon {
    background-image: url(https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/9014990c_arrow-left-icon.png);
  }
  .navigation-footer .button.primary {
    background-color: #074F3B;
    color: #ffffff !important;
  }
  .navigation-footer .button.secondary {
    background-color: rgba(8, 8, 8, 0.06);
    color: rgba(8, 8, 8, 0.96) !important;
  }
  .link-clear span,
  .link-clear img {
    display: none;
  }
  .navigation-footer .controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  .bold-text {
    font-weight: 600;
  }
  .demo-video {
    margin: auto;
    width: 100%;
    max-height: 100%;
    border-radius: 1rem;
  }
  html {
    font-size: clamp(16px, 1.66666667vw, 32px) !important;
  }
  #__next > * > div:first-of-type > * > *,
  #__next > * > div:first-of-type > * > * > * > * {
    max-width: none !important;
  }
  "
/>

<ResponsiveStyle
  common="
  .giga-product-banner { 
    position: relative; 
    border-radius: 1.6rem; 
    height: 75%;
    overflow: hidden; 
    background-image: url('https://cdn-app.sberdevices.ru/asset/q80/aHR0cHM6Ly9jZG4tYXBwLnNiZXJkZXZpY2VzLnJ1L21pc2MvMC4wLjAvYXNzZXRzL2NvbW1vbi80NjI3M2Q2Zl9Qcm9kdWN0X0Jsb2NrLnBuZw=='); 
    background-size: cover; 
    background-position: bottom; 
    background-repeat: no-repeat; 
    display: flex; 
    flex-direction: column;
  } 
  .giga-product-top { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    padding: 3rem 3rem 2rem; 
    flex: 1; 
  } 
  .giga-product-left { 
    display: flex; 
    flex-direction: column; 
    max-width: 50%; 
  } 
  .giga-product-right { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    max-width: 42%; 
  } 
  .giga-product-label { 
    margin-bottom: 1.5rem; 
    line-height: 0; 
  } 
  .giga-product-label img { 
    height: 86px; 
    width: auto; 
  } 
  .giga-product-bottom { 
    width: 100%; 
    line-height: 0;
    margin-top: auto; 
    padding: 2rem; 
  } 
  .giga-product-bottom img { 
    width: 100%; 
    height: auto; 
    margin: auto auto 0; 
    display: block; 
    padding: 0 0.5rem; 
  } 
  .giga-product-btn-wrapper { 
    margin-top: 1rem; 
  } 
  .giga-product-btn-wrapper a { 
    font-weight: normal; 
  }
  .giga-product-cell-text { 
    margin-bottom: 0;
    font-size: 1.125rem;
    line-height: 1.3rem;
  }
  .giga-product-cell-heading { 
    margin-bottom: 0;
    font-size: 1.325rem;
    line-height: 1.455rem;
    font-weight: 600;
  }
  .giga-product-cell {
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem; 
    height: 100%;
  }
  "
/>

<div className="spief">
  <div className="header-with-logo">
    <img
      src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/1aae85bf_Frame_2136141935.png"
      className="logo"
    />
    <div className="side-header">
      <span style={{ fontWeight: "600" }}>
        Агенты полностью заменяют сотрудников в процессе сделки
      </span>
      <br />
      Полный цикл сделки — за часы вместо недель
    </div>
  </div>
  <div className="content-wrapper">
    <div className="giga-product-banner">
      <div className="giga-product-bottom">
        <Grid columns={10}>
          <Cell className="giga-product-cell" width={2}>
            <div>
              <H3 className="giga-product-cell-heading" color="#080808">
                Поиск
              </H3>
              <TextM className="giga-product-cell-text" color="#080808">
                Подбор контрагентов
              </TextM>
            </div>
            <img
              src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/2314e1ea_Search_Pic.png"
              alt="img1"
            />
          </Cell>
          <Cell className="giga-product-cell" width={2}>
            <div>
              <H3 className="giga-product-cell-heading" color="#080808">
                Проверка
              </H3>
              <TextM className="giga-product-cell-text" color="#080808">
                Автоматическая,
                <br />
                через банк
              </TextM>
            </div>
            <img
              src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/3b072bb1_Check_Pic.png"
              alt="img2"
            />
          </Cell>
          <Cell className="giga-product-cell" width={2}>
            <div>
              <H3 className="giga-product-cell-heading" color="#080808">
                Переговоры
              </H3>
              <TextM className="giga-product-cell-text" color="#080808">
                Тендер между
                <br />
                агентами
              </TextM>
            </div>
            <img
              src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/5a65643a_Messenger_Pic.png"
              alt="img3"
            />
          </Cell>
          <Cell className="giga-product-cell" width={2}>
            <div>
              <H3 className="giga-product-cell-heading" color="#080808">
                Контракт
              </H3>
              <TextM className="giga-product-cell-text" color="#080808">
                Смарт-контракт
                <br />
                и эскроу
              </TextM>
            </div>
            <img
              src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/8a89e107_Contract_Pic.png"
              alt="img4"
            />
          </Cell>
          <Cell className="giga-product-cell" width={2}>
            <div>
              <H3 className="giga-product-cell-heading" color="#080808">
                Исполнение
              </H3>
              <TextM className="giga-product-cell-text" color="#080808">
                Платёж и закрытие
              </TextM>
            </div>
            <img
              src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/8ce93d91_Recipient_Pic.png"
              alt="img5"
            />
          </Cell>
        </Grid>
      </div>
    </div>
  </div>
  <div className="navigation-footer">
    <div className="controls">
      <a href="/pmef_2026">
        <button className="button icon-button secondary">
          <i className="icon home-icon" />
        </button>
      </a>
      <BackButton className="button secondary">
        <i className="icon arrow-left-icon" />
        <BodyM className="bold-text">Назад</BodyM>
      </BackButton>
    </div>
    <div className="controls">
      <a href="/pmef_2026/ai-platforms/giganetwork/demo">
        <button className="button primary">
          <BodyM className="bold-text">Смотреть демо</BodyM>
        </button>
      </a>
    </div>
  </div>
</div>
