ИИ-команда для вашего бизнеса

<ResponsiveStyle
  common="
  .cipr {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 2rem;
    height: 100dvh;
  }
  .cipr a {
    text-decoration: none;
  }
  .cipr ul li::marker {
    color: #42E3B4;
  }
  .content-wrapper {
    flex-grow: 1;
    width: 100%;
  }
  .video-wrapper {
    display: flex;
    flex-direction: column;
  }
  .header-with-logo {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    margin: 0 0 1rem;
  }
  .header-with-logo .logo {
    flex-shrink: 0;
    max-width: 7rem;
    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;
  }
  .layout {
    display: grid;
    grid-template-columns: repeat(12, 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: 1.5rem 0 0;
  }
  .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: #122754;
    color: #ffffff;
  }
  .navigation-footer .button.secondary {
    background-color: rgba(8, 8, 8, 0.06);
  }
  .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: 80%;
    height: auto;
    border-radius: 1rem;
  }
  @media screen and (min-width: 1440px) {
    html {
      font-size: 24px !important;
    }
  }
  "
/>

<ResponsiveStyle
  common="
  .chapter-card {
    padding: 1.5rem;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 10.625rem;
  }
  .layout > *:nth-of-type(1) .chapter-card {
    background-image: url(https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/682da194_chapter-1.png);
  }
  .layout > *:nth-of-type(2) .chapter-card {
    background-image: url(https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/c6153b8b_chapter-2.png);
  }
  .layout > *:nth-of-type(3) .chapter-card {
    background-image: url(https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/57f41c78_chapter-3.png);
  }
  .layout > *:nth-of-type(4) .chapter-card {
    background-image: url(https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/cff7dc91_chapter-4.png);
  }
  "
/>

<ResponsiveStyle
  common="
  .product-card {
    position: relative;
    padding: 1rem;
    height: 100%;
    overflow: hidden;
  }
  .product-card .title {
    margin-bottom: 0.375rem;
    font-weight: 600;
  }
  .product-card .result {
    margin: 0.5rem 0 0;
    font-weight: 600;
  }
  .product-card-img {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: auto;
    z-index: 0;
  }
  .product-card-img_1 {
    max-width: 9.5rem;
  }
  .product-card-img_2 {
    max-width: 5.5rem;
  }
  "
/>

<ResponsiveStyle
  common="
  .cases-carousel .reel-carousel-cell {
    border-radius: 1rem;
    object-position: bottom;
  }
  "
/>

<div className="cipr">
  <div className="header-with-logo">
    <img
      src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/8408992a_giga-chat-business-logo.png"
      className="logo"
    />
    <H2 className="header">ИИ-команда для вашего бизнеса</H2>
  </div>
  <div className="content-wrapper layout cards-5">
    <a href="/cipr/ai-for-business/demo/strategic">
      <div className="card product-card">
        <H4 className="title">Стратегическое планирование</H4>
        <TextS style={{ maxWidth: "16.5rem" }}>
          Нужна оценка — брать ли срочный заказ, который потребует перестройки
          производственного плана
        </TextS>
        <img
          src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/5abd306d_cubic.png"
          className="product-card-img product-card-img_1"
        />
      </div>
    </a>
    <a href="/cipr/ai-for-business/demo/logistics">
      <div className="card product-card">
        <H4 className="title">Логистика</H4>
        <TextS style={{ maxWidth: "16.5rem" }}>
          Задерживается поставка алюминиевого листа для производства корпусов.
          Оцени влияние на текущие заказы и не допусти остановку линии
        </TextS>
        <img
          src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/b681a639_car.png"
          className="product-card-img product-card-img_1"
        />
      </div>
    </a>
    <a href="/cipr/ai-for-business/demo/production">
      <div className="card product-card">
        <H4 className="title">Производство</H4>
        <TextS>
          Спланируй выполнение заказа — 500 корпусов (срок — 5 дней). Впиши
          его в существующий график, не сорвав остальные обязательства
        </TextS>
        <img
          src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/457955d0_mech.png"
          className="product-card-img product-card-img_2"
        />
      </div>
    </a>
    <a href="/cipr/ai-for-business/demo/commercial">
      <div className="card product-card">
        <H4 className="title">Коммерческий блок</H4>
        <TextS>
          Подготовь коммерческое предложение, персонализированное
          под конкретного клиента
        </TextS>
        <img
          src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/0f3d25ee_ok.png"
          className="product-card-img product-card-img_2"
        />
      </div>
    </a>
    <a href="/cipr/ai-for-business/demo/backoffice">
      <div className="card product-card">
        <H4 className="title">Бэкофис</H4>
        <TextS>
          Клиент хочет изменить условия оплаты в действующем договоре. Оцени
          риски и подготовь допсоглашение
        </TextS>
        <img
          src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/f75bdd18_docs.png"
          className="product-card-img product-card-img_2"
        />
      </div>
    </a>
  </div>
  <div className="navigation-footer">
    <div className="controls">
      <a href="/cipr">
        <button className="button icon-button secondary">
          <i className="icon home-icon" />
        </button>
      </a>
      <BackButton className="button secondary">
        <i className="icon arrow-left-icon" />
        <BodyM>Назад</BodyM>
      </BackButton>
    </div>
    <div className="controls">
      <a
        href="https://cipr.pilot.gigab2b.ru/"
        target="_blank"
        className="link-clear"
      >
        <button className="button primary">
          <BodyM className="bold-text">Демо</BodyM>
        </button>
      </a>
      <a href="/cipr/ai-for-business/cases">
        <button className="button secondary" style={{ width: "10.625rem" }}>
          <BodyM className="bold-text">Реализованные кейсы</BodyM>
        </button>
      </a>
    </div>
  </div>
</div>
